Membuat Link Membesar Saat disentuh Kursor

<div style="text-align: justify;">Tutorial kali ini tentang trik atau cara untuk membuat blog menjadi lebih menarik. "Membuat Link Membesar Saat disentuh Kursor". Maksudnya link yang pada saat dilintasi cursor mouse akan menjadi besar tulisannya, Selain cara ini Anda juga bisa <a href="http://wadahtutorial.blogspot.com/2013/04/membuat-gambar-membesar-saat-disentuh.html" target="_blank">Membuat Gambar Membesar Saat disentuh Cursor</a>, <a href="http://wadahtutorial.blogspot.com/2011/12/membuat-link-berkedip-disentuh-cursor.html" target="_blank">Membuat Link Berkedip Saat Disentuh Cursor</a>, <a href="http://wadahtutorial.blogspot.com/2011/12/membuat-link-berwarna-warni.html" target="_blank">Membuat Link Berwarna Warni</a>, dan lain-lain.</div><a name="more"></a><div style="text-align: justify;">Buat Sobat yang ingin memasang trik ini silakan ikuti tutorial dibawah ini.</div><br /><div style="text-align: left;">Cara Membuat Link Membesar Saat disentuh Kursor :</div><ul><li>Masuk ke akun blogger sobat.</li><li>Pilih <span style="color: blue;"><b>Template</b></span> > <span style="color: blue;"><b>Edit HTML</b></span>.</li><li>Ceklis / Centang <span style="color: red;"><i>Expand Widget Template</i></span>.</li><li>Cari kode a:hover { </li><li>Ganti kode font-size dengan ukuran yang lebih besar.<br />Contoh :<br /><div style="border-color: blue; border-style: inset; border-width: 2pt; padding: 10px; text-align: left; width: 400px;">a:hover {<br />color:#d2691e;<br />font-size:10px;<br />font-style:italic;<br />cursor:wait;<br />}</div>ganti dengan<br /><div style="border-color: blue; border-style: inset; border-width: 2pt; padding: 10px; text-align: left; width: 400px;">a:hover {<br />color:#d2691e;<br />font-size:<b><span style="color: blue;">19px</span></b>;<br />font-style:italic;<br />cursor:wait;<br />}</div></li><li>Terakhir klik <span style="color: blue;"><b>Simpan Template</b></span>. </li></ul><div style="text-align: left;">Selamat Mencoba dan Semoga Berhasil...</div>

Membuat Link Membesar Saat disentuh Kursor

Tutorial kali ini tentang trik atau cara untuk membuat blog menjadi lebih menarik. "Membuat Link Membesar Saat disentuh Kursor". M...

Read more »

Zhefa Blogger template

<span style="font-size: large;"><b>Template Details :</b></span><br /><div><table cellpadding="0" cellspacing="0" class="Table-Post2" id="AutoNumber1" style="height: 152px;"><tbody><tr><td class="Table-Post2" height="25" width="30%">Platform Type</td><td class="Table-Post2" height="25" width="56%">Blogger / Blogspot</td></tr><tr><td class="Table-Post2" height="25" width="30%">Nama Template </td><td class="Table-Post2" height="25" width="56%"><b>Zhefa Blogger template</b></td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Deskripsi</span></td><td class="Table-Post2" height="25" width="56%"><b>Zhefa Blogger template</b> adalah template blogger gratis dengan dua buah sidebar di sebelah kanan.</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Author</td><td class="Table-Post2" height="25" width="56%">http://wadahtutorial.blogspot.com/</td></tr><tr><td class="Table-Post2" height="25" width="30%">Instruksi URL</td> <td class="Table-Post2" height="25" width="56%"><a href="http://wadahtutorial.blogspot.com/2012/12/ganti-template.html" target="_blank">Cara Mengganti Template</a></td></tr></tbody></table></div><a name="more"></a><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Blogger Template" border="0" src="http://i1193.photobucket.com/albums/aa345/bakulatz/Theme/Zefa_zps13d72dde.jpg" /></div><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://wadah-tutorial.googlecode.com/files/Zhefa%20template.rar" rel="nofollow" target="_blank"><button>Download</button></a></div>

Zhefa Blogger template

Template Details : Platform Type Blogger / Blogspot Nama Template Zhefa Blogger template Deskripsi Zhefa Blogger template adalah template b...

Read more »

Membuat Gambar Membesar Saat disentuh Cursor

<div style="text-align: justify;">Mungkin sebagian Blogger sering melihat gambar yang menjadi besar apabila tersentuh cursor. Dalam dunia blogging fitur seperti ini sering disebut dengan nama Image Zoom Effects atau Hover Zoom Smooth Effects. Fitur yang satu ini lumayan banyak di senangi para blogger walaupun sebenarnya dengan memasang Image Zoom Effects ini di blog dapat menggangu pengunjung yang sedang membaca postingan kita.</div><a name="more"></a><div style="text-align: justify;">Postingan ini saya buat untuk melengkapi Tutorial di blog ini, buat sobat yang ingin memasangnya silakan Anda ikuti tutorial dibawah ini.</div><br /><div style="text-align: left;">Cara Membuat Gambar Membesar Saat disentuh Cursor :</div><ul style="text-align: left;"><li>Masuk ke akun blogger sobat.</li><li>Pilih <span style="color: blue;"><b>Template</b></span> > <span style="color: blue;"><b>Edit HTML</b></span>.</li><li>Ceklis / Centang <span style="color: red;"><i>Expand Widget Template</i></span>.</li><li>Cari kode <span style="color: red;">]]></b:skin></span> , gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard.</li><li>Kalau sudah ketemu, letakkan kode berikut tepat di atas kode <span style="color: red;">]]></b:skin></span><br /><div style="border-color: blue; border-style: inset; border-width: 2pt; padding: 10px; text-align: left; width: 400px;">.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }<br />.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }</div></li><li>Terakhir klik <span style="color: blue;"><b>Simpan Template</b></span>. Sekarang lihat hasilnya di blog Sobat.</li></ul><div style="text-align: left;">Semoga tutorial singkat ini bisa bermanfaat...</div>

Membuat Gambar Membesar Saat disentuh Cursor

Mungkin sebagian Blogger sering melihat gambar yang menjadi besar apabila tersentuh cursor. Dalam dunia blogging fitur seperti ini sering di...

Read more »

Cara Menghapus Waktu Komentar

<div style="text-align: justify;">Beberapa hari yang lalu pada postingan <a href="http://wadahtutorial.blogspot.com/2011/12/cara-menghapus-waktu-postingan.html" target="_blank">Cara Menghapus Waktu Postingan</a>, salah satu Sobat Blogger menanyakan tentang Cara Menghapus Waktu di komentar, mungkin menurutnya waktu atau jam tersebut mengganggu tampilan blognya makanya ingin dia hapus, karenanya pada kesempatan ini saya bikin postingan untuk menjawab pertanyaan tersebut.</div><a name="more"></a><br /><div style="text-align: justify;">Jika Sobat blogger yang lain juga ingin menghilangkan waktu komentar, caranya cukup mudah, anda tinggal hapus kode <data:comment.timestamp/>.</div><br /><div style="text-align: left;">Berikut tutorial Menghapus Waktu Komentar :</div><ul><li>Login ke akun Blogger Sobat.</li><li>Pilih <span style="color: blue;"><b>Template</b></span> > <span style="color: blue;"><b>Edit HTML</b></span>.</li><li>Cari kode <div style="border-color: blue; border-style: inset; border-width: 2pt; padding: 10px; text-align: left; width: 400px;"><span class='comment-timestamp'><br /><a expr:href='data:comment.url' title='comment permalink'><br /><data:comment.timestamp/><br /></a><br /><b:include data='comment' name='commentDeleteIcon'/><br /></span></div></li><li>Jika sudah ketemu hapus semua kode tersebut.</li><li>Selanjutnya <span style="color: blue;"><b>Simpan Template</b></span> Sobat.</li></ul><div style="text-align: left;">Simple kan ?!?, Selamat mencoba...</div>

Cara Menghapus Waktu Komentar

Beberapa hari yang lalu pada postingan Cara Menghapus Waktu Postingan , salah satu Sobat Blogger menanyakan tentang Cara Menghapus Waktu di ...

Read more »

Membuat Dua Kolom Widget di Blogspot

<div style="text-align: justify;">Kadang template yang kita gunakan tidak sesuai dengan keinginan kita, misalnya kolom widget yang disediakan hanya ada satu padahal kita membutuhkan yang dua kolom, Tutorial kali ini saya buat untuk para blogger yang ingin Membuat Dua Kolom Widget di Blognya.</div><a name="more"></a><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Dua Kolom Widget / Gadget" border="0" height="195" src="http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/2clm1_zpsde0ee089.gif" title="Dua Kolom Widget / Gadget" width="400" /></div><br /><div style="text-align: justify;">Untuk mempercantik blog dengan susunan gadget yang sesuai dengan keinginan Sobat, dalam hal ini jumlah kolom widget, Sobat dapat membuatnya sendiri dan terserah mau meletakkannya dimana, bisa di bawah posting, di atas posting, di bawah header, di dalam sidebar, di bagian footer ataupun di lain tempat.</div><br /><div style="text-align: left;">Berikut Cara Membuat dua Buah Elemen Gadget/Widget :</div><ul><li>Login Blogger Sobat.</li><li>Pilih <span style="color: blue;"><b>Template</b></span> > <span style="color: blue;"><b>Edit HTML</b></span>.</li><li>Ceklis / Centang <span style="color: red;"><i>Expand Widget Template</i></span>.</li><li>Cari kode <span style="color: red;">]]></b:skin></span> dengan menekan tombol CTRL+F pada keyboard.</li><li>Letakkan script berikut ini diatas <span style="color: red;">]]></b:skin></span> :<br /><div style="border-color: blue; border-style: inset; border-width: 2pt; padding: 10px; text-align: left; width: 400px;">#box-main-container {<br />clear:both;<br />}<br />.box-column {<br />padding:0px 10px 10px 10px;<br />border:1px dotted $bordercolor;<br />}</div>*Anda dapat mengubah padding ( jarak posisi gadget ) 0px 10px 10px 10px maksudnya adalah Jarak ( Atas, Kanan, Bawah, Kiri ).<br />*Anda juga dapat merubah border ( garis tepi widget ) dengan warna, caranya hapus $bordercolor dan ganti dengan kode warna yang Anda inginkan.</li><li>Kemudian cari kode<br /><ul><li>  <div id='main-wrapper'></li><li>  <div id='content-wrapper'></li><li>  <div id='header'> atau <div id='header-wrapper'></li><li>  <div id='sidebar-wrapper'></li><li>  <div id='bottom'></li></ul>Keterangan :<br />*<div id='main-wrapper'> adalah posisi halaman utama anda. Biasanya dipakai untuk penempatan menu horizontall atau daftar isi sebuah blog.<br />*<div id='content-wrapper'> adalah posisi postingan.<br />*<div id='header'> adalah posisi kepala. Biasanya ditempatkan judul blog dan deskripsi blog. <br />*<div id='sidebar-wrapper'> adalah posisi sidebar blog.<br />*<div id='bottom'> adalah posisi paling bawah. Atau Footer Blog Anda.<br />Silakan pilih salah satu, mau menempatkannya dimana.</li><li>Jika sudah didapat atau hampir sama dengan kode diatas, letakkan kode HTML di bawah ini<br /><div style="border-color: blue; border-style: inset; border-width: 2pt; padding: 10px; text-align: left; width: 400px;"><div id="box-main-container"> <div id="box1" style="float: left; margin: 0; text-align: left; width: 50%;"> <b:section class="box-column" id="col1" preferred="yes" style="float: left;"> </b:section></div> <div id="box2" style="float: right; margin: 0; text-align: left; width: 50%;"> <b:section class="box-column" id="col2" preferred="yes" style="float: right;"> </b:section></div><br /><div style="clear: both;"> </div></div></div>Silakan Anda letakkan di bagian atas atau dibawah salah satu kode tadi.<br />*Sebagai contoh saya letakkan dibawah kode <div id='main-wrapper'><br /><img alt="Dua Kolom Widget / Gadget" border="0" height="230" src="http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/2clm2_zpsabdb0ced.gif" title="Dua Kolom Widget / Gadget" width="400" /><br />*Hasilnya seperti gambar berikut<br /><img alt="Dua Kolom Widget / Gadget" border="0" height="195" src="http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/2clm1_zpsde0ee089.gif" title="Dua Kolom Widget / Gadget" width="400" /><br /></li><li>Jika sudah selesai klik <span style="color: blue;"><b>Preview / Pratinjau</b></span> dulu, baru klik <span style="color: blue;"><b>Save Template / Simpan Template</b></span>. </li></ul><div style="text-align: left;">Semoga Tutorial diatas bisa berguna dan bermanfaat...</div>

Membuat Dua Kolom Widget di Blogspot

Kadang template yang kita gunakan tidak sesuai dengan keinginan kita, misalnya kolom widget yang disediakan hanya ada satu padahal kita memb...

Read more »

Cara Menghilangkan Link Langganan Entri Atom

<div style="text-align: justify;">Link langganan entri atom di blog biasanya ada di bawah postingan. Bagi beberapa  blogger mungkin tulisan ini membuat risih atau tidak nyaman untuk di pandang. Buat sobat blogger yang ingin menghapus tulisan Langganan: Entri ( Atom ), sobat dapat mengikuti tutorial berikut.</div><a name="more"></a><br /><div style="text-align: left;">Untuk cara yang pertama Sobat dapat menghapus kode feed-links melalui menu edit HTML. Caranya sebagai berikut :</div><ul><li>Login ke akun blogger sobat.</li><li>Pada Dasbor blogger klik <b><span style="color: red;">Template > Edit HTML > Lanjutkan</span></b>.</li><li>Beri tanda centang pada <span style="color: blue;"><i>Expand Template Widget</i></span></li><li>Cari kode di bawah ini, gunakan fungsi Find (Ctrl+F) biar mudah.<br /><div align="left" style="border-color: blue; border-style: inset; border-width: 2pt;"><div class='feed-links'><br /><data:feedLinksMsg/><br /><b:loop values='data:links' var='f'><br /><a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a><br /></b:loop><br /></div></div></li><li>Hapus semua kode diatas.</li><li>Lalu klik <span style="color: red;"><b>Simpan Templates</b></span></li></ul><div style="text-align: left;">Untuk cara yang kedua Sobat dapat menambahkan kode .feed-links{display:none;}, berikut caranya :</div><ul><li>Login ke akun blogger sobat.</li><li>Pada Dasbor blogger klik <b><span style="color: red;">Template > Edit HTML > Lanjutkan.</span></b></li><li>Beri tanda centang pada <span style="color: blue;"><i>Expand Template Widget</i></span>.</li><li>Cari kode ]]></b:skin , gunakan fungsi Find (Ctrl+F).</li><li>Letakkan kode berikut, tepat diatas kode ]]></b:skin><br /><div align="left" style="border-color: blue; border-style: inset; border-width: 2pt;">.feed-links{display:none;}</div></li><li>Setelah itu, klik <span style="color: red;"><b>Simpan Templates</b></span> ( sebaiknya klik Pratinjau terlebih dahulu )</li></ul><div style="text-align: left;">Sekarang sobat lihat pada bagian bawah postingan, apakah tulisan Langganan: Entri (Atom) sudah hilang. Semoga Berhasil...</div>

Cara Menghilangkan Link Langganan Entri Atom

Link langganan entri atom di blog biasanya ada di bawah postingan. Bagi beberapa  blogger mungkin tulisan ini membuat risih atau tidak nyama...

Read more »