Kamis, 30 Mei 2013

Membuat Expendable Komentar Terbaru Dengan Jquery

Membuat Expendable Komentar Terbaru Dengan Jquery

Membuat Expendable Komentar Terbaru Dengan Jquery | Jauh artikel saya tentang Komentar Terbaru Dengan Foto, kali ini, beda. Sedikit disentuh dengan Jquery dan elegan. Komentar bisa dengan fungsi show hide dan sebagainya lengkapnya disini.

<style type="text/css" media="screen">

.row-aa {        background: #f2f2f3; }

.row-bb {        background: #F8F5F1; }

.row-div { 

  margin:0px;

  padding:5px;

}

.comment-header {

  font-size:0.9em;

//  border:1px solid #E0E0E0;

//  background-color:#F3F3F3;

  padding:4px;

  margin-top:10px;

  margin-bottom:5px;

}

.comment-box {

  margin:0px;

  padding:0px;

  font-size:0.9em;

  height:500px;

  overflow:auto;

}

.comments1  { 

//  background: #F3F3F3;

  padding:3px;

  border-left:1px dashed #A6A6A6;

  color: #888888;

  font-style: italic;

  padding-top:4px;

  margin-bottom:5px;

}

.comment-footer {

  text-align:center;

  font-size:0.9em;

  padding:4px;

  margin-top:5px; 

}

</style>



<div style="text-align: center" class="comment-header"><input
class="comment-button" id="commshowall" type="button" onclick="if
(this.value == &#39;Show all&#39;) { unfold_all(this);
this.value=&#39;Hide all&#39;; } else { fold_all(this);
this.value=&#39;Show all&#39;; }"
style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show
all" /></div>



<div class="comment-box">

<script type="text/javascript"
src="http://helplogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script>

<script type="text/javascript"  src="http://www.bocahit.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">

</script>

<script type="text/javascript"  src="http://www.bocahit.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">

</script>

</div>


Selamat Mencoba :D
Ganti dengan URL blog sobat.
Membuat Expendable Komentar Terbaru Dengan Jquery

Rabu, 29 Mei 2013

6 Template Blogger Responsive

6 Template Blogger Responsive | Waktunya template responsive beraksi. Nah kemarin kan habis baca - baca masalah cara cek responsivitas blog kita lalu kita juga sudah tahu keunggulan responsive. Tidak sopan jika saya tidak berbagi template yang valid HTML dan Responsive. Jadi silakan download gratis jika anda berminat.

MXFluity



Download      Demo


My Timeline
 


Download      Demo

My Extranews



Download      Demo

Aware



Download      Demo

Dark Red



Download     Demo

Jp Station



Download      Demo



Senin, 27 Mei 2013

Membuat Back To Top Show/Hide Dengan Jquery


Membuat Back To Top Show/Hide Dengan Jquery
Membuat Back To Top Show/Hide Dengan Jquery | Apa kelebihannya? membuat tombol kembali ke atas ? ya, salah satunya untuk mempermudah pengunjunga berinteraksi dengan blog. Walau banyak blogger yang mengatakan bahwa memasang navigasi ini, tapi menurut saya ini cukup penting juga, jika kita memiliki artikel yang cukup panjang, kita bisa pakai cara ini untuk mempermudah pengunjung.

Pasang kode di bawah ini di atas kode ]]></b:skin>

.button_up{
padding:7px;  
background-color:white;
border:1px solid #CCC;
position:fixed;
background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirBUmwK6wC2PZa6PlBaSf0w4OnP6PCHMtYFDmNFIHxnv8hZARlO7_gbnSiQKGFZFaXolXWL63MwAlCuy164hdWqR9PdJ2ZgrUSV5jcbWVcUiI8ebhH3VPEh53coi69rfCJHhQhCoq3bGs/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px;/* Lebar tombol */
height:20px;/* Tinggi tombol */
bottom:280px;/* Jarak dari bawah */
right:5px; /* pilihan kanan atau kiri */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;

background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUlr0nbCIEuWmGbvZImn7u1Lz9wQTyLqK2OsgLSXSxgGRlguqcLqZG65boLvYOM-WvXzA0JYhPTaUhYQH23NS6F95FSrniEg9F5QgMywKBsuQkst34s2jnYcxE8BT_2cXg19zTkrtPbwo/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:242px;
right:5px;
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Lalu, cari kode </body>, letak kode ini diatasnya :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>



<div class='button_up' id='button_up' style='display:none;'/>

<div class='button_down' id='button_down' style='display:none;'/>



<script>

//<![CDATA[

(function(){var special=jQuery.event.special,uid1='D'+(+new
Date()),uid2='D'+(+new
Date()+1);special.scrollstart={setup:function(){var
timer,handler=function(evt){var
_self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var
timer,handler=function(evt){var
_self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();



$(function() {

var $elem = $('body');

$('#button_up').fadeIn('slow');

$('#button_down').fadeIn('slow');

$(window).bind('scrollstart', function(){

$('#button_up,#button_down').stop().animate({'opacity':'0.2'});

});

$(window).bind('scrollstop', function(){

$('#button_up,#button_down').stop().animate({'opacity':'1'});

});

$('#button_down').click(

function (e) {

$('html, body').animate({scrollTop: $elem.height()}, 800);

} );

$('#button_up').click(

function (e) {

$('html, body').animate({scrollTop: '0px'}, 800);

} );});

//]]>

</script>

Dan BERHASIL!

Kamis, 23 Mei 2013

Cara Mengubah Data Dengan PHP Dan MySQL

Cara Mengubah Data Dengan PHP Dan MySQL

Cara Mengubah Data Dengan PHP Dan MySQL | Ketika kita akan mengubah data yang telah valid masuk ke dalam database atau melakukan ON UPDATE, yang kita lakukan hanyalah menampilkan seluruh data yang ada dengan SELECT *FROM <nama_tabel> kemudian menambahkan script a href dengan nim yang akan di edit. Untuk lebih jelasnya langsung saja di coba dengan database yang anda buat sendiri.

<h3 align="center">EDIT DATA</h3>
 <table width="100%" border="2" align="center" cellpadding="2" cellspacing="2">
   <tr>
     <th align="center">NAMA</th>
     <th align="center">BLOG</th>
     <th align="center">JURUSAN</th>
     <th align="center">EDIT</th>
   </tr>
   <?php
   include("uji.php");   //Melakukan testing dengan server
   mysql_select_db("data_siswa");  // memilih database (data_siswa)
   $a="select * from tabel_siswa order by nim";  //menampilkan dari tabel (tabel_siswa) diurutkan dengan nim
   $b=mysql_query($a);
  
   while($c=mysql_fetch_row($b)){
       echo"
   <tr>
   <td>$c[1]</td>
   <td>$c[2]</td>
   <td>$c[3]</td>
   <td><a href=\"form_edit.php?nim=$c[0]\">Edit</a></td>
   </tr>";
   }
   ?>
</table>

Selamat Mencoba!!

Rabu, 22 Mei 2013

Cara Menampilkan Data Dari Database

Cara Menampilkan Data Dari Database Dengan PHP

Cara Menampilkan Data Dari Database | Sangat sederhana, inti dari script ini adalah cukup menampilkan data dengan SELECT *FROM. Tidak ada yang rumit dalam script ini, tapi hal yang baru dicermati adalah pemanggilan baris dan kolom dengan $c[1] atau $c [2]. Angka yang ada di [] adalah menunjukan bagian kolom yang akan ditampilkan. Artikel ini sangat berhubungan dengan insert data.

<h3 align="center">CEK DATA ANDA</h3>
 <table width="100%" border="2" align="center" cellpadding="2" cellspacing="2">
   <tr>
     <th align="center">NAMA</th>
     <th align="center">BLOG</th>
     <th align="center">JURUSAN</th>
   </tr>
  
   <?php
   include("uji.php");  //koneksi kedatabase
   mysql_select_db("data_siswa"); //membuka database data_siswa
   $a="select * from tabel_siswa order by nim";
   $b=mysql_query($a);
   while($c=mysql_fetch_row($b)){
       echo"
         <tr>
              <td>$c[1]</td>
             <td>$c[2]</td>
             <td>$c[3]</td>
             </tr>";
       }
   ?>
</table>
<div style=" text-align:center;>"
<p>
    <a href="form_siswa.php"><input type="button" id="proses" value="Tambah Data"/>
</a>
<a href="edit_data.php"><input type="button" id="proses" value="Edit Data"/>
</a></p></div>

Selamat Mencoba. Ingat! Cocokan variabelnya dengan nama tabel dan kolom anda.
Jika sukses, hasilnya kurang lebih seperti ini.
Cara Menampilkan Data Dari Database Dengan PHP

 

Selasa, 21 Mei 2013

Cara Mengecek Kemampuan Responsive Blog

Cara Mengecek Kemampuan Responsive  Blog

Cara Mengecek Kemampuan Responsive  Blog | Jika kemarin saya buat artikel tentang chef cantik yah, buat iseng - iseng aja, daripada bengong. Biar kali ini kita masih menyangkut - nyangkut soal responsive yang kemarin telah saya bagikan apa sih keunggulan blog bertemplate responsive?

Kalau cuma mengaku ini itu responsive semua juga bisa, yang membedakan adalah ketika blog di buka lewat browser atau media apa. Ini yang jadi masalah. Ada 2 website checker yang memberikan infomasi mengenai responsive yaitu Responsinator dan Responsive Test.

Cukup anda masukkan url blog anda, kemudian tunggu kurang lebih 5 menit dan akan muncul tampilan blog anda di media apa. Silakan mencoba..Ini Gratis!

Chef Cantik Dan Seksi Di Indonesia

Chef Cantik Dan Seksi Di Indonesia | Mankan lagi yuk, tapi siapa yang masak..waktunya yang cantik - cantik lagi nich...Chef cantik hot dan pintar memasak. Lelaki mana yang tidak memimpikan pasangan hidup seperti mereka. Bakat memasaknya, serta latar belakang pendidikannya di bidang kuliner, mengantarkan mereka menjadi celebrity chef di Indonesia.

Chef Farah Quinn

Cheaf Farah Quinn

Farah Fauzan Quinn adalah model, koki dan selebritis Indonesia. Masa kecilnya di Sumatera kerap ia habiskan untuk membantu sang ibu di dapur. Ia mulai dikenal luas setelah memandu acara kuliner Ala Chef di TransTV. sebelum masuk ke dunia kuliner, Farah melanjutkan kuliah di jurusan Finance di Indiana University Of Pennsylvania, Amerika Serikat. Farah mengakui bahwa dirinya bukanlah tipikal pekerja kantoran. Karena itulah Farah memulai karirnya di “Lydia’s Pittsburgh”, sebuah restoran Italia terkenal di Pittsburgh, Pennsylvania. Ia juga melanjutkan pendidikannya di Pittsburgh Culinary Institute dan mengambil keahlian khusus dalam bidang pastry atau kue-kue.

Chef Marinka

Chef Marinka

Maria Irene Susanto, kini lebih dikenal dengan nama Ririn Marinka. Wajah cantiknya yang muncul seminggu sekali di acara Cooking Paradise di Trans 7 dan Master Chef Indonesia di RCTI, membuatnya menjadi celebrity chef, istilah yang belakangan ini naik daun. Ketertarikan Marinka di dunia memasak sedah dimulai sejak Ia masih kecil. Untuk mewujudkan cita-cita sebagai koki profesional, ia masuk sekolah kuliner Le Cordon Blue, di Sydney, Australia, dengan speciality French Cuisine & Patisserie. Selama 8 tahun tinggal dan kuliah di jurusan lain di Sydney, Marinka beberapa kali magang di restoran. Sekembalinya ke Indonesia, pada tahun 2005 ia membuka café Warung Telur Ceplok di kawasan Fatmawati, Jakarta Selatan. Sayang, warungnya hanya bertahan 1,5 tahun saja. Namun selepas itu, keberuntungannya terus menghampirinya hingga seperti sekarang ini. 

Chef Karen Carlotta

Chef Karen Carlotta

Menjadi seorang ahli masak adalah sebuah cita-cita Chef Karen Carlotta atau biasa dipanggil Chef KC. Sejak kecil, dirinya memang sudah gemar memperhatikan sang mama memasak dan akhirnya belajar memasak.meski mengaku sudah banyak pengalaman di dunia masak memasak, Chef KC mengaku enggan untuk disandingkan dengan beberapa ahli masak lainnya. Chef Karen atau KC menceritakan jika dirinya sempat belajar memasak di negeri Singapura. Sejak saat itulah, dirinya memutuskan untuk menseriusi profesi yang kini banyak digandrungi itu. Chef KC pertama kali naik daun dalam acara Venue di Metro TV, kini dia menggantikan Chef Ririn Marinka di acara Cooking Paradise di Trans7.

Chef Vindy


Vindy Lee (lahir di Jakarta, 23 November 1983; umur 28 tahun) adalah model, koki dan selebritis Indonesia. Ia mulai dikenal luas setelah memandu acara kuliner Dapur Cantik di Trans7.

Penulis buku berjudul Sexy food ini tadinya bermukim di Los Angeles sebagai personel chef. Dua tahun belakangan, Vindy Lee yang kelahiran Jakarta ini kembali ke tanah air untuk berbagi pengalaman memasak. Padahal, Vindy sama sekali tak pernah duduk di sekolah kuliner, bahkan jurusan yang diambilnya di University of Soutern California adalah bidang politik.

Chef Rima
Chef Rima

Nama Rima Melati Adams baru dikenal oleh publik Indonesia setelah wanita cantik ini menikah dengan Marcell Siahaan, 28 Januari 2009 lalu. Dari sekian banyak bakat yang dimiliki Rima, memasak adalah salah satunya. Rima pun didapur mengisi acara Kitchen Beib di salah satu stasiun televisi swasta.

Chef Winnie
Chef Winnie

Chef Winnie Dwi Gandini Kusuma Wardhani atau Winnie Giwangkara  mengaku kenangan akan opor ayam eyang itu menjadi salah satu hal yang mendorongnya untuk gemar memasak. Wajahnya juga kerap menghiasi layar kaca di televisi rumah Anda dengan gayanya yang ceria tentu saja.

Chef Aiko
Chef Aiko

 Selain sebagai chef dan pembawa acara masak, Aiko Sarwosri juga adalah model dan bintang film. Film yang pernah dibintanginya adalah Pulau Hantu 3. Kecantikannya tentu saja menjadi daya tarik acara masak tersebut.

Selasa, 14 Mei 2013

Cara Cepat Membuat Template Blog Valid HTML5

Cara Cepat Mengubah Template Blog Valid HTML5

Cara Cepat Mengubah Template Blog Valid HTML5 | Di artikel saya beberapa bulan lalu, pernah mengenai alasan saya memilih HTML5, HTML5 merupakan hasil proyek dari   W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group). WHATWG bekerja dengan bentuk situs dan aplikasi, sedangkan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Lalu bagaimana membuat blog valid HTML5 ?

1. Ganti kode,
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
Dengan kode,
 <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
2. Ganti kode,
</html>
menjadi
</HTML>
3. Hapus kode,
<b:include name='quickedit'/>
<b:include data='blog' name='all-head-content'/>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>
 <div class='post-share-buttons goog-inline-block'>...sampai...</div>
4. Ganti kode,
<b:skin><![CDATA[
Dengan kode,
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]
<style>
Setelah semua langkah terlewati, silakan cek di Validator.

Keunggulan Template Blog Support Responsive

Keunggulan Template Blog Support Responsive | Akhir ini, banyak designer template blog yang menggunakan media responsive. Contoh template responsive adalah ini. Lalu apa itu responsive? mengapa muncul ? apa keunggulannya?

Template Blogger Responsive adalah template (theme) blog dengan platform Blogger (Blogspot) yang dirancang khusus agar kompatibel untuk semua jenis gadget dan perangkat dengan ukuran layar yang bervariasi seperti pada layar PC, Laptop, Notebook, Tablet, bahkan untuk ponsel yang memiliki layar yang kecil. Dengan kata lain, tampilan blog akan menyesuaikan dengan ukuran layar yang digunakan.

Keunggulan Template Blogger Responsive
Karena sangat kompatibel dan support banyak perangkat, template ini mempunyai banyak keunggulan di antaranya:

  1. Tampilan blog secara umum tidak berubah jika diakses melalui berbagai perangkat yang mempunyai ukuran layar kecil seperti pada Phonecell dan Tablet sehingga pengakses (pembaca) tidak perlu mengganti menjadi mode akses web ketika dibuka di perangkat dengan layar kecil. Situs yang tidak didesain dengan template blog responsive akan lebih lambat dibuka jika diubah menjadi mode akses web (bukan mode mobile) sehingga biaya akses internet dapat lebih mahal karena bandwidth yang digunakan juga lebih besar.
  2. Navigasi halaman tetap mudah dan tidak terganggu meskipun dengan ukuran layar kecil baik potrait ataupun landscape seperti ukuran 240px (layar ponsel mini), 320px (layar ponsel), 480px (layar smartphone), 768px (layar tablet) dan 1024px (komputer dan laptop).
  3. Karena tampilan tidak terganggu dengan ukuran layar yang digunakan, maka penggunaan template ini dapat meningkatkan trafik pengunjung yang datang dari perangkat mobile seiring dengan perkembangan teknologi di bidang itu.
  4. Jika tema blog atau web adalah bisnis internet, maka dimungkinkan akan meningkatkan jumlah penjualan produk atau jasa seiring bertambahnya pengunjung yang datang.
  5. Sebagai author akan lebih mudah menulis atau mengedit posting dari berbagai media dengan ukuran layar yang beragam.
 Di bawah ini, adalah tampilan Wammy's Blog. Untuk berbagai ukuran media. Dan berbagai browser.
Keunggulan Template Blog Support Responsive


Keunggulan Template Blog Support Responsive

Keunggulan Template Blog Support Responsive

Sumber : http://www.linksukses.com/2013/04/keunggulan-template-blogger-responsive.html

Minggu, 12 Mei 2013

Cosplayer Keren Final Fantasy VII

Cosplayer Keren Final Fantasy VII | Anima 3D yang sudah lama tanyang ini, sampai sekarang asih dinikmati banyak kalangan. Juga telah meluncurkan game tentang film ini. Sekitar saya masih sekolah dasar dulu ya,,film ini telah menjadi film favorit dijaman itu. Tapi siapa sangka banyak cosplayer - cosplayer yang sangat mirip dengan tokoh yang ada di Filnal Fantasy VII.

Tifa Lockheart



Cloud Strife


Vincent Valentine

Kamis, 09 Mei 2013

Biodata Takeru Sato (Kenshin Himura) Di Rurouni Kenshin The Movie

Biodata Takeru Sato (Kenshin Himura) Di Rurouni Kenshin The Movie

Biodata Takeru Sato (Kenshin Himura) Di Rurouni Kenshin The Movie | Benar - benar ini adalah artikel yang telat publis, setelah jalan - jalan di daftar draft ternyata ada judul artikel yang jadul. Siapa yang suka nonton Kamen Rider ? khususnya Kamen Rider Den O. Ingat tokohnya? Ryotaro. Sudah tidak asing awahnya di Film Action yang diadobsi dari Anime Samurai X ini, menunjukan kemampuan pedang yang luar biasa Rurouni Kenshin The Movie dari cara bertarungnya sedikit mirip dengan Ninja Assassin.

Biodata Takeru Sato (Kenshin Himura) Di Rurouni Kenshin The Movie

Tahun 2006 merupakan tahun debut Takeru Sato sebagai aktor. Penampilan perdananya adalah sebagai pemain untuk "Toru Kouno" dalam Princess Princess D.
Selama beberapa tahun selanjutnya, Sato menjadi pemain untuk berbagai peran-peran kecil dalam serial tokusatsu, drama dan film: sebagai "Ryotaro Nogami / Kamen Rider Den-O" dalam Kamen Rider Den-O, sebagai "Yuya Okada" dalam serial Rookies, sebagai "Otoya Kujo" dalam Bloody Monday, sebagai "Kento Shibata" dalam Mei-chan no Shitsuji, dan sebagai "Takashi Morioka" dalam MW Dai-0-sho: Akuma no Game.
Sato juga mempunyai karier menyanyi J-pop (musik pop Jepang) namun tidak begitu aktif. Karier solo di dunia rekaman dimulainya dengan singel "Pre-go ~ZERO~" yang dirilis pada tahun 2007.
Biodata Takeru Sato (Kenshin Himura) Di Rurouni Kenshin The Movie

Nama: 佐藤健 (さとう たける)
Nama (Romaji): Takeru Sato
Pekerjaan: Aktor
Tanggal Lahir: 21 Maret 1989
Tempat Lahir: Iwatsuki, Saitama, Jepang
Tinggi Badan: 170 cm
Zodiak: Aries
Golongan Darah: A
Talent Agency: Amuse

Biodata Takeru Sato (Kenshin Himura) Di Rurouni Kenshin The Movie









Rabu, 08 Mei 2013

Membuat Button Sederhana Dengan CSS Di Blog

Membuat Button Sederhana Dengan CSS Di Blog

Membuat Button Sederhana Dengan CSS Di Blog | Ada banyak bentuk dan macam button tergantung bumbu CSS yang kita buat. Button yang baik menurut saya, adalah yang simple dan mudah dibaca oleh reader. Tapi tidak adalah salahnya jika anda memakai button default yang sudah ada pada HTML.
Contoh tombol diatas adalah default. Lalu bagaimana kita membuat dengan CSS di Blog ?

Letakkan kode dibawah ini diatas  ]]></b:skin> :

.button{

    margin: 10px;

    padding: 1px 4px;           

    width: 130px;

    cursor: pointer;

    border: 1px solid #2493FF;

    overflow: visible;

    display: inline-block;

    color: #fff;

    font: bold 1.4em arial, helvetica;

    text-shadow: 0 -1px 0 rgba(0,0,0,.4);         

    background-color: #2493ff;

    background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));

    transition: background-color .2s ease-out;

    border-radius: 3px;

    box-shadow: 0 2px 1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .5) inset;                                   

}



.button:hover{

      background-color: #7cbfff;

        border-color: #7cbfff;

}



.button:active{

    position: relative;

    top: 3px;

    text-shadow: none;

    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;}


Sedangkan untuk memanggilnya kita masukan ini di dalam artikel pada HTML :
<a class="button" href="URL" target="_blank" title="">Nama Tombol</a>

Nantinya akan seperti ini :

Selasa, 07 Mei 2013

Membuat Fungsi $ Post Dengan Form HTML

Membuat Fugsi $ Post Dengan Form HTML

Membuat Fugsi Get Post Dengan Form HTML  | Mengembangkan sebuah aplikasi web, seorang developer dihadapkan kepada beberapa opsi dalam melakukan update, insert, dan delete record database. Dan itu semua diawali pada penggunaan form dengan berbagai action dan method. Begitupun halnya pada implementasi ketika user memasukkan data ke dalam form inputan. Yang kemudian dilanjutkan kepada proses pengolahan dimana setelahnya hasil dari olahan tersebut dimasukkan kedalam database. Nah disinilah pemilihan fungsi method dibutuhkan. Method ini terbagi menjadi 2, yakni POST dan GET, masing masing memiliki perbedaan yang tipis. Sederhananya method ini bekerja ketika si user menekan tombol submit dengan action yang telah disetting sebelumnya. ( kalo pusing baca lagi dari awal.

Dalam implementasi contoh kasusnya seperti ini, buat satu file html bernama input.php :


Form HTML :

<form method="post" action="output.php"> 
<label>Nama</label>
<input type="Text"name="nama">
<label>URL</label>
<input type="url" name="url">
<label>Pesan</label>
<textarea name="pesan" placeholder="ketik pesan anda"></textarea><br/>
<input type="submit" value="Kirim" name="submit" id="proses">
<input type="Reset" value="Ulangi" id="proses">
</form>
Dan kita buat satu file lagi dengan nama output.php :

<?php

 if($_POST['submit']) {
  echo("Nama Anda : $_POST[nama]");
   echo("URL  : $_POST[url]");
  echo("Pesan  : $_POST[pesan]");
 }
?>

Jika user memasukkan data melalui form input yang ada di input.php, maka hasil yang dikirimkan dengan method post tidak akan ditampilkan di address bar, namun tetap tersimpan dalam memory, untuk mengambilnya cukup dengan menggunakan variable $_POST[?variable?], hal ini tentunya dapat mencegah url yang terlihat kotor, berantakan.
Selamat Mencoba !:D

Kamis, 02 Mei 2013

Membuat Fungsi Switch PHP Dengan Form HTML

Membuat Fungsi Switch PHP Dengan Form HTML

Membuat Fungsi Switch PHP Dengan Form HTML | Terakhir kali adalah artikel Memodifikasi List Order, kali ini kembali ke masalah PHP. Kita bicara tentang Switch, memang kenyataannya dalam membuat program yang berkaitan dengan daftar list yang menampilkan hari, dan lain-lain sangat sulit dikerjakan dengan logika yang berkaitan pada arah program masih belum jelas. Apalagi kita memasukan value bukan dari scriptnya tapi dengan menggunakan form html juga dengan menampilkan output dalam halaman yang sama. Jadi ada 3 hal yang akan kita esekusi. Jika ingin menambahkan dengan CSS silahkan saja. Berikut adalah contoh programnya :D

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
    background-color:#c4e5c1;
    font-family:"Comic Sans MS", cursive;
}

#proses{
    margin: 10px;
    padding: 1px 4px;           
    width: 130px;
    cursor: pointer;
    border: 1px solid #2493FF;
    overflow: visible;
    display: inline-block;
    color: #fff;
    font: bold 1.4em arial, helvetica;
    text-shadow: 0 -1px 0 rgba(0,0,0,.4);         
    background-color: #2493ff;
    background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
    transition: background-color .2s ease-out;
    border-radius: 3px;
    box-shadow: 0 2px 1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .5) inset;                                   
}

#proses:hover{
      background-color: #7cbfff;
        border-color: #7cbfff;
}

