Cara Pasang Readmore Otomatis di Blogger

Cara Pasang Readmore Otomatis di Blogger - Beberapa hari yang lalu, saya mengunduh template Blogger gratis dari internet. Ternyata, pada template tersebut belum terdapat fitur "Readmore Otomatis". Untuk itu saya perlu memasang sendiri "readmore otomatis" karena jika tak ada fitur ini, maka halaman beranda blog akan menjadi sangat panjang ke bawah.

Berikut langkah-langkah atau cara memasang readmore otomatis di blogspot:

1. Masuk ke akun Blogger Sobat.

2. Klik "Opsi lainnya" diikuti klik "Template".

3. Kemudian klik tombol "Edit HTML" >> "Lanjutkan".

4. Beri tanda centang pada "Expand Template Widget".

5. Lalu carilah kode </head>. Untuk mempercepat pencarian, tekan tombol F3 pada keyboard lalu masukkan kata kunci yang dimaksud.

6. Selanjutnya taruh kode berikut tepat di atas kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

7. Langkah selanjutnya adalah mencari kode <data:post.body/>. Bila sudah ketemu, ganti kode tersebut dengan kode di bawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

</b:if>

8. Klik tombol "Simpan template".

Berikut keterangan untuk readmorenya...

• var thumbnail_mode = "float"; adalah letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
• summary_noimg = 250; ialah jumlah karakter yang akan ditampilkan di posting tanpa gambar atau thumbnail;
• summary_img = 250; merupakan jumlah karakter yang akan ditampilkan di posting dengan gambar atau thumbnail;
• img_thumb_height = 120; yaitu tinggi thumbnail dalam ukuran pixel;
• img_thumb_width = 120; artinya lebar thumbnail dalam ukuran pixel;
• readmore merupakan tulisan readmore yang dapat diganti misalnya dengan “Baca Selengkapnya” dan apabila Sobat tidak ingin menampilkan judul dibelakang Readmore, Sobat dapat menghapus kode skrip ini .

Semoga bermanfaat bagi Sobat. Cukup sekian tulisan singkat yang dapat saya ketikkan di Blog Mulyono Website ini. Semoga dapat berguna buat teman-teman sekalian, terutama buat sahabat blogger di indonesia. Jangan pernah lupa untuk membagikannya di jejaring sosial facebook, twitter dan google plus. Sampai ketemu di informasi berikutnya, thanks sobat, Heppy Bloging!

Optimasi Keyword di Awal Paragraf Pertama Artikel Secara Manual

Optimasi Keyword di Awal Paragraf Pertama Artikel Secara Manual - Mengenai optimasi keyword di awal paragraf pertama artikel telah dibahas pada beberapa waktu yang lalu. Kali ini akan dibahas hal yang serupa, namun dengan cara yang berbeda.

Kalau sebelumnya dengan cara otomatis yaitu dengan meletakkan kode tertentu pada HTML template blog, maka link judul posting akan tampil pada awal paragraf pertama di semua artikel yang telah dipublikasikan.

Sedangkan pada postingan kali ini akan dibahas yang secara manual yakni dengan membuat optimasi keyword satu per satu di setiap artikel.

Membuat optimasi keyword pada awal paragraf artikel secara manual adalah sama saja seperti membuat link dalam artikel. Hanya saja alamat URL tujuannya atau web address (tautan permanen posting yang bersangkutan) belum dipublikasikan.

Melakukan optimasi keyword secara manual ini adalah mudah saja yaitu setelah kita menuliskan judul posting di kotak "judul entri", salin dan tempel judul tersebut di awal postingan. Untuk memisahkan dengan awal paragraf pertama artikel, beri tanda, misalnya dengan tanda hubung (-). Kemudian tebalkan judul tersebut.

Salin dan tempel judul entri di awal postingan.

Kemudian klik menu "Tautan permanen" yang ada pada "Setelan entri" di sebelah kanan area pengetikan posting. Untuk memelajari bagaimana menentukan tautan permanen, silakan klik di sini. Setelah tautan permanen selesai dibuat, salin tautan permanen tersebut.

