Home » , » Membuat Widget Share Button di Bawah Postingan Blog

Membuat Widget Share Button di Bawah Postingan Blog


Cara Membuat Widget Tombol Share atau Share Button di Bawah Postingan Blog Keren | Assalamualikum wr.wb hai sobat blogger semuanya apa kabarnya hari ini ?? saya doakan baik baik saja, nah pada postingan kali ini admin cyber 88 akan share nih buat anda semua yakni Cara Membuat Widget Tombol Share keren ( Share Button dibawah Postingan Blog .

Share Button atau Tombol Berbagi merupakan suatu widget social media yang berfungsi untuk menambah jumlah visitor atau pengunjung bagi blog kita masing masing dan juga agar postingan tersebut bisa tersebar ke dunia maya hanya dengan klik tombol tersebut.

Baca Juga > Cara Membuat Widget Social Media Melayang Disamping sidebar Blog

Demo "Widget Share Button Keren Dibawah Postingan Blog"

Membuat Widget Share Button di Bawah Postingan Blog

Memang sekarang ini widget Share Button dibawah postingan tidak asing lagi bagi para sobat blogger namun tetapi para pemula pemula blogger sekarang ini juga perlu untuk mengetahui lebih lanjut tentang Membuat Widget Share Button di Bawah Postingan Blog.

Dengan demikian memasang widget share button dibawah postingan juga perlu untuk kita semua nah untuk tutorial atau tipsnya anda juga bisa mendapatkanya dibawah ini.

Cara Membuat Widget Tombol Share atau Share Button di Bawah Postingan Blog Keren

  • Login di Blogger.com
  • Masuk ke Dashboard > Template
  • Terus click Edit HTML > lalu tekan tombol di keyboard secara bersamaan "CTRL + F" > Akan muncul kotak search .
  • Kemudian cari kode ]]></b:skin> > jika sudah masukkan kode CSS ini diatas kode tersebut .
   ul.social_cyber88 {
    list-style:none;
    display:inline-block;
    margin:15px auto;
    }
    ul.social_cyber88 li {
    display:inline;
    float:left;
    background-repeat:no-repeat;
    }
    ul.social_cyber88 li a {
    display:block;
    width:50px;
    height:50px;
    padding-right:10px;
    position:relative;
    text-decoration:none;
    }
    ul.social_cyber88 li a strong {
    font-weight:400;
    position:absolute;
    left:20px;
    top:-1px;
    color:#fff;
    z-index:9999;
    text-shadow:1px 1px 0 rgba(0,0,0,0.75);
    background-color:rgba(0,0,0,0.7);
    -moz-border-radius:3px;
    -moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
    -webkit-border-radius:3px;
    -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
    border-radius:3px;
    box-shadow:0 0 5px rgba(0,0,0,0.5);
    padding:3px;
    }
    ul.social_cyber88 li.abfacebook {
    background-image:url(http://4.bp.blogspot.com/-nJMUyZUi2SM/UaXEnGYtwWI/AAAAAAAAAkM/SXrQ4Q8ASoA/s1600/btrix-facebook-icon.png);
    }
    ul.social_cyber88 li.abtwitter {
    background-image:url(http://4.bp.blogspot.com/-_18_qzg7sHs/UaXEnVKS3aI/AAAAAAAAAkY/UYLCvEQuOEI/s1600/btrix-twitter-icon.png);
    }
    ul.social_cyber88 li.abgoogleplus {
    background-image:url(http://2.bp.blogspot.com/-DpI_6iUH6GY/UaXEnB83lFI/AAAAAAAAAkQ/Q6QtGamgL_E/s1600/btrix-google-icon.png);
    }
    ul li.abpinterest {
    background-image: url(http://2.bp.blogspot.com/-tMeDXWRp5VY/UaXEmVQIGDI/AAAAAAAAAj0/FrLLKtGE8j0/s1600/btrix-Pinterest-icon.png);
    }
    ul.social_cyber88 li.abstumbleupon {
    background-image:url(http://1.bp.blogspot.com/-NxzIC4d0ixE/UaXEmytFBoI/AAAAAAAAAkI/jmk72VMrnvA/s1600/btrix-StumbleUpon-icon.png);
    }
    ul.social_cyber88 li.abdig {background-image:url(http://4.bp.blogspot.com/-J2vYlohj8qw/UaXEmX-JDMI/AAAAAAAAAj8/QwSrbs1Md8w/s1600/btrix-Digg-icon.png);
    }
    ul.social_cyber88 li.ablinkedin {
    background-image:url(http://2.bp.blogspot.com/-HaUpL3wjx3I/UaXEmf3UVSI/AAAAAAAAAj4/cHVj0FALvgk/s1600/btrix-Linkedin-icon.png);
    }
    #animation_cyber88:hover li {
    opacity:0.2;
    }
    #animation_cyber88 li {
    -webkit-transition-property:opacity;
    -webkit-transition-duration:500ms;
    -moz-transition-property:opacity;
    -moz-transition-duration:500ms;
    }
    #animation_cyber88 li a strong {
    opacity:0;
    -webkit-transition-property:opacity, top;
    -webkit-transition-duration:300ms;
    -moz-transition-property:opacity, top;
    -moz-transition-duration:300ms;
    }
    #animation_cyber88 li:hover {
    opacity:1;
    }

#animation_cyber88 li:hover a strong {
    opacity:1;
    top:-10px;
    }
  • Kemudian cari kode <data:post.body/> jika kalian menemukan beberapa kode tersebut ( biasanya ada 3 ) pilih yg nomor terakhir saja jika kalian sudah memasang read more otomatis .
  • Jika sudah pastekan kode Pemanggilnya dibawah ini.
<!-- Share Button Cyber88 Widget Mulai-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;padding: 7px;margin: 0px auto;text-align: center;font-family: Oswald;text-transform: uppercase;color: #216A93;background: none repeat scroll 0% 0% #DDD;border: 1px dotted #AAA;'><b>Share this article with your friends</b></div>
<div style='text-align:center'>
    <ul class='social_cyber88' id='animation_cyber88'>
    <li class='abfacebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' ><strong>Facebook</strong></a>
    </li>
    <li class='abtwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' title='Twitter' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='abgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' title='G+'  target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'  target='_blank' title='Pinterest'><strong>Pinterest</strong></a>
    </li>
    <li class='abstumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' title='Stumbleupon'  target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='abdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Dig'  target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='ablinkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;'  target='_blank' title='LinkedIn'><strong>LinkedIn</strong></a>
    </li>
  </ul></div>
</b:if>
<!-- Share Button Cyber88 Widget Selesai-->
  • Eiit jangan simpan dulu templatenya , jika kalian ingin Share Button persis seperti gambar diatas kalian pasang dulu Script Font :Oswald nya .
  • Cari Kode <head> > Paste kan kode dibawah ini dibawah kode <head>.
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>
  • Kemudian Klik Simpan Template anda .
  • Enjoy.
Nah itulah Artikel tentang Cara Membuat Widget Tombol Share atau Share Button di Bawah Postingan Blog Keren dan semoga kalian bisa memasangnya diblog kalian masing masing dan semoga kalian bisa mendapatkan visitor yang lebih oke :D . Demikianlah artikel tentang Membuat Widget Share Button di Bawah Postingan Blog semoga artikel ini bisa bermanfaat bagi kita dan kalian semua wassalamualikum wr.wb.



Share this article :
Previous
Next Post »

16 comments:

  1. wah bagus nih buat nambahin optimasi blog dari social media :D, izin praktekin dulu mas

    ReplyDelete
  2. Hello,blog bro bagus ya.Navigasi yg mudah dan sederhana.Artikel dan Label-nya juga bagus hehe.Kalau punya luang waktu,silakan blogwalking di blog teknologi saya ya
    http://techlife25.blogspot.com
    Mungkin artikel di blog saya bisa membantu anda.Kalau mungkin,bolehkah kita tukar link ?
    Terima kasih

    ReplyDelete
  3. thanks gan ane udah pajang di blog ane keren juga gan silahkan lihat di blog ane gan

    ReplyDelete
  4. thanks gan , sangat membantu. .
    kunjungi web ane juga gan fakta-opini.blogspot.com , see you :)

    ReplyDelete
  5. sangat menarik sekali nih, bertambah lagi ilmu saya....
    makasih banyak.

    http://landongobatherbal.com/obat-herbal-insomnia/

    ReplyDelete
  6. Kok jadinya diatas postingan ya bro???

    ReplyDelete
  7. izin nyoba gan jngan lupa kunjung balik y http://kidahikiblog.blogspot.com/

    ReplyDelete
  8. keren saya mau coba dulu widget share nya
    maasih ya ini sangat membantu :)

    ReplyDelete
  9. thanks gan, sangat bermanfaat. :D

    ReplyDelete
  10. Artikel yg sangat membantu..
    Kunjungi blog ane juga ya
    Coretansederhana123.blogspot.co.id

    ReplyDelete

Silahkan tinggalkan Komentar anda, dilarang spam, link aktif dll

 
Copyright © 2014. Film Terbaru 2015 - All Rights Reserved | Template By Mas Template