Blog Geisha

Pada tutorial kali ini Kang Koisine akan membahas tentang penerapan Social Bookmark pada blogspot dengan artikel yang berjudul "Cara Memasang Social Bookmark di Bawah Judul Artikel/Posting". Rasanya sangat kurang sekali jika blog tidak dilengkapi dengan aksesoris yang satu ini, sebut saja Social Bookmark. Social Bookmark ini sangat penting pada blog, selain membagikan artikel ke beberapa jejaring sosial, Social Bookmark ini juga mengaruh terhadap rank atau serp, Mengapa ? Kita ambil salah satu contoh jejaring sosial facebook. Umumnya artikel pada blog kadang kala kita membaginya ke facebook, dan siapa saja yang melihat artikel yang telah kita bagikan ke facebook berarti mereka akan mengklik artikel tersebut apabila artikel menarik dan buat penasaran, nah disinilah letak seonya, karena artikel yang diklik itu melalui facebook dan pastinya facebook mempunyai rank yang tinggi yang bisa membantu blog kita.

Social Bookmark yang akan saya bagikan ini tampilannya menarik dan sama seperti apa yang kalian lihat di bawah judul artikel, dan sub social bookmark ini meliputi facebook share, twitter share, digg share, stumble share, dll. Sebelumnya, Social Bookmark ini telah diterapkan oleh O-om.com yang diletakan sama di bawah judul artikel, apa kalian tertarik dan ingin mempraktekannya ?

Untuk kalian yang ingin tahu tampilan Social Bookmarknya, lihat gambar di bawah ini,

Kita mulai dengan langkah awal,

• Login ke BLOGGER kalian,
• Masuk ke "Edit Template",
• Beri centang "Expand Widget Templates"
• Gunakan ctrl-F untuk mencari kode di bawah ini,

]]></b:skin>

• Letakan kode CSS berikut ini sebelum/diatas kode di atas,

/* SET FACEBOOK LIKE AND BOOKMARK ON POST */
.icn-bm {float:right; padding-top:9px; border:none; padding-right:10px}
.icn-bm  h4{color:#333; font-family:'Helvetica Neue',Arial,sans-serif; font-size:16px !important; font-weight:bold}
.icn-sh{padding-top:2px}
.icn-sh img{width:16px; height:16px; border:none; margin:0 3px}
.fb-like{background:#FFFFD7;padding-left:10px; background-image:none; border:1px solid #FFFF00; margin-bottom:15px; padding-top:10px}
.fb-like iframe{margin-bottom:5px}
.fb-like h4{color:#333; font-family:'Helvetica Neue',Arial,sans-serif; font-size:16px !important; font-weight:bold}

•  Gunakan ctrl-F lagi untuk mencari kode di bawah ini,

<data:post.body/>

• Letakan kode HTML di bawah ini sebelum kode di atas,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
	
	<div class='icn-bm '>
	<!--FECEBOOK LIKE AND SOCIAL BOOKMARK-->
	<h4>Do you want to share?</h4> 
	<div class='icn-sh'>
<a href='/feeds/posts/default/' rel='nofollow' target='_blank' title='Subscribe to RSS'><img alt='' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmco8at3fEtChomfTo0DomPETW4BeOxYN_88vbJym4v3fjkZ2EuzXY9mUv-n2q3VGE89RDU9pDO3Efz2c4Yzx_Gf1Yx4LgN-K6tSp52TlzpdwUxnH2E8KRD0zazilPqeLcc-0261Z30k0/s400/feed.png' width='16'/></a>
<a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Facebook'><img alt='' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEVAwI6HPvljl5LLqHO_XMvRIwVnCBRadpdmXfLXcbkx5KnCkCQEFHMyTShJJ4duRAWPQQ_Zcyx_MhM_0ah5KLTaHkX1lKZ7HIfci0rkHLwssLiE_dBHSGuAlom_0IVMIJw3aEJm7VCTU/s400/facebook.png' width='16'/></a>
<a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Twitter'><img alt='' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaSZmjzM6kFWENYNvQn0MzBcBT3pF64nb5by7Wx6V6PclB5JHTG5kfraa3rweVmn1nskZgKnF7PtBK8TsKWQY81E3rxSHFSVdeY04wxnYvVjWyPh5AlULLN10Hu8rTtrp6erjzTZDRF6A/s400/twitter.png' width='16'/></a>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Add to Delicious'><img alt='' border='0' height='16' src='http://3.bp.blogspot.com/_C6KkooKXCEw/S9rnmAvSxJI/AAAAAAAAFf8/8SYH5xUXMtI/s400/delicious.png' width='16'/></a>
<a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Digg This Post'><img alt='' border='0' height='16' src='http://1.bp.blogspot.com/_C6KkooKXCEw/S9rnmka6ZYI/AAAAAAAAFgE/QAHNU23FdN0/s400/digg.png' width='16'/></a>
<a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Stumble This Post'><img alt='' border='0' height='16' src='http://2.bp.blogspot.com/_C6KkooKXCEw/S9rnnDHl5xI/AAAAAAAAFgM/HhpgfRRssBY/s400/stumbleupon.png' width='16'/></a>
</div></div>

	<div class='fb-like' style='clear: none;'>
	<h4>Do you like this story?</h4> 
	<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_counter addthis_pill_style'/>
<script type='text/javascript'>var addthis_config = {&quot;data_track_clickback&quot;:true};</script>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=sodiyc' type='text/javascript'/>
<!-- AddThis Button END -->
	</div></div>
	</b:if>
	<!--END FECEBOOK LIKE AND SOCIAL BOOKMARK--> 

Note :
Jika sobat menggunakan fitur "Readmore" carilah kode <data:post.body/> dan pilih yang kedua,

• Terakhir, Simpan Template.

Penulis : Kang Koisine