Salin tautan permanen yang telah ditentukan.

Langkah selanjutnya adalah blok teks judul artikel yang tadi ditempel di awal postingan. Kemudian klik menu "Link" pada toolbar. Kemudian tempel tautan permanen di kotak "Web address" dan klik tombol "OK".

Tempel tautan permanen di kolom "Web address".

Langkah berikutnya adalah mengetik naskah artikel seperti biasa hingga selesai.

Mengetik artikel seperti biasa.

Optimasi Keyword pada Awal Paragraf Pertama Artikel

Ketika mengunjungi beberapa blog, saya menjumpai adanya judul posting serta tautannya di awal paragraf pertama pada artikel dalam blog tersebut. Ternyata ini merupakan salah satu usaha yang dapat dilakukan dalam SEO On Page. Tujuan melakukan hal ini adalah agar posting mendapat posisi yang baik di hasil pencarian mesin pencari. Oleh karena itu, buatlah judul artikel yang betul-betul mengena dengan kata kuncinya.

Optimasi Keyword pada Awal Paragraf Pertama Artikel

Berikut ini langkah-langkah dalam membuat trik optimasi keyword pada awal paragraf pertama artikel di Blogger.

1. Masuk ke akun Blogger > Opsi Lainnya > Template

2. Klik tombol "Edit HTML" > "Lanjutkan".

3. Beri tanda contreng pada "Expand Template Widget".

4. Selanjutnya cari kode <data:post.body/>. Untuk memudahkan pencarian, tekan tombol F3 (Chrome) atau  tombol Ctrl+F, lalu masukkan kode yang dicari pada kotak pencarian cepat browser. Biasanya akan ditemukan beberapa kode ini, masing-masing pada kode untuk auto read more, kode untuk tampilan desktop, dan kode untuk tampilan mobile.

5. Carilah kode <data:post.body/> yang untuk tampilan desktop kemudian ganti kode tersebut dengan kode di bawah ini.

<strong><a expr:href='data:post.url' expr:title='data:blog.pageName' style='color:black'><data:post.title/></a></strong> - <data:post.body/>

6. Klik tombol "Simpan template".

Memunculkan Lebih Dari Satu Label pada Menu Breadcrumbs

Pada template Thesis SEO Blogger yang sedang saya gunakan ini (saat artikel ini ditulis) memang sudah tertanam 'menu breadcrumbs'. Namun, jika artikel atau posting yang mempunyai label lebih dari satu, label yang tampil pada 'menu breadcrumbs' tersebut hanya satu. Tidak semua label yang dimiliki artikel tersebut muncul.

Untuk menyiasati agar artikel yang mempunyai beberapa label dapat tampil label-labelnya pada 'menu breadcrumbs', maka kita perlu mengedit sedikit kode 'menu breadcrumbs' tersebut.

Label yang muncul hanya satu pada menu breadcrumbs.

Berikut ini langkah-langkah untuk membuat semua label tampil pada 'menu breadcrumbs' pada template Thesis SEO Blogger.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" kemudian pilih menu "Template".

3. Selanjutnya klik tombol "Cadangkan / Pulihkan" lalu klik tombol "Unduh template lengkap" untuk membuat salinan template. Hal ini berguna untuk memudahkan mengembalikan template ke keadaan semula bila terjadi kesalahan dalam pengeditan.

4. Klik tombol "Edit HTML" lalu klik tombol "Lanjutkan".

5. Beri tanda centang pada "Expand Template Widget".

6. Cari kode seperti di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- breadcrumb for the post page -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>

</b:loop>

<b:else/>

&#187;Unlabelled

</b:if>

&#187; <span><data:post.title/></span>

</b:loop>

</span>

</p>

<b:else/>

7. Perhatikan kode <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> lalu tambahkan kode &#187; sehingga menjadi <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;

Selanjutnya amati kode:

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

Kemudian ganti tanda"=" yang pertama dengan "!" dan tukar letak kedua kode tersebut sehingga menjadi seperti di bawah ini:

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

<b:if cond='data:label.isLast != &quot;true&quot;'> &#187;

8. Setelah kode nomor 6 diedit, maka hasilnya akan menjadi seperti di bawah ini.

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<!-- No breadcrumb on home page -->

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- breadcrumb for the post page -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

<b:if cond='data:label.isLast != &quot;true&quot;'> &#187;

</b:if>

</b:loop>

<b:else/>

&#187;Unlabelled

</b:if>

&#187; <span><data:post.title/></span>

</b:loop>

</span>

</p>

<b:else/>

9. Klik tombol "Simpan template" dan periksa hasilnya pada artikel yang mempunyai lebih dari satu label.

Semua label tampil pada menu breadcrumbs.

Cara Membuat Menu Navigasi Breadcrums di Blogger atau Blogspot

Sebelumnya saya sudah memposting artikel tentang cara membuat menu navigasi breadcrumbs di Blogger. Untuk membaca postingan tersebut silakan klik di sini. Kali ini saya akan membahas hal yang sama. Namun, cara yang berikut ini agak sedikit berbeda. Bila pada cara yang sebelumnya tidak berhasil, Anda dapat mencoba cara yang satu ini.

Langsung saja, berikut ini langkah-langkah dalam membuat menu navigasi breadcrumbs di Blogger atau Blogspot. Silakan disimak dan semoga sukses.

1. Masuk ke akun Blogger.

2. Klik Rancangan > Edit HTML.

3. Silakan klik Download Template Lengkap untuk membuat salinan template.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode ]]></b:skin>, lalu letakkan kode di bawah ini di atas kode tersebut. Gunakan tombol Ctrl + F untuk mempercepat pencarian.

.breadcrumbs {

padding: 5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:95%;

line-height:1.4em;

border-bottom:3px double #e6e4e3;

}

6. Selanjutnya cari kode yang seperti di bawah ini.

<b:include data='top' name='status-message'/>

      <data:adStart/>

    <b:loop values='data:posts' var='post'>

7. Kemudian letakkan kode <b:include data='posts' name='breadcrumb'/> setelah kode <b:include data='top' name='status-message'/> sehingga hasilnya akan menjadi seperti di bawah ini.

<b:include data='top' name='status-message'/>

  <b:include data='posts' name='breadcrumb'/>
    <data:adStart/>

    <b:loop values='data:posts' var='post'>

8. Berikutnya cari kode <b:includable id='main' var='top'> dan letakkan kode di bawah ini tepat di atas kode tersebut.

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='breadcrumbs'>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>

</b:loop>

&#187; <span><data:post.title/></span>

</b:if>

</b:loop>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<div class='breadcrumbs'>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Arsip untuk <data:blog.pageName/>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == &quot;&quot;'>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Seluruh Artikel

<b:else/>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Artikel pada Label <data:blog.pageName/>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

9. Klik tombol SIMPAN TEMPLATE.

10. Lihat blog Anda untuk mengetahui hasilnya.

SEO On Page dan SEO Off Page

D

alam dunia blogging sering kita mendengar istilah SEO. Lantas, apakah yang dimaksud dengan SEO itu? SEO merupakan singkatan dari Search Engine Optimization atau bila diartikan secara sederhana yaitu optimasi mesin pencari. SEO ini menurut saya adalah upaya-upaya yang dilakukan agar blog kita mendapat posisi yang terbaik pada halaman hasil pencarian mesin pencari. SEO ini diperlukan bila kita ingin mendatangkan banyak pengunjung dari mesin pencari.

Secara garis besar, SEO dibagi menjadi 2 yaitu SEO On Page dan SEO Off Page. SEO On Page adalah teknik-teknik optimasi mesin pencari yang diterapkan pada blog itu sendiri. Nah, berikut ini beberapa contoh dari SEO On Page:

