Selasa, 05 Juni 2012

Cara Membuat Tombol Share Melayang Di Blog


By on 14.35

Blazer Blog, Widget - Cara membuat tombol share memang sudah biasa di kalangan blogger, tapi jika tombol share yang satu ini melayang disebelah kiri blog gimana, pastinya keren, disini ada beberapa tombol share seperti Twitter, Tombol Like, Share to Facebook, Tombol Pinterest, Google+, Email dan masih banyak lainnya.

Manfaat lainnya dari Tombol Share melayang ini antara lain, bisa meningkatkan pengunjung, bisa menambah daya tarik blog anda, membuat blog anda tampil Profesional, dan menarik minat pengunjung untuk membagikan artikel anda di berbagai jejaring social, cara membuatnya sangat mudah tidak ribet.


Cara Membuat :
1. Login ke Blog kamu.
2. Pilih Rancangan > Edit HTML > Centang Expand Widget Template
3. Cari kode <b:includable id='post' var='post'> setelah ketemu letakan kode di bawah ini tepat di bawah kode yang berwarna merah tadi.
<style>
.mbt_social_floating{
position:fixed; bottom:10%; margin-left:-60px; float:left;
width:60px;
background-color:#f7f7f7;
padding: 5px 0 0px 0px;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
background:url(&#39;http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif&#39;) no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
}
.st_email .chicklets{
background-position:0 -77px !important;
background-image:url(&#39;http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif&#39;) !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
}
.mbt_social_floating .stButton_gradient{
border:none !important;
}
.mbt_social_floating .stBubble_count{
width:44px !important;
font-size: 15px !important;
font-weight: normal !important;
padding-top:7px !important;
height:23px !important;
background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
color:#00a6df;
background-color:#f8fbfc !important;
}
.st_fblike_vcount{
margin-bottom: 0px;
display: block;
}
.st_twitter_vcount{
margin-bottom: 3px;
display: block;
}
.st_email{
margin-bottom: 5px; margin-top: 3px;
display: block;
}
.mbt_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}
</style>
<div class='mbt_social_floating'>
<script type='text/javascript'>var switchTo5x=true;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false});</script>
<span class='st_fblike_vcount' displaytext=''/>
<span class='st_twitter_vcount' displaytext='' st_via='blazer_blog'/>
<div style='margin:5px 0 0px 0;'>
<center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center>
</div>
<div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''/>
</div>

<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: &quot;Blazer Blog&quot;,
ui_header_color: &quot;#ffffff&quot;,
ui_header_background: &quot;#0080FF&quot;
}
</script>
<span class='st_email' displaytext=''/>
</div>
Ganti kode yang berwarna merah dengan Username Twitter kamu.
Setelah selesai jangan dulu disimpan, klik dulu Pertinjauan, jika sudah bagus baru simpan.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

16 komentar:

  1. boleh juga gan dicobain nih, kali aja srek sama blog ane..

    BalasHapus
  2. Tengkyuu Ilmunya Gan...
    suksess di Blog anee :D

    BalasHapus
  3. Tombol like & share melayang versi gw, tutorial lengkap klik nama gw di atas gan: All About...

    BalasHapus
  4. Sory gan ini versi teman saya mybloggertricks.com

    BalasHapus
  5. thanks infonya gan, jangan lupa saling mampir @animevis.org

    BalasHapus
  6. Mampir :
    http://tigaputra-03.blogspot.com/

    BalasHapus
  7. Makasih atas Infonya : Jika punya waktu, mapirlah di blog sederhana saya : http://gorontalo-education.blogspot.com

    BalasHapus
  8. Thanks sudah berbagi ilmunya, sukses selalu...

    BalasHapus
  9. makasih mas gan. ane sangat terbantu

    BalasHapus
  10. makasih ilmunya
    adityamotor.blogspot.com

    BalasHapus
  11. makasaih mas bro....
    thanks bgd...!!

    BalasHapus
  12. Makasih Gan.......
    Thaks....

    dan jangan lupa kunjungi Blog Saya www.army-chiter-tng.blogspot.com

    BalasHapus
  13. kunjungan perdana.. nice posting, sangat mudah penerapannya.. visit back ya ;)

    BalasHapus
  14. info yg sangat menarik dan bermanfaat bagi saya,, kunjungi balik gan www.ankurniawan.blogspot.com

    BalasHapus