Blogger Share Button Hack Valid HTML5 CSS3

Blogger Share Button Hack
Sebenarnya Blogger sudah agak lama meng-update share button-nya dengan menambahkan tombol Pinterest. Namun baru sekarang saya kepikiran untuk membuatnya valid HTML5 dan CSS3.

Pada beberapa waktu yang lalu saya telah membuat postingan tentang Blogger share button ini namun masih tanpa tombol Pinterest karena pada saat itu blogger belum meng-update tombol share-nya ini sehingga yang muncul hanya 4 tombol di tambah dengan tombol G+.


Nah kali ini ada yang berbeda dengan postingan sebelumnya. Selain sekarang sudah ada tombol Pinterest, saya juga sekalian akan memunculkan tombol Orkut. Pada postingan sebelumnya saya juga belum bisa menampilkan tombol default Blogger share button pada template yang menggunakan CSS Reset Blogger Hack. Namun pada saat itu saya mengakalinya dengan membuat tombol sharenya sendiri agar bisa di tampilkan di template yang sudah menggunakan trik untuk menyembunyikan CSS Reset Blogger. 


Nah kali ini saya menggunakan cara berbeda untuk membuat Blogger share button ini valid HTML5 dan CSS3 serta bisa digunakan di template default Blogger, custom template, dan template yang menggunakan trik menyembunyikan CSS Reset Blogger. Namun ada sedikit perbedaan pada template yang menggunakan trik menyembunyikan CSS Reset Blogger, untuk menampilkan share button ini harus ditambahkan kode CSS share button-nya.

Baik kita mulai dengan yang menggunakan template default Blogger dan template custom yang belum menggunakan trik menyembunyikan CSS Reset Blogger.

Untuk template default Blogger silahkan cari kode di bawah ini, untuk template custom biasanya sudah tidak ada jadi silahkan simpan di mana saja Anda inginkan di bawah postingan.


      <!-- share buttons -->
      <div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div>

Kemudian silahkan ganti dengan kode di bawah ini


<div class='post-share-buttons goog-inline-block'>
<a class='goog-inline-block share-button sb-email' 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;' target='_blank' title='Email This'><span class='share-button-link-text'>Email This</span></a><a class='goog-inline-block share-button sb-blog' 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;' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='BlogThis!'><span class='share-button-link-text'>BlogThis!</span></a><a class='goog-inline-block share-button sb-twitter' 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;' target='_blank' title='Share to Twitter'><span class='share-button-link-text'>Share to Twitter</span></a><a class='goog-inline-block share-button sb-facebook' 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;' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Share to Facebook'><span class='share-button-link-text'>Share to Facebook</span></a>
<a class='goog-inline-block share-button sb-orkut' 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=orkut&quot;' target='_blank' title='Share to Orkut' style='margin-left:-4px'><span class='share-button-link-text'>Share to Orkut</span></a>
<a class='goog-inline-block share-button sb-pinterest' 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=pinterest&quot;' target='_blank' title='Share to Pinterest' style='margin-left:-4px'><span class='share-button-link-text'>Share to Pinterest</span></a><div class='goog-inline-block dummy-container'><div class='g-plusone' data-size='medium'></div></div>
</div>


Dan untuk template yang sudah menggunakan trik untuk menyembunyikan CSS Reset Blogger silahkan gunakan kode HTML di bawah ini. 


      <div class='post-share-buttons goog-inline-block'>
<a class='goog-inline-block share-button sb-email' 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;' target='_blank' title='Email This'><span class='share-button-link-text'>Email This</span></a><a class='goog-inline-block share-button sb-blog' 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;' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='BlogThis!'><span class='share-button-link-text'>BlogThis!</span></a><a class='goog-inline-block share-button sb-twitter' 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;' target='_blank' title='Share to Twitter'><span class='share-button-link-text'>Share to Twitter</span></a><a class='goog-inline-block share-button sb-facebook' 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;' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Share to Facebook'><span class='share-button-link-text'>Share to Facebook</span></a>
<a class='goog-inline-block share-button sb-orkut' 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=orkut&quot;' target='_blank' title='Share to Orkut'><span class='share-button-link-text'>Share to Orkut</span></a>
<a class='goog-inline-block share-button sb-pinterest' 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=pinterest&quot;' target='_blank' title='Share to Pinterest'><span class='share-button-link-text'>Share to Pinterest</span></a><div class='goog-inline-block dummy-container'><div class='g-plusone' data-size='medium'></div></div>
</div>

Kemudian tambahkan kode CSS di bawah ini dan simpan di bawah kode </style>


.post-share-buttons{display:inline-block;margin-top:.5em;vertical-align:middle}
.share-button{width:20px;height:20px;background:url(http://3.bp.blogspot.com/-derfRu8CYnw/UzKL_T532DI/AAAAAAAAbiQ/3Hs9hjRW_yQ/s1600/share_buttons_20_3.png) no-repeat left !important;overflow:hidden;margin-left:-1px;position:relative}
.dummy-container{vertical-align:top;padding-left:.3em}
a:hover.share-button{text-decoration:none;z-index:1}
.share-button-link-text{display:block;text-indent:-9999px}
.sb-email{background-position:0 0 !important}
a:hover.sb-email{background-position:0 -20px !important}
a:active.sb-email{background-position:0 -40px !important}
.sb-blog{background-position:-20px 0 !important}
a:hover.sb-blog{background-position:-20px -20px !important}
a:active.sb-blog{background-position:-20px -40px !important}
.sb-twitter{background-position:-40px 0 !important}
a:hover.sb-twitter{background-position:-40px -20px !important}
a:active.sb-twitter{background-position:-40px -40px !important}.sb-facebook{background-position:-60px 0 !important}a:hover.sb-facebook{background-position:-60px -20px !important}
a:active.sb-facebook{background-position:-60px -40px !important}
.sb-buzz{display:none !important}
.sb-orkut{background-position:-80px 0 !important;margin-left:-5px}
a:hover.sb-orkut{background-position:-80px -20px !important}
a:active.sb-orkut{background-position:-80px -40px !important}
.sb-pinterest{background-position:-100px 0 !important;margin-left:-5px}
a:hover.sb-pinterest{background-position:-100px -20px !important}
a:active.sb-pinterest{background-position:-100px -40px !important}
.goog-inline-block{position:relative;display:inline-block}

Untuk validasi HTML5 dan CSS3 silahkan uji halaman demo di link di bawah ini


Jangan khawatir, Blogger share button ini menggunakan css sprite untuk image-nya jadi tidak terlalu memberatkan loading blog.

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