1. Page Title, Meta Description, dan Meta Keyword.
2. Memasang Menu Navigasi Breadcrumbs.
3. Memasang Related Post atau Artikel Terkait.
4. Memasang Read More.
5. Penggunaan kata tebal, miring, atau garis bawah.
6. Internal linking atau tautan antar-halaman posting dalam blog yang sama.
7. Mempercepat waktu akses blog.
8. Menggunakan tag alt pada setiap gambar.
9. Dan lain-lain.

Sedangkan SEO Off Page adalah teknik-teknik optimasi mesin pencari yang diterapkan di luar blog yang bersangkutan, dengan kata lain melibatkan pihak atau blog lain. Contohnya adalah adanya back link yaitu link yang ada di blog lain yang mengarah ke blog kita. Submit blog ke webmaster tools, dan lain sebagainya.

Cara Memasang Meta Tag Otomatis di Blogger

M

emasang meta tag pada blog merupakan salah satu cara agar blog lebih mudah diindeks oleh mesin pencari seperti Google. Penyampaian informasi penting ke mesin pencari atau search engine mengenai halaman suatu blog dilakukan dengan cara memasang meta tag ini pada blog. Pada kesempatan kali ini saya akan membagikan cara memasang meta tag deskripsi dan keyword setiap posting secara otomatis. Maksudnya, setiap posting kita akan memiliki meta deskripsi yang berbeda antara posting yang satu dengan posting yang lainnya tanpa perlu menambahkan meta tag pada setiap posting secara manual. Hal ini dilakukan agar kita tidak mengalami duplikasi meta deskripsi.

Berikut ini cara memasang meta tag tersebut bagi yang belum pernah memasang meta tag sebelumnya.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk berjaga-jaga jika nanti ada kesalahan dalam pengeditan kita sudah mempunyai backup-nya sehingga mudah untuk mengembalikan template seperti semula.

4. Cari kode <title><data:blog.pageTitle/></title>. Gunakan Ctrl + F untuk memudahkan pencarian.

5. Hapus kode tersebut dan ganti dengan kode di bawah ini.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<meta content='Isi dengan deskripsi blog Anda' name='DESCRIPTION'/>
<meta content='kata kunci 1, kata kunci 2, kata kunci 3, kata kunci dst' name='KEYWORDS'/> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> : <data:blog.title/></title>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Keywords'/></b:if>

• Ganti tulisan yang berwarna merah dengan deskripsi dan kata kunci yang berhubungan dengan blog Anda.

6. Klik tombol SIMPAN TEMPLATE.

Cara Memasang Meta Tag Google di Blog

Menanggapi pertanyaan Sobat David Prasetiawan pada komentar posting yang berjudul Cara Daftar dan Pasang Meta Tag Yahoo! di Blog yang menanyakan tentang pemasangan meta tag Google di blog, maka pada kali ini saya akan coba membahasnya. Dengan memasang meta tag Google ini pada blog, kita berharap Google dapat mengindeks blog kita dengan baik.

Nah, berikut ini adalah langkah-langkah untuk memasang meta tag Google pada Blogger.

1. Silakan kunjungi halaman Webmaster Tools di http://www.google.com/webmasters/tools/

2. Kemudian Sign In dengan menggunakan akun Google.

3. Selanjutnya klik tombol Tambahkan situs yang dipilih pada blog yang ingin ditambahkan meta tag.

4. Klik segitiga hitam pada link Kelola dan klik link Tambahkan atau hapus pemilik.

5. Selanjutnya klik link Verifikasikan dengan menggunakan metode yang berbeda.

6. Pilih Tambahkan tag meta ke beranda situs Anda kemudian copy meta tag yang diberikan oleh Google.

7. Masuk ke akun Blogger Anda.

8. Klik Rancangan > Edit HTML.

9. Paste kode meta tag tadi di bawah kode <head> sebelum bagian <body> pertama, kalau saya sih biasanya meletakkannya di bawah kode <b:include data='blog' name='all-head-content'/>.

10. Klik tombol SIMPAN TEMPLATE.

11. Kembali lagi ke halaman verifikasi tadi dan klik tombol Verifikasi.

Cara Pasang Meta Tag Bing di Blog

Sebelumnya Klik Munadi pernah membahas cara mendaftarkan blog ke mesin pencari Bing. Kali ini akan dibahas mengenai cara memasang meta tag Bing pada blog agar Bing lebih mengenal blog kita. Dengan demikian, peluang menjaring pengunjung dari para pengguna Bing akan besar.

Nah, untuk memasang meta tag Bing di blog, silakan simak caranya di bawah ini. Namun, sebelumnya pastikan Anda telah memiliki Windows Live ID atau akun Hotmail terlebih dahulu untuk Sign In.

1. Silakan kunjungi halaman http://www.bing.com/toolbox/webmaster/ dan klik tombol Webmaster Tools Sign In.

2. Sign In dengan menggunakan Windows Live ID Anda.

3. Kemudian klik salah satu tombol Add Site.

4. Masukkan URL blog Anda dan klik tombol Submit.

5. Pada halaman Verify Ownership, pilih metode yang kedua yaitu dengan mengeklik link Option 2: Copy and paste a tag in your default webpage.

6. Silakan copy meta tag yang diberikan oleh Bing.

7. Masuk ke akun Blogger Anda.

8. Klik Rancangan > Edit HTML.

9. Paste meta tag tersebut di bawah kode <b:include data='blog' name='all-head-content'/>

10. Klik tombol SIMPAN TEMPLATE.

11. Kembali ke halaman Verify Ownership dan klik tombol Verify.

Cara Daftar dan Pasang Meta Tag Yahoo! di Blog

Agar blog kita dikenal oleh search engine atau mesin pencari Yahoo! ada baiknya kita mendaftarkan blog serta memasang META Tag Yahoo! di blog kita. Bila blog kita telah terindeks dengan baik di Yahoo!, maka akan memberi peluang pengunjung untuk datang ke blog kita melalui mesin pencari Yahoo!. Untuk mendaftarkan blog di Yahoo! serta memasang Meta Tag di blog, silakan simak langkah-langkahnya di bawah ini.

 Submit Blog

1. Kunjungi https://siteexplorer.search.yahoo.com/submit

2. Sign In dengan menggunakan akun Yahoo Anda (bila belum mempunyai akun, silakan buat akun Yahoo Anda terlebih dahulu).

3. Klik tulisan Submit a Website or Webpage.

4. Isikan URL blog Anda.

5. Klik tombol Submit URL.


Pasang Meta Tag

1. Pada halaman yang sama, silakan klik My Sites di sidebar sebelah kiri.

2. Bila URL blog Anda belum tercantum, silakan masukkan URL blog Anda pada kotak yang tersedia.

3. Kemudian klik tombol Add My Site.

4. Klik Authentication di sidebar kiri, pada halaman Authentication, silakan klik link By adding a META tag to my home page.

5. Yahoo! akan memberikan kode META Tag, silakan di-copy kode tersebut.

6. Silakan masuk ke akun Blogger Anda.

7. Klik Rancangan > Edit HTML.

8. Selanjutnya paste kode META Tag tadi di bawah kode <b:include data="blog" name="all-head-content"></b:include>

9. Klik tombol SIMPAN TEMPLATE.

10. Kemudian kembali lagi ke halaman Authentication dan klik tombol Ready to Authenticate.

Cara Membuat Menu Navigasi Breadcrumbs di Blogger

Menu navigasi breadcrumbs merupakan menu hirarki untuk mengelompokkan artikel dalam suatu kategori atau label yang sama. Untuk lebih jelasnya perhatikan tulisan kecil yang ada di atas judul posting ini atau lihat gambar di samping. Bila di template Anda belum terdapat menu navigasi breadcrums ini dan Anda ingin memasangnya, berikut ini langkah-langkahnya.

Masuk ke akun Blogger Anda.

Klik Rancangan > Edit HTML.

Back up template dulu dengan mengeklik Download Template Lengkap untuk mengantisipasi kalau nanti terjadi kesalahan.

Beri tanda centang pada Expand Template Widget.

Cari kode ]]></b:skin> (Gunakan Ctrl + F untuk memudahkan pencarian).

Copy kode di bawah ini dan paste di atas kode tersebut.

#breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:10px;
line-height: 1.4em;
border-bottom:3px double #333;
}

Selanjutnya cari kode <div class='post hentry'>

Kemudian copy kode berikut ini dan paste di bawah kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot; '>
<div id='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if>
</b:loop>
</b:if> &gt; <a expr:href='data:post.link'><data:post.title/></a>
</div>
</b:if>

Klik tombol SIMPAN TEMPLATE.

Lihat artikel Anda untuk melihat hasilnya.

Cara Memasang Widget Read More Otomatis dengan Thumbnail

Dengan memasang widget read more otomatis ini, Anda tidak perlu menambahkan kode tambahan di setiap posting blog yang Anda buat. Widget read more ini akan tampil di homepage, halaman hasil pencarian, halaman arsip, dan halaman label. Jika Anda tertarik untuk memasangnya, silakan ikuti langkah-langkah di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan.

3. Klik tab Edit HTML.

4. Klik Download Template Lengkap, untuk mengantisipasi jika terjadi kesalahan dalam mengedit template.

5. Beri tanda centang pada Expand Template Widget.

6. Cari kode </head>. Bila Anda menggunakan browser Mozilla Firefox, tekan tombol Ctrl + F, lalu masukkan kode yang dimaksud untuk memudahkan pencarian.

7. Copy kode berikut dan paste di atas kode </head>.

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 230;

summary_img = 140;

img_thumb_height = 100;

img_thumb_width = 100;

</script>

<script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>

8. Cari kode <data:post.body/>.

9. Ganti kode tersebut dengan kode di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

<b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/>

<b:else/>

<div expr:id='&quot;summary&quot; + data:post.id'>

<data:post.body/>

</div>

<script type='text/javascript'>

createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<div style='clear: both;'/>

<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>

</b:if>

</b:if>

10. Klik tombol SIMPAN TEMPLATE.

11. Selesai.

Sumber: bloggerplugins.org

Cara Memasang Widget Artikel Terkait dengan Thumbnail

Sebelumnya di blog ini telah dibahas mengenai cara memasang widget artikel terkait di blog. Namun widget tersebut tanpa thumbnail, jadi hanya menampilkan judul-judul artikelnya saja. Kali ini akan dibahas tentang cara memasang widget artikel terkait dengan thumbnail.

Widget artikel terkait dengan thumbnail ini cukup menarik karena disertai dengan gambar. Gambar yang muncul diambil dari salah satu gambar yang ada di artikel yang dimaksud. Widget artikel terkait merupakan daftar link dari judul-judul artikel suatu blog yang berlabel sama dengan artikel yang sedang dibaca.

Berikut cara memasang artikel terkait dengan thumbnail.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan.

3. Klik tab Edit HTML.

4. Klik Download Template Lengkap, untuk berjaga-jaga kalau nanti terjadi kesalahan dalam mengedit template.

5. Beri tanda centang pada Expand Template Widget.

6. Cari kode </head>. Bila Anda menggunakan browser Mozilla Firefox, tekan tombol Ctrl + F, lalu isikan kode yang dimaksud untuk memudahkan pencarian.

7. Copy kode berikut dan paste di atas kode </head>.

<!--Related Posts with thumbnails Scripts and Styles Start-->

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type="text/css">

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:black;

}

#related-posts a:hover{

color:black;

}

#related-posts  a:hover {

background-color:#d4eaf2;

}

</style>

<script type='text/javascript'>

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2PMBwE6AtulTb1a0mB1lP8vl6_9DFsr40I5rn9vfgL2TkUaJ4F09_ZrwAJ0kCzj5ChIEl5KCH4vdtZ2Bco8YUmSq9FzMhbRfS8EnnMcGZGQir9RM9sTY3VnXgRWcNWSAFQgELMSSGSYk/s400/noimage.png";

var maxresults=5;

var splittercolor="#d4eaf2";

var relatedpoststitle="Related Posts";

</script>

<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>

<!-- remove --></b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

8. Cari kode  <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>.

9. Copy kode berikut dan paste setelah salah satu kode di atas.

<!-- Related Posts with Thumbnails Code Start-->

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>

<script type='text/javascript'>

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);

</script>

</div><div style='clear:both'/>

<!-- remove --></b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>

</b:if></b:if>

<!-- Related Posts with Thumbnails Code End-->

10. Klik tombol SIMPAN TEMPLATE.

11. Klik Lihat Blog untuk melihat hasilnya.

• Anda dapat mengubah jumlah artikel terkait yang ingin ditampilkan dengan mengubah kode var maxresults=5;
• Untuk mengubah judul widget, Anda dapat mengedit kode berikut var relatedpoststitle="Related Posts";
• Bila ingin mengganti default thumbnail, edit kode berikut  var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2PMBwE6AtulTb1a0mB1lP8vl6_9DFsr40I5rn9vfgL2TkUaJ4F09_ZrwAJ0kCzj5ChIEl5KCH4vdtZ2Bco8YUmSq9FzMhbRfS8EnnMcGZGQir9RM9sTY3VnXgRWcNWSAFQgELMSSGSYk/s400/noimage.png";
• Untuk mengubah warna dari Splitter Line, silakan edit kode var splittercolor="#d4eaf2";

Sumber: bloggerplugins.org

Cara Mendaftarkan Blog ke Yandex

