Cara Memasang Breadcrumbs pada Posting Blog

Apa itu Breadcrumb?

Cara Memasang Breadcrumb pada posting blog agar blog SEO friendly sebenarnya sangat mudah. Breadcrumb merupakan sebuah teknik SEO yang membantu kita terutama search engine untuk menelusuri posisi sebuah posting blog dari titik awal (home). Secara bahasa, Breadcrumb berarti "remah roti". Teknik Breadcrumb membantu spider dari search engine untuk lebih cepat mengenal struktur sebuah blog. Saya contohkan seperti gambar di bawah.
cara memasang bread crumbs pada posting blog
Secara teknis para blogger setuju bahwa teknik breadcrumb membawa efek positif bagi SEO, karena  link antar halaman itu selalu memberi efek positif dalam aliran pagerank. Breadcrumb juga sedikit banyak membantu navigasi pengunjung untuk mengenali blog atau website yang sedang dikunjunginya.

Cara Memasang Breadcrumbs

Selain memberikan kemudahan bagi Googlebot untuk merayapi sebuah blog atau website, memasang breadcrumb juga membuat tampilan blog atau website lebih profesional menurut saya. Jika ingin memasang breadcrumb, silakan ikuti langkah mudah berikut:
  • Masuk ke akun blogger, pilih Template
  • Backup template Anda dengan mengklik tombol Cadangkan/Pulihkan
  • Klik tombol Edit HMTL
  • Buka semua kode template dengan klik di sembarang tempat di dalam kode lalu tekan CTRL+A, lalu tekan CTRL+C, lalu tekan DEL, dan terakhir paste dengan menekan CTRL+V.
  • Klik di sembarang tempat di kode HTML, lalu tekan CTRL+F untuk membuka kotak pencarian. Cari kode ]]></b:skin
  • Letakkan kode berikut tepat di atas kode ]]></b:skin tadi
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}
  • Kemudian cari kode berikut:
<b:includable id='main' var='top'>
  • Hapus, dan ganti kode di atas dengan kode berikut:
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
  • Simpa.
Jika kode breadcrumb terpasang dengan benar, maka akan tampak seperti gambar di bawah.

cara memasang breadcrumb di posting blog

Bagaimana, mudah bukan memasang breadcrumb? Silakan melakukan Optimasi SEO lain untuk semakin memaksimalkan SEO Anda.

Bagaimana Cara Membuat Dynamic Heading untuk Optimasi SEO?

Bagaimana cara membuat Dynamic Heading? Salah satu trik SEO yang semakin banyak digunakan oleh blogger, mengingat sebenarnya dynamic heading adalah salah satu syarat template blog SEO friendly. Ada yang masih bingung dan asing apa itu dynamic heading, jadi sebelum melangkah lebih jauh, coba perhatikan gambar di bawah ini.

Bagaimana cara membuat dynamic heading di blogspot?
Dynamic heading di blogspot.
Gambar di atas memperlihatkan tiga bagian penting pada halaman posting saya:
1. Title Tag
2. Header Halaman
3. Judul Artikel
Ketiga komponen di atas merupakan komponen terpenting dari sebuah blog untuk optimasi SEO. Jika blog Anda belum mengoptimalkan tiga komponen di atas. Kali ini saya akan share tentang bagaimana cara membuat dynamic heading, yaitu judul heading blog yang berubah menyesuaikan judul posting blog.

Mengatur Title Tag

Banyak blogger menggunakan title tag standar untuk blognya. Misalnya blog "Tips Blogspot" membuat postingan "Bagaimana Cara Mengganti Meta Tag?", maka title tag-nya akan menuliskan "Tips Blogspot : Bagaimana Cara Mengganti Meta Tag?". Perlu diingat bahwa tempat terbaik dalam title tag, yaitu bagian terdepan dari title tag diisi dengan nama blog. Padahal sangat sedikit orang yang mau mencari keyword "Tips Blogspot" yang merupakan short tail keyword. Orang akan cenderung langsung mencari apa yang mereka butuhkan di search engine, bukan nama blog. Apalagi blog yang belum terkenal seperti blog saya ini.

Untuk mengoptimalkan title tag, silakan baca artikel Cara Memasang Title Tag, Meta Description, dan Heading Tag 

Membuat Dynamic Heading

Seperti yang saya sebuatkan di atas bahwa dynamic heading membuat header halaman blog menuliskan judul blog saat berada di home, dan berganti menuliskan judul posting blog saat berada di halaman posting blog. Untuk membuat dynamic heading kita perlu sedikit bermain dengan edit HTML, bagi yang masih bingung silakan dibaca artikel Edit Template Tampilan Baru. Oke, sekarang saatnya membuat dynamic heading. Ingat, backup template Anda terlebih dahulu!
  • Login ke akun blogger, dan pilih menu Template > Edit HTML
  • Buka semua kode template: Klik di sembarang tempat di dalam kode, tekan CTRL+A, lalu tekan CTRL+C, lalu tekan DEL, CTRL+V.
  • Cari kode <b:include name='title'/> dengan menggunakan CTRL+F. Biasanya terdapat lebih dari satu kode ini, saya sarankan mulai dari yang paling bawah
  • Ganti kode <b:include name='title'/> dengan kode di bawah:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include name='title'/>
