Membuat Share Button Blogger Ala Kompi Ajaib

Share Button Blogger Ala Kompi Ajaib
Kemarin saya telah memberikan solusi bagi pengguna blogger share button agar valid HTML5. Silahkan baca lagi postingannya di link di bawah ini.


Namun bagi Anda yang telah menggunakan 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 saya telah membuat tombol share ini mirip dengan share button default Blogger.


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


Silahkan lihat penerapannya pada blog pada link Demo on Blog di homepage dan postpagenya. Untuk homepage menggunakan float:right dan untuk postpage menggunakan float:left dan blog tersebut telah menggunakan 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 kode CSS di bawah ini dan simpan di atas kode ]]></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(http://4.bp.blogspot.com/-cE37Bhw8xiM/UnHLwzzA9TI/AAAAAAAAaYg/4uq1ntON0RE/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 kode 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='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=620\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>Facebook</a>
</li><li class='twicon'>
    <a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>Twitter</a>
</li><li class='bicon'>
    <a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>Blog</a>
</li><li class='emicon'>
    <a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=email&quot;' 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, jika ingin ditampilkan disebelah kanan silahkan ganti kode float:left menjadi float:right (kodenya ada dua, di atas dan di bawah), kemudian pindahkan kode untuk tombol G+ ke paling atas dan silahkan atur pada margin-marginnya untuk menyesuaikan tampilannya. Kode untuk menampilkan tombol G+ seperti 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>


Jadi kode-kode untuk tombol di sebelah kanan seperti 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(http://4.bp.blogspot.com/-cE37Bhw8xiM/UnHLwzzA9TI/AAAAAAAAaYg/4uq1ntON0RE/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='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=620\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>Facebook</a>
</li><li class='twicon'>
    <a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>Twitter</a>
</li><li class='bicon'>
    <a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>Blog</a>
</li><li class='emicon'>
    <a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>Email</a>
</li>
</ul>
  </div></div>

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

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

Selamat mencoba....

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments