Memasang Sharing Bookmarks di Setiap Postingan

Berikut ini saya mau share tips untuk memasang Sharing Bookmarks kepada sobat yang ingin isi dari artikelnya di Bookmarks sama orang lain, dan dengan itulah blog kita bisa menjadi ramai pengunjung kalau setiap isi artikel sobat selalu di Bookmark.

Sharing Bookmarks yang akan saya berikan ini sebenarnya adalah plugins untuk blog Wordpress, mungkin sobat sering melihat Sharing Bookmarks seperti yang ada di bawah artikel ini. Sharing Bookmarks ini adalah milik dari Shareholic.
Saya begitu tertarik dengan tampilan iconnya, makanya saya cari tahu bagaimana caranya agar saya bisa memasangnya di blogspot. Mungkin ada juga sobat yang merasakan hal yang sama dengan saya, dan untuk itu langsung saja kita ke tahap pemasangannya.

Langkah 1
Temukan tag </head> dan paste kode di bawah ini di atas tag </head> tersebut.

<script src='https://sites.google.com/site/adityameilaz/adityasblog-1/bookmarks_adityas.js' type='text/javascript'></script>
<style type='text/css'>
div.shr-bookmarks{margin:20px 0 8px;clear:both !important}
div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}
div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}
div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}
div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:&#39;&#39; !important;}
div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}
div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}
.shareaholic-show-on-load{display: block !important;}
div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}
div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}
div.shr-count{font:12px bold,arial !important;position: relative !important;}
div.shr-count-outline{position: absolute !important;color: white !important;}
div.shr-count-center{position: absolute !important;color: blue !important;}
li.shr-2{background-position:-120px bottom !important}
li.shr-2:hover{background-position:-120px top !important}
li.shr-3{background-position:-180px bottom !important}
li.shr-3:hover{background-position:-180px top !important}
li.shr-5{background-position:-300px bottom !important}
li.shr-5:hover{background-position:-300px top !important}
li.shr-7{background-position:-420px bottom !important}
li.shr-7:hover{background-position:-420px top !important}
li.shr-38{background-position:-2280px bottom !important}
li.shr-38:hover{background-position:-2280px top !important}
li.shr-40{background-position:-2400px bottom !important}
li.shr-40:hover{background-position:-2400px top !important}
li.shr-52{background-position:-3120px bottom !important}
li.shr-52:hover{background-position:-3120px top !important}
li.shr-88{background-position:-5280px bottom !important}
li.shr-88:hover{background-position:-5280px top !important}
li.shr-257{background-position:-15420px bottom !important}
li.shr-257:hover{background-position:-15420px top !important}
ul.shr-socials li.shareaholic{background-image:url(http://www.techgeeze.com/wp-content/plugins/sexybookmarks/spritegen/api/sprite.png) !important;}
</style>

Langkah 2
Centang Expand Widget Templates kemudian temukan kode
<div class='post-footer-line post-footer-line-2'/>, dan paste kode di bawah ini setelah kode tersebut.

<!-- Social Bookmarking Icons Start  http://adityameilaz.blogspot.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='shr-bookmarks shr-bookmarks-bg-shr' style='margin-left: 10px; height: 100%; overflow-x: hidden; overflow-y: hidden; display: block; padding-top: 28px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; background-image: url(https://lh5.googleusercontent.com/_8CNyAcBADh4/TXmyEW_6DyI/AAAAAAAAARg/_dqmVIxUp0Y/share-enjoy.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: no-repeat no-repeat; '>
<ul class='shr-socials'>
<li class='shr-3 shareaholic' style='margin-left:0px !important;'><a class='external' expr:href='&quot;http://digg.com/submit?phase=3&amp;url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Post to Digg'/></li>
<li class='shr-5 shareaholic' style='margin-left:0px !important;'><a class='external' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Post to Facebook'/></li>
<li class='shr-7 shareaholic' style='margin-left:0px !important;'><a class='external' expr:href='&quot;http://api.tweetmeme.com/share?url=&quot;+data:post.url' rel='nofollow' target='_blank' title='Post to Twitter'/></li>
<li class='shr-38 shareaholic' style='margin-left:0px !important;'><a class='external' 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='Post to StumbleUpon'/></li>
<li class='shr-40 shareaholic' style='margin-left:0px !important;'><a class='external' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Add to Reddit'/></li>
<li class='shr-2 shareaholic' style='margin-left:0px !important;'><a class='external' 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='Post to Delicious'/></li>
<li class='shr-52 shareaholic' style='margin-left:0px !important;'><a class='external' expr:href='&quot;https://mail.google.com/mail/?ui=2&amp;view=cm&amp;fs=1&amp;tf=1&amp;su=&quot; + data:post.title + &quot;&amp;body=Link:+&quot; + data:post.url + &quot; (&quot; + data:post.title + &quot;)&quot;' rel='nofollow' target='_blank' title='Add to Gmail'/></li>
<li class='shr-257 shareaholic' style='margin-left:0px !important;'><a class='external' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=4804225532926954999&amp;postID=&quot; + data:post.id + &quot;&amp;target=buzz&quot;' rel='nofollow' target='_blank' title='Post on Google Buzz'/></li>
<li class='shr-88 shareaholic' style='margin-left:0px !important;'><a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&quot; + data:post.body + &quot;&amp;source=&quot; + data:title' rel='nofollow' target='_blank' title='Add to LinkedIn'/></li>
</ul>
</div>
</b:if>
<!-- Social Bookmarking Icons End  http://adityameilaz.blogspot.com-->

Note : Pada bagian yang telah disorot temukan kode 4804225532926954999 di dalam script langkah 2 kemudian ganti dengan kode ID-BLOG sobat.

Untuk mengetahui ID-BLOG, lihat caranya di bawah ini:
Misalkan sobat sedang membuka halaman Edit Template, lihat dibagian atas browser sobat dan perhatikan juga gambar di bawah ini:

di dalam kotak berwarna merah merupakan ID-BLOG sobat.

Enjoy it...!!!!

Gabung ke group:

Follow @aditya_m_r

Share