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". Maksudnya link yang pada saat dilintasi cursor mouse akan menjadi besar tulisannya, Selain cara ini Anda juga bisa Membuat Gambar Membesar Saat disentuh Cursor, Membuat Link Berkedip Saat Disentuh Cursor, Membuat Link Berwarna Warni, dan lain-lain.

Buat Sobat yang ingin memasang trik ini silakan ikuti tutorial dibawah ini.

Cara Membuat Link Membesar Saat disentuh Kursor :

• Masuk ke akun blogger sobat.
• Pilih Template > Edit HTML.
• Ceklis / Centang Expand Widget Template.
• Cari kode a:hover { 
• Ganti kode font-size dengan ukuran yang lebih besar.
  Contoh :
  
  a:hover {
  color:#d2691e;
  font-size:10px;
  font-style:italic;
  cursor:wait;
  }
  ganti dengan
  
  a:hover {
  color:#d2691e;
  font-size:19px;
  font-style:italic;
  cursor:wait;
  }
• Terakhir klik Simpan Template.

Selamat Mencoba dan Semoga Berhasil...

Zhefa Blogger template

Template Details :

Platform Type	Blogger / Blogspot
Nama Template	Zhefa Blogger template
Deskripsi	Zhefa Blogger template adalah template blogger gratis dengan dua buah sidebar di sebelah kanan.
Template Author	http://wadahtutorial.blogspot.com/
Instruksi URL	Cara Mengganti Template

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 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.

Postingan ini saya buat untuk melengkapi Tutorial di blog ini, buat sobat yang ingin memasangnya silakan Anda ikuti tutorial dibawah ini.

Cara Membuat Gambar Membesar Saat disentuh Cursor :

• Masuk ke akun blogger sobat.
• Pilih Template > Edit HTML.
• Ceklis / Centang Expand Widget Template.
• Cari kode ]]></b:skin> , gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard.
• Kalau sudah ketemu, letakkan kode berikut tepat di atas kode ]]></b:skin>
  
  .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; }
  .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); }
• Terakhir klik Simpan Template. Sekarang lihat hasilnya di blog Sobat.

Semoga tutorial singkat ini bisa bermanfaat...

Cara Menghapus Waktu Komentar

Beberapa hari yang lalu pada postingan Cara Menghapus Waktu Postingan, 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.

Jika Sobat blogger yang lain juga ingin menghilangkan waktu komentar, caranya cukup mudah, anda tinggal hapus kode <data:comment.timestamp/>.

Berikut tutorial Menghapus Waktu Komentar :

• Login ke akun Blogger Sobat.
• Pilih Template > Edit HTML.
• Cari kode
  <span class='comment-timestamp'>
  <a expr:href='data:comment.url' title='comment permalink'>
  <data:comment.timestamp/>
  </a>
  <b:include data='comment' name='commentDeleteIcon'/>
  </span>
• Jika sudah ketemu hapus semua kode tersebut.
• Selanjutnya Simpan Template Sobat.

Simple kan ?!?, Selamat mencoba...

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 membutuhkan yang dua kolom, Tutorial kali ini saya buat untuk para blogger yang ingin Membuat Dua Kolom Widget di Blognya.

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.

Berikut Cara Membuat dua Buah Elemen Gadget/Widget :

• Login Blogger Sobat.
• Pilih Template > Edit HTML.
• Ceklis / Centang Expand Widget Template.
• Cari kode ]]></b:skin> dengan menekan tombol CTRL+F pada keyboard.
• Letakkan script berikut ini diatas ]]></b:skin> :
  
  #box-main-container {
  clear:both;
  }
  .box-column {
  padding:0px 10px 10px 10px;
  border:1px dotted $bordercolor;
  }
  *Anda dapat mengubah padding ( jarak posisi gadget ) 0px 10px 10px 10px maksudnya adalah Jarak ( Atas, Kanan, Bawah, Kiri ).
  *Anda juga dapat merubah border ( garis tepi widget ) dengan warna, caranya hapus $bordercolor dan ganti dengan kode warna yang Anda inginkan.
• Kemudian cari kode
  
  •   <div id='main-wrapper'>
  •   <div id='content-wrapper'>
  •   <div id='header'> atau <div id='header-wrapper'>
  •   <div id='sidebar-wrapper'>
  •   <div id='bottom'>
  Keterangan :
  *<div id='main-wrapper'> adalah posisi halaman utama anda. Biasanya dipakai untuk penempatan menu horizontall atau daftar isi sebuah blog.
  *<div id='content-wrapper'> adalah posisi postingan.
  *<div id='header'> adalah posisi kepala. Biasanya ditempatkan judul blog dan deskripsi blog.
  *<div id='sidebar-wrapper'> adalah posisi sidebar blog.
  *<div id='bottom'> adalah posisi paling bawah. Atau Footer Blog Anda.
  Silakan pilih salah satu, mau menempatkannya dimana.
• Jika sudah didapat atau hampir sama dengan kode diatas, letakkan kode HTML di bawah ini
  
  <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>
  <div style="clear: both;"> </div></div>
  Silakan Anda letakkan di bagian atas atau dibawah salah satu kode tadi.
  *Sebagai contoh saya letakkan dibawah kode <div id='main-wrapper'>
  
  *Hasilnya seperti gambar berikut
  
  
• Jika sudah selesai klik Preview / Pratinjau dulu, baru klik Save Template / Simpan Template.

Semoga Tutorial diatas bisa berguna dan bermanfaat...

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 nyaman untuk di pandang. Buat sobat blogger yang ingin menghapus tulisan Langganan: Entri ( Atom ), sobat dapat mengikuti tutorial berikut.

Untuk cara yang pertama Sobat dapat menghapus kode feed-links melalui menu edit HTML. Caranya sebagai berikut :

• Login ke akun blogger sobat.
• Pada Dasbor blogger klik Template > Edit HTML > Lanjutkan.
• Beri tanda centang pada Expand Template Widget
• Cari kode di bawah ini, gunakan fungsi Find (Ctrl+F) biar mudah.
  
  <div class='feed-links'>
  <data:feedLinksMsg/>
  <b:loop values='data:links' var='f'>
  <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>
  </div>
• Hapus semua kode diatas.
• Lalu klik Simpan Templates

Untuk cara yang kedua Sobat dapat menambahkan kode .feed-links{display:none;}, berikut caranya :

• Login ke akun blogger sobat.
• Pada Dasbor blogger klik Template > Edit HTML > Lanjutkan.
• Beri tanda centang pada Expand Template Widget.
• Cari kode ]]></b:skin , gunakan fungsi Find (Ctrl+F).
• Letakkan kode berikut, tepat diatas kode ]]></b:skin>
  
  .feed-links{display:none;}
• Setelah itu, klik Simpan Templates ( sebaiknya klik Pratinjau terlebih dahulu )

Sekarang sobat lihat pada bagian bawah postingan, apakah tulisan Langganan: Entri (Atom) sudah hilang. Semoga Berhasil...