Cara Mengetahui Jumlah Backlink Blog

Ada beberapa tool yang bisa Sobat pakai untuk mengetahui jumlah backlink blog, antara lain menggunakan situs Ahrefs Site Explorer & Backlink Checker [Free & Paid Versions], Majestic SEO : Backlink Checker & Site Explorer [Free & Paid Versions], dan lain-lain. Namun pada postingan ini saya akan berbagi cara mengetahui jumlah backlink dengan menggunakan Google Webmaster Tools.

Cara mengeceknya juga cukup mudah, tapi sebelumnya Sobat harus terlebih dahulu mendaftarkan blog sobat ke Google Webmaster Tools, caranya bisa sobat baca di Mendaftarkan Blog ke Google Webmaster Tools.

Untuk mengetahui jumlah backlink blog sobat, silakan ikuti tutorial berikut :

• Silakan Login ke akun Google Sobat, lalu kunjungi situs ini Google Webmasters Tools
• Klik tombol Masuklah ke Layanan Alat Webmaster
  
• Pilih blog yang ingin Sobat lihat backlinknya.
• Lalu Klik Lalu Lintas Penelusuran > Tautan ke Situs Anda.
  
• Untuk lebih detail klik Selengkapnya.
  

Sekian tutorial singkat dari saya, semoga bermanfaat buat kita semua.

Mendaftarkan Blog ke Google Webmaster Tools

Buat Sobat yang baru bikin blog sebaiknya Anda segera mendaftarkan dan Mensubmit Sitemap Blog anda ke Google Webmaster Tools. Dengan tujuan agar blog baru anda cepat di index dan bisa langsung muncul di Google, sehingga besar kemungkinan blog anda bisa langsung mendapatkan pengunjung.

Untuk Cara Mendaftarkan Blog ke Google Webmaster Tools sebenarnya mudah, berikut tutorialnya :

• Silakan Login ke akun google Anda, lalu kunjungi situs Google Webmaster Tools
• Klik tombol Masuklah ke Layanan Alat Webmaster
  
• Masukkan alamat Url Blog Anda Lalu klik tombol Tambahkan Situs
  
• Untuk cara verifikasinya sekarang tidak perlu lagi, karena Diverifikasi secara otomatis di Blogger, jadi kita ga perlu repot lagi utak-atik template.
  

Selanjutnya Sobat perlu mensubmit sitemap Blog anda, berikut caranya :

• Klik pada Peta Situs
  
• Lalu klik Tambahkan/Uji Peta Situs
  
• Selanjutnya masukkan Feed Blog Anda, dan Klik Mengirim Peta Situs
  
  
  Contoh Feed Blog / sitemapnya seperti ini
  http://namablog.blogspot.com/feeds/posts/default
  http://namablog.blogspot.com/atom.xml
  http://namablog.blogspot.com/rss.xml
  Anda bisa memasukkan feeds/posts/default, atom.xml atau rss.xml.
• Jika sudah, reload halaman tersebut. Selesai.

Demikian informasi sederhana yang bisa saya bagi. Semoga bermanfaat untuk kita semua.

Script Anti Link Aktif di Komentar

Salah-satu algoritma pagerank blog didasarkan pada perbandingan link-in dan link-out, bila suatu postingan artikel blog yang kita miliki lebih banyak link-out nya dibandingkan dengan link-in nya, maka artikel blog tersebut susah untuk bisa mendapatkan pagerank yang bagus. Oleh sebab itu sebagai Admin sebuah blog kita harus memeriksa komentar-komentar yang masuk, karena biasanya para spammer sengaja menyisipkan link-link aktif di komentar dengan tujuan mencuri backlink dari blog kita, link-link aktif ini tentu saja sangat mempengaruhi kesehatan blog yang kita miliki.

Secara default, blogspot telah menyediakan fitur anti spam secara otomatis dan fitur Moderasi Komentar di Blog, namun tetap saja kita selaku admin blog masih harus memeriksa komentar yang masuk satu persatu, hal ini tentu saja cukup mengganggu dan memakan waktu bahkan kadang masih ada komentar spam yang lolos.