<b:else/>
<data:blog.pageName/>
</b:if>
  •  Simpan.
Lihat, apakah header blog sudah berganti menjadi judul posting blog saat di halaman posting blog. Jika belum, silakan dicoba kembali penggantian kode pada <b:include name='title'/> yang lainnya.
 

Mengatur Judul Artikel

Jika Anda belum melakukan optimasi SEO, biasanya judul posting blog adalah berupa heading H3, dan widget berupa heading H2. Sebenarnya hal ini kurang SO friendlySecara default biasanya template memberikan heading H3 untuk judul posting. Jadi di sini kita akan mengubah judul artikel menjadi heading H2.
  • Buka EDIT HTML, tekan CTRL+F dan cari kode h3.post (pastikan kod tidak memuat embel-embel mobile)
  • Lagi-lagi, biasanya kode h3.post bisa lebih dari satu, ubah semuanya menjadi h2.post
  • Lalu ubah semua kode <h3 class='post menjadi <h2 class='post.. jangan lupa ubah juga end tag </h2>menjadi </h3>.
  • Simpan

Mengubah Judul Widget Menjadi H3

Sampai langkah ini header blog kita sudah menjadi dynamic heading dan judul posting blog sudah menjadi heading H2. Sekarang kita akan mengubah judul widget menjadi heading H3 agar lebih SEO friendly.

  • Buka EDIT HTML, carilah semua kode HTML untuk widget blog kita. Contoh  widget Arsip Blog seperti pada kode di bawah:
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
  • Ubah semua kode <h2><data:title/></h2> di atas menjadi <h2><data:title/></h3>
  • Simpan.
Sampai di sini blog kita sudah memiliki dynamic heading, heading H2 pada judul posting blog, dan heading H3 pada judul widget blog. Sekarang blog kita sudah lebih SEO friendly, dan memudahkan search engine untuk menemukan blog kita dan semoga bisa memperbaiki peringkat posting-posting blog kita di hasil pencarian Google.

Cara Mengganti Template Blog Blogger dengan Mudah

Mempercantik Tampilan Blog dengan Mengganti Template Blog Blogger

Setelah membuat blog di blogger, blogger harus mempercantik tampilan blognya dengan mengganti template blog bloggernya. Mengapa kita perlu melakukannya? Sederhana, sama seperti manusia yang cantik, blog yang memiliki tampilan yang cantik tentu saja lebih disukai pengunjung daripada blog yang tampilannya tidak rapi dan terkesan asal tempel.

Mengganti template blog blogger sebenarnya sudah cukup untuk mempercantik blog. Banyak blogger yang 'terjerumus' dengan memasang bermacam-macam widget yang sebenarnya tidak perlu dipasang demi mempercantik blog. Hal itu malah akan menjadi boomerang karena hanya akan menjadikan blog berat untuk loading dan tidak user friendly. Selain itu terlalu banyak widget akan memperbanyak link keluar blog kita yang pastinya tidak baik untuk Optimasi SEO Blog.

Widget yang disarankan tidak perlu dipasang di blog:

  1. Widget jam dan kalender sangat tidak dianjurkan.
  2. Efek-efek salju, tulisan mengikuti mouse, animasi-animasi gambar di blog yang justru akan membuat tampilan terkesan 'norak'.
  3. Chatbox dan box-box melayang lain. Ini akan membuat loading menjadi berat karena blog harus me-load frame-frame di luar frame blog. Jika tetap ingin memasang chatbox, pasang di page blog tersendiri jangan  di home.
  4. Widget-widget yang banyak mengandung script dan link keluar, karena ada batasan link keluar di halaman home kita sebanyak 20 link, jadi berhati-hatilah jika tidak mau di banned Search Engine.
Pesan saya, tidak usah frontal untuk mempercantik blog dengan berpikir 'saya harus memasang semua widget di blog agar saya dianggap hebat'. Angapan itu salah, malah kita akan terlihat 'newbie'. Pasang yang sekiranya kita dan pengunjung blog butuhkan tanpa mengurangi esensi Optimasi SEO Blog.

Saya kira cukup pengantar yang saya berikan, sekarang masuk ke tutorial cara mengganti template blog blogger dengan mudah.

Cara Mengganti Template Blog Blogger dengan Mudah

Mendownload Template Blog

Pilih dan download template blog yang kita inginkan. Saya sarankan pilih desain template yang sesuai dengan topik/ tema blog kita, dan gunakan template seo firendly karena akan mempermudah kita dalam melakukan Optimasi SEO Blog.

Anda cukup mengetikkan 'download template blog seo friendly' di Google dan Anda akan menemukan banyak template yang gratis untuk diunduh. Atau bisa kunjungi penyedia template kesukaan saya mastemplate.com. Tips memilih template blog:
  1. Sesuaikan desain dengan tema konten blog kita.
  2. Pilih yang SEO friendly, bisanya memiliki fitur: breadcumb, related post, valid html, optimasi meta tag, optimasi heading, tidak memasang iframe, loading ringan, responsive, dsb. Template SEO friendly membantu kita agar tidak pusing melakukan optimasi SEO blog di kemudian hari.
File template yang di download biasanya berupa namafile.zip. Klik kanan dan pilih Extract, kita akan menemukan file namafile.xml atau namafile.txt. 

Download Gratis Template Blog Blogger


Mengganti Template Blog

Setelah mendownload template blog, saatnya memasang template blog. 

Cara #1 Auto Upload
  1. Login aku blogger
  2. Pilih Template, lihat di atas akan ada tombol Cadangkan/ Pulihkan, klik!
  3. Unduh Template Lengkap jika ingin mem-backup template lama kita, dan Browse file XML template kita dan pilih Unggah.
  4. Selesai.
Menggati Template Blog Blogger dengan Mudah

 
Cara #2 Manual Upload
Buka file namafile.xml atau namafile.txt kita dengan Notepad dan copy semua kodenya.
  1. Login aku blogger
  2. Pilih Template, Edit HTML
  3. Ctrl+A, Delete pada field yang tersedia, Ctrl+V
  4. Pilih Save.
Mengganti Template Blog Blogger

Bagaimana, mudah bukan tutorial mengganti template blog blogger dengan mudah? Silakan dilanjutkan ke tutorial blog lain. Oh iya, saya sarankan jangan terlalu sering mengganti template blog karena akan membuat search engine mendeteksi kita sebagai blogger yang tidak baik, akan saya update tentang ini di tips selanjutnya. Cukup maksimalkan template yang kita punya.

Cara Memasang Share Button Melayang pada Blog, Mudah!

Apa itu share button?

Share button adalah tombol yang memudahkan pengunjung blog untuk membantu men-share/ menyebarluaskan posting atau halaman blog kita melalui akun jejaring sosial pengunjung. Seperti kita tahu, salah satu pertimbangan search engine seperti Google dalam memunculkan hasil pencarian (SERP) sebuah website/ blog di halaman awal mereka adalah kepopuleran website/ blog tersebut. Apabila search engine banyak menemukan URL blog kita di situs jejaring sosial karena di share pengunjung, niscaya kepopuleran blog kita akan melambung di mata search engine. Itu dia manfaat dari share button untuk SEO blog.

Cara Memasang Share Button Melayang pada Blog
Share Button Melayang pada Blog

Cara Memasang Share Button Melayang pada Blog

Share button yang akan kita pasang kali ini ada dua versi. Yang pertama share button yang melayang di bagian kiri blog kita dan tidak akan berubah posisinya walaupun kita jika scroll mouse.

Berikut cara membuat share button melayang di bagian kiri blog:
  1. Login ke akun blogger, pilih menu Tata Letak
  2. Pilih Add Gadget dan pilih HTML/ Java Script.
  3. Paste-kan kode di bawah ini dan Save. Saran saya, tidak usah diberi judul.


Jika ingin memasang share button melayang pada blog versi sederhana, lakukan langkah yang sama seperti di atas dengan kode share button melayang berikut:




Bagaimana, mudah bukan memasang share button melayang? Dengan memasangnya di blog kita berharap setiap pengunjung yang datang mau ikut membantu menyebarluaskan posting dan halaman blog kita sehingga kepopuleran blog kita di mata search engine melambung. Selain itu memasang share button melayang pada blog juga menambah cantik blog kita.Two in One, mempercantik blog sekaligus optimasi SEO blog.

Mempercantik Kotak Komentar dengan Memasang Emoticon/ Smileys

Emoticon atau Smileys di Kotak Komentar 

Cara Memasang Emoticon/ Smileys pada Kotak Komentar

Memasang emoticon atau smiley di kotak komentar, membuat blog lebih menarik. Komentator lebih terfasilitasi untuk mengekspresikan perasaannya setelah membaca posting kita melalui emoticon/ smiley. Berbeda dengan wordpress yang sudah ada plug-in smiley/ emoticon, di blogger kita perlu melakukan sedikit usaha untuk menampilkan emoticon/ smileys pada kolom komentar.

Contoh Emoticon (Yahoo!) :



Bagaimana, tertarik untuk memasang emoticon/ smiley di kotak komentar?


Cara Memasang Emoticon/ Smileys pada Kotak Komentar

Sebenarnya, mudah untuk memasang emoticon/ smiley pada area komentar:
1. Pertama Login ke blogger
2. Pilih Template > Edit HTML.
Untuk meng-expand widget pada template, silakan baca  tutorial cara edit template blogger tampilan baru.
 
3. Lalu letakkan script berikut sebelum kode </body> . Gunakan F3 atau Ctrl+F untuk mencarinya.

   

4. Cari kode <p class='comment-footer'>. , dan letakkan kode berikut tepat di bawahnya.


6. Pilih Save, selesai!

Demikian cara memasang emoticon/ smiley pada kotak komentar di blogger. Semoga bermanfaat, dan jangan lupa di klik share button di bawah.