Selain mendaftarkan blog ke mesin pencari seperti Google, Yahoo, Baidu, dan Bing, Anda juga dapat mendaftarkan blog ke Yandex. Yandex merupakan mesin pencari atau search engine terbesar di Rusia. Berdasarkan data dari Alexa, khusus pengguna internet di Rusia, menunjukkan kalau Yandex lebih populer dibanding Google (http://www.google.ru). Saat tulisan ini dibuat, Yandex menempati urutan pertama sedangkan Google (http://www.google.ru) berada di posisi ke-tiga. Untuk update data terbaru dapat dilihat di http://www.alexa.com/topsites/countries/RU (Top Sites in Russia). Sedangkan untuk urutan dunia Yandex menduduki peringkat ke-23.

Menjaring pengunjung dari Rusia merupakan salah satu cara untuk meningkatkan traffic blog. Menurut situs Yandex, Yandex secara teratur menambahkan situs baru ke database-nya, menemukan mereka pada link pada halaman web. Untuk lebih cepat terindeks, Anda dapat mendaftarkan blog ke Yandex. Berikut cara melakukannya.

• Kunjungi http://webmaster.yandex.ru/addurl.xml

• Terjemahkan halaman ke Bahasa Indonesia agar dapat lebih mudah dipahami dengan Google Translate.
• Masukkan URL blog Anda.
• Ketikkan kode yang muncul.
• Klik tombol Tambahkan yang berada di sebelah kanan kotak teks URL.

Cara Mendaftarkan Blog ke Mesin Pencari (Google, Yahoo, Baidu, Bing)

Harapan seseorang membuat blog salah satunya adalah agar tulisan-tulisannya dapat dibaca oleh orang lain atau pengunjung blog. Apalagi kalau tulisan tersebut tidak hanya dibaca melainkan banyak juga yang memberikan komentar. Hal ini tentu saja dapat memberikan kebahagiaan tersendiri bagi pemilik blog. Sehingga pemilik blog dapat terpacu semangatnya untuk membuat tulisan yang lebih baik lagi serta bermanfaat bagi para pembaca atau pengunjung blog.

Setelah selesai membuat blog, tidak serta merta blog kita dikenal oleh orang lain. Diperlukan sebuah usaha yang gencar dari pemilik blog untuk mempromosikan blognya tersebut agar ramai dikunjungi. Banyak cara yang dapat dilakukan agar blog menjadi dikenal dan ramai dikunjungi. Salah satunya adalah dengan rajin blogwalking atau berkunjung ke blog orang lain. Selain itu dapat pula dengan mendaftarkan blog ke mesin pencari atau search engine.

Agar blog kita terindeks pada mesin pencari, maka kita harus mendaftarkan blog milik kita terlebih dahulu pada situs pemilik mesin pencari. Jumlah mesin pencari ini banyak sekali. Saat ini mesin pencari yang populer adalah Google, Yahoo, Baidu, dan Bing. Jika blog kita ingin terindeks pada mesin pencari mereka, maka kita harus mendaftarkan URL blog kita pada mesin pencari mereka. Bagi pembaca yang ingin mengetahui cara mendaftarkan blog ke mesin pencari atau search engine, dapat disimak penjelasan di bawah ini.

Cara mendaftarkan blog ke Google

• Kunjungi http://www.google.com/addurl/
• Pada bagian URL, silakan isikan dengan URL blog Anda.
• Isikan keyword atau kata kunci yang berhubungan dengan blog Anda pada bagian Comments.
• Di bagian Optional, masukkan huruf verifikasi yang muncul ke dalam kotak kosong.
• Klik tombol Add URL.

Cara mendaftarkan blog ke Yahoo

• Kunjungi https://siteexplorer.search.yahoo.com/submit
• Sign In dengan menggunakan akun Yahoo Anda (bila belum mempunyai akun, silakan buat akun Yahoo Anda terlebih dahulu).
• Klik tulisan Submit a Website or Webpage.
• Isikan URL blog Anda.
• Klik tombol Submit URL.

Cara mendaftarkan blog ke Baidu

• Kunjungi http://www.baidu.com/search/url_submit.html
• Terjemahkan halaman ke dalam Bahasa Indonesia dengan menggunakan fitur Google Translate.
• Isikan URL blog Anda.
• Masukkan kode yang tersedia ke kotak dan klik tombol di sebelahnya.

Cara mendaftarkan blog ke Bing

• Kunjungi http://www.bing.com/webmaster/SubmitSitePage.aspx
• Ketikkan karakter yang Anda lihat ke kotak kosong.
• Isikan URL blog Anda.
• Klik tombol Submit URL.

Cara Memasang Artikel Terkait di Blog

Artikel Terkait atau yang biasa disebut juga dengan Related Posts merupakan daftar link dari judul-judul artikel di blog kita dengan label yang sama dan biasanya berada di bawah postingan. Adanya widget artikel terkait ini dapat memudahkan pengunjung menjelajahi blog kita terutama untuk artikel yang berkaitan.

Tampilan dari widget artikel terkait ini dapat hanya berupa judul-judul artikel saja atau ada juga yang dengan gambar/thumbnail. Setiap blogger mempunyai selera dan alasan tertentu untuk menggunakan tipe widget yang dia pilih.

Untuk memasang widget artikel terkait seperti yang terpasang di blog ini, Anda bisa mengikuti langkah-langkah pemasangannya di bawah ini.

Masuk ke akun Blogger.
Klik Rancangan.
Klik Edit HTML.
Back-up template dulu untuk berjaga-jaga kalau nanti ada masalah dalam pengeditan.
Beri tanda centang pada Expand Template Widget.
Cari kode HTML seperti di bawah ini.

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>

<div class='post-footer-line post-footer-line-2'/>

<div class='post-footer-line post-footer-line-3'/>
</div>
</div>

Copy kode HTML di bawah ini dan paste/letakkan tepat di bawah kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similar'>
<!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->
<div class='widget-content related-by-cat'>
<h3>Related Posts / Artikel Terkait :</h3>
<div id='data2007'/><br/><br/>
<div id='hoctro' style='display:none;'>
Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u> | <u><a href='http://www.jackbook.com/' title='Related Posts on Blogger Modified by JackBook.Com. Read More?'>Jack Book</a></u>
</div>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 50;
var maxNumberOfLabels = 40;

maxNumberOfPostsPerLabel = 40;
maxNumberOfLabels = 40;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Klik tombol SIMPAN TEMPLATE.
Bila berhasil akan ada tampilan "Perubahan Anda telah disimpan" dan klik Lihat Blog untuk melihat hasilnya serta coba buka artikel Anda.