Blogger Share Button Hack Valid HTML5 CSS3

Blogger Share Button Hack Valid HTML5 CSS3

Bola Hero Gawai

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

49 Comments Add Comment

Pertaaamaaaxnya ane gondoool

Balas

mantab mas, tapi saya sdh punya share button bawaan template kompi males, hehehe :D
makasih sharingnya :)

Balas

Semakin inovatif nih Bang Adhy, mantap deh...... :D


Salam

Balas

numpang calik didieuk urang mah :D

Balas

Ini untuk alternatif share button aja mbak hehhhehe... dan saya lihat masih banyak yang menggunakannya jadi sekalian aja biar valid html5 dan css3 :)

Balas

Hehehehe saking pusingnya cari bahan postingan mas hehehhe :)

Balas

Bereksperimen lagi nih. Btw, follback mas di twitter :D

Balas

Heheheehe iya kang :) siiipp kang follback sukses :)

Balas

Wah baru lagi yah Kang tampilan share button nya
ada penampakan tombol yang barunya juga, saya
Coba yah ..? terima kasih Kang Adhy :-bd

Balas

wahhhh...mantaf gan...
ini yang ane cari...
aturnuhun gan :v

Balas

kalo button Pinterest sma linkedin yang asycron bisa tuh, biar pas. Pinterest yang Pin It hoho

Balas

Mantapz kang keren urang raosan ah ..
begini kang kemaren saya heran ko tombol reply gak keluar tiba-tiba .. pdhl belum pernah edit kode ... saya atasi dgn tutor KI tapi gatot kang .. tung-tung namah digentos we .. pertanyaan'y kuneon eta teh kang ??? Itung-itung ide buat post selanjtnya kang hehe ...

Balas

nambah lagi satu pengalaman tentang edit html nih,makasih sharenya kang,buka blog kompi ajaib emang nggak mbosenin selalu aja ada yang menarik

Balas

ternyata banyak cara menuju roma ya mas? keren, nambah lagi sebuah inspirasi :-d

Balas

ijin untuk mencoba kode nya mas salam kenal

Balas

wah keren mas kalau sudah valid html5 dan css3. saya juga sudah menggunakan template kompi males nya mas adhy. keren mas template nya.. saya juga sudah melakukan semua settingannya. kira-kira apa ya mas yang terlewatkan yang belum saya edit. coba mas adhy cek...?

Balas

Hebring uy,,,... Keren Kang Share Button Hack na :)

Balas

Hehehehe iya kang ada tombol Pinterest dan Orkut :)

Balas

Alhamdulillah bisa ketemu di sini ya mas :)
Semoga bisa dimengerti :)

Balas

Nanti saya coba bikin artikelnya kang hehehee :)

Balas

Hehehe kang Ruly mah masihan ide teh nu hese-hese hehehe :)

Balas

Makasih mas atas apresiasinya :)

Balas

Betul sis untuk membuat sesuatu menjadi berbeda, yang jelas kita harus lebih kreatif :)

Balas

Silahkan mas dan salam kenal juga :)

Balas

Siiipp mas, hanya jangan lupa untuk menghapus tang dan obeng (quickedit) setiap menambahkan widget baru.

Balas

Hhehehe pakai hebring sagala kang Heri mah hehheeh :)

Balas

Izn pasang Kang untk biar valid html5

Balas

yang jadi herannya saya sedang balas komentar masih bisa .. tapi beberapa menit kemudian eror reply'y .. aneh kang !! saya lihat js komentar'y masih utuh gak ada berkurang satu pun !! makanya pake tutor KI gatot ge ...

Balas

amankan dulu kodenya mas, kolektor validasi html 5 dan css 3.. :ng

Balas

wih ketinggalan jauh neh. Simpan dulu ah

Balas

wah, ijin praktekin mas, kayaknya lebih jadul nih, tapi keren deh

Balas

udah ada mas di template kompi males,malah lebih keren :)

Balas

Silahkan mas :)

Balas

Hehehehe silahkan :)

Balas

Silahkan sis :)

Balas

Betul mas hehhehe old style :)

Balas

Betul mas ga usah diganti lagi :)

Balas

kalau bisa yang kurang penting di ganti saja mas, seperti email this, blog this, orkut, karena menurut saya kurang digunakan :)

Balas

saya yang sobatnya juragan cipir ngga jauh jauh sama sahabatnya dong...;o)

Balas

pokoknya yang berhubungan dengan valid html 5 selalu menggoda saya untuk pasang, walaupun kudu rada nyantey...yakin bakalan dipasang lah.
makasih ilmunyah kang...moga jadi pundi amal.

Balas

klo sudah ada yg instan mau nyba pusing dulu bacanya hehe.. coba diterapin dulu deh klo koneksi mak jos. mksi sharenya mas :D

Balas

Setting utk Static-page gimana Mas....?

Balas

Sama-sama kang :) makasih do'anya amiin.

Balas

Sama-sama mas :)

Balas

Wah ada kang Kapuk hehehe :)
Kalau saya pakai tag conditional untuk static page mas.
Ini mas http://kompipreett.blogspot.com/p/test-page.html

Balas

sip kang udah saya pasang, sangat bermnafaat |o|

Balas

Menambah wawasan nih, thanks mas :-bd

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×