#proses:active{
    position: relative;
    top: 3px;
    text-shadow: none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;}
table {
    border-collapse: collapse;}
h1 {
    font-size: 2em;
    margin: 0.67em 0;
    color:#fff;
    text-shadow:0 0 5px #66FFFF;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
    color:#fff;
    text-shadow:0 0 5px #66FFFF;
}

h3 {
    font-size: 1em;
    margin : 1.00em 0;
    color: #FFF;
    text-shadow:0 0 5px #66FFFF;
}
strong,td {
    font-weight: bold;
    text-shadow: #0F0 0 0 10px;
}
header {
    margin-top:30px;
    text-align:center;
    display:block;
}
</style>
<title>Switch On Form HTML With CSS</title>
</head>

<body>
<header>
<h1><strong>Switch</strong> On <strong>Form HTML </strong> With CSS</h1>
<h2>Fun With <strong>Herlambang</strong> &gt; aka Wammy San</h2>
<h3><strong>Switch</strong> GET POST FUNCTION</h3>
</header>
    <!-- FORM ID HTML Start -->
    <form name="form1" action="switchku.php" method="post">
    <table width="300px" align="center" style="margin-top:70px;">
      <tr>
        <td width="116">Value</td>
        <td width="362"><label for="value"></label>
    <input type="text" name="wammy" placeholder="Input Value"></td></tr>
    <tr>
        <td>&nbsp;</td>
        <td><input type="submit" name="proses" id="proses" value="PROSES" /></td>
      </tr>
    </table></form>
    <!-- FORM ID HTML End -->
    <center>
    <?PHP
    $herlambang = $_POST['wammy'] ; //Mengambil Dengan Method POST
    switch ($herlambang) {
    case 1:
    echo("Bulan Ke-1 Adalah Januari");
    break;
    case 2:
    echo("Bulan Ke-2 Adalah Februari");
    break;
    case 3:
    echo("Bulan Ke-3 Adalah Maret");
    break;
    case 4:
    echo("Bulan Ke-4 Adalah April");
    break;
    case 5:
    echo("Bulan Ke-5 Adalah Mei");
    break;
    case 6:
    echo("Bulan Ke-6 Adalah Juni");
    break;
    case 7:
    echo("Bulan Ke-7 Adalah Juli");
    break;
    case 8:
    echo("Bulan Ke-6 Adalah Agustus");
    break;
    case 9:
    echo("Bulan Ke-9 Adalah September");
    break;
    case 10:
    echo("Bulan Ke-10 Adalah Oktober");
    break;
    case 11:
    echo("Bulan Ke-11 Adalah November");
    break;
    case 12:
    echo("Bulan Ke-12 Adalah Desember");
    break;
    default:
    echo("-_- !!");
    }
    ?>
    </center>
</body>
</html>

Pada pernyataan switch, ekpresi_case_1 akan diperiksa terlebih dahulu. Bila nilainya cocok dengan nilai ekpresi maka pernyataan_1 akan dijalankan dan kemudian eksekusi dilanjutkan ke pernyataan yang terletak sesudah tanda penutup switch {;}. Kalau tidak cocok, pembandingan nilai ekpresi dan ekpresi_case_2 akan dilakukan. Jika pada hasil pembandingan yang kedua ini benar maka pernyataan_2 akan dijalankan, dan kemudian eksekusi dilanjutkan ke pernyataan yang terletak sesudah tanda penutup switch (;). Sekiranya tidak ada bagian ekpresi_case yang cocok maka pernyataan_n yang mengukuti kata default akan dijalankan.
Yang harus anda ubah adalah :
switchku.php dengan nama file yang anda simpan.
 
D2D :] © 2013. All Rights Reserved. Powered by Blogger
Top