Cara Membuat Tombol Berbagi Di Atas Postingan Bergaya Profesional

Triknews - Cara Membuat Tombol Berbagi atau Share Button Di Atas Postingan ala web profesional keren. Dalam dunia blogger sangat erat kaitannya dengan soal edit mengedit kode, baik code script, CSS, HTML, posisi widget, dan juga Tombol Berbagi atau Share Button pun tak mau ketinggalan. Namun sayangnya kebanyakan template yang di gunakan para blogger Tombol Berbagi nya biasanya ada di bagian bawah postingan.


Baik saudara pembaca kali ini saya akan berbagi Cara memodifikasi atau Membuat Tombol Berbagi atau Share Button Di Atas Postingan, anda lihat Tombol Berbagi di atas postingan pada halaman ini...keren kan? Cara membuatnya pun sangat gampang kok hanya dua langkah saja sudah beres, dan Tombol Berbagi atau Share Button di blog anda akan terlihat keren. Tombol Berbagi atau Share Button Di Atas Postingan ini banyak di jumpai di situs situs populer seperti Merdeka.com, CNN indonesia, viva.co.id, Tribunnews.com, kompas, Republika, Detik.com, situs situs ini lah yang menginspirasi untuk membuat kode Share Button. Demo seperti pada halaman ini.

Baca juga :
Cara Membuat Logo dan judul Blog Keren
Cara mengganti background profile Google plus

  • Pertama Masuk ke akun blogger anda pilih edit HTML.
  • Cari kode ]]></b:skin>
  • Kemudian paste kode berikut dibawah kode ]]></b:skin>
  • /* Share Button by triknews */
    .tombol-berbagi-triknews{display:block;position:relative;height:50px;line-height:50px;padding:12px;margin:auto}.tombol-berbagi-triknews-fb,.tombol-berbagi{float:left;width:10%;padding:0 10px;height:inherit}.tombol-berbagi-triknews-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:10%;height:inherit;padding:0 10px;}.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('http://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI/AAAAAAAACbg/8dz4LkDIHYY/s1600/share.png') no-repeat;width:43px;height:43px;margin-right:3px}.tombol-berbagi-fb-label{color:#2d609b}.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:43px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}.tombol-berbagi-tw{background-position:0 -43px}.tombol-berbagi-tw-label{color:#00c3f3}.tombol-berbagi-gp{background-position:0 -86px}.tombol-berbagi-gp-label{color:#f00}.tombol-berbagi-lin{background-position:0 -129px}.tombol-berbagi-triknews a{color:#999;transition:all .3s;}.tombol-berbagi-triknews a:hover{color:#fff;opacity:1;transform:rotate(360deg);}
    @media only screen and (max-width:640px){.tombol-berbagi,.tombol-berbagi-triknews-fb{display:inline-block;float:none;width:15%;padding:0;height:inherit}.tombol-berbagi,.tombol-berbagi-triknews-tw,.tombol-berbagi-lk{float:left;width:15%;padding:0;border-left:0}}
    
  • Kedua Pada editor template, kemudian cari kode <data:post.body/> anda akan menemukan dua atau bahkan sampai tiga kode diatas, silahkan pilih salah satu yang benar-benar menampilkan postingan artikel anda, jika sudah menemukan kode <data:post.body/> letakkan kode berikut di atasnya.

    Bagi anda yang sudah memiliki adsense, pasti pernah memasang kode iklan adsense tepat diatas postingan kan? nah sama seperti itulah penerapan kode dibawah ini.
  • <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='tombol-berbagi-triknews'>
    <div class='tombol-berbagi-triknews-fb'>
    <a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
    <a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
    </div>
    <div class='tombol-berbagi-triknews-tw'>
    <a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
    <a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
    </div>
    <div class='tombol-berbagi'>
    <a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
    <a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
    </div>
    <div class='tombol-berbagi'>
    <a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>
    <a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>
    </div>
    </div>
    </b:if>
     
  • Klik Simpan

Nah bagaimana saudara pembaca mudah bukan Cara Membuat Tombol Berbagi Di Atas Postingan Bergaya web Profesional. Semoga anda tidak kecewa.

8 komentar

liat contoh tombol didalem postingan yang ada diatas onoh noh...emang sukeren bingit dan prof bingit deh ih

sha pakeknya yang dibawah postingan :D

ide bagus juga mas bikin tombol share di atas. solanya di blog saya selalu di bawah.
hasilnya gimana mas lebih banyak yang share ga mas

Tombol share cuma biar terlihat profesional gitulhoo mas

tombol share penting ya mas agar mudah artikel kita dipromosiin..

Wow, baru tahu.. makasih ilmunya Mas :)

saya sudah pasang nih mas, tapi make layanannya addthis. ada di blog saya tuh

Kalau ada contohnya bisa lebih keren kang, dan makin tertarik untuk memasang di blog ane kang


EmoticonEmoticon