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

Tidak terasa sudah satu minggu saya tidak update blog ini. Hal ini dikarenakan saya sedang sibuk menata ulang konten di blog ini dan menambah beberapa tool ke dalamnya. Salah satunya adalah navigasi Breadcrumb.

Breadcrumb merupakan salah satu plugin milik Wordpress yang berfungsi untuk memudahkan pembaca dalam menelusuri halaman blog. Jadi ibarat peta atau sitemap dalam blog.

Plugin ini biasanya diletakkan diatas halaman posting. Contoh tampilannya seperti ini:

Selain dapat memudahkan pembaca dalam mengetahui lokasi halaman yang sedang ditelusuri, plugin ini juga dapat mengoptimasi halaman blog di search engine (SEO). Bahkan dianjurkan langsung oleh Google lho. Tidak percaya? Berikut adalah kutipan yang saya ambil dari ebook 'Google Search Engine Optimization Starter Guide'.


Ingin mengetahui lebih banyak teknik-teknik SEO dalam ebook Google Search Engine Optimization Starter Guide? Silahkan baca disini.

Ok saya rasa cukup penjelasannya, untuk pengguna wordpress anda bisa download plugin Breadcrumb disini. Sedangkan untuk pengguna blogger ikuti langkah-langkah berikut untuk memasang navigasi breadcrumb:

1. Buka Blogger. Masuk ke menu Design -> Edit HTML

2. Beri centang pada 'Expand Widget Templates'.

3. Setelah itu, cari kode <b:if cond='data:post.title'>

4. Letakkan kode berikut dibawah <b:if cond='data:post.title'>

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<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 != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>

5. Selanjutnya cari kode ]]></b:skin>

6. Letakkan kode css berikut diatasnya

.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}

7. Jika sudah simpan template anda dan lihat hasilnya.

Semoga bermanfaat :)

Selain facebook like yang sudah pernah saya bahas sebelumnya, Facebook juga memperkenalkan widget lain yang cukup terkenal yaitu Facebook share.

Sesuai namanya, widget ini berguna untuk membagikan sebuah halaman situs ke profil facebook.

Lalu apa bedanya antara Facebook like dan Facebook share?

Secara umum kedua widget tersebut sama-sama berguna untuk membagikan sebuah halaman situs ke Facebook. Sebagai contoh anda menyukai postingan ini maka anda bisa membagikan halaman ini ke teman facebook anda dengan menekan tombol facebook like atau facebook share.

Nah yang berbeda adalah cara penyajiannya. Jika anda membagikan melalui facebook like maka halaman ini akan muncul pada menu 'recent activity' sedangkan dengan facebook share halaman akan muncul pada menu 'News Feed'.

Agar lebih jelas perhatikan screenshot berikut:

Contoh tampilan posting yang dibagikan melalui facebook like


Contoh tampilan posting yang dibagikan melalui facebook share


Ok... sudah jelas ya perbedaannya. Sekarang mari kita pelajari cara memasang tombol facebook share dalam postingan blog. Untuk cara memasang tombol facebook like bisa anda baca disini.

1. Buka blogger. Masuk ke menu Design->Edit HTML

2. Beri centang pada 'Expand widget templates'

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

4. Kalau anda menemukan dua kode <data:post.body/> maka pilih yang pertama

5. Letakkan salah satu kode tombol facebook share berikut ini dibawah kode <data:post.body/> jika anda ingin memasang tombol fshare dibawah postingan atau letakkan diatas <data:post.body/> jika anda ingin memasang diatas postingan.

Tombol Fshare tanpa counter



Kode:

<a name="fb_share" type="button" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Tombol Fshare dengan counter diatas






Kode:

<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Tombol Fshare dengan counter disamping



Kode:

<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

6. Jika sudah simpan template anda dan lihat hasilnya.

Berkat fitur Show your face dari Blogger kini kotak komentar blogger sudah dapat menampilkan gambar atau foto dari pengunjung yang memberi komentar di blog.

Untuk menampilkan avatar, caranya sangat mudah. Anda cukup mengaktifkannya dengan masuk ke menu Setting -> Comments lalu pada bagian "Show profile images on comments" pilih YES. Beres..

Hanya saja cara ini hanya berlaku untuk template tertentu saja khususnya template yang disediakan oleh blogger dan hasilnya kurang optimal dimana avatar hanya muncul jika pengunjung memberi komentar dengan blogger id. Sedangkan yang berkomentar dengan openid atau anonymous, avatar tidak muncul.


