Sunday, December 11, 2011

Cara Menambahkan Icon "Share To Social Bookmark" Di Tiap Postingan Blog Anda

Saya mulai membuat blog sejak tahun 2009. Kala itu saya sempat membuat 3 blog. 2 blog saya untuk jualan saya seputar handycraft dan 1 blog saya untuk sekedar iseng menampilkan resep-resep makanan yang saya buat. Karena kesibukan saya dengan jualan saya kala itu, blog masakan pun terabaikan dan hanya sempat posting 3 resep masakan.
Sekarang saya ingin mengaktifkan blog tersebut dan ingin selalu bisa share resep masakan dengan ibu-ibu ϑî jaringan sosial facebook.
Namun sayang seribu sayang, blog jaman dulu tidak seperti blog sekarang yang pasti ada icon "share to facebook" ϑî tiap halaman postingan, karena sudah bawaan dari bloggernya. Biasanya terletak ϑî atas komentar.
Setelah googling, akhirnya saya temukan trick untuk menambahkan icon "share to social bookmark" ϑî setiap postingan yang saya buat. Dan ini langkah-langkahnya :

1. Sign in dulu ke blogger untuk masuk ke dashboard blog anda.

2. Edit template blog anda, langkahnya :
¤ Untuk interface lama, anda bisa klik "Design" --> klik "Edit HTML" --> centang "Expand Widget Templates" --> lakukan poin 3
¤ Untuk interface baru, anda bisa klik "Template" --> klik "Edit HTML" --> akan muncul pesan, klik saja tombol "Lanjutkan" --> centang "Expand Template Widget" --> lakukan poin 3

Sebelumnya back up dulu HTML template lama anda sebagai cadangan jika terjadi hal yang tidak diinginkan.

3. Cari kode </head>, untuk mempermudah pencarian gunakan ctr F.

4. Copy kode HTML ϑî bawah ini, dan letakkan ϑî atas kode </head>

<script src='http://blogger-plugins.googlecode.com/files/bkmrk_hover.js'></script>
<style type='text/css'> .bookmark img { border: 0; padding:0px; } .bookmark a:hover { position: relative; top: 1px; left: 1px; } </style>

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

6. Copy kode ϑî bawah ini dan letakkan ϑî bawah kode <data:post.body/> :

<!-- Social Bookmarking Icons Start www.bloggerplugins.org-->
<span class='bookmark'><table align='left' border='0' cellpadding='0' width='100%'><tr><td style='vertical-align:middle' valign='middle' width='30%'><div expr:id='&quot;sbtxt&quot;+data:post.id'>Bookmark this post:<span style='display:none'><a href='http://www.bloggerplugins.org'>blogger tutorials</a> <a href='http://www.bloggerplugins.org/2007/09/social-bookmarking-elements-after-each.html'>Social Bookmarking Blogger Widget</a></span></div><script type='text/javascript'>showsbtext(&quot;sbtxt&quot; + &quot;<data:post.id/>&quot;,0)</script></td><td><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,19);&quot;' rel='nofollow' target='_blank'><img alt='StumpleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQE0xqeM1g2TfXU0TT0olRK8zrszzNgoqjDKlqYeKB0WA42Rd0oB-KoBWihgVftet7_mIKqrwr6dxu13aSTWv8sKgVkH0SrUzjdV9cDHc3-DrMbfxaWgZBMs83URlSRw60FRMFbo6OVdg/?imgmax=800'/></a> <a expr:href='&quot;http://digg.com/submit?phase=3&amp;url=&quot; + data:post.url' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,1);&quot;' rel='nofollow' target='_blank'><img alt='DiggIt!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF-Vpy6kLXGSJVRJBq3-lQrvTSvs81v-moUhiX7Wu0pRMj4_VI_2WsGVkfTVwIswIapgEZqS04yaj9zr1pn0PsxWTaCIz7daGGAMvtUgCikfr_Q_Ig23rUHUGCEDF-bnLBUiQF6X9jwNY/?imgmax=800'/></a> <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,2);&quot;' rel='nofollow' target='_blank'><img alt='Del.icio.us' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgijIsh39BmhG3UzGrDfZcHt0z10W2nbjyaJjrq9nz48TqJrcNBy7ScUM8r6UTAIdz5uBVW-027Dt9LLCR-LrF6ruxDDpsRb4K9sabJdH7Z0PdRcT8uJcXB_thyphenhyphenOuzQnEvd4vw51yRTmQ4/?imgmax=800'/></a> <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' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,3);&quot;' rel='nofollow' target='_blank'><img alt='Blinklist' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTYoZ_rcNruNNVbsYX7-oZRUIEYqJfAZhOFLBiRrWPtbXiQNuyea_m590JqzbTq0OQr0lhA0p6MqpvSHCIIs38MFPsjR7IKKEvT0N94EZI7o2Qz_lmfcfh6QeqLHzNuJ_TRgd5tRGOIR8/?imgmax=800'/></a> <a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,4);&quot;' rel='nofollow' target='_blank'><img alt='Yahoo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG4R2NRcFhg6ADgT2GbvT6T4zm8q2M_94CkiPrRFcd9w-773KtrIam3M1SnJKzZ8X0BGLUFliEG5jWJElR2N429bm0tC_yvUW-UG5yHE9qyMOEwCxXjUNE2NB5LYsj6gR10EdzfnOMF2c/?imgmax=800'/></a> <a expr:href='&quot;http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,8);&quot;' rel='nofollow' target='_blank'><img alt='Furl' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_GP4Bz3Z-_Cfm0Vo71isIoTPa0UdMxds-wNclU1aRCZ7NtSe9ZNHloT1Tk2DhMYffTvPV4yUXBPkgl4s5GrElqUYppJEoehiE6MTksqOmSURY09pRGZmrjR1MbzOWDp6vzO9bgc2_o8/?imgmax=800'/></a> <a expr:href='&quot;http://www.technorati.com/cosmos/search.html?url=&quot; + data:post.url' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,9);&quot;' rel='nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCfeKuLRddVde_VNaQqwHlAwSxj3qkXPL82YP4t_yTttcIsn5PgkA8krlu8pibs4L9PKDMGR46XDEa_MOeTAsEbjIcr8K9_7NTotZfhFI8AD0uctvN-nd7Q8RYWk02J_GhXb1YZsDWKx4/?imgmax=800'/></a> <a expr:href='&quot;http://www.simpy.com/simpy/LinkAdd.do?href=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,10);&quot;' rel='nofollow' target='_blank'><img alt='Simpy' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgnlb6kBHykf6E67dc8viJ4DiqK7uuFuMYJLdfSkYo_ACSAECU1unZNq8-hi-uX3IRcs7y2vFgd1pVwcHOV6mP2Jrt-jAFWnZj59us-1rGwwtL7jcjosOZR36ejbNfaKgeb7lNmT2No_c/?imgmax=800'/></a> <a expr:href='&quot;http://www.spurl.net/spurl.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,11);&quot;' rel='nofollow' target='_blank'><img alt='Spurl' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg8R7XMAK2tGjR7ReY7prNOdDXx0F1L1KSYV43qy1EACNeBrLEBBPFtA6lW3GB05lV4ckbWDDerigRGq5BO4g92eF-hlKsXP6D5prfswmfz9C2ml7nOAUzYcjt2-5kHSRlOp6aYzS6PqI/?imgmax=800'/></a> <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,17);&quot;' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNfCQI4-WzSUWI4Aw-AlrxMBxLniGldyWr5nXM45XMzspsMQQxzGOgybaKJTnn-1TlQ6kXmxgJHatcOCpgX9yeK_VelhSlEiCxjnzEs1IJII2d3drQ8AstfyasRQbizHWo80rUTeVY17I/?imgmax=800'/></a> <a expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot;+data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,20);&quot;' rel='nofollow' target='_blank'><img alt='Google' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirwTfE4C6Y5Qkv-2YS_4UGjwy1nFFMAnezDL8Def32DIon0o2dxNvEimTg2aCZ5r_ckTxcPENN_zFMl0asIj82GdnafGHBpk8ZJaKbWP-4qfIfCQoaiWVIDOUskYdpg08wLVaqWKpN1Yo/?imgmax=800'/></a>
<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
<a expr:href='&quot;http://api.tweetmeme.com/share?url=&quot;+data:post.url' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,21);&quot;' rel='nofollow' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyFSV7cHIs6iEJIxuYvWMLSUCtk2NdbEnjnXeExSid1Wz-_yDS6Ir-04Ybn2xlm5gj5qEHYFRKansnsmk4qpBZdRwWis5HxvswjJIiBxGzdv365IHIxf6HNBJaqgxBI1B9evNBS0qMbkw/?imgmax=800'/></a> <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,22);&quot;' rel='nofollow' target='_blank'><img alt='FaceBook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz7WdLhhxrnj19pNOCVYbl22v8jsFxNJszBr1dlfq0SpQYLDKxHCUOGTvnw_TaYUCIGkFE8sZeU49zOYPqTobjse0sgzke1VhjhzCV117sZqY_k6pz7CBdGdPSbGFdMCKb2Zye8osVhSo/s400/fbicon.png'/></a>
</td>
</tr>
</table><br/>
</span>
<!-- Social Bookmarking Icons End www.bloggerplugins.org-->

