» » » cara membuat tombol share ringan dibawah postingan blog

cara membuat tombol share ringan dibawah postingan blog

cara membuat tombol share ringan dibawah postingan blog
بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
السلام عليكم 

Bagi anda yang memiliki blog tetapi tidak memiliki atau tidak ada widget tombol sharenya baik yang berada di atas atau di bawah postingan. Widget Tombol share sangat penting untuk blog karena dengan adanya tombol share mempermudah anda dan orang lain untuk membagikan atau menshare artikel atau postingan yang ada di blog tersebut ke media sosial. 

cara membuat tombol share ringan dibawah postingan blog

Berikut cara membuat widget tombol share ringan dibawah postingan blog :
  • Login ke aku blogger anda
  • pilih Template lalu Edit HTML
  • salin script di bawah lalu letakkan di atas ]]></b:skin> dengan tekan ctrl + F
  1. /* Share Buttom */
#button-share {
    background: #f1f1f1;
    color: #000;
    line-height: 45px;
    padding-left: 10px;
    margin-top: 10px;
}

#button-share h4 {
    font-size: 13px;
    font-weight: normal;
    line-height: 40px;
    margin: 0;
    text-transform: uppercase;
    display: inline;
}

#button-share h4 span {
    background: #2c3e50;
}

#button-share a {
    position: relative;
    font: normal 13px Tahoma;
    margin: 2px;
    color: #fff;
    text-transform: uppercase;
    padding: 7px 7px 7px 7px;
    font-weight: 700;
}

#button-share a:hover {
    background: #222;
}

#button-share a:hover span {
    color: #222;
}

#button-share a span {
    line-height: 20px;
    width: 40px;
    padding: 6px 0;
    top: 0;
}

#button-share a span.fb {
    background: #2884f6;
}

.fb {
    background: #1e90ff;
}

#button-share a span.tw {
    background: #45B0E3;
}

.tw {
    background: #00bfff;
}

#button-share a span.gp {
    background: #e00;
}

.gp {
    background: #f83124;
}
  • selanjutnya salin scrpit di bawah lalu letakkan di bawah <data:post.body/> atau 
<div class='post-footer'>
  1. <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100%; height:25px; padding-top: 4px; border-top: 1px solid #eee; border-bottom: 1px solid #eee;'/>
<div id='button-share'>
<h4>Share :</h4>
<a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'> Facebook</a>
<a class='tw' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'>Twitter</a>
<a class='gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'>Google+</a>
 </div>
  • selanjutnya Klik save dan lihat hasil widget yang telah anda buat.
Jika di dalam blog anda sudah ada tombol share tersebut terlebih dahulu hapus script tersebut baru masukkan script yang ada di atas untuk mengganti windgat share tersebut dengan widget share ringan  dan simple ini.
loading...
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Related Post:

Back To Top