Meskipun demikian, anda juga dapat memunculkannya dengan melakukan sedikit pengeditan pada kode template anda sehingga hasilnya menjadi seperti ini.



Untuk mengimplementasikannya:

1. Pertama-tama masuk ke menu Setting->Comments. Pilih lalu YES pada bagian "Show profile images" dan tekan Save.

2. Setelah itu, masuk ke menu Design-> Edit HTML

3. Beri centang pada "Expand Widget Templates". Agar lebih aman backup template anda.

4. Cari kode berikut:

<dl id='comments-block'>

5. Ganti kode tersebut dengan kode ini

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

6. Setelah itu cari kode berikut

<a expr:name='data:comment.anchorName'/>

7. Ganti kode tersebut dengan kode berikut ini

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

8. Setelah itu tambahkan kode css berikut diatas ]]></b:skin>

#comments-block .avatar-image-container img {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1nFYiYTM57blLwmE9XyaUItDd2rAKGh89yNVZfrCL-faKAyn8GApsJgRLfXRGzD7TnM_hQ1XngFWz2cSJ78aJmjCgoBBWLG4WMP64DSF-4Hjl2CH6WZBtJzW7E0ChUfP7C4Y5UvgsnIFP/s1600/oavatar.jpg) no-repeat left top;
width:32px;
height:32px
}

Keterangan:
Teks yang berwarna merah merupakan alamat gambar untuk avatar anonymous. Sedangkan teks yang dicetak tebal merupakan ukuran avatar. Anda bisa ganti sesuai keinginan.

9. Kalu sudah simpan template anda. Selesai


Selamat mencoba. Semoga berhasil

Pada postingan ini saya akan menunjukkan cara memasang opsi reply di form komentar blogger. Seperti yang kita ketahui, tool ini sangat berguna untuk mempermudah pemilik blog maupun pengunjung dalam membalas komentar.


Kalau pada platform Wordpress tool ini sudah otomatis terpasang dalam form komentarnya. Lain halnya dengan platform blogger. Meskipun demikian, anda juga dapat memasang opsi reply di blog blogspot anda hanya dengan sedikit penambahan kode pada template blog anda.

Bagi anda yang ingin mengetahui bagaimana cara kerjanya, langsung saja praktek di blog ini karena saya sudah memasang opsi reply di form komentar.

Nah bagi anda yang tertarik untuk memasang opsi reply di form komentar blog anda. Berikut tutorialnya:

1. Login ke menu dashboard Blogger. Buka menu Design -> Edit HTML

2. Beri centang pada 'Expand Widget Templates'

3. Cari kode

<data:commentPostedByMsg/>

atau

<data:comment.timestamp/>

4. Letakkan kode berikut diatasnya

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=BloggerIdAnda&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=yes, width=400, height=450&quot;); return false;'>[Reply Comment]</a></span>

Ganti tulisan yang berwarna merah dengan id blog anda. Untuk mengetahui id blog anda klik menu Design lalu perhatikan digit angka pada address bar anda.


Jika anda ingin mengganti kata reply yang muncul dalam form komentar, edit tulisan yang berwarna hijau.

5. Kalau sudah simpan template anda dan lihat hasilnya.

Agar lebih menarik anda juga bisa mengganti tulisan reply dengan icon gambar. Caranya, ganti tulisan berwarna hijau dengan <img src='url-gambar'/>

Jangan lupa ganti url-gambar dengan alamat icon gambar anda. Misal: http://lh4.ggpht.com/_15FopxVONSo/TEF6-vtUqHI/rcwCiaUc-Os/reply.png

Sebagai contoh, berikut saya sediakan beberapa model icon reply. Kalau tertarik, silahkan upload icon gambar tersebut ke image hosting anda atau copy saja alamat gambar icon disamping untuk menggunakannya.


--> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk01crBLgTKLhRmdsMF-AeYRMVcNOGiJbD_T0ZqWUoIVe_3RCUCTdYRKVnsLLOvnuTRwaeQA1i3IZf_fb3aUyIQwjbgsLTMNjSyR3gWnNuByvLGlEubBC07_qdkf-NhJ-yvlsOmgfCNdfe/

--> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZvLCJwXY8o5WhYgbOoCRHxZMiEgIJMfUTVEOYEqhne7drwp1smBaz_FYQQ40R7BwLiwsXTfcf-tetnvEi20LKjsBltAwgiYr8tJgxHS2KGXKaImfKkbdTo57VXnM1FdIqNOhjMAlxiKto/

--> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcWjrAynHCKTdj6G4y-hx0_eiqEVPlSqSjFazCKFX_2YBEI9aUjntFXtM2Y_K0GarenLwPzhp-qFem6hzU05YmWcpEvcUcZPh61_1DjiSEobY4d7miDWvA6ljvkM1_BuEmhtsMfnMfmT76/

--> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4XPWvMEmWNBwbzvi31E7-JdSeCStDslEmKTG-Eua4l7W_RrOnwTO1WuJgmVbaWwGeJH1Wft4E64H3Ce2FDunCaIFClQskAPqsZD2Iu3M0Gra6667EGTL13VNp5CHnLOUZRdz_T-C13-Nt/

--> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTTi7hyphenhyphenctfuKtxrIUFkfCG2m2nq_Jc_mp0lXAumgaP8JqQ-ZgAkauReySiiVhK6v1pcYBkQvKFkKaRSQa5kAC6DLYSbUuryGHMQzKwQSI57_6o71rRVSKriHXlqMLXPCrel53XMJf0BaCy/



Selamat mencoba. Semoga bermanfaat.

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.

Beberapa waktu yang lalu saya pernah mengulas tentang cara mempromosi blog dengan memasang feed blog di Facebook.

Dengan cara ini maka semua postingan blog anda akan muncul di halaman profil Facebook sehingga dapat dinikmati oleh teman facebook anda.

Pada postingan ini saya akan membahas tentang teknik lain untuk menyebarkan artikel blog anda di Facebook yaitu dengan memasang tombol like Facebook pada postingan blog anda.

Keuntungan memasang tombol like ini adalah pembaca dapat dengan mudah berbagi postingan yang mereka sukai kepada teman facebook mereka hanya dengan satu klik. Dan sebagai pemilik blog, anda juga mendapat keuntungan berupa tambahan trafik dari pembaca yang mengelink artikel anda di profil Facebook mereka.

Nah bagi anda yang tertarik memasang tombol like ini, silahkan ikuti langkah- langkah dibawah ini:

1. Buka Blogger. Masuk ke menu Design -> Edit HTML

2. Beri centang pada "Expand Widget Templates"

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

4. Jika anda menemukan dua kode <data:post.body/> maka pilih yang pertama

5. Letakkan kode berikut ini dibawah <data:post.body/> jika anda ingin memasang tombol like dibawah posting atau letakkan diatas <data:post.body/> jika anda ingin memasang tombol like diatas posting

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' height='30' scrolling='no' style='border:none; overflow:hidden; '/>

6. Lalu Save template anda.

Hasilnya akan seperti ini





Kalau anda ingin membuat tombol like dalam bentuk ini




maka ganti standard dengan button_count

Anda juga dapat mengganti warna background tombol menjadi gelap dengan mengganti light menjadi dark.


Selamat mencoba. Semoga bermanfaat...

Beberapa waktu yang lalu saya telah menjelaskan cara membuat link read more atau baca selengkapnya dalam postingan blog. Ternyata ada sobat blogger yang bertanya kepada saya apakah bisa link read more diganti dengan gambar? Jawabannya tentu saja bisa dan sangat mudah.

Nah bagi sobat lain yang kebetulan juga ingin tahu bagaimana cara mengganti link read more menjadi icon gambar langsung saja ikuti tutorial berikut ini:

1. Pertama-tama, upload icon read more yang ingin anda gunakan ke situs image hosting. Setelah itu, catat alamat url gambarnya. Contoh https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinAdKZjbdJgTX1UvbE2MhDkYZrO6pOzdd1b6fGyLc6Dpuk3X6B1zT2BsrjQDldw8gkQLtKXTSurSW9LCj4_kiUrC0FH-LomPpTuLIw8UfSMF4J-jDUsZrBmpRqVJtQcGe8K_E_ugZLRZLt/

2. Login ke Blogger. Klik Design->Edit HTML
3. Beri centang pada 'Expand Widgets Templates'
4. Cari kode seperti ini

<span id='showlink'>
<a expr:href='data:post.url'>teks read more anda</a>
</span>

5. Ganti tulisan yang dicetak tebal dengan kode berikut

<img src="alamat-gambar-anda" />

Ingat, ganti teks berwarna merah dengan alamat url gambar anda yang sebenarnya.

6. Jika sudah, klik tombol Save. Selesai. Mudahkan? :)

Selamat mencoba. Semoga bermanfaat.

Seperti yang kita ketahui, social bookmarking mengap sistem voting pada artikel yang disubmit. Semakin banyak orang yang memberi voting pada sebuah artikel yang disubmit ke situs social bookmarking semakin besar peluang artikel tersebut nongol di halaman depan situs social bookmarking. Sebagai contoh saya ambil screenshot halaman depan dari salah satu situs social bookmarking yaitu Digg.


Bisa anda lihat, Digg menempatkan 10 artikel yang mendapat voting terbanyak dibagian sidebar situsnya. Bayangkan jika artikel anda bisa nongol di bagian tersebut. Ini tentu akan memberikan limpahan ke blog anda.

Meskipun tidak mudah untuk mendapat posisi 10 besar mengingat ada ribuan artikel yang disubmit ke situs social bookmarking setiap harinya namun setidaknya dengan mendapat banyak voting, artikel anda akan dianggap bermanfaat oleh pembaca sehingga pembaca tidak akan segan untuk mengunjungi blog anda untuk membaca lebih lanjut.

Nah salah satu cara untuk mendapat banyak voting adalah dengan memasang icon social bookmarking di bawah posting blog. Dengan demikian, jika ada pembaca atau pengunjung blog yang menyukai artikel anda maka mereka dapat membookmark atau memberi voting pada artikel anda melalui icon social bookmarking tersebut.

Untuk memasang icon social bookmarking di bawah posting blog, ikuti langkah-langkah berikut:

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

2. Beri tanda centang pada 'Expand Widget Templates'

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

4. Kalau anda menemukan dua kode <data:post.body/> maka letakkan kode berikut dibawah kode <data:post.body/> yang pertama.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Stumbleupon start-->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Stumble' src='http://icon URL'/></a>
<!-- Stumbleupon end-->
<!-- Delicious start-->
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Delicious' src='http://icon URL'/></a>
<!-- Delicious end-->
<!-- Google Buzz start-->
<a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Google Buzz' src='http://icon URL'/></a>
<!-- Google Buzz end-->
<!-- Reddit start-->
<a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Reddit' src='http://icon URL'/></a>
<!-- Reddit end-->
<!-- Technorati start-->
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' target='_blank'><img alt='Technorati' src='http://icon URL'/></a>
<!-- Technorati end-->
<!-- Yahoo Buzz start-->
<a expr:href='&quot;http://buzz.yahoo.com/buzz?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Buzz it' src='http://icon URL'/></a>
<!-- Yahoo Buzz end-->
<!-- Digg start-->
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg it' src='http://icon URL'/></a>
<!-- Digg end-->
<!-- Designfloat start-->
<a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Designfloat' src='http://icon URL'/></a>
<!-- Designfloat end-->
<!-- Diigo start--&gt;
<a expr:href='&quot;http://www.diigo.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Diigo' src='http://icon URL'/></a>
<!-- Diigo end-->
<!-- Mixx start-->
<a expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Mixx' src='http://icon URL'/></a>
<!-- Mixx end-->
<!-- Meneame start-->
<a expr:href='&quot;http://meneame.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Meneame' src='http://icon URL'/></a>
<!-- Meneame end-->
<!-- Blinklist start-->
<a expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Blinklist' src='http://icon URL'/></a>
<!-- Blinklist end-->
</b:if>

Catatan:
Ganti teks yang berwarna merah dengan url icon social bookmarking yang ingin anda gunakan

Jika ada situs social bookmarking tertentu yang tidak ingin anda gunakan maka hapus saja kodenya. Contoh anda tidak ingin memasang icon Diigo maka hapus kode seperti ini:

<!-- Diigo start--&gt;
<a expr:href='&quot;http://www.diigo.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Diigo' src='http://icon URL'/></a>
<!-- Diigo end-->

5. Jika sudah simpan template anda. Selesai

Selamat mencoba. Semoga bermanfaat..!

Pingin memberi signature atau tanda tangan pada postingan anda agar tampilannya terlihat lebih profesional? Kalau iya, caranya sangat mudah. Hanya dengan beberapa langkah saja maka signature anda akan muncul pada semua postingan anda.

1. Pertama anda harus menyiapkan gambar signaturenya terlebih dahulu. Kalau belum punya, anda bisa membuatnya dengan program pengolah gambar seperti Paint, Photoshop, Coreldraw, dll. Kalau mau yang lebih mudah. Gunakan layanan pembuat signature online di mylivesignature.com.

2. Jika sudah, upload gambarnya ke layanan image hosting seperti Photobucket lalu copy alamat URL gambarnya.

3. Buka blogger. Klik menu Design -> Edit HTML

4. Beri tanda centang pada "Expand Widgets Templates"

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

6. Jika anda memasang kode read more biasanya ada dua kode <data:post.body/>. Letakkan kode berikut pada kode yang pertama.

<p><div align="left"><img src="alamat url gambar"/></div></p>

Ganti tulisan yang dicetak tebal dengan alamat url gambar anda. Contohnya: http://i37.photobucket.com/albums/e74/mrphoto16/sample-sign.png

Left menunjukkan posisi signature. Anda bisa mengganti posisinya menjadi center atau right sesuai keinginan anda.

7. Kalau sudah, Save Template. Selesai

Contoh hasilnya bisa anda lihat disini. Selamat mencoba..

Ketika anda mencari konten melalui search box maupun label atau kategori. Maka biasanya akan muncul kotak kecil yang berisi Showing Post With Label seperti gambar dibawah ini.


Jika anda merasa terganggu dengan keberadaan kotak tersebut dan sekaligus untuk meringankan loading blog. Anda bisa menghilangkannya dengan cara berikut:

1. Masuk ke menu Design -> Edit HTML
2. Beri tanda centang pada "Expand Widgets Templates"
3. Cari kode dibawah ini:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

4. Ganti kode diatas dengan kode dibawah ini

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

5. Kalau sudah klik Save Template.

6. Selesai. Silahkan lihat hasilnya.

Semoga bermanfaat

Biasanya jika ada pengunjung yang mencari artikel diblog kita baik dengan label maupun dengan search box atau kotak pencari. Maka yang muncul adalah judul posting beserta isinya. Coba anda bayangkan jika konten yang mengandung keyword yang ingin dicari pengunjung mencapai 50-100 artikel. Berapa lama waktu yang diperlukan pengunjung untuk mencari topik yang diinginkan. Apalagi topik yang diinginkan berada dihalaman paling belakang bisa-bisa pengunjung akan kabur sebelum menemukan kontennya.

Dengan demikian maka anda perlu mengatasinya dengan cara menampilkan judul posting saja pada halaman pencarian. Contohnya seperti gambar disamping. Yang muncul hanya judul posting saja.

Ok lalu bagaimana cara untuk mengimplementasikannya?

1. Login ke blogger. Buka menu Edit HTML
2. Backup template anda lalu beri tanda centang pada "Expand Widget Templates"
3. Cari kode yang dibawah ini

<b:include data='post' name='post'/>

4. Ganti kode diatas dengan kode dibawah ini

<b:if cond='data:blog.homepageUrl
!= data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'><data:post.title/></a>
<br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

5. Jika sudah klik Save Template. Silahkan dicoba hasilnya

Memiliki beberapa blog dalam satu akun merupakan hal yang biasa bagi setiap blogger. Sebab untuk membuat blog itu mudah dan tidak dibatasi jumlahnya. Jika anda membuat banyak blog dalam satu akun maka semua blog tersebut akan memiliki author name yang sama. Bagi anda yang belum tahu apa itu author name, Author name adalah nama penulis konten atau orang yang memiliki blog tersebut.


Nah kadangkala ada blogger yang enggan untuk menunjukkan indentitas aslinya. Kalau begitu berarti sobat harus mengganti namanya dengan nama lain. Lalu apakah bisa? Tentu saja bisa. Bahkan sangat mudah. Berikut caranya:

1. Login ke blogger
2. Pada menu Design -> Edit HTML
3. Beri tanda centang pada "Expand Widget Templates"
4. Cari kode dibawah ini

<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>

Ganti tulisan yang dicetak merah dengan nama yang ingin anda gunakan. Contohnya

<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>Admin
</b:if>

5. Kalau sudah klik Save Template.

6. Selesai. Silahkan lihat hasilnya.

Label cloud ini dikembangkan oleh phydeaux3. Sesuai dengan namanya, widget ini berhubungan dengan label sehingga bagi anda yang tidak memasang widget label pada blog anda. Cara ini tidak bisa digunakan.

Untuk label standar blogger, biasanya jumlah postingan yang termasuk dalam kategori tersebut akan tertera dalam bentuk angka yang terletak disampingnya. Tetapi beda dengan label cloud, yang menggambarkan jumlah postingan dalam bentuk ukuran font labelnya. Jadi semakin banyak postingan yang termasuk dalam kategori tersebut semakin besar pula ukuran fontnya. Sehingga terlihat lebih menarik dan tidak monoton. Selain itu, cara ini juga cocok untuk ukuran sidebar yang lebar karena susunannya mengurut ke samping.

Nah bagi anda yang ingin memasang label cloud ini, berikut adalah langkah-langkahnya:

1. Seperti biasa login ke Blogger. Pada menu Layout -> Edit HTML
2. Backup template anda
3. Beri tanda centang pada "Expand Widget Templates"
4. Letakkan kode dibawah ini diatas kode ]]></b:skin>

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

5. Setelah itu, letakkan kode dibawah ini diatas kode </head>

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20; /* Ukuran maksimal font label*/
var maxColor = [0,0,0]; /* Warna font besar */
var minFontSize = 10; /* Ukuran minimal font label */
var minColor = [179,179,179]; /* Warna font kecil */
var lcShowCount = false;
</script>

6. Lalu cari kode dibawah ini.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

7. Ganti kode diatas dengan kode dibawah ini

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point --------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

8. Kalau sudah, klik Save Template. Selesai

Jika sobat ingin memodifikasi ukuran dan warna font labelnya. Silahkan arahkan perhatian anda pada kode seperti ini

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20; /* Ukuran maksimal font label*/
var maxColor = [0,0,0]; /* Warna font besar */
var minFontSize = 10; /* Ukuran minimal font label */
var minColor = [179,179,179]; /* Warna font kecil */
var lcShowCount = false;
</script>

Ganti tulisan yang berwarna merah sesuai keinginan. Selamat mencoba..!

Dengan memasang emoticon di kotak komentar maka para komentator akan lebih mudah untuk mengekspresikan perasaannya. Selain itu, juga akan membuat blog kita lebih ekspresif bukan?

Nah untuk memasang emoticon dikotak komentar. Anda harus men-setting kotak komentar agar muncul dibawah postingan terlebih dahulu. Contohnya seperti di blog ini. Jika kotak komentar anda berada dalam halaman pop-up seperti gambar dibawah ini maka anda tidak bisa memasang emoticon pada kotak komentar.


Bagi anda yang kotak komentarnya berada pada halaman pop-up. Silahkan diatur dulu agar kotak komentarnya muncul di bawah postingan. Kalau anda tidak tahu caranya, baca membuat kotak komentar tampil dibawah postingan.

1. Jika sudah klik Design -> Edit HTML
2. Beri tanda centang pada "Expand Widget Templates"

3. Cari kode </body>
4. Lalu letakkan script dibawah ini diatas kode </body>

<script src='http://www.hermanblog.googlecode.com/files/yemoticon.js' type='text/javascript'/>

5. Trus cari kode berikut ini:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if>
</b:if>
</p>

6. Kalau tidak sama, cari yang paling mendekati. Kemudian letakkan kode berikut ini dibawah <p class='comment-footer'>

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))
</b>

7. Klik Save Template.

8. Selesai. Silahkan dites di kotak komentar anda. Jika berhasil maka akan muncul icon-icon lucu di kotak komentar anda seperti ini:


Selamat mencoba..

Ada banyak cara untuk meningkatkan clickrate iklan ppc misal dengan mengatur warna iklan, menghilangkan garis tepi, menggunakan format tertentu dan menempatkan iklan di tempat yang mudah dilihat oleh pengunjung.

Salah satu tempat yang paling mudah dilihat pengujung tentu saja adalah area posting. Karena pada umumnya pengunjung yang datang ke blog adalah untuk membaca artikel maka menempatkan iklan di area posting merupakan pilihan terbaik.

Pada postingan ini saya akan menunjukkan kepada anda cara memasang iklan PPC diatas dan dibawah posting.

1. Pertama-tama, siapkan kode iklan yang mau dipasang. Iklannya bisa dari Google adsense, Adsensecamp, Kliksaya, Adbrite, Bidvertiser, dan lain-lain.

2. Setelah itu encode kode tersebut agar bisa muncul dalam postingan.

3. Untuk melakukannya, buka http://centricle.com/tools/html-entities/

4. Masukkan kode iklan kedalam kotak lalu tekan Encode

5. Setelaj itu, buka blogger. Masuk ke menu Design -> Edit HTML

6. Beri centang pada "Expand Widget templates"

7. Cari kode berikut

<data:post.body/>

8. Jika anda menemukan dua kode <data:post.body/> maka pilih yang pertama.

9. Letakkan kode PPC yang sudah di encode tadi diatas <data:post.body/> bila anda ingin memasang iklan PPC diatas postingan atau letakkan dibawah <data:post.body/> bila anda ingin memasang iklan PPC dibawah postingan.

10. Save template dan lihat hasilnya.

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.

Saya yakin teman-teman sudah tahu apa itu kotak komentar. Karena ini merupakan sarana untuk berkomunikasi yang disediakan oleh Blogger.

Sebelumnya Blogger hanya menyediakan fasilitas kotak komentar secara pop-up. Jadi setiap kali pembaca ingin memberi komentar mereka akan dibawa ke halaman pop-up. Cara ini dirasa kurang nyaman dan kurang efektif bagi para pembaca yang ingin memberi komentar.

Mungkin karena itu, maka Blogger kini meluncurkan fitur barunya yang memungkinkan kotak komentar tampil dibawah postingan, seperti yang terdapat pada wordpress.

Untuk membuatnya. Caranya sangat mudah:

1. Login ke Blogger. Klik menu Settings -> Comments

2. Pada bagian "Comment Form Placement" pilih Embedded below post lalu klik Save Settings

3. Klik View Blog lalu klik salah satu postingan Anda untuk melihat apakah kotak komentarnya sudah muncul dibawah postingan atau belum. Kalau belum, ikuti langkah-langkah dibawah ini:
1. Klik menu Design -> Edit HTML
2. Beri tanda centang pada "Expand Widget Templates"

3. Cari kode seperti yang dibawah ini:

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>

4. Jika sudah ketemu. Hapus kode diatas lalu ganti dengan kode yang dibawah ini:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/> <b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</b:if></b:if> </p> </b:if>

5. Klik Save Template lalu klik View Blog untuk melihat hasilnya.

Selamat Mencoba. Semoga berhasil..

Bagi para Blogger, pasti pernah melihat icon berbentuk tang dan obeng pada template Anda. Yang tampilannya seperti ini:

Ini merupakan sebuah tool yang berfungsi untuk mengedit widget secara langsung pada halaman blog. Sehingga Anda tidak perlu lagi masuk ke menu Page Elements untuk melakukan pengeditan. Dengan demikian Anda bisa lebih mudah untuk memanage blog Anda

Sebenarnya tool ini, hanya akan muncul jika kita login ke akun blogger. Jadi jika kita masuk ke blog kita tanpa login ke blogger maka icon ini tidak akan muncul begitu juga pengunjung yang mengunjungi blog kita.

Tapi bagi Anda yang merasa kurang nyaman dengan tool ini anda bisa menghilangkannya dengan cara berikut:

1. Login ke Blogger. Klik Design -> Edit HTML.

2. Lalu backup template dengan cara klik pada Download Full Template
3. Jika sudah, beri centang pada "Expand Widgets Templates"

4. Tekan Ctrl+F untuk membuka kotak Find

5. Ketikkan kode <b:include name='quickedit'/> kedalam kotak lalu klik Next

6. Jika sudah ketemu, hapus kode tersebut. Setiap kode <b:include name='quickedit'/> mewakili satu icon tang dan obeng jadi jika template Anda terdapat lebih dari satu icon tang dan obeng. Gunakan Ctrl+F untuk mencarinya.

7. Kalau sudah menghapus semuanya. Klik Save Template lalu klik View Blog untuk melihat hasilnya. Sekarang semua icon quick edit yang berbentuk tang dan obeng sudah tudak ada lagi. Jika masih ada, mungkin masih ada kode <b:include name='quickedit'/> yang belum terhapus. Coba cari kembali dengan cara diatas.

Catatan:
Cara diatas akan menghapus icon tang dan obeng secara permanen. Jadi jika Anda ingin menampilkan kembali iconnya. Upload kembali template yang sudah diback-up sebelumnya.

Selamat Mencoba