Cara Menambahkan CSS3 Spinning Social Sharing Icons/Buttons Di Setiap Postingan Blogger

Cara Menambahkan CSS3 Spinning Social Sharing Icons/Buttons Di Setiap Postingan di Blogger

Pada tanggal 17 Agustus 2012 ini, lebih tepatnya Hari Kemerdekaan Indonesia raya yang ke-67, di hari yang berbahagia ini , sekarang saya admin Blog IT TIANBOYAND akan membahas dan menambahkan label/kategori baru yaitu tentang BLOGGER HACKS, yang berisi Tutorial dan Content-content menarik yang kita bahas disini, langsung saja , Hari ini saya akan sharing bagaimana cara Menambahkan CSS3 Spinning Social Sharing Icons/Buttons Di Setiap Postingan Blogger, biar lebih tampak SEO FRIENDLY ..

Cara Menambahkannya sebagai berikut :

Pergi ke Blogger Dashboard -> Template -> Edit HTML
Backup Template Anda sebelum membuat perubahan ke blog Anda
Sekarang Expand Template Widget
Tekan Ctrl + F dan cari kode di bawah ini
Sekarang Cari kode di bawah ini menggunakan [ctrl + F]

<div class='post-footer-line post-footer-line-1'/>

Sekarang Paste Kode  Di bawah tepat di bawah / setelah kode diatas

<b:if cond='data:blog.pageType == "item"'>
<style>
p#socialicons img {    -moz-transition: all 0.2s ease-in-out;    -webkit-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;} p#socialicons img:hover {    -moz-transform: rotate(70deg);    -webkit-transform: rotate(70deg);    -o-transform: rotate(70deg);    -ms-transform: rotate(70deg);    transform: rotate(70deg);}
</style>
<center><p id='socialicons'>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwrwqCGbDNSkaOYKUnQygkiT55IOaOC91JwA-1CgkBuKTZdF6l11x6LQ-HUY85pY4J4EyNNT5UleIj3PTHb9gK-Ujt95wsESNCiOCl8Wph61lfV4UJxrOi5WoEwLhlXjd6z4nn1z9CQ5E/s1600/latesthack.com-google_plus.png'/></a>
<a 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'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLQ7HwFuCe0VR2u3efqOQ7qByHnXORSHzutjfwkcjjT0m8KKklnBVQF96A4gCy-tuc4jKA3NKanKxF3qURRWJ6VkewTB14SDcD1kRsYAJQGxmkbSvcsw9W91Jq1Ziz10uzgMlCDEy4wjM/s1600/latesthack.com-facebook.png'/></a>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUTwP73MU6CRrzQogReY1nHQ6J2kGhvN7Cv58sX7zndzjaoK-Ig5ZeYHzbDQTYFLfiBGt-V7PpFAvRWiysQ0TWgjqVOc_jZIWe8xa7_XPkkYUbCrGgI6BPgjhpU8ldSB3FgjXrSiXIdQk/s1600/latesthack.com-twitter.png'/></a>       
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs3nKg2E2yf0zhgJ_xSOYHXtncjTBCQA3ArJ3lWN-ZrffxK5NmeQr-FL4mqh60ysrvCaBx3etMSe5Gax2of0fW-Gv_Herfp09HVN-d3VQ1cpq-qQovOuL61AHaE4YPdhVmlfeTDfvs3jVe/s1600/digg.png'/></a>
<a 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'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV5um4PEeOSowjtbBunhLptdYZSBg9a4dCZTR83FYwOwPhze5OT8hYGZhHzSBH8OA0lg_H9ZVY0xwlChLNZhn4Ilqh2Bp8o3hpowFBR7TnHTJz7kOlGakLq-h9uH-vIW5haMORsmnnPSsC/s1600/delicious.png'/></a>
<a 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'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxTIys-2WmLwN3qQtWolylYNqMpg_h7ulQGs2II7yaZtkO2QtfzAuNvKqwSwyiCJyYZ34wrOjvGR6sGCQ_ckWZMkY8QHp_spDxngPtCFAdmglm_MNMcF28bDPDAqK-i6e7AEwWE2XcLBg/s1600/stumbleupon.png'/></a>
<a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHHSdq80kNfhDHd6GbCygCaUK2_no12-n6DcgNNhuEj8i5ur-mt2cw5sXoSpQY8Sh4PolZVIYErak6SeAyV6oyn2-EgsEIcQDByCerEQUGMjGBMmPM8D_WzXVAftt81fBwTOWlyL2M0WQv/s1600/technorati.png'/></a></p></center><p style='display:none;'>Spinning icons by <a href='http://www.tianboyand.blogspot.com'>Blogger Hacks</a></p></b:if>

Sekarang Simpan Template anda