Cara buat widget share keren di bawah postingan

Cara buat widget share keren di bawah postingan

kali ini saya akan memposting se buah postingan yang berjudul Cara buat widget share keren di bawah postingan . Pada dasa...

kali ini saya akan memposting se buah postingan yang berjudul Cara buat widget share keren di bawah postingan . Pada dasarnya, widget ini meningkatkan jejaring sosial kita dan menyebarkan url blog kita pada jaringan sosial. Hal ini juga meningkatkan traffik, yang paling penting bagi setiap blogger. Desainya bersih, rapi dan memiliki banyak tombol social media. Tentunya widget ini tidak memakan banyak tempat dan ringan sehingga tidak membuat berat loading blog kita.

Menambah widget Flipper Sharing merupakan salah satu cara untuk menaikan trafik blog, tentunya jika postingan kita disukai oleh pembaca, otomatis si pembaca ini akan menShare postingan anda. Mereka dapat membagikannya ke situs media sosial mereka.


Cara Menambahkan ke Blog

Masuk ke Blogger > Template > Edit HTML
Centang "Expand Widget Templates box"
Cari kode <data:post.body/> (ctrl+f)
Anda hanya tinggal simpan dibawahnya


<style>/*--------Flipper Sharing Widget ------*/.flipper a {display:block;height:48px;width:48px;padding:0 4px;float:left;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8cHTSbhb2vJ9Hstlgh3uKoMcAV2c8UEulaOX1pRjzB9Sc8ZXTnMahmxPf684s7vcuDMKKFtuoVP27q9Uw-3YgjSYJr8U9oP4UMmzBDq2Nb-83sGQfoBEKaMlWnhIV3G0x-JAsN4ZWp524/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:20px;font-family:sans-serif;}</style>
<div class='flipper'><b:if cond='data:blog.pageType == &quot;item&quot;'><div class="Pleaseshare">Please Share it! :)</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;'/></b:if></div><div style="clear:both"/>

Keterangan :
Ganti dengan kode warna yang anda inginkan (judul blog) #333333 
Kalimat yang berwarna merah adalah kalimat ajakan dari widget sharing ini.