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

Read More

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

Read More

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

Read More

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

Read More

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

Read More

Memberi Efek Taburan Bintang di Blog

Sebelumnya saya berbagi salah satu cara untuk mempercantik blog, yaitu Memberi Efek Taburan Hati di Blog, pada postingan kali ini saya akan membahas mengenai cara Memberi Efek Taburan Bintang di Blog. Sebenarnya efek ini sama saja dengan efek taburan hati dan Efek Daun Berjatuhan, hanya tampilannya saja yang berbeda dan juga kode script-nya.

Untuk menerapkan efek ini pada blog bisa melalui edit template, ataupun lewat gadget, silakan anda pilih cara mana yang menurut anda lebih nyaman.

Cara yang pertama melalui edit template :

• Pada dashboard blogger klik Template > Edit html
• Beri centang pada Expand Template Widget
• Cari kode </body> lalu letakkan kode script efek di atas kode </body>, berikut script-nya:
  Efek bintang berwarna kuning,
  
  <script src='http://wadah-tutorial.googlecode.com/files/bintangkuning.js' type='text/javascript'/>
  Efek bintang berwarna biru,
  
  <script src='http://wadah-tutorial.googlecode.com/files/bintangbiru.js' type='text/javascript'/>
  Efek bintang berwarna oren,
  
  <script src='http://wadah-tutorial.googlecode.com/files/bintangoren.js' type='text/javascript'/>
  Efek bintang berwarna pink,
  
  <script src='http://wadah-tutorial.googlecode.com/files/bintangpink.js' type='text/javascript'/>
• Terakhir klik Save Template.

Untuk cara kedua melalui Gadget :

• Pada dashboard klik Tata Letak > Add a gadget > HTML/JavaScript.
• Letakkan script dibawah ini pada gadget.
  Efek bintang berwarna kuning,
  
  <script src='http://wadah-tutorial.googlecode.com/files/bintangkuning.js' type='text/javascript'/></script>
  Efek bintang berwarna biru,
  
  <script src='http://wadah-tutorial.googlecode.com/files/bintangbiru.js' type='text/javascript'/></script>
  Efek bintang berwarna oren,
  
  <script src='http://wadah-tutorial.googlecode.com/files/bintangoren.js' type='text/javascript'/></script>
  Efek bintang berwarna pink,
  
  <script src='http://wadah-tutorial.googlecode.com/files/bintangpink.js' type='text/javascript'/></script>
•  Lalu klik Simpan / Save.

Selesai,,, silakan lihat hasilnya pada blog sobat.

Read More

Tips Mengatasi Pencurian Artikel Blog

Ketika saya menemukan sebuah blog yang mencuri penuh artikel blog saya ini dengan menggandalkan fasilitas import pada feedrss, saya merasa jengkel, karena postingan yang kita ketik sendiri dengan susah payah dengan mudahnya dibajak oleh autoblog yang menggandalkan langganan feed pada blog, apalagi tidak di sertai dengan backlink sumbernya.

Karena itu kita jangan menganggap remeh pengaturan feed pada blog, agar para pencuri artikel tidak leluasa menerapkan aksinya, pada postingan ini saya ingin berbagi trik untuk mengatasi pencurian artikel dengan menyeting feed pada blog kita.

Berikut beberapa cara yang bisa kita terapkan pada blog :

Cara pertama dengan mengubah izin feed blog yang tadinya "penuh" menjadi "singkat".

Dengan cara ini pembajak feed hanya dapat mencopy artikel kita secara terbatas yaitu 400 karakter pertama saja.

Caranya :

• Login ke Blog sobat.
• Klik Dasbor > Setelan > Lainnya.
• Pada "Izinkan Umpan Blog", ganti opsi Penuh menjadi Singkat.
  
• Simpan Setelan

Cara kedua dengan memberikan link aktif alamat blog sobat pada kolom "Footer Feed Posting".

Ini berguna apabila pembajak feed mencopy penuh artikel sobat, maka dibawah postingan terdapat link aktif yang berfungsi menjadi backlink.

Caranya :

