Kemarin ada seorang sobat yang bertanya kepada saya, 'bagaimana cara membuat widget related posts seperti yang saya gunakan pada blog ini'. Sebenarnya cara membuat widget related posts sudah pernah saya posting di blog ini, hanya saja memang versi related posts yang saya gunakan sekarang ini berbeda dengan versi related posts yang sudah pernah posting di blog ini. Oleh karena itu, pada postingan ini saya akan menjelaskan cara membuat related posts seperti yang saya gunakan pada blog ini atau yang saya beri nama related posts v2.

Mungkin anda akan bertanya apa perbedaan antara related posts v1 dan v2?
Kalau pada related posts v1, related posts akan ditampilkan bersamaan dengan judul labelnya dan dikelompokan berdasarkan labelnya masing-masing. Sebagai contoh, perhatikan screenshot dibawah ini.


Sedangkan versi 2, related posts atau artikel yang berhubungan hanya menampilkan judul posting saja (tanpa judul label) dan semua artikel yang berhubungan digabung menjadi satu sehingga mirip dengan widget related posts milik Wordpress. Contoh tampilannya seperti ini:


Bagi anda yang ingin memasang related posts v2 atau related posts ala wordpress silahkan ikuti langkah-langkah dibawah ini:

1. Pada halaman dashboard blogger, buka menu Design -> Edit HTML

2. Beri centang pada "Expand Widget Templates"

3. Cari kode ]]></b:skin>

4. Letakkan kode css berikut diatasnya

#related-posts { float : left; width : 250px; margin-left : 5px; font-size: 12px; line-height : 1.8em; margin-bottom:10px; } #related-posts a{ color:#4b4b4b; }
#related-posts a:hover{ color:#ca1717; }
#related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { margin : 10px 5px 5px 20px; padding : 0; }

5. Selanjutnya cari </head>

6. Letakkan kode javascript berikut diatasnya

<script src='http://hermanblog.googlecode.com/files/Related-posts.js' type='text/javascript'/>

7. Kemudian cari <p><data:post.body/></p> atau <data:post.body/>

8. Jika ada dua kode yang sama, pilih yang pertama

9. Letakkan kode berikut dibawahnya

<div id='related-posts'>
<div style='font-size:18px'><b>Related Posts:</b></div>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>

Keterangan:
Teks yang dicetak tebal adalah judul widget dan angka 5 adalah jumlah postingan yang muncul dalam related posts. Silahkan ganti sesuai keinginan

10. Jika sudah, simpan template anda dan lihat hasilnya. Kalau berhasil jangan lupa pencet tombol like dibawah

Sebelumnya saya sudah pernah memposting mengenai cara membuat related post untuk menampilkan list judul postingan yang berhubungan dengan postingan utama. Sehingga memudahkan pembaca untuk mencari topik yang berkaitan. Untuk mengetahui lebih banyak tentang related post baca disini.

Nah kali ini saya ingin membahas cara membuat related post yang lebih menarik yaitu dengan menambahkan thumbnail atau gambar didalamnya. Agar lebih jelas perhatikan gambar dibawah ini.


Menarik bukan? Cara ini bisa digunakan bersamaan dengan related post tanpa thumbnail. Bagi anda yang tertarik untuk memasangnya, ikuti langkah-langkah berikut:

1. Buka menu Design -> Edit HTML

2. Beri centang pada "Expand Widgets Templates"

3. Letakkan kode berikut diatas </head>

<!--Related Posts with thumbnails Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}

#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}

#related-posts a{
color:black;
}

#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU6uu7Lo1Z236cgc9cwVvfQesSH3y0zR86hIc_L-cENu-NZK56NrUMLM5hu2xmd6MDRZtbjqGztbwO7EtLsV7RKjx69_dEQ6Kxz_ys8D6qKKK2sBZcrQgYyHKaOgXTJYyWnwu152JR8_SJ/";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="You might also like:";
</script>
<script src='http://hermanblog.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->

4. Lalu cari <p class='post-footer-line post-footer-line-1'/>

5. Kalau tidak ketemu coba cari post-footer-line

6. Letakkan kode berikut dibawahnya.

<!-- 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>
<!-- Related Posts with Thumbnails Code End-->

7. Kalau sudah Save template anda.