Karenanya pada postingan ini saya akan berbagi kode Script Anti Link Aktif di Komentar, saya rasa trik ini cukup efektif untuk membasmi link aktif pada komentar.

Untuk memasangnya di blog, Sobat dapat mengikuti tutorial berikut :

1. Login ke blogger.
2. Pilih Template > Edit HTML
   
3. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya :
   
   #comments p a {display:none;}
4. Cari kode </head> dan letakkan kode berikut diatasnya :
   
   <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
   <script type='text/javascript'>
   jQuery(document).ready(function(){
    jQuery("#comments p").find("a").replaceWith("<span>Peringatan: Link aktif otomatis terhapus</span>");
   });
   </script>
5. Terakhir klik Simpan Template
   
   Selesai.

Silakan buat sobat yang ingin mencoba trik ini, semoga bermanfaat untuk membasmi link aktif di komentar.

Kode Verifikasi pada Komentar di Blog

Setelah kemaren saya buat postingan tentang Sistem Moderasi Komentar di Blog, kali ini saya akan berbagi informasi ringan tentang Kode CAPTCHA.

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) adalah suatu bentuk uji tantangan-tanggapan (challange-response test) yang digunakan dalam perkomputeran untuk memastikan bahwa jawaban tidak dihasilkan oleh suatu komputer. Proses ini biasanya melibatkan suatu komputer (server) yang meminta seorang pengguna untuk menyelesaikan suatu uji sederhana yang dapat dihasilkan dan dinilai oleh komputer tersebut. Karena komputer lain tidak dapat memecahkan CAPTCHA, pengguna manapun yang dapat memberikan jawaban yang benar akan dianggap sebagai manusia. Oleh sebab itu, uji ini kadang disebut sebagai uji Turing balik, karena dikelola oleh mesin dan ditujukan untuk manusia, kebalikan dari uji Turing standar yang biasanya dikelola oleh manusia dan ditujukan untuk suatu mesin. CAPTCHA umumnya menggunakan huruf dan angka dari citra terdistorsi yang muncul di layar.

Menurut beberapa blogger, pengaktifan kode captcha pada komentar di Blog itu penting, karena di anggap sebagai pencegah program spammer. Namun ada beberapa blogger yang beranggapan lain, menurut mereka blog seperti itu sangat tidak bersahabat dalam dunia blogging. Jadi menurut saya sebelum Anda menggunakan fitur ini sebaiknya pikirkan dulu baik buruknya.

Untuk mengaktifkan / menonaktifkan kode captcha pada komentar di Blog, berikut langkahnya :

1. Buka blogger.com, lalu login ke akun Anda
2. Silahkan pilih nama blog Anda
3. Masuk ke Setelan > Pos dan Komentar
4. Pada bagian "Tampilkan verifikasi kata" pilih "Ya" untuk mengaktifkan dan "Tidak" untuk menonaktifkan
   
5. Terakhir klik Simpan setelan
   

Demikian informasi ringan kali ini, semoga bermanfaat buat kita semua.

Sistem Moderasi Komentar di Blog

Pada kesempatan kali ini akan kita bahas salah satu fitur di Blogger, yaitu Sistem Moderasi Komentar. Moderasi komentar adalah salah satu fitur dari sebuah blog yang fungsinya untuk menyaring dan meninjau sebuah komentar di blog untuk di setujui atau tidak sebuah komentar oleh Admin blog.

Dengan mengaktifkan sistem ini ada beberapa keuntungan yang kita dapat, antara lain kita dapat memilih mana komentar yang pantas untuk ditampilkan mana yang tidak, selain itu juga dapat mengurangi komentar spam yang masuk ke blog kita, dan juga mengurangi link keluar dari blog spammer.

Namun juga terdapat kerugian jika kita mengaktifkan fitur ini, salah satunya para pengunjung yang memberikan komentar akan merasa kurang puas karena komentar yang di tulisnya tidak langsung muncul pada kolom komentar, selain itu Admin blog juga harus bisa selalu cek komentar, agar komentar tidak menumpuk atau membuat pengunjung yang berkomentar tidak sabar dan bertanya-tanya mengapa komentarnya tidak muncul-muncul.

Berikut langkah yang dilakukan untuk mengaktifkan / menonaktifkan Sistem Moderasi Komentar.

• Buka blogger.com, lalu login ke akun Anda
• Silahkan pilih nama blog yang akan anda moderasi komentarnya
• Masuk ke Setelan > Pos dan Komentar
  
• Untuk mengaktifkan silakan pilih Selalu
• Untuk menonaktifkan silakan pilih Tidak pernah
• Terakhir klik Simpan setelan
  

Sekian postingan saya kali ini, semoga bermanfaat buat kita semua.

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

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

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.

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.

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.

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://wadahtutorial.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
  </script>
  </div>
  Keterangan :
  
  • Ganti Alamat wadahtutorial.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://wadahtutorial.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
  </script>
  </div>
  • Ganti Alamat wadahtutorial.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.

Trik Mempercepat Loading Blog

Untuk Mempercepat Loading Blog ada banyak cara yang dapat dilakukan, antara lain dengan cara mengkompress kode CSS/HTML biar ukurannya jadi lebih kecil, meng-Edit Template Supaya Valid XHTML, mengkompress Image supaya lebih optimize, dan lain-lain.

Untuk kali ini saya share cara yang lain, yaitu dengan menggunakan kode script yang dicoding secara khusus untuk mempercepat loading blog. dengan menggunakan kode script ini maka browser tidak akan membaca image/gambar di blog, sehingga dapat meringankan beban server dan mempercepat loading.

Berikut tutorial penggunaan kode script untuk mempercepat loading blog :

• Masuk ke akun blogger anda
• Klik pada Template. (jangan lupa backup dulu template anda, untuk menghindari sesuatu yang tidak diinginkan).
• Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
• Beri tanda centang pada Expand Template Widget.
• Cari kode </head> gunakan CTRL + F pada keyboard.
• Lalu letakkan kode berikut di atas kode </head>.
  
  <script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
  <script src='http://wadah-tutorial.googlecode.com/files/superload.js' type='text/javascript'/>
  <script charset='utf-8' type='text/javascript'> $(function() { $(&quot;img&quot;).lazyload({placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_A_de7tz6Ms84pQ4uHGmDWa92l6MlaXdnAWkUUOejDWZo42RLJ62tRS1VG3GWrVk-CaM9FvrRRrTeT2AiWZjoBHHy7kCBEr5kDS-ogO-bhWvpUhJCF9Pnb0-SxcmezmhxVpgLbM3nNzI/&quot;,threshold : 200}); }); </script>
• Terakhir klik Simpan Template.

Sekarang lihat blog Sobat dan rasakan bedanya, semoga bermanfaat...

Cara Mengetahui Duplikat Konten (Duplicate Content)

Duplikat Konten (Duplicate Content) dalam sebuah blog tentu sangat tidak bagus untuk SEO, karena duplikat konten dapat mengurangi kualitas hasil pencarian, akibatnya, kekuatan SERP suatu halaman blog di search engine menjadi lemah, karena itu kita perlu mengetahui apakah pada blog kita terdapat duplikat konten.

Perlu di perjelas bahwa duplikat konten yang saya maksud adalah konten yang ada pada blog kita, bukan duplikat konten dengan blog orang lain, maksudnya kesamaan konten antara postingan kita dengan postingan blog lain, biasanya ini terjadi karena kebiasaan copy paste. Jika ini terjadi tentu akibatnya akan lebih parah lagi, bisa-bisa blog kita di hapus oleh Google. jadi buat Copaser "berhati-hatilah dalam mengcopy artikel orang lain".

Untuk mengetahui duplikat konten yang ada di blog, kita dapat menggunakan Webmasters tools dari Google. Berikut caranya :

• Login ke Blogger.
• Masuk ke Webmasters tools
• Pilih blog yang ingin Sobat periksa.
  
• Klik Pengoptimalan > Penyempurnaan HTML.
  disana akan di beritahu laman yang bermasalah dan jumlahnya, lihat gambar.
  

Untuk mengoptimalkan SEO sebaiknya perbaiki kesalahan yang ada pada blog sobat, baik itu duplikat meta tag, duplikat meta deskripsi, ataupun masalah lainnya.

