Saat ini banyak widget share
button/tombol berbagi telah dirilis untuk Blogger. Hal ini cukup
membantu Anda untuk membuat blog Anda bersosialisasi dan mendapatkan
lebih banyak traffic. Menambahkan tombol bookmark sosial adalah cara
yang keren untuk mendapatkan lebih banyak pembaca dan pemirsa yang
ditargetkan.
Tombol berbagi yang Ane bagi sekarang cukup keren, ketika pointer mouse
diarahkan ke tombol tersebut ia akan memutar 360 derajat.
Berikut adalah cara untuk menambahkan tombol berbagi dengan efek berputar ke blog Blogger Anda:
1.
Login ke blogger> Desain> Edit HTML> Expand Widget Templates. Cari kode berikut pada template Anda: (ctrl + f)
<data:post.body/>
2. Tepat di bawahnya tambahkan kode berikut ini:
<b:if cond='data:blog.pageType == "item"'>
<div class='spinning_icons'>
<a class='twitter' expr:data-text='data:post.title'
expr:data-url='data:post.url' href='http://twitter.com/share'
rel='nofollow' target='_blank' title='Twitter'>Twitter</a>
<a class='delicious'
expr:href='"http://del.icio.us/post?url=" +
data:post.url + "&title=" + data:post.title'
target='_blank' title='Delicious'>Delicious</a>
<a class='digg'
expr:href='"http://digg.com/submit?phase=2&url="
+ data:post.url + "&title=" +
data:post.title' target='_blank' title='Digg'>Digg</a>
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Facebook'>Facebook</a>
<a class='stumbleupon' expr:href='"http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Stumbleupon'>Stumbleupon</a>
<a class='rss' href='http://feeds.feedburner.com/ronnierdv' target='_blank' title='RSS'>RSS</a>
</div>
</b:if>
3. Ganti http://feeds.feedburner.com/ronnierdv dengan username feedburner Anda, kemudian cari kode ini:
]]></b:skin>
4. Tepat di atas kode tersebut di atas tambahkan kode di bawah ini:
.spinning_icons a{
width:48px;
height:48px;
display:inline-block;
text-indent:-9999em;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
}
.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZy8Y8zsGwPEIb81WkASlCiICHNRKWKvugHzD-PJfXRHrYiF0KztvGwD6H4CUSMWPibvnV6bsefNfz4vWJ_ktnZPa6CUxEgHdWmLUDg8xXKvTcmRvGnL4x9KgTrKdKGMjyRAhihc_pt4Y/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEignqhTjvJ1uouQPkkF9qcakyRRWc913hwYIlCopWQZMBNddp1dPg352YKLsGW6TldO4M6lGd5UwCFabhfIXrYq15IwMYALDE8vuvy4kZQG-REi6bADG9DRJttjTQjzd-x1-aufJgARNYs/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzVLlXjH4X3Upn10JLNSBt5a9esCBOUcpFAj4tVrF9ncev-26RddNAnIMIw0JewhMvcN0VW8d7ZWq2mwDhHhIskTXwUrPsde_29T4sHlIs_GuWIcr2mgxZlx3Jxx3bdIeJpLt-YUPQ1b0/s1600/digg_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3P6ulyTRhUhv-y2JAYmfZfYiccuu5hh7Q0W4OYxsclTNgpg2ag1V8IFxc6HtW5wKsifNX3fbxSGWzuEmPCvd1SFb-k9Ol0HKD4S9FmQCsN68-ZDLP6riAdUPVEyChuv5dqysP9p5e8fQ/s1600/facebook_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE_7dRsabZqbuX3f0lrMP7fpjOhuAh1ghDPtLXU179Ajr-OOVu04KX5UJDujZNoUVCzZVeyTJEt2O7g1am-vhePzZ-9RtivoZAIOBoYcNLP6IQDFbedVeuLWNkLXJIhLbyMII4qfbWeW8/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ThW7szQFICW5Rj-pQmawWLPD23cfEcM23B53DvMMTKTatNkxKAjLWRqagA5ij3YF5WXuaEW65vBYwIp-6eI9qXCMxo7yTGmpDU2i0aWPvXm6pxSBmsUnKKsVTJLfBBCE_2dPge2_1D0/s1600/stumbleupon_32.png'); }
.spinning_icons a:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
}
5. Sebelum menyimpan
klik pratinjau dulu, jika error berarti ada kesalahan. Jika bagus simpan template dan
tombol berbagi dengan efek berputar Anda sudah jadi. Selamat Mencoba.
