Saturday, 11 May 2013

Cara Membuat Share Button Like, Share dan Twitter versi template gelap

Jika Anda menggunakan template gelap / dark template, Silakan Anda dapat mencoba kode di bawah ini:

<!--Widget Share Button Melayang Start-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000000;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="Bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://blogbelajar2.blogspot.com/2012/02/cara-membuat-share-button-like-share.html" target="blank"><font color="white">[Get Widget]<font></font></font></a></div></div>

<!--Widget Share Button Melayang End-->

Pengaturan lihat kode-kode warna merah:

  • angka 15% mengatur letak tinggi posisi share button dr sisi bawah blog, silakan dikurangi jika posisinya ingin diturunkan
  • angka 10 pixel adalah posisi dari tepi paling kanan blog, ditambah jika sobat ingin mengetengahkan.
  • sedangkan border: 1px solid black, adalah ukuran ketebalan batas kotak share button dan warna batas/garis share button itu sendiri.

Slamat mncoba.. :D

12 comments:

  1. It is truly a nice and useful piece of information.
    I'm glad that you just shared this helpful info with us.
    Please stay us up to date like this. Thank you for sharing.


    Also visit my webpage; panic attack symptoms (en.wikipedia.org)

    ReplyDelete
  2. It's actually a nice and helpful piece of info.
    I'm happy that you just shared this helpful information with us.
    Please keep us up to date like this. Thank you for sharing.


    Here is my blog http://members.scfenghe.com

    ReplyDelete
  3. If you would like to improve your knowledge simply keep visiting this
    web page and be updated with the newest information posted here.


    Have a look at my blog - http://support.scfenghe.com

    ReplyDelete
  4. Hello! This is kind of off topic but I need some advice from
    an established blog. Is it very difficult to set up your own blog?
    I'm not very techincal but I can figure things out pretty quick.
    I'm thinking about setting up my own but I'm not sure where to start.

    Do you have any tips or suggestions? Appreciate it

    Feel free to surf to my web page - helpdesk.authorityspyreview.net

    ReplyDelete
  5. Very nice blog post. I definitely love this website.
    Stick with it!

    my webpage ... clients.sunsetmarchadors.com

    ReplyDelete
  6. What's up everyone, it's my first go to see at this web
    page, and piece of writing is truly fruitful for me, keep up posting
    these types of articles or reviews.

    Look into my homepage :: resources.encinocouncil.org

    ReplyDelete
  7. What's up, just wanted to mention, I enjoyed this post. It was practical.

    Keep on posting!

    my web-site: sunsetmarchadors.com

    ReplyDelete
  8. Wow, this piece of writing is nice, my younger sister is analyzing such things, so I am going to
    let know her.

    My homepage: clients.trafficbackdoorreview.net

    ReplyDelete
  9. WOW just what I was searching for. Came here
    by searching for motor insurance

    My homepage :: support.ganapatioccult.com

    ReplyDelete
  10. Howdy! Do you know if they make any plugins to help with SEO?
    I'm trying to get my blog to rank for some targeted keywords but I'm not seeing very good
    gains. If you know of any please share. Cheers!


    Here is my page :: http://helpdesk.sunsetmarchadors.com

    ReplyDelete
  11. Hello, this weekend is fastidious designed for me, as this time i am reading
    this impressive educational article here at my house.


    Feel free to visit my web blog; help.clairehunterphotography.com

    ReplyDelete
  12. Have you ever considered about including a little bit more than just your articles?
    I mean, what you say is important and everything.
    Nevertheless think of if you added some great
    images or videos to give your posts more, "pop"! Your content is excellent but with images
    and clips, this blog could definitely be one of the most
    beneficial in its niche. Fantastic blog!

    my site :: reports.elvissightingbulletinboard.com

    ReplyDelete