Sekian dulu artikel kali ini, untuk selanjutnya akan kita bahas Cara Mengatasi Duplikat Konten.

Memperbaiki Warning Rich Snippets Testing Tool

Rich Snippets adalah sebuah alat penguji yang memeriksa struktur data HTML dari template sebuah blog, pada saat kita melakukan pengujian dengan alat ini kadang ditemukan warning atau pesan kesalahan yang tentu saja akan lebih baik jika diperbaiki.

Ketika saya cek blog ini di Webmaster Tools Rich Snippets, ternyata terdapat beberapa peringatan, Artinya terdapat file yang di butuhkan hilang pada situs web, ini di anulir menjadi bentuk Peringatan / Warning!, karena tidak diketahui oleh fitur Rich Snippets yang terdapat di webmaster tools. Hal ini cukup berpengaruh pada sebuah blog, apalagi jika kita ingin menampilkan rating bintang atau photo profile Google+ pada hasil pencarian di search engine Google.

Agar blog kita lebih optimal tentu kita harus mengatasi hal tersebut, untuk itu kita akan sedikit merubah atau menambah kode pada template blog kita. Buat Sobat yang ingin mengetahui struktur data HTML dari template blog anda, silakan masuk ke Rich Snippets Testing tool, selanjutnya masukkan URL blog sobat, lalu lihat hasilnya apakah ada warning atau tidak, jika terdapat warning / peringatan sebaiknya sobat perbaiki.

Di bawah ini beberapa peringatan yang sering muncul saat test struktur data :

• Warning : Missing Required Field "Updated"
• Warning : Missing required hCard "author"
• Warning : Missing required field "entry-title"
• Warning : At least one field must be set for HatomFeed

Untuk memperbaiki beberapa peringatan tersebut, sobat dapat lihat pada artikel yang saya tulis dibawah ini:

• Memperbaiki Missing Required Field "Updated"
• Memperbaiki Missing Required hCard "Author"
• Mengatasi Missing Required Field "entry-title"
• Mengatasi Warning: At least one field must be set for HatomFeed

Semoga Artikel kali ini bisa bermanfaat buat Sobat dalam Memperbaiki Warning Rich Snippets Testing Tool.

Membuat Daftar Isi Label Tertentu

Pada kesempatan kali ini saya akan berbagi tentang tutorial membuat daftar isi berdasarkan salah satu label pada blog. Maksudnya gini, pada sebuah postingan biasanya kita tautkan pada sebuah Label, dan pada postingan yang lain kita menggunakan label yang lain, artinya terdapat beberapa label pada blog kita, dan kita ingin membuat daftar isi yang berisi hanya postingan dari salah satu label tersebut.

Untuk Membuat Daftar Isi Label Tertentu, Sobat dapat mengikuti tutorial berikut :

* Untuk Widget :

• Login ke dashboard blogger.
• Klik pada Tata Letak > Tambah Gadget.
• Pilih HTML/Java Script
  
  
• Lalu isikan kode berikut :
  
  <script src='http://html-scripts.googlecode.com/files/feedlabels.js'/></script>
  <script src="http://wadahtutorial.blogspot.com/feeds/posts/summary/-/Blogger Templates?max-results=10&alt=json-in-script&callback=recentpostslist"></script>
  Keterangan :
  wadahtutorial.blogspot.com ganti dengan alamat blog Sobat.
  Blogger Templates ganti dengan Label yang ingin ditampilkan.
  10 ganti dengan jumlah postingan yang ingin di tampilkan.
• Klik Save dan periksa blog Sobat.

* Untuk Halaman :

• Login ke blogger Anda, kemudian buat sebuah halaman dengan judul Daftar Isi.
• Kemudian klik pada tab Edit HTML.
  
• Lalu masukkan kode berikut :
  
  <div style="overflow:auto;height:450px;padding:10px;border:1px solid #eee">
  <script src='http://html-scripts.googlecode.com/files/feedlabels.js'/></script>
  <script src="http://wadahtutorial.blogspot.com/feeds/posts/summary/-/Blogger Templates?max-results=999&alt=json-in-script&callback=recentpostslist"></script>
  </div>