Keterangan:
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU6uu7Lo1Z236cgc9cwVvfQesSH3y0zR86hIc_L-cENu-NZK56NrUMLM5hu2xmd6MDRZtbjqGztbwO7EtLsV7RKjx69_dEQ6Kxz_ys8D6qKKK2sBZcrQgYyHKaOgXTJYyWnwu152JR8_SJ/" menunjukkan gambar yang muncul pada postingan yang tidak memiliki gambar. Anda bisa mengganti gambar tersebut dengan gambar lain.

var maxresults=5 menunjukkan jumlah postingan yang muncul pada related post. Silahkan atur jumlah postingan yang mau ditampilkan dengan mengganti angkanya.

var splittercolor="#cccccc" menunjukkan warna garis pemisah. Ganti cccccc dengan kode warna yang anda inginkan.

var relatedpoststitle="You might also like:" menunjukkan judul related post. Ganti teks yang berwarna merah dengan judul yang anda inginkan.


Bagi anda yang merasa cara diatas terlalu sulit, anda bisa menggunakan widget related post dengan thumbnail yang disediakan oleh linkwithin.com. Untuk cara pemasangannya sangat mudah, berikut langkah-langkahnya:

1. Buka situs http://www.linkwithin.com

2. Isi data-data yang diperlukan pada form yang telah disediakan

Email: alamat email anda
Blog link: Alamat blog dimana anda memasang widget related post with thumbnail
Platform: pilih Other
Width: pilih jumlah related post yang mau ditampilkan

Beri centang pada kotak kecil jika anda menggunakan background template yang gelap

3. Klik Get Widget

4. Copy dan paste kode script yang diberikan diatas </body> pada template blog anda lalu simpan template anda. Selesai

Jika ada yang kurang jelas atau mengalami kendala dalam memasang related post dengan thumbnail silahkan tinggalkan komentar anda dibawah ini. Saya akan berusaha untuk membantu anda.

Untuk menempati janji saya pada postingan sebelumnya tentang cara membuat email subscribe form maka pada kesempatan ini saya akan mengulas cara memodifikasi form email subscription agar menjadi lebih menarik.

Sebagai bahan studi, saya telah menyiapkan sebuah form seperti berikut.


Form tersebut nanti bisa anda modif dengan mengganti gambar, teks, dan tata letaknya sesuai keinginan. Ok mari kita mulai...

Untuk membuat form ini ada beberapa bahan yang harus disiapkan yakni:

1. Gambar latar belakang dan icon RSS yang berukuran 16x16 pixel. Jika belum punya anda bisa cari di internet atau gunakan saja icon pack yang saya sediakan dibawah ini. Klik pada masing-masing gambar untuk download icon pack-nya.


Fresh, Free and Gorgeous RSS/Feed Icons

























Free web 2.0 RSS icons









15 Free RSS Icons











Setelah mendownload icon gambar yang di inginkan. Upload icon tersebut ke situs image hosting yang sering anda gunakan. Saya sendiri menguploadnya di Picasa web album. Setelah itu, copy url gambarnya. Contoh https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMv4hoSosWuQSJWH2igqXLRyHAuyjh5D0E8DvBklPtTqMkjHMYW117sqlkWttQxQwNd3cGQb9dABNIQ3k5wd9PefkVbanD0w5VR1bO_y_ouqlcRtDGDv15xspV-o8lQniiI7DTsFrbnpkV/

2. Id feedburner anda. Contoh, http://feeds.feedburner.com/idanda. Tulisan yang dicetak tebal itulah id feedburner anda.

Bagaimana cara mengetahui id feedburner saya?
Caranya sangat mudah, login ke akun feedburner anda kemudian arahkan kursor mouse anda pada logo feed yang terletak disamping judul feed seperti yang dilingkari garis merah pada gambar dibawah. Kemudian perhatikan url dipojok kiri bawah. Tulisan yang berada dipaling belakang itulah id feedburner anda.


3. Aktivasi feed count
Feed count adalah sebuah widget mungil yang menampilkan jumlah subscriber atau feed reader anda dalam bentuk angka. Untuk dapat menikmati fitur feed count ini anda harus mengaktifkannya terlebih dahulu. Caranya, buka id feedburner anda lalu pilh tab Publicize. Pada bagian Service pilih Feed count, kemudian klik tombol Active. Selesai.



Setelah menyiapkan bahan-bahan yang diperlukan. Selanjutnya pasang kode form tersebut di blog anda. Ikuti langkah-langkah berikut:

1. Buka Blogger. Masuk ke menu Design -> Page Elements
2. Klik Add a Gadget lalu pilih HTML/Javascript
3. Copy kode dibawah kedalam kotak

<style>
.form {
border:1px solid #ccc; /* warna garis pinggir form */
background: #ffffff /* warna background form */
padding:3px; /* spasi form */
width:380px; /* panjang form */
height:180px /* tinggi form */
}

.rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMv4hoSosWuQSJWH2igqXLRyHAuyjh5D0E8DvBklPtTqMkjHMYW117sqlkWttQxQwNd3cGQb9dABNIQ3k5wd9PefkVbanD0w5VR1bO_y_ouqlcRtDGDv15xspV-o8lQniiI7DTsFrbnpkV/") no-repeat top right;
}

.button {
background: #006699; /* warna tombol subscribe */
color: #FFFFFF; /* warna font subscribe */
font-size: 11px; /* ukuran font subscribe */
font-family: Arial, Tahoma, Verdana; /* font subscribe */
margin-left: 5px; /* margin kiri tombol subscribe */
border: 1px solid #234B69; /* warna garis pinggir tombol subscribe */
padding:3px 5px 3px 5px; /* jarak antara font dengan garis pinggir tombol subscribe */
font-weight: bold;
}
</style>

<div class="form">
<div class="rss">
<div style="font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;"><a href="http://feeds.feedburner.com/hermanblog"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKcRwDJll23Rl216Muj3eBluJoDND6wo4SSXKpx_Dx_kLQrYcQVVc1HyPaXLD3FM1GtgssLMvwSyYZxjMtEDbV1EmsoUlmQ7PySAqaWlXvkyzjPFMz8ZF5PTY8ZZEKK8x3oLafzH3K2Dhs/s800/005.png" /></a> <a href="http://feeds.feedburner.com/hermanblog">GET UPDATE VIA RSS</a></div>

<div style="font-weight:bold; padding:10px 10px;">GET UPDATE VIA EMAIL</div>

<div style="padding-left:10px">Dapatkan kiriman artikel terbaru langsung ke email anda!</div>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=HermanBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:160px; height:18px" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ketik email anda disini...&quot;;}" onfocus="if (this.value == &quot;Ketik email anda disini...&quot;) {this.value = &quot;&quot;}" type="text" value="Ketik email anda disini..." /> <input type="hidden" value="HermanBlog" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="SUBCRIBE" /></div></form>

<div style="padding-left:10px"><a href="http://feeds.feedburner.com/HermanBlog"><img src="http://feeds.feedburner.com/~fc/HermanBlog?bg=ff7c00&amp;fg=444444&amp;anim=0" width="88" height="26" style="border:0" alt="" /></a></div>
</div></div>

Keterangan warna:
Biru: keterangan dari kode html tersebut
Hijau: posisi gambar background. Anda bisa mengganti posisinya dengan paduan berikut

Top right: Kanan atas
Top left: Kiri atas
Bottom right: Kanan bawah
Bottom left: Kiri bawah

Merah: alamat url gambar background
Merah bold: id feedburner. Ganti dengan id milik anda
Ungu: alamat url gambar icon rss
Hitam bold: kalimat dalam form. Ganti jika anda ingin menggunakan kata-kata lain
Orange: nama tombol
Orange bold: warna feed counter

4. Jika sudah, klik Save. Selesai

Sekedar Info: Jika anda tidak ingin menggunakan feed counter cukup hapus kode yang berkedip. Beres!

Selamat berkreasi...

Penting sekali bagi kita sebagai blogger untuk melakukan backup blog secara rutin misalnya 1 atau 2 minggu sekali. Mengapa? karena untuk mengantisipasi hal-hal yang tidak di inginkan seperti akun blog dibanned, dihack, terhapus dan sebagainya.

Dengan adanya backup maka setidaknya anda tidak perlu khawatir lagi jika suatu saat blog anda terhapus atau dibanned oleh Google dengan alasan melanggar TOS karena anda sudah memiliki arsip database blog anda yang setiap saat dapat di restore kembali.

Sebenarnya pembahasan tentang backup blog sudah pernah saya posting di blog ini namun hanya sebatas back up template, widget dan artikel secara manual.

Pada postingan ini saya akan membahas tentang cara backup posting blog dengan cara yang lebih mudah yaitu memanfaatkan fitur export yang sudah sediakan oleh blogger.com.

Fitur ini memungkinkan kita untuk menyimpan semua postingan blog kita dalam satu file yang berekstensi .xml. Sehingga lebih praktis dan hemat ruang penyimpanan.

Bagi yang belum tahu caranya. Ikuti langkah-langkah berikut:

1. Masuk ke menu Settings -> Basic
2. Pada kolom Blog Tool klik Export Blog


3. Kemudian akan muncul halaman baru, klik tombol Download blog dan tunggu hingga proses download selesai.


Cara merestore posting blog:
Untuk merestore kembali posting blog anda, gunakan tool Import blog.

Caranya:

1. Pada menu Settings -> Basic. Klik Import Blog



2. Klik Browse pilih data backup blog anda dan masukkan kode verifikasi sesuai yang tertera pada gambar.

3. Beri centang pada "Automatically publish all imported posts" jika anda ingin data backupnya langsung di publish ke blog anda atau sebaliknya.

4. Jika sudah klik Import Blog. Selesai

Tujuan blogger menerapkan sistem dofollow adalah untuk memancing pembaca agar aktif memberikan komentar pada blognya dengan imbalan berupa backlink bagi si pemberi komentar. Namun karena itu banyak diantaranya yang memanfaatkan kesempatan ini untuk mencari backlink sebanyak-banyaknya misalnya dengan berkomentar disetiap postingannya. Sehingga menjadi ajang untuk mengumpulkan backlink. Nah untuk mengatasinya anda bisa memasang widget Top komentator pada blog anda. Dengan memasang widget ini anda bisa melihat siapa yang memberikan komentar terbanyak dan apakah komentar yang diberikan benar-benar bermanfaat atau hanya sekedar untuk mencari backlink saja.

Nah bagi anda ingin memasang widget ini. Caranya sangat mudah. Silahkan ikuti langkah-langkah dibawah ini:

1. Login ke blogger. Klik menu Design -> Page Elements

2. Klik Add a gadget -> Html/Javascript

3. Masukkan kode dibawah ini kedalam kotak

<script type="text/javascript">
function pipeCallback(obj) {
document.write("<ul>");
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write("</ul>");
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=918c4b96efdf63fee389f2f025085904&EntertheURL=http%3A%2F%2Fmrsulblog.blogspot.com&number=5&Nametobeexcluded=Nama" type="text/javascript"></script>
<noscript><a href="http://mrsulblog.blogspot.com" target="_blank">Blogger Hacks</a></noscript>

Catatan:
Ganti teks yang berwarna merah dengan alamat blog anda
Angka 5 merupakan jumlah komentator yang ditampilkan. Silahkan diganti bila perlu.
Nama pada "nametobeexcluded" menunjukkan nama yang ingin anda abaikan. Anda bisa memasukkan nama anda jika tidak ingin nama anda dilist didalam widget top komentator.

4. Jika sudah, klik Save lalu lihat hasilnya.

5. Jika berhasil maka nama komentator terbanyak akan muncul didalam list :)

Selamat mencoba.

Ketika melakukan blogwalking, saya menemukan sebuah widget yang cukup menarik yaitu label animasi atau disebut dengan tag cloud. Label animasi ini mempunyai tampilan yang sangat menarik karena ketika kursor mouse disorot ke area tag cloud tersebut maka labelnya akan berotasi seperti orbit. Sehingga membuat blog kita terasa lebih interaktif.

Label animasi ini mempunyai fungsi yang sama dengan label standar dimana setiap kali kita memberi label pada postingan maka label tersebut secara otomatis akan muncul pada area tag cloud.

Nah bagi anda yang tertarik dengan label animasi ini. Berikut cara pemasangannya:

1. Seperti biasa. Login ke Blogger

2. Klik Download Full Template untuk membackup template anda

3. Setelah itu klik Design -> Edit HTML

4. Cari kode <b:section class='sidebar' id='sidebar' preferred='yes'>

5. Kalau sudah ketemu letakkan kode berikut tepat dibawah kode yang diatas

<b:widget id='Label88' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.hermanblog.com'>Herman Blog</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;180&quot;, &quot;180&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Angka 180 menunjukkan panjang tag cloud dan angka 180 menunjukkan tinggi tag cloud. Silahkan diganti nilainya sesuai dengan ukuran sidebar template anda.

Sedangkan kode ffffff menunjukkan warna background dari tag clound. Angka 333333 menunjukkan warna teks dan angka 12 menunjukkan ukuran teks. Silahkan diganti sesuai keinginan.

6. Jika sudah, Klik Save Template. Selesai

Selamat mencoba.

Template adalah sebuah pola dari website yang didesain sedemikian rupa untuk menampilkan artikel, berita, informasi, dan lain-lainnya. Jadi semua aktivitas blog/ website disimpan dalam template.

Oleh karena itu, kita harus merawat template kita dengan baik supaya tidak terjadi hal-hal yang tidak kita inginkan seperti kesalahan coding, blog terhapus atau kena banned oleh mas Google. Salah satu cara untuk mengatasinya yaitu Backup template.

Ada 2 cara untuk membackup template:

Cara pertama:

1. Login ke Blogger. Klik Design -> Edit HTML
2. Klik pada Download Full Template. Pilih Save File lalu tekan OK
3. Selesai. Sekarang template Anda sudah tersimpan di komputer Anda

Untuk merestore kembali. Pada menu Edit HTML, klik browse lalu cari template yang mau di restore. Klik Upload. Jika ada muncul konfirmasi "Widgets are about to be deleted". Klik Confirm & Save lalu klik View Blog untuk melihat hasilnya.

Cara Kedua:

1. Pada menu Edit HTML. Klik "Expand Widget Templates"
2. Copy semua kode template dengan cara tekan Ctrl+A lalu tekan Ctrl+C
3. Buka program Notepad lalu paste semua kode ke notepad dengan cara tekan Ctrl+V
4. Selesai. Jangan lupa untuk save notepadnya

Catatan: Kedua cara diatas hanya untuk membackup template. Untuk membackup artikel dan widget seperti shoutbox, jam dinding, kamus dan lain-lain. Silahkan ikuti langkah-langkah dibawah ini.

Cara membackup widgets:

1. Klik Layout -> Page Elements
2. Klik Edit pada widget yang Anda pasang
3. Copy semua kode lalu paste ke notepad
4. Selesai

Cara membackup postingan/ artikel:

Cara Manual:
1. Login ke Blogger. Klik menu Posting -> Edit Posts
2. Klik Edit pada artikel yang mau dibackup
3. Pada mode Compose, copy semua artikel lalu paste ke Ms Office atau Open Office
4. Selesai

Cara Otomatis:

1. Klik menu Setting -> Email
2. Isi alamat email Anda dalam kotak "BlogSend Address" seperti contoh dibawah ini:


Sebaiknya isi alamat email Anda lebih dari satu. Supaya alamat email yang satu kena banned atau kena hack masih ada yang lain.

3. Setelah itu klik Save Settings.
4. Selesai. Sekarang setiap kali Anda memposting artikel baru maka artikelnya akan otomatis terkirim ke alamat email Anda. Contohnya bisa Anda lihat pada gambar dibawah ini:

Artikel yang terkirim ke alamat email yahoo.


Artikel yang terkirim ke alamat email Google.

Artikel yang dikirim ke email Google tidak akan menampilkan gambar postingan. Untuk menampilkannya, Anda harus klik pada link Display image below atau Always display image from... jika Anda ingin postingan berikut tetap menampilkan gambar.

"Saran saya backuplah selalu isi blog Anda setiap kali ada penambahan atau pengurangan kode supaya jika terjadi sesuatu pada blog Anda, anda dapat mengembalikannya seperti semula".

Semoga bermanfaat.

Related post atau artikel yang berkaitan merupakan sebuah cara untuk menampilkan link-link artikel yang berkaitan dengan artikel utama dan biasanya terletak dibawah artikel utama.

Pemasangan related post ini biasanya dikelompokkan berdasarkan label atau kategori. Jadi jika ada salah satu artikel dari label tertentu ditampilkan maka artikel-artikel lain yang mempunyai label sama juga akan ikut muncul dibawah artikel tersebut.

Tujuan pemasangan related post ini agar pengunjung lebih mudah untuk mencari artikel yang berkaitan dengan artikel utama. Sehingga pengunjung tidak perlu report untuk mencari satu persatu artikel dalam menu label atau kategori.

Bagi yang masih bingung, silahkan lihat contohnya dibawah ini.


Gmn uda jelaskan? Nah bagi yang tertarik memasang related posts di blog anda, silahkan ikuti langkah-langkah dibawah ini:

1. Login ke Blogger. Pilih menu Design -> Edit HTML
2. Back-up terlebih dahulu template Anda dengan cara klik Download Full Template.
3. Setelah itu, beri tanda centang pada kotak "Expand Widgets Template".
4. Cari kode <data:post.body/>
5. Jika sudah ketemu, letakkan kode dibawah ini dibawah <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Artikel yang berkaitan</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

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

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


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>

Catatan:
Jika blog anda menggunakan kode read more maka biasanya ada 2 kode <data:post.body/> Letakkan kode diatas pada kode yang pertama.

6. Kalau sudah, klik Save Template lalu klik View Blog untuk melihat hasilnya.

Anda bisa mengganti teks "Artikel yang berkaitan" pada kode diatas dengan teks lain sesuai dengan keinginan anda.


Selamat mencoba..

Favicon atau Favorite Icon adalah sebuah icon mungil yang muncul pada address bar. Tampilannya seperti ini.


Untuk memasang favicon. Terlebih dahulu Anda harus mempunyai sebuah gambar atau icon yang disimpan dalam format .GIF atau .PNG dengan ukuran 32x32 pixels.

Setelah Anda mempunyai icon. Upload iconnya ke image hosting. Banyak website yang menyediakan image hosting gratis. Seperti Shareapic, Photobucket, Imageshack dan lain-lain. Kalau saya sendiri mengupload iconnya di Photobucket.

Setelah iconnya diupload. Copy alamat URL dimana icon Anda disimpan. Login ke blog Anda. Klik Design -> Edit HTML. Cari kode yang dibawah ini:

<title><data:blog.pageTitle/></title>

Letakkan kode dibawah ini dibawah kode diatas

Jika iconnya disimpan dalam format .GIF, gunakan kode ini

<link href='alamat URL icon Anda' rel='shortcut icon' type='image/gif'/>

Jika iconnya disimpan dalam format .PNG, gunakan kode ini

<link href='alamat URL icon Anda' rel='shortcut icon' type='image/png'/>

Catatan:
Ingat ganti alamat URL icon Anda dengan alamat URL dimana icon Anda disimpan. Misalnya, http://i25.photobucket.com/albums/e80/user/favicon32x32.gif

Kalau sudah, klik Save Template. Jika berhasil akan muncul "Your changes have been saved". Klik View blog untuk melihat hasilnya.

Selamat Mencoba

Supaya blog Anda terlihat unik atau beda dari yang lain. Maka Anda harus mengganti tampilan blog Anda.

Ada banyak cara untuk melakukannya. Misalnya dengan mengganti template yang dibuat oleh pihak ketiga tapi rata-rata template tersebut sudah ada yang menggunakannya.

Terkecuali Anda membuat template sendiri namun cara ini memerlukan waktu yang lama dan tidak mudah untuk membuat sebuah template yang bagus. Jadi salah satu cara yang paling mudah dan efektif adalah mengganti header pada template.

Header merupakan unsur yang paling penting dalam sebuah template karena setiap pengunjung yang datang ke blog Anda pertama kali yang dilihat adalah headernya. Jadi mengganti header merupakan cara yang paling tepat.

Header tidak harus berupa gambar. Anda juga bisa menggunakan teks sebagai header yang penting enak dilihat. Jika anda ingin menggunakan gambar sebagai header tetapi tidak bisa membuatnya. Jangan khawatir, karena saat ini ada banyak situs yang menyediakan gambar header secara gratis jadi Anda tinggal mendownload saja. Beberapa website yang memiliki header yang cukup bagus seperti: 100pixel.blogspot.com, freewebpageheaders.com, smashingmagazine.com, dan masih banyak lagi.

Pada postingan ini saya akan membahas tentang mengganti header dari freewebpageheaders.com. Untuk mendowloadnya, silahkan ikuti langkah-langkah dibawah ini:

1. Buka situs http://freewebpagesheaders.com/gallery

2. Untuk mendownload header. Anda harus memiliki account terlebih dahulu. Klik register untuk mendaftar.

3. Klik Agree. Kemudian Anda akan diminta untuk mengisi Registration form. Form ini terdiri dari 2 bagian yaitu : Required info dan Optional info.

Required info merupakan info yang harus Anda berikan untuk pendaftaran sedangkan Optional info merupakan info yang digunakan untuk menampilkan data Anda kepada pengunjung saat Anda login. Jika Anda merasa tidak perlu maka diabaikan saja untuk bagian ini

4. Kemudian klik Submit Registration Form. Jika sudah Anda akan mendapat pesan seperti ini.

5. Buka email yang Anda gunakan untuk mendaftar. Klik pada link yang diberikan untuk mengakftifkan account Anda.

6. Jika sudah, Anda akan mendapat pesan bahwa account Anda sudah diaktifkan.

7. klik Return to the front page of free Web Page Headers.

8. Lalu klik Login untuk mendowload gambar header.

9. Pilih kategori header yang Anda inginkan. Jika Anda sudah menemukan gambar yang cocok. Klik pada gambar tersebut lalu klik Download.

10. Kemudian gambarnya akan terbuka pada halaman baru. Klik kanan pada gambar lalu pilih Save Image As lalu tekan Save.

11. Selesai. Sekarang gambar sudah tersimpan di komputer Anda

Langkah selanjutnya yang harus Anda lakukan adalah mencari tahu berapa ukuran header pada template Anda supaya pada saat mamasang ukurannya pas dengan header template Anda. Caranya:

1. Klik Layout->Edit HTML.

2. Cari kode #header-wrapper. Supaya mudah untuk mencarinya, tekan Ctrl+F ketik "header-wrapper" lalu tekan Next.

3. Jika sudah ketemu biasanya ada kode width dan height disekitarnya. Misalnya #header-wrapper { background: url } no-repeat; width:980px; height:100px;

Width adalah panjang header dan Height adalah lebar header. Berarti Anda harus meresize gambarnya menjadi 980x100 pixel. Anda bisa menggunakan program pengolah gambar seperti Ms Paint, ACD See, photoshop untuk meresizenya.

4. Setelah selesai. Buka Blogger, masuk ke menu Design->Page Elements.

5. Klik Edit pada bagian Header.


6. Kemudian akan muncul halaman baru.


7. Pilih Browse from your computer jika gambarnya disimpan dikomputer atau Browse from the web jika gambarnya disimpan di image hosting seperti: Imageshack, Photobucket, dan Geocities.

8. Pada bagian "Placement". Pilih Behind title and description jika Anda ingin manampilkan gambar dibelakang judul dan deskripsi blog atau pilih Instead of title and description jika Anda ingin menutupi judul dan deskripsi blog.

9. Lalu klik Save. Klik View Blog untuk melihat hasilnya.

Catatan:
Tidak semua template bisa dipasang gambar. Ada yang menggunakan teks saja. Jadi pilihlah template sesuai kebutuhan.

Selamat mencoba. Semoga berhasil...

Secara default, tampilan cursor pada blog adalah berbentuk panah namun bagi anda yang merasa bosan dengan tampilan tersebut atau ingin memberi decak kagum bagi pengunjung. Anda bisa menggantinya dengan icon gambar sehingga jika ada pengunjung yang datang ke blog anda, tampilan kursornya akan berubah sesuai dengan icon yang anda gunakan.

Untuk mengubah tampilan kursor menjadi icon gambar, caranya sangat mudah. Berikut langkah-langkahnya:

1. Login ke Blogger. Masuk ke menu Design->Edit HTML
2. Cari kode </head>
3. Letakkan kode css berikut diatasnya

<style type="text/css">
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/cool1.gif"), auto;}
</style>

Keterangan:
Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url kursor yang ingin anda gunakan.

4. Setelah itu, simpan template anda. Selesai

Jika anda tidak memiliki icon kursor, coba kunjungi http://www.totallyfreecursors.com. Situs tersebut menyediakan ratusan hingga ribuan icon kursor menarik yang bisa anda pilih sesuai selera.

Selamat mengkreasi blog anda :)