Cara Memasang Share Social Bookmark Versi 2

Sebelumnya saya sudah memposting artikel tentang Share to Social Bookmark ini (Baca: Cara Memasang Sexy Social Bookmark) dan untuk mengganti iconnya anda bisa mendownloadnya di blog ini (Baca: Media Social Bookmark Icons). Untuk manfaatnya kenapa anda harus memasang Share to Social Bookmark ini pastinya dan tidak lain adalah untuk membuat blog anda lebih dikenal baik oleh search engine dan ujung-ujungnya traffic.

Artikel berikut saya posting atas permintaan salah satu pengunjung blog ini dan semoga bermanfaat juga bagi anda yang suka modifikasi atau suka mengutak-atik blog untuk tampil lebih cantik dan menarik. Pada postingan ini saya akan share 2 jenis Share to Social Bookmark yang bisa anda pilih sesuai selera anda..

Berikut tutorial untuk memasang Share to Social Bookmark Pertama:

• Login ke Blogger.com
• Kemudian Tata Letak
• Pilih Edit HTML
• Centang Expand Widget
• Copas kode berikut diatas kode ]]></b:skin&gt

.e-delicious a{float:left;display:block;width:48px;height:48px;background:transparent urlundefinedhttp://i45.tinypic.com/9uchh5.png) 0 0 no-repeat}
.e-delicious a:hover{border-bottom:none;outline:none;background:transparent urlundefinedhttp://iconsbee.com/wp-content/plugins/sociable/images/delicious.png) 0 0 no-repeat}
.e-digg a{float:left;display:block;width:48px;height:48px;background:transparent urlundefinedhttp://i46.tinypic.com/2cpxbbm.png) 0 0 no-repeat}
.e-digg a:hover{border-bottom:none;outline:none;background:transparent urlundefinedhttp://iconsbee.com/wp-content/plugins/sociable/images/digg.png) 0 0 no-repeat}
.e-technorati a{float:left;display:block;width:48px;height:48px;background:transparent urlundefinedhttp://i49.tinypic.com/2ic4jzq.png) 0 0 no-repeat}
.e-technorati a:hover{border-bottom:none;outline:none;background:transparent urlundefinedhttp://iconsbee.com/wp-content/plugins/sociable/images/technorati.png) 0 0 no-repeat}
.e-reddit a{float:left;display:block;width:48px;height:48px;background:transparent urlundefinedhttp://i50.tinypic.com/11uhift.png) 0 0 no-repeat}
.e-reddit a:hover{border-bottom:none;outline:none;background:transparent urlundefinedhttp://i50.tinypic.com/wvvntc.png) 0 0 no-repeat}
.e-stumble a{float:left;display:block;width:48px;height:48px;background:transparent urlundefinedhttp://i45.tinypic.com/33auh42.png) 0 0 no-repeat}
.e-stumble a:hover{border-bottom:none;outline:none;background:transparent urlundefinedhttp://iconsbee.com/wp-content/plugins/sociable/images/stumbleupon.png) 0 0 no-repeat}
.e-designfloat a{float:left;display:block;width:48px;height:48px;background:transparent urlundefinedhttp://i47.tinypic.com/9g9don.png) 0 0 no-repeat}
.e-designfloat a:hover{border-bottom:none;outline:none;background:transparent urlundefinedhttp://i49.tinypic.com/2wn72xg.png) 0 0 no-repeat}
.e-facebook a{float:left;display:block;width:48px;height:48px;background:transparent urlundefinedhttp://i50.tinypic.com/34griht.png) 0 0 no-repeat}
.e-facebook a:hover{border-bottom:none;outline:none;background:transparent urlundefinedhttp://iconsbee.com/wp-content/plugins/sociable/images/facebook.png) 0 0 no-repeat}
.e-twitter a{float:left;display:block;width:48px;height:48px;background:transparent urlundefinedhttp://i50.tinypic.com/29q1bx5.png) 0 0 no-repeat}
.e-twitter a:hover{border-bottom:none;outline:none;background:transparent urlundefinedhttp://iconsbee.com/wp-content/plugins/sociable/images/twitter.png) 0 0 no-repeat}
.e-furl a{float:left;display:block;width:48px;height:48px;background:transparent urlundefinedhttp://i47.tinypic.com/dc68vc.png) 0 0 no-repeat}
.e-furl a:hover{border-bottom:none;outline:none;background:transparent urlundefinedhttp://i48.tinypic.com/14xcl0o.png) 0 0 no-repeat}
.e-feed a{float:left;display:block;width:48px;height:48px;background:transparent urlundefinedhttp://i46.tinypic.com/2czsimu.png) 0 0 no-repeat}
.e-feed a:hover{border-bottom:none;outline:none;background:transparent urlundefinedhttp://i48.tinypic.com/wc8w.png) 0 0 no-repeat}

• Setelah itu copas kode berikut dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2>Share to:</h2>
<center><table><tr>
<td><div class='e-delicious'>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
</div></td>
<td><div class='e-digg'>
<a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
</div></td>
<td><div class='e-technorati'>
<a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
</div></td>
<td><div class='e-reddit'>
<a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
</div></td>
<td><div class='e-stumble'>
<a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
</div></td>
<td><div class='e-designfloat'>
<a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
</div></td>
<td><div class='e-facebook'>
<a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
</div></td>
<td><div class='e-twitter'>
<a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
</div></td>
<td><div class='e-furl'>
<a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
</div></td>
<td><div class='e-feed'>
<a href='http://rasiqzonetwork.blogspot.com/feeds/posts/default'/>
</div></td>
</tr></table></center>
</b:if>

• Yang berwarna merah ganti dengan alamat blog anda
• Selanjutnya Save Template

Untuk Tutorial Share to bookmark Kedua:

• Login seperti langkah diatas
• Copas kode berikut diatas ]]></b:skin&gt

.social-bar {background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh33hVQPF7nC0_YV5Ugfub_Rj_QXQ7LsLoCfV1CMQYUGNu3sdbfemYQMqq_Zcvgcai77oRnr1BblXpxW7Yu6FUVQfk2xK0hPsftR8wlQeKaiaO7d0ZVY7f38ZshNRPO8o9CqaID2VDbl3Uc/s1600/spread-the-word.png) no-repeat top left; height:63px; text-align:right; margin:0 0 30px 0; position:relative;}
ul#social-btns {position:absolute; left:299px;}
ul#social-btns li {float:left; height:63px; list-style:none;}
ul#social-btns li a {height:63px; background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrDYhU5VT06WODHsQg_A4PYLlUz6IiUuXFaIWD9x6V2INdvvb6XsV2ee6z-mtIyojwPUS4oMJX_bRN4gkr7kFKrgNMfPkbG3wMQgFMj3ktXFgMoptdketNqem64VWjAdFXDJSqJXWVSngp/s1600/social-sprites.png) no-repeat; display:block; text-indent:9999px;}
ul#social-btns li a#delicious {width:68px; background-position:0 -66px;}
ul#social-btns li a:hover#delicious {width:68px; background-position:0 0;}
ul#social-btns li a#digg {width:52px; background-position:-68px -66px;}
ul#social-btns li a:hover#digg {width:52px; background-position:-68px 0;}
ul#social-btns li a#stumbleupon {width:58px;  background-position:-120px -66px;}
ul#social-btns li a:hover#stumbleupon {width:58px;  background-position:-120px 0;}
ul#social-btns li a#technorati{width:58px; background-position:-178px -66px;}
ul#social-btns li a:hover#technorati{width:58px; background-position:-178px 0;}
ul#social-btns li a#twitter {width:54px; background-position:-236px -66px;}
ul#social-btns li a:hover#twitter {width:54px; background-position:-236px 0;}

• Kemudian Copas kode berikut dibawah kode <data:post.body/>

<div class='social-bar'>
<ul id='social-btns'>
<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' id='delicious' rel='nofollow' target='_blank'>Delicious</a></li>
<li><a expr:href='&quot;http://digg.com/submit?phase=3&amp;url=&quot; + data:post.url' id='digg' rel='nofollow' target='_blank'>Digg</a></li>
<li><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url' id='stumbleupon' rel='nofollow' target='_blank'>Stumbleupon</a></li>
<li><a expr:href='&quot;http://www.technorati.com/cosmos/search.html?url=&quot; + data:post.url' id='technorati' rel='nofollow' target='_blank'>Technorati</a></li>
<li><a href='http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' id='twitter' rel='nofollow' target='_blank'>Twitter</a></li>
</ul>
</div><!--social-bar-->

• Terakhir Save Template

Semoga bermanfaat dan membantu.. apabila anda mau menambahkan ditunggu share-nya di form komentar..

Share on Google Plus

About Admin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.