• Klik tombol Preview / Pratinjau untuk melihat hasilnya, jika sudah benar klik Publish Page / Tayangkan Laman. Lalu buka Blog Sobat dan lihat hasilnya…

Demikian tutorial kali ini, selamat mencoba dan semoga berhasil Membuat Daftar Isi Label Tertentu.

Mengatasi Missing Required Field "entry-title"

Warning: Missing required field "entry-title" adalah salah satu pemberitahuan dari Rich snippets testing tools tentang kode title blog Sobat yang kurang tepat. Untuk memperbaikinya ada beberapa cara, tergantung kode template yang sobat gunakan.

Untuk cara pertama, Sobat dapat melakukan langkah berikut :

• Masuk ke akun blogger anda
• Klik pada Template. (backup dulu template anda).
• Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
• Beri tanda centang pada Expand Template Widget.
• Tekan Ctrl + F di keyboard lalu cari kode hentry, Sobat akan menemukan kode dibawah ini :
  
  <div class="post hentry">
  <div class="post hentry uncustomized-post-template">
• Kalau sudah ketemu hapus kedua hentry pada kode di atas, jadi hasilnya seperti ini :
  
  <div class="post">
  <div class="post uncustomized-post-template">
• Terakhir klik Simpan Template, dan cek di Rich snippet tools.

Jika cara diatas tidak berhasil, silakan coba cara kedua :

• Masih di menu Edit HTML.
• Tekan Ctrl + F di keyboard lalu cari kode
  
  <h3 class='post-title.........' ></h3>
  Tergantung pada template blog Anda, blog Anda mungkin menggunakan tag H1 / H2.
  
• Ganti kode di atas dengan kode di bawah ini:
  
  <h3 class='post-title entry-title'>
• Simpan Template, dan cek di Rich snippet tools.

Hanya itu tips dari saya tentang Mengatasi Missing required field "entry-title".

Memperbaiki Missing Required hCard "Author"

Sama halnya dengan Missing Required Field "Updated", peringatan yang satu ini juga sering di alami para blogger. Missing required hCard "author", Intinya ada kode yang kurang pada blog Sobat yaitu kode author yang tidak ada atau tidak tepat.

Untuk mengatasi Warning yang satu ini Sobat dapat mencoba langkah berikut :

• Login ke akun blogger anda
• Klik pada Template. (jangan lupa backup dulu template anda, untuk menghindari sesuatu yang tidak diinginkan).
• Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
• Beri tanda centang pada Expand Template Widget.
• Cari kode <b:if cond='data:post.hasJumpLink'>, dan letakkan kode berikut di atasnya.
  
  <div class='vcard' id='hcard-Madie Zha'>
  <span class='fn n'>
  <span class='given-name'><data:top.authorLabel/>
  <span class='fn'><data:post.author/></span></span>
  </span></div>
  Yang warna biru ganti dengan nama Sobat.
  *Sebenarnya sobat bisa meletakkan kode tersebut pada Post-header ataupun Post-footer, jadi tidak harus di atas <b:if cond='data:post.hasJumpLink'>.
• Terakhir Simpan Template dan cek blog sobat di Rich Snippets Testing.

Jika terdapat 2 warning seperti Missing required field "updated" dan Warning: Missing required hCard "author". Sobat dapat menggunakan kode berikut :

<div style='background-color: #F6F6F6; color: auto; border: 0px solid #eee; width:100%; margin: 0px; padding: 0.1px; font-family: Arial,Verdana,Sans-serif; font-size: small; text-align: left;'>
<div class='vcard' id='hcard-NAMA'>
<span class='fn n'> <span class='given-name'><data:top.authorLabel/>
<span class='fn'><data:post.author/></span></span></span></div>
 <a class='updated' href='http://wadahtutorial.blogspot.com/' rel='bookmark'>Nama Blog</a> Updated at: <abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></div>

Letakkan di atas <b:if cond='data:post.hasJumpLink'>. Lalu Simpan Template Anda.

Semoga berhasil memperbaiki Missing required hCard "author".