Cara Membuat Tombol Media Sharing Bookmark

Kali ini aku ingin bagikan buat sobat blogger bagaimana caranya membuat tombol sharing bookmark di beberapa media sosial seperti facebook, twitter, Google plus dan yng lainnya. dengan adanya tombol sharing ini pengunjung akan mudah membagikan artikel blog kita ke akun media sosil mereka. namun perludigaris bawahi biasanya ada beberapa sobat yang menekan tombol sharing yang nampak hanya artikel saja. ini di karena gambar di blog tidak di optimasi dengan benar, untuk cara optimasi gambar silahkan baca artikel saya Cara Optimasi Gambar Terindex Search Engine.

untuk menambah page view ke blog kita tentu saja tombol sharing ini berguna banget selain untuk pengunjung kita juga bisa sharing ke akun sosial kita. dari pada kelamakan membahas langsung saja kita mulai tutorial ini.
1. login ke blogger.
2. silahkan menuju ke edit templat. buat jaga-jaga silahkan backup template dahulu. buat yang masih baru didunia blogger silahkan baca Cara Upload Dan Backup Tamplate Blogspot 
3. kalau sudah memuka edit HTML silahkan cari kode ]]></b:skin>. untuk tutorial cara edit template blogger terbaru sialhkan ngeblog ke blog-blog tetangga. nanti kalao ada waktu akan aku bahas.
4. kalau sudah menemukan kodenya taruh kode diabawah ini tepat diatasnya

Klik >>

/*--------Flipper Sharing Widget giga-watt.blogspot.com------*/
.flipper a { display:block; height:48px; width:48px; padding:0 9px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTsnPjC1Swt4r0zyHeCWroZj_c6C9CibkXOmVkgg5RstdLWHY8c3es34JNzL4zlRkDW6WgzLe3qQWiAfWsg2VIYaMWd0Q-FXK_KiAwn3Cuw6XrNWCEw1SVa2C0hrvUR7oGpIwR2V_HMs1T/s1600/flipper.png) no-repeat; -webkit-transition: ease-in 0.15s all; -moz-transition: ease-in 0.15s all; -o-transition: ease-in 0.15s all; -ms-transition: ease-in 0.15s all; transition: ease-in 0.15s all; cursor:pointer;}
.flipper a.googleplus { background-position: 0px -348px;}
.flipper a.googleplus:hover { background-position: 0px -406px;}
.flipper a.pinterest { background-position: 0px -464px;}
.flipper a.pinterest:hover { background-position: 0px -522px;}
.flipper a.delicious { background-position: 0px 0px;}
.flipper a.delicious:hover { background-position: 0px -58px;}
.flipper a.digg { background-position: 0px -116px;}
.flipper a.digg:hover { background-position: 0px -174px;}
.flipper a.stumbleupon { background-position: 0px -812px;}
.flipper a.stumbleupon:hover { background-position: 0px -870px;}
.flipper a.technorati { background-position: 0px -928px;}
.flipper a.technorati:hover { background-position: 0px -406px;}
.flipper a.twitter { background-position: 0px -928px;}
.flipper a.twitter:hover { background-position: 0px -986px;}
.flipper a.facebook { background-position: 0px -232px;}
.flipper a.facebook:hover { background-position: 0px -290px;}
.flipper a.reddit { background-position: 0px -580px;}
.flipper a.reddit:hover { background-position: 0px -638px;}
.flipper a.rss { background-position: 0px -696px;}
.flipper a.rss:hover { background-position: 0px -754px;}
.Pleaseshare{ margin:10px 0px; color:#333333; font-weight:bold; font-size:16px; font-family:sans-serif;}

5.kalau sudah ditaruh kode CSS diatas sekarang kita taruh kode HTMLnya, langsung saja cari kode
    <div class='post-footer'> 
6.kalau sudah menemukan kodenya silahakn taruh kode dibawah ini tepat dibawah nya.

Klik >>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='flipper'>
<div class='Pleaseshare'>
Bagikan Ke : </div>
<!--Google Plus-->
<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>
<!--Facebook-->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>
<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>
<!-- Pinterest -->
<a class='pinterest' href='http://pinterest.com/' rel='external nofollow' target='_blank' title='Pin it :&gt;'/>
<!-- Delicious -->
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>
<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
<!--Stumble-->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>
<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
<!--RSS -->
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/>
</div></b:if>
<div style='clear:both'/>

7.sekarang tahap akhir silahkan langsung saja Save atau simpan dan lihat hasilnya. mungkin ada belum sesuai dengan template kalian mungkin melebar atau juga kurang lebar, silahkan atur padding yang sudah aku tandai merah. dan juga silangkan ganti warna yang aku tandai sesuai dengan tempat kalian untuk melihat kode warna bisa buka halaman Kode Warna Untuk Kustomisasi.

mungkin hanya itu yang bisa aku bagikan Cara Membuat Tombol Media Sharing Bookmark untuk sobat blogger. kalau masih bingung silahkan tinggalkan komentar dibawah biar nanti kita bahas sama-sama disini. next time saya akan beri tutorial yang baru lagi. semoga bermanfaan dan happy blogging.