 |
| 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 WidgetTekan 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='"http://plus.google.com/share?url=" + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDew8pMcfmXanEOlml3g-14dGdHolb3DTi6HMvrurauLnpKc-JtbXJv1pHzIM4d6EnqmSowL5wzE1_Zht-gnnVjW6PabCHsLZQEIqvuTPG1zCuBZj7vm6BvlC8cdeH5StnBgKnrg-YPqs/s1600/latesthack.com-google_plus.png'/></a>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgfe-6bli4pqKtJF-ANvzlHqET9YwST-nXPVQNMstaI96SCBn4S4hc6UJvehhnYHx4uyLF5mUbUmkXTbxQhVNfdJy48cb9DnwfsMnZv0Avnaau-tiPHkCZYzezanU6TCf1iEF9bWDF1OE/s1600/latesthack.com-facebook.png'/></a>
<a expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsokhm9G8Wso-OWvC2GWcw8FjLLZVnVIKE6p9Ps8qkNFojqPOPyzIDNcMRWXA7-2R01X6JgrTA8qLcrnS1c3DlvsuPU3Okpyw6uoRiA4z6CtRrdqP7VCpJ7_HvUVaJlLc6Fh_ERWOW254/s1600/latesthack.com-twitter.png'/></a>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDuxOZ3OIrMarw9-NIlTtNz7hwFMJejcswcMWOCX6y_7QMUhKPppJLbprsT4n6CHgYd51Rn-EjZAK51nSKH31-cTCrDDxKsarndBpFyUfsTFevqdTmHolO6ZMT1yWnvlwNPr6ZeZyD7TF/s1600/digg.png'/></a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9aqnVn-0UOm2M1P_0pjJM4TUZ-S3RTxLPOXkiE2Di65PADvVTgZLSOw3R_aZsYOQFrtcL28MG_6-awboWSWPNcY3I6vokKu1gM_ZyubzAopfk_HFDPRUC_MEnjIUcJ_b4XLoVpaM6yix/s1600/delicious.png'/></a>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVKTvBcpF24TnjNeGtcjQNnJv3aHBPGg7e4xchkBN7uY80UVj3ec9rs8B8sGaouCZD89QFh5F_UXtSNcYD1YrXeo9tgeleQERxTvJxQkorPE-Ndr5BNVu6cYSZ3zjQiPSVa5ggajVGffJQ/s1600/stumbleupon.png'/></a>
<a expr:href='"http://www.technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd_BwUGpc7mt8OwKYs6beq-tdShsJX-_zJ9tkqXLoM3ykHjvmJyJm-zDCDQ5z4b0E9gHmtBQ_tThvB9y1HK9xSm036qLmrm8E4dGjAZRObttTtGeA_RbHAirqkVrOVUBF-KVtKHDD8cMNq/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>
<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='"http://plus.google.com/share?url=" + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDew8pMcfmXanEOlml3g-14dGdHolb3DTi6HMvrurauLnpKc-JtbXJv1pHzIM4d6EnqmSowL5wzE1_Zht-gnnVjW6PabCHsLZQEIqvuTPG1zCuBZj7vm6BvlC8cdeH5StnBgKnrg-YPqs/s1600/latesthack.com-google_plus.png'/></a>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgfe-6bli4pqKtJF-ANvzlHqET9YwST-nXPVQNMstaI96SCBn4S4hc6UJvehhnYHx4uyLF5mUbUmkXTbxQhVNfdJy48cb9DnwfsMnZv0Avnaau-tiPHkCZYzezanU6TCf1iEF9bWDF1OE/s1600/latesthack.com-facebook.png'/></a>
<a expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsokhm9G8Wso-OWvC2GWcw8FjLLZVnVIKE6p9Ps8qkNFojqPOPyzIDNcMRWXA7-2R01X6JgrTA8qLcrnS1c3DlvsuPU3Okpyw6uoRiA4z6CtRrdqP7VCpJ7_HvUVaJlLc6Fh_ERWOW254/s1600/latesthack.com-twitter.png'/></a>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDuxOZ3OIrMarw9-NIlTtNz7hwFMJejcswcMWOCX6y_7QMUhKPppJLbprsT4n6CHgYd51Rn-EjZAK51nSKH31-cTCrDDxKsarndBpFyUfsTFevqdTmHolO6ZMT1yWnvlwNPr6ZeZyD7TF/s1600/digg.png'/></a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9aqnVn-0UOm2M1P_0pjJM4TUZ-S3RTxLPOXkiE2Di65PADvVTgZLSOw3R_aZsYOQFrtcL28MG_6-awboWSWPNcY3I6vokKu1gM_ZyubzAopfk_HFDPRUC_MEnjIUcJ_b4XLoVpaM6yix/s1600/delicious.png'/></a>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVKTvBcpF24TnjNeGtcjQNnJv3aHBPGg7e4xchkBN7uY80UVj3ec9rs8B8sGaouCZD89QFh5F_UXtSNcYD1YrXeo9tgeleQERxTvJxQkorPE-Ndr5BNVu6cYSZ3zjQiPSVa5ggajVGffJQ/s1600/stumbleupon.png'/></a>
<a expr:href='"http://www.technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd_BwUGpc7mt8OwKYs6beq-tdShsJX-_zJ9tkqXLoM3ykHjvmJyJm-zDCDQ5z4b0E9gHmtBQ_tThvB9y1HK9xSm036qLmrm8E4dGjAZRObttTtGeA_RbHAirqkVrOVUBF-KVtKHDD8cMNq/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
Tag :
Blogger Hacks
0 Komentar untuk " Cara Menambahkan CSS3 Spinning Social Sharing Icons/Buttons Di Setiap Postingan Blogger "