Posted by : Arie Adie Thursday, 25 April 2013

cara membuat share button tombol like twitter di postingan blog
Share Button Efek Berputar
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='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Delicious'>Delicious</a>
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg'>Digg</a>
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Facebook'>Facebook</a>
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumbleupon'>Stumbleupon</a>
<a class='rss' href='http://feeds.feedburner.com/lagudjawaasli' target='_blank' title='RSS'>RSS</a>
</div>
</b:if>

3.    Ganti  http://feeds.feedburner.com/lagudjawaasli 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('http://4.bp.blogspot.com/-KxcARTmAlQI/TwCDycGOXVI/AAAAAAAABis/rBrMzmoyN6c/s1600/twitter_32.png'); }
.delicious{ background:url('http://4.bp.blogspot.com/-82J7zeYp1s8/TwCEN_HoAhI/AAAAAAAABkQ/t1wtld8lNA4/s1600/delicious_32.png'); }
.digg{ background:url('http://1.bp.blogspot.com/-MtS4dU0fY4A/TwCENEQUQvI/AAAAAAAABkE/glAaVSTKJDM/s1600/digg_32.png'); }
.facebook{ background:url('http://4.bp.blogspot.com/-Sxhuf0CW8OY/TwCEMpoaq0I/AAAAAAAABkA/PfhoKDMBcBQ/s1600/facebook_32.png'); }
.rss{ background:url('http://4.bp.blogspot.com/-Q5bYfx3dD2g/TwCEKQfYMQI/AAAAAAAABjw/XrXOvdFeZZs/s1600/rss_32.png'); }
.stumbleupon{ background:url('http://3.bp.blogspot.com/-hwn17i1SLNU/TwCEJNfyIWI/AAAAAAAABjo/TBb8oc2KHGs/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.. Selamat Mencoba.

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Welcome to My Blog

TRANSLATE

English Japanese Brazilian Arabic Chinese German Netherland Korean Italian Russian Spain
SEO Reports for pengembarabiru.blogspot.com
pengembarabiru.blogspot.com value pengembarabiru.blogspot.com Real PR pengembarabiru.blogspot.com Trust pengembarabiru.blogspot.com Alexa/PageRank

RANDOM POST

Flash Labels by Way2Blogging





- Copyright © PENGEMBARA BIRU -arieadie- Powered by music - Designed by sang pengembara 821 -