Blogger Share Button Hack Valid Html5 Css3
Sebenarnya Blogger sudah agak usang meng-update share button-nya dengan menambahkan tombol Pinterest. Namun gres kini aku kepikiran untuk membuatnya valid HTML5 dan CSS3.
Pada beberapa waktu yang kemudian aku telah menciptakan postingan wacana Blogger share button ini namun masih tanpa tombol Pinterest alasannya pada dikala itu blogger belum meng-update tombol share-nya ini sehingga yang muncul hanya 4 tombol di tambah dengan tombol G+.
Baca juga: Validasi HTML5 Blogger Share Button
Nah kali ini ada yang berbeda dengan postingan sebelumnya. Selain kini sudah ada tombol Pinterest, aku juga sekalian akan memunculkan tombol Orkut. Pada postingan sebelumnya aku juga belum dapat menampilkan tombol default Blogger share button pada template yang memakai CSS Reset Blogger Hack. Namun pada dikala itu aku mengakalinya dengan menciptakan tombol sharenya sendiri semoga dapat di tampilkan di template yang sudah memakai trik untuk menyembunyikan CSS Reset Blogger.
Baca juga: Membuat Share Button Blogger Ala Kompi Ajaib
Nah kali ini aku memakai cara berbeda untuk menciptakan Blogger share button ini valid HTML5 dan CSS3 serta dapat dipakai di template default Blogger, custom template, dan template yang memakai trik menyembunyikan CSS Reset Blogger. Namun ada sedikit perbedaan pada template yang memakai trik menyembunyikan CSS Reset Blogger, untuk menampilkan share button ini harus ditambahkan instruksi CSS share button-nya.
Baik kita mulai dengan yang memakai template default Blogger dan template custom yang belum memakai trik menyembunyikan CSS Reset Blogger.
Untuk template default Blogger silahkan cari instruksi 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 instruksi di bawah ini
<div class='post-share-buttons goog-inline-block'>
<a class='goog-inline-block share-button sb-email' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=email"' 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='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=blog"' 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='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' 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='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=facebook"' 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='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=orkut"' 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='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=pinterest"' 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 memakai trik untuk menyembunyikan CSS Reset Blogger silahkan gunakan instruksi HTML di bawah ini.
<div class='post-share-buttons goog-inline-block'>
<a class='goog-inline-block share-button sb-email' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=email"' 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='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=blog"' 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='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' 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='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=facebook"' 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='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=orkut"' 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='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=pinterest"' 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 instruksi CSS di bawah ini dan simpan di bawah instruksi </style>
.post-share-buttons{display:inline-block;margin-top:.5em;vertical-align:middle}
.share-button{width:20px;height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_4yDtMqn5OsCTovgyxbE60o2qvmxDugaE7eiYsfHUCVr2RgScn4AqshQwYSi_GSGjVFTtSMHpU0iFhDBI7_RA1uSvMRZpKGCsJUFZEaX54LOpVjaAss3waT1LS8j9LrepAwRXV0pbYAI/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 memakai css sprite untuk image-nya jadi tidak terlalu memberatkan loading blog.
Sumber https://www.kompiajaib.com/
0 Response to "Blogger Share Button Hack Valid Html5 Css3"
Posting Komentar