• Login ke Blog sobat.
• Klik Dasbor > Setelan > Lainnya.
• Pada "Footer Feed Posting" klik "Tambahkan".
  
• Lalu masukan script dibawah ini:
  
  <a href="URL BLOG">Copyright by: NAMA BLOG</a>
  contoh :
  <a href="http://wadahtutorial.blogspot.com/">Copyright by: Tutorial Blog</a>
• Simpan Setelan

Cara ketiga dengan menghapus feed pada Blogger.

Dengan cara ini para pembajak feed tidak dapat mencuri artikel anda, karena tidak ada feed yang akan di bajak, namun para pelanggan blog kita tidak dapat mengetaui update artikel baru di blog kita. Jadi dipikir dulu sebelum menerapkan cara ini.

Caranya :

• Login ke Blog sobat.
• Klik Dasbor > Setelan > Lainnya.
• Pada "Izinkan Umpan Blog" pilih "Tak Satupun".
  
• Simpan Setelan.

Semoga dengan beberapa cara di atas Sobat dapat lebih melindungi blog sobat dari para pembajak feed.

Read More

Memberi Efek Taburan Hati di Blog

Kali ini saya akan berbagi salah satu cara untuk mempercantik blog, yaitu dengan memberi efek taburan hati pada sebuah blog, sebelumnya saya juga sudah membahas mengenai cara Membuat Efek Daun Berjatuhan di Blog, Memberi Efek Hujan Salju di Blog, dll.

Untuk menerapkan efek ini pada blog ada dua cara, pertama lewat edit template, yang kedua lewat gadget, silakan anda pilih cara mana yang menurut anda lebih nyaman.

Cara yang pertama melalui edit template :

• Pada dashboard blogger klik Template > Edit html
• Beri centang pada Expand Template Widget
• Cari kode </body> lalu letakkan script efek di atas kode </body>, berikut script-nya:
  
  <script src='http://wadah-tutorial.googlecode.com/files/hearts.js' type='text/javascript'/>
• Terakhir klik Save Template.

Untuk cara kedua melalui Gadget :

• Pada dashboard klik Tata Letak > Add a gadget > HTML/JavaScript.
• Letakkan script dibawah ini pada gadget.
  
  <script src='http://wadah-tutorial.googlecode.com/files/hearts.js' type='text/javascript'/></script>
•  Lalu klik Simpan / Save.

Selesai,,, silakan lihat hasilnya pada blog sobat.

Read More

Mengatasi Duplikasi Deskripsi Meta

Duplikasi deskripsi meta pernah di alami blog ini, hal ini terjadi karena Google menemui deskripsi yang sama pada setiap halaman yg di crawl oleh Google spider pada laman blog ini, contoh :

Pada gambar diatas terdapat deskripsi yang sama, baik itu pada Homepage, halaman, maupun postingan, hal ini tentu tidak baik buat SEO, karena deskripsi yg sama dapat merusak relevansi pencarian, dan Google menganggapnya sebagai duplikasi konten, oleh sebab itu hal tersebut perlu kita perbaiki. Jika sobat belum tahu cara mengetahui duplikat konten silakan baca Cara Mengetahui Duplikat Konten.

Untuk memperbaiki masalah tersebut, langkah yang saya lakukan adalah sebagai berikut :

• Login ke akun blogger
• Klik pada Template.
• Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
• Beri tanda centang pada Expand Template Widget.
• Pada kode
  
  <meta content='Deskripsi'  name='description'/>
  <meta content='keyword1, keyword2, keyword3, ...' name='keywords'/>
  Sedikit saya tambah kode menjadi :
  
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
  <meta content='Deskripsi'  name='description'/>
  <meta content='keyword1, keyword2, keyword3, ...' name='keywords'/>
  </b:if>
  Dengan begini meta description & meta keywords di tampilkan hanya untuk halaman utama (homepage).
• Terakhir klik Simpan Template.

Selain masalah diatas Duplikasi deskripsi meta juga bisa terjadi pada fungsi arsip, karna dalam sebuah arsip terdapat berbagai link dalam satu content , hal ini kadang juga di anggap sebagai duplikat konten oleh google.

Jika Sobat mengalami masalah ini Sobat cukup mematikan fungsi arsip, caranya dengan menambahkan kode berikut dibawah kode <head> :

<b:if cond='data:blog.pageType == &quot;archive&quot;'><meta content='noindex' name='robots'/></b:if>

Sekian dulu postingan kali ini, semoga bisa membantu Sobat yang ingin Mengatasi Duplikasi deskripsi meta.

Read More

Membuat Daftar Isi Blogger

Sebenarnya untuk tutorial Membuat Daftar Isi Blogger sudah pernah saya bikin, cuma kali ini saya buat beberapa macam jadi tinggal sobat pilih mau menggunakan yang mana, Daftar Isi Berdasarkan Tanggal Postingan, berdasarkan artikel terbaru atau berdasarkan label.

Untuk tutorialnya saya bikin jadi dua biar lebih jelas, pertama untuk halaman / page dan kedua untuk widget / gadget.

Yang pertama kita membuat sebuah halaman yang berisi daftar isi, berikut tutorialnya :

• Login ke blogger.
• Klik Laman > Laman Baru > Laman Kosong.
• Beri judul Daftar Isi atau Sitemap atau apalah terserah Anda.
• Kemudian klik pada tab Edit HTML.
  
• Lalu letakkan kode berikut pada area artikel.
  
  <div style="overflow:auto;width:480px;height:450px;padding:10px;border:1px solid #eee">
  <script src="https://html-scripts.googlecode.com/files/feeds.js"></script>
  <script src="http://banjarinfo.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
  </script>
  </div>
  Keterangan :
  
  • Ganti Alamat banjarinfo.blogspot.com dengan url / alamat blog Sobat.
  • width:480px : Lebar area, ganti dengan ukuran yang sobat inginkan.
  • height:450px : Tinggi area, ganti sesuai keinginan sobat.
  • Untuk tidak menggunakan text area atau scroll hapus tulisan yang saya beri latar kuning.
  • https://html-scripts.googlecode.com/files/feeds.js : ganti dengan alamat daftar isi yang anda inginkan. Berikut beberapa kodenya :
    
    1. Berdasarkan Label :
       https://html-scripts.googlecode.com/files/feeds-labels.js
    2. Berdasarkan Tanggal :
       https://html-scripts.googlecode.com/files/feed-dates.js
    3. Berdasarkan Artikel terbaru :
       https://html-scripts.googlecode.com/files/feeds.js
• Klik tombol Preview / Pratinjau untuk melihat hasilnya, jika sudah benar klik Publish Page / Tayangkan Laman. Lalu buka Blog Sobat dan lihat hasilnya…

Yang kedua kita Membuat Widget Daftar Isi, berikut tutorialnya :

• Pada dashboard blogger, klik Tata Letak.
• Klik Tambah Gadget.
• Pilih HTML/Javascript.
• Silakan beri judul pada widget. Lalu letakkan kode berikut :
  
  <div style="overflow:auto;height:250px;padding:10px;border:1px solid #eee">
  <script src="https://html-scripts.googlecode.com/files/feeds.js"></script>
  <script src="http://banjarinfo.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
  </script>
  </div>
  • Ganti Alamat banjarinfo.blogspot.com dengan url / alamat blog Sobat.
  • Ganti https://html-scripts.googlecode.com/files/feeds.js dengan kode daftar isi dibawah ini :
  1. Berdasarkan Label :
     https://html-scripts.googlecode.com/files/feeds-labels.js
  2. Berdasarkan Tanggal :
     https://html-scripts.googlecode.com/files/feed-dates.js
  3. Berdasarkan Artikel terbaru :
     https://html-scripts.googlecode.com/files/feeds.js
• Klik tombol SAVE. Lalu lihat hasilnya di Blog Sobat.

Jika sobat ingin menampilkan daftar isi berdasarkan salah satu label di blog sobat silakan baca postingan Membuat Daftar Isi Label Tertentu.

Selamat mencoba dan semoga berhasil Membuat Daftar Isi Blogger.

Read More