Membuat Share Button Blogger Ala Kompi Ajaib

Kemarin aku telah menawarkan solusi bagi pengguna blogger share button biar valid HTML5. Silahkan baca lagi postingannya di link di bawah ini.

Baca juga: Validasi HTML5 Blogger Share Button

Namun bagi Anda yang telah memakai trik menyembunyikan CSS Stylesheet Blogger untuk validasi HTML5 dan CSS3, biasanya share button ini tidak muncul berupa tombol melainkan yang muncul berupa teks. Nah untuk itu aku telah menciptakan tombol share ini ibarat dengan share button default Blogger.

Baca juga: Trik menyembunyikan CSS Stylesheet Blogger untuk validasi HTML5 dan CSS3

Seperti halnya blogger share button, share button ini juga memakai CSS Sprite pada imagenya ditambah sedikit pengaruh transisi untuk pengaruh bergulir pada pergantian gambarnya.

DEMO | DEMO ON BLOG

Silahkan lihat penerapannya pada blog pada link Demo on Blog di homepage dan postpagenya. Untuk homepage memakai float:right dan untuk postpage memakai float:left dan blog tersebut telah memakai trik menyembunyikan CSS Stylesheet Blogger untuk validasi HTML5 dan CSS3 juga.

Nah bagi yang tertarik untuk mencobanya silahkan ikuti langkahnya di bawah ini.

Langkah Pertama

Silahkan copy instruksi CSS di bawah ini dan simpan di atas instruksi ]]></b:skin> atau </style>

.widget-social{padding:0;margin-right:-10px;margin-left:-40px} ul.kompisocial{border:0;list-style:none;overflow:hidden;margin:10px} .kompisocial li{float:right;background:none!important;margin-left:0;padding:0!important} .kompisocial li a {display:block;width:20px;height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwbDWhJDHTgyN0zhDvTx8VYlYDAuPieZ9taGS4ZTFzuiV8SGeQQMXoZgi_MV3pQhidvSPi-pxEZHczPps1zq5OWAPOt-hUFHIoUKbYSYnxwVTFzE5KCBWquBaZCMgGGdeembLHrYC-uMU/s1600/share_buttons2.png) no-repeat transparent;text-indent:-99999em!important} .kompisocial li a:hover{padding:0!important} .kompisocial li.fbicon a{background-position:-60px 0;transition:all 400ms ease-in-out} .kompisocial li.twicon a{background-position:-40px 0;transition:all 400ms ease-in-out} .kompisocial li.bicon a{background-position:-20px 0;transition:all 400ms ease-in-out} .kompisocial li.emicon a{background-position:0 0;transition:all 400ms ease-in-out} .kompisocial li.fbicon a:hover{background-position:-60px -20px} .kompisocial li.twicon a:hover{background-position:-40px -20px} .kompisocial li.bicon a:hover{background-position:-20px -20px;} .kompisocial li.emicon a:hover{background-position:0 -20px}

Langkah Kedua

Silahkan gunakan instruksi pemanggilnya di bawah ini dan simpan di mana Anda ingin menampilkan tombolnya pada edit HTML.

<div style='float:left;padding:0;'> <div class='widget-social'> <ul class='kompisocial'> <li class='fbicon'> <a expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=620\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'>Facebook</a> </li><li class='twicon'> <a expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'>Twitter</a> </li><li class='bicon'> <a expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>Blog</a> </li><li class='emicon'> <a expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=email"' expr:title='data:top.emailThisMsg' target='_blank'>Email</a> </li> </ul> </div></div> <div style='float:left;padding:0 0 0 6px;margin-left:0px;margin-top:10px'> <div class='g-plusone' data-size='medium'></div> </div>

Ini akan menampilkan tombol pada sebelah kiri, bila ingin ditampilkan disebelah kanan silahkan ganti instruksi float:left menjadi float:right (kodenya ada dua, di atas dan di bawah), lalu pindahkan instruksi untuk tombol G+ ke paling atas dan silahkan atur pada margin-marginnya untuk menyesuaikan tampilannya. Kode untuk menampilkan tombol G+ ibarat di bawah ini.

<div style='float:left;padding:0 0 0 6px;margin-left:0px;margin-top:10px'> <div class='g-plusone' data-size='medium'></div> </div>

DEMO TOMBOL DI KANAN

Makara kode-kode untuk tombol di sebelah kanan ibarat di bawah ini.

1. Kode CSS

.widget-social{padding:0;margin-right:-10px} ul.kompisocial{border:0;list-style:none;overflow:hidden;margin:10px} .kompisocial li{float:right;background:none!important;margin-left:0;padding:0!important} .kompisocial li a {display:block;width:20px;height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwbDWhJDHTgyN0zhDvTx8VYlYDAuPieZ9taGS4ZTFzuiV8SGeQQMXoZgi_MV3pQhidvSPi-pxEZHczPps1zq5OWAPOt-hUFHIoUKbYSYnxwVTFzE5KCBWquBaZCMgGGdeembLHrYC-uMU/s1600/share_buttons2.png) no-repeat transparent;text-indent:-99999em!important} .kompisocial li a:hover{padding:0!important} .kompisocial li.fbicon a{background-position:-60px 0;transition:all 400ms ease-in-out} .kompisocial li.twicon a{background-position:-40px 0;transition:all 400ms ease-in-out} .kompisocial li.bicon a{background-position:-20px 0;transition:all 400ms ease-in-out} .kompisocial li.emicon a{background-position:0 0;transition:all 400ms ease-in-out} .kompisocial li.fbicon a:hover{background-position:-60px -20px} .kompisocial li.twicon a:hover{background-position:-40px -20px} .kompisocial li.bicon a:hover{background-position:-20px -20px;} .kompisocial li.emicon a:hover{background-position:0 -20px}

2. Kode HTML

<div style='float:right;padding:0 0 0 6px;margin-right:-30px;margin-top:10px'> <div class='g-plusone' data-size='medium'></div> </div> <div style='float:right;padding:0;'> <div class='widget-social'> <ul class='kompisocial'> <li class='fbicon'> <a expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=620\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'>Facebook</a> </li><li class='twicon'> <a expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'>Twitter</a> </li><li class='bicon'> <a expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>Blog</a> </li><li class='emicon'> <a expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=email"' expr:title='data:top.emailThisMsg' target='_blank'>Email</a> </li> </ul> </div></div>

Kemudian jangan lupa untuk menyimpan instruksi javascript tombol G+ di atas instruksi </body>, bila sudah ada tidak usah dipasang lagi.

<script type='text/javascript'> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>

Selamat mencoba....

Sumber https://www.kompiajaib.com/

Membuat Share Button Blogger Ala Kompi Ajaib

Langkah Pertama

Langkah Kedua

1. Kode CSS

2. Kode HTML

0 Response to "Membuat Share Button Blogger Ala Kompi Ajaib"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel