Membuat Share Button Blogger Ala Kompi Ajaib

Membuat Share Button Blogger Ala Kompi Ajaib

Bola Hero Gawai

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....

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

30 Comments Add Comment

Bawa jerigennya ga :D

Balas

Silahkan dicoba mas Muhammad :D

Balas

Ini lanjutan dari tutorial semalam ya kang.......

Balas

Iya mas, ini bagi yang pakai trik menyembunyikan CSS reset, biasanya tombolnya tidak tampil, yang tampil berupa teks.

Balas

kang hapunten pisan tos OOT sareng maksa, pami teu sibuk sing pangwalerkeun email abdinya :D
hatur nuhun

Balas

Langsung sae nu ieu kang.. :)

Balas

Siip kang langsung dibuka emailna :D

Balas

Aya transisina nu ieu mah kang :D

Balas

top pokpna mah kang.. Diamankn hela ah scriptna :)

Balas

widih keren pisan kang ... dicobian ah

Balas

Pinter pinter teing ka andhy nya :D Mantap pisan kang

Balas

keren kang, tombol standar blogger dimodif janten sae pake efek hover... :)

Balas

Keren juga sahare buton ini mas :D tetapi masi setia pakai yang sekarang dulu :D

Balas

hehehe.. iya nanti saya bawain :)

Balas

mungkin mas adhy punya solusi tentang posting di atas, begini mas... kemarin saya abis bedah bundle.css untuk mengetahui css share button bawaan blog, dan sudah berhasil menampilkan nya di blog saya tapi dah di edit sana sini tombol orkut ga muncul muncul, bisa kasih solusi ga mas? terima kasih mas

Balas

Ah biasa wae kang :D

Balas

Muhun kang ditambih efek hover :D

Balas

Sudah saya coba juga, sama tombol orkutnya ga muncul, salah satu solusinya menggunakan trik di atas, tinggal ganti gambarnya yang menyertakan tombol orkutnya dan menambahkan kode CSSnya dan link orkutnya. Gambar yang ini sudah saya hapus tombol orkutnya mas. Link orkut yang valid HTML5 ada di postingan sebelum ini mas.

Balas

kalo share button dengan banyak sosial bookmarking gmn mas? sperti dig,stumble,technorati dan yang high PR lainnya. Kan enak kalo langsung tinggal submit. Share dong mas? :)

Balas

Menarik artikel share buttona Kang nyimak
sekalian ijin save scriptnya Kang, buat belajar
Terapin di blog saya. terima kasih yah Kang Adhy.

Balas

Kalau yang itu lebih enak pakai button seperti addthis atau lainnya :D

Balas

Silahkan kang Saud... Share button-nya ringan kang :D

Balas

artikel menarik. ijin pake kang

Balas

inikan seperti tombol share di template kang kapuk
keren!!!! |o| :-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!

×
×
×