Menambahkan Tombol Share This Post di Blogger

Artikel kamu ingin banyak di bagikan oleh para pengunjung ? nah widget ini merupakan salah satu fitur yang wajib bagi para pengguna blogger karena dengan menambahkan widget ini, pengunjung dapat membagikan artikel kamu ke berbagai macam situs sosial seperti facebook, twitter, dll. Lihat cara membuatnya di bawah ini.

1. Login ke Blogger.com

2. Klik Rancangan --> Edit HTML --> Centang Expand Widget Template.

3. Cari kode ini <data:post.body/>  dan kamu salin kode di bawah ini lalu kamu letakkan di bawah kode <data:post.body/>.

<b>Share this post :</b><br/>
<div class='spacer' style='border-top:solid 0px #DEDEDE;'/>
<table bgcolor='#ffffff' border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td valign='top' width='50%'><table border='0' cellpadding='0' cellspacing='0' width='222'>
<tr>
<td height='24' width='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw397CgQfC5ATG80Bk-3Gl-wlmIYNJh59Yc9Wf4kSLhlpsP4FTisuQn8cMlVFn3pgjMj7wiQUI0CDDCw1B_PAkHn-mSnMl8Lw_HhIiju9aOE27T_kXFYcpQFw_s7WFlsUzlXCNQeqWldA/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://www.facebook.com/sharer.php?&amp;u=&quot; + data:post.url' target='_blank'>Share on Facebook</a>
</td>
</tr>
<tr>
<td height='24'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyTBvpZ_tm-7Gv-Ct3iBXynqhkn3sKSr-Wbf2lu09QBwmc5LmgnMz079lBjAo798WzBDNdSdViIsn1b9s1ipTTtPjaUovrYIBefed4yeGODPfMjDttcZk-2_i8ro4xeNNoUnk1erqrY54/'/></td>
<td height='24'><a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'>Share on Twitter</a>
</td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFSOp9HY_mgcMHiEeteUxLIdo4LFxwAg6TPxUuMpvPuJqBOyvBGvSqd8mQWC86oQNBTFgJgnkk5IaXD4MQLkQQX-EOivQ64F482gX6mZWlYNhacLGf9oHEer3kL5Rqogoj3hSmrhYqQxk/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://www.stumbleupon.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Share on StumbleUpon</a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyiE7IbVHokft5NIFOVZxqv4MGYFsQE-nUX7jQe6Z5ePizqvFPit8CC-G1lcVtc8kyA2Tdh55G7Wtv-MypIQhdLsHPWg8GTMQYC-QF2GxA2eDhhYxKCFL1IeBQBg91gyPOikIevsMqjdw/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://del.icio.us/post?v=4&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Share on Delicious</a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjKlHHAu77LJcBB64UKNx6PWuMAzkfVa5gjBelU8CAMp2sML6g10lfcOqVN45peDFUQ7RZ8dZRDn_De5r2cjVV_abNm3DxkNJKwoNRAOy-tpww_hRjProuDVpV_crC-mkLnbkGE5PUwzg/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Share on Reddit</a>
</td>
</tr>
</table></td>
<td valign='top' width='50%'><table border='0' cellpadding='0' cellspacing='0' width='222'>
<tr>
<td height='24' width='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-q6hbzlcjRb-1TBQQNavuWHcAMlLwOEJ_Q7CGXXDlfTNamOxPDhZEffEe49vXhkGozMcG68fy0J9nSRWiXHsVoCh7ag8SEANu8vk5MKXY7w-YSoyjbRJ5mnZjG3rQhw1oe5UuoZWcyi4/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Share on Digg</a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJxAJJEWMgBvjd5lS70Efjp8Ln_b3-gWBVm8tPhPLT8X7GY3g2lw7xzXv_XiyKB93QXtuziLCMQei9600aq6NUVwJ2XC4QL_Ds5g3DDBuEn2AnLDUkhW2JIBzWa0cn112n26UtL6zOKG4/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://www.simpy.com/simpy/LinkAdd.do?href=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on simpy</a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3nlVkQ1VRcHpCUJ8hXUN1R_rIC3nLhQPZaJbw-bNhMBKyNz2tATDGqSpZp6LuQOx38_T-VUrln4OLkz1CV-RhhG4dFcfu9x-5GhKE-KZ82m8Rkp81xqtpLmOP8C3eYLWxfRlDKLhjhkw/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://technorati.com/signup/?f=favorites&amp;Url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Technorati</a></td>
</tr>
<tr>
<td height='24'><img alt='furl' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDWQNUKItFpTr_UnBbA00ZUvXcbQ1n_JLaFiaKMPUxwN17NxZlw7BQkHVYuQdMXfVPbpHEQV-arZe8YXHM6X9el-TPln7TipM5QkQmSwgHyyLV2w37TszN1NYJvmPokRl_RQ1gESxoo08/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://www.furl.net/storeIt.jsp?&amp;u=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on furl</a>
</td>
</tr>
<tr>
<td height='24'><img alt='Feeds RSS' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGEtqu9imjJSysokEnlnsjklz5mtAXrv109SOgF6ZYV545HE50E3jt8uukJx4o-no5tG_t_7-f5xCUu2QhYUBUSpHtTr1fmbM-xrgCzSqpdFMrU5mk2piYhB3t1vSQ6rIMy3EJWkwRPM4/' width='16'/></td>
<td height='24'><a href='http://feeds2.feedburner.com/bloggertricksandtoolz' target='_blank'>Subscribe to Feeds RSS</a>
</td>
</tr>
</table></td>
</tr>
</table>

4. Simpan dan Lihat hasilnya, mudah bukan ?

Read more »

Menambahkan Widget Popular Post dengan Efek Zoom

Jika kalian pernah menaruh widget popular post yang secara default dari blogger terlihat biasa-biasa saja, maka kamu boleh menggunakan widget di bawah ini agar terlihat lebih menarik. Widget ini fungsinya untuk menampilkan artikel yang paling banyak di lihat pengunjung blog kamu namun dengan efek zoom yang menakjubkan. Lihat cara membuatnya di bawah ini :

1. Masuk ke Blogger.com

2. Klik Rancangan --> Edit HTML dan kamu cari kode ]]></b:skin> lalu kamu salin kode di bawah ini dan tempel kan di atas kode ]]></b:skin>.

<style type='text/css'>
.PopularPosts .item-title{display:none}
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>

4. Simpan template namun belum selesai,

 

5. setelah itu kamu klik tab Elemen Laman --.> Tambah Gadget --> Popular Post dan atur widget-nya sesuai keinginan kamu.

 

6. Simpan Template dan Lihat hasilnya...

Jika ada komentar tentang artikel ini, jangan ragu untuk bertanya, saran, dan kritik dan bisa kamu tulis komentar kau di dalam kotak komentar yang ada di bawah :)

Read more »