7. Lalu tekan tombol save template.

Sekarang lihat hasil edit HTML anda, klik tombol "lihat blog". Tampilannya akan seperti gambar 1b.

Ini contoh hasil editing saya ϑî blog resep masakan saya http://resepmasakanrumahan.blogspot.com
* Blog sebelum dilakukan edit HTML(gambar 1a)


* Blog sesudah dilakukan edit HTML (gambar 1b)

8. Jika anda merasa icon-icon tersebut terlalu banyak, anda bisa menampilkan yang anda butuhkan saja. Yang perlu anda lakukan hanyalah menyingkat kode pada poin 6. Saya memberikan contoh kalau anda hanya membutuhkan icon twitter dan facebook, maka kode ϑî poin 6 harus diganti sbb :

<!-- Social Bookmarking Icons Start www.bloggerplugins.org-->
<span class='bookmark'><table align='left' border='0' cellpadding='0' width='100%'><tr><td style='vertical-align:middle' valign='middle' width='30%'><div expr:id='&quot;sbtxt&quot;+data:post.id'>Bookmark this post:<span style='display:none'><a href='http://www.bloggerplugins.org'>blogger tutorials</a> <a href='http://www.bloggerplugins.org/2007/09/social-bookmarking-elements-after-each.html'>Social Bookmarking Blogger Widget</a></span></div><script type='text/javascript'>showsbtext(&quot;sbtxt&quot; + &quot;<data:post.id/>&quot;,0)</script></td><td>
<a expr:href='&quot;http://api.tweetmeme.com/share?url=&quot;+data:post.url' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,21);&quot;' rel='nofollow' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyFSV7cHIs6iEJIxuYvWMLSUCtk2NdbEnjnXeExSid1Wz-_yDS6Ir-04Ybn2xlm5gj5qEHYFRKansnsmk4qpBZdRwWis5HxvswjJIiBxGzdv365IHIxf6HNBJaqgxBI1B9evNBS0qMbkw/?imgmax=800'/></a> <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,22);&quot;' rel='nofollow' target='_blank'><img alt='FaceBook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz7WdLhhxrnj19pNOCVYbl22v8jsFxNJszBr1dlfq0SpQYLDKxHCUOGTvnw_TaYUCIGkFE8sZeU49zOYPqTobjse0sgzke1VhjhzCV117sZqY_k6pz7CBdGdPSbGFdMCKb2Zye8osVhSo/s400/fbicon.png'/></a>
</td>
</tr>
</table><br/>
</span>
<!-- Social Bookmarking Icons End www.bloggerplugins.org-->

Letakkan kode ini, ϑî bawah kode <data:post.body/>
Anda bisa membandingkan kode ϑî atas dengan kode yang ada ϑî poin 6. Saya hanya mengambil kode-kode bagian atas dan kode-kode yang berhubungan dengan link twitter serta facebook. Anda bisa memilih social bookmark yang anda mau dan mencoba seperti cara yang saya terapkan.

Ini contoh hasil editing saya ϑî blog sandal boneka saya http://sandalbonekalucu.blogspot.com
* Blog sebelum dilakukan edit HTML(gambar 2a)


* Blog sesudah dilakukan edit HTML (gambar 2b)

Kini, tiap postingan blog yang menarik bisa anda share dengan mudah ke social bookmark yang anda mau. Silahkan dicoba!! ^_^

Sumber kode HTML : http://www.bloggerplugins.org/2007/09/social-bookmarking-elements-after-each.html

Sent from my BlackBerry®
powered by Sinyal Kuat INDOSAT

1 comment: