Simple Share Button untuk Blogspot

Discussion in 'Blogger' started by Fahmi, Aug 26, 2013.

  1. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    Simple, sebenernya share button yang simple ini pengen buat tanpa melibatkan js Widget dari social masing2, saya rasa cukup ringan dan tampilannya pun lumayan :D

    Apa yg dibutuhkan :

    1. Font Awesome yang akan digunakan untuk icon
    Load fontawesome di head blogger kamu
    Code:
    <link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>
    

    2. CSS button , diambil berdasar dari ini - https://github.com/necolas/css3-github-buttons
    Code:
    .share-buttons, a.share-buttons {
    position: relative;
    overflow: visible;
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid #d4d4d4;
    margin: 0;
    text-decoration: none;
    text-align: center;
    text-shadow: 1px 1px 0 #fff;
    font:11px/normal sans-serif;
    color: #333;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    background-color: #ececec;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
    background-image: -moz-linear-gradient(#f4f4f4, #ececec);
    background-image: -ms-linear-gradient(#f4f4f4, #ececec);
    background-image: -o-linear-gradient(#f4f4f4, #ececec);
    background-image: linear-gradient(#f4f4f4, #ececec);
    -moz-background-clip: padding; /* for Firefox 3.6 */
    background-clip: padding-box;
    border-radius: 0.2em;
    /* IE hacks */
    zoom: 1;
    *display: inline;
    }
    
    .share-buttons:hover,
    .share-buttons:focus,
    .share-buttons:active,
    .share-buttons.active {
    border-color: #3072b3;
    border-bottom-color: #2a65a0;
    text-decoration: none;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    color: #fff;
    background-color: #3c8dde;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
    background-image: -moz-linear-gradient(#599bdc, #3072b3);
    background-image: -o-linear-gradient(#599bdc, #3072b3);
    background-image: linear-gradient(#599bdc, #3072b3);
    }
    
    .share-buttons:active,
    .share-buttons.active {
    border-color: #2a65a0;
    border-bottom-color: #3884cd;
    background-color: #3072b3;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc));
    background-image: -moz-linear-gradient(#3072b3, #599bdc);
    background-image: -ms-linear-gradient(#3072b3, #599bdc);
    background-image: -o-linear-gradient(#3072b3, #599bdc);
    background-image: linear-gradient(#3072b3, #599bdc);
    }
    
    /* overrides extra padding on button elements in Firefox */
    .share-buttons::-moz-focus-inner {
    padding: 0;
    border: 0;
    }
    /* Red Share Buttons
       ========================================================================== */
    
    .share-buttons.red {
    color: #333;
    }
    
    .share-buttons.red:hover,
    .share-buttons.red:focus,
    .share-buttons.red:active {
    border-color: #b53f3a;
    border-bottom-color: #a0302a;
    color: #fff;
    background-color: #dc5f59;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630));
    background-image: -moz-linear-gradient(#dc5f59, #b33630);
    background-image: -ms-linear-gradient(#dc5f59, #b33630);
    background-image: -o-linear-gradient(#dc5f59, #b33630);
    background-image: linear-gradient(#dc5f59, #b33630);
    }
    
    .share-buttons.red:active,
    .share-buttons.red.active {
    border-color: #a0302a;
    border-bottom-color: #bf4843;
    background-color: #b33630;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59));
    background-image: -moz-linear-gradient(#b33630, #dc5f59);
    background-image: -ms-linear-gradient(#b33630, #dc5f59);
    background-image: -o-linear-gradient(#b33630, #dc5f59);
    background-image: linear-gradient(#b33630, #dc5f59);
    }
    
    /* BLT Share Buttons
       ========================================================================== */
    
    .share-buttons.blt {
    color: #333;
    }
    
    .share-buttons.blt:hover,
    .share-buttons.blt:focus,
    .share-buttons.blt:active {
    border-color: #3a91b3;
    border-bottom-color: #257796;
    color: #fff;
    background-color: #00ABED;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#05a3e0), to(#0299d3));
    background-image: -moz-linear-gradient(#05a3e0, #0299d3);
    background-image: -ms-linear-gradient(#05a3e0, #0299d3);
    background-image: -o-linear-gradient(#05a3e0, #0299d3);
    background-image: linear-gradient(#05a3e0, #0299d3);
    }
    .share-buttons.blt:active,
    .share-buttons.blt.active {
    border-color: #3a91b3;
    border-bottom-color: #257796;
    background-color: #00ABED;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00ABED), to(#05a7e6));
    background-image: -moz-linear-gradient(#00ABED, #05a7e6);
    background-image: -ms-linear-gradient(#00ABED, #05a7e6);
    background-image: -o-linear-gradient(#00ABED, #05a7e6);
    background-image: linear-gradient(#00ABED, #05a7e6);
    }
    

    3. Yang terakhir tinggal pasang code nya tepatnya didalam blog1 (biasanya) yang bernama shareButtons

    Code:
    <div style='height: 28px;'><i class='icon-share icon-1x' style='padding-right: 5px;'/>  
                          <a class='share-buttons blt' expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + " " + data:post.canonicalUrl + ""' target='_blank' title='Share on Twitter'><i class='icon-twitter'/> Twitter</a>
                          <a class='share-buttons' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.canonicalUrl + ""' target='_blank' title='Share on Facebook'><i class='icon-facebook'/> Facebook</a>
                          <a class='share-buttons red' expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl + ""' target='_blank' title='Share on Google+'><i class='icon-google-plus'/> Google+</a>
              </div>
    

    Hasil :
    [​IMG]
    Sedikit demo di blog saya yang kurang terpakai ini :D http://dblogskies.blogspot.com/

    Saya buat ini sebenernya sambil menunggu mastah membuatkan Count Share nya *peace* . Silahkan mencoba semoga bermanfaat dan Goodluck ! :)

    Updates : Karena di blog Danlogs sudah ada cara menghitung count untuk sharing button, ada baiknya dibaca dahulu artikelnya.

    Nah sekarang saya mempersiapkan css untuk count nya :
    Code:
    a.share-buttons span {
    background: #477FEF;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    margin: -21px 0 0 -15px;
    min-width: 14px;
    padding: 4px 8px;
    position: absolute;
    text-align: center;
    text-shadow: 0px 0px 0 #fff;
    }
    

    Lalu Update untuk count, tempatnya masih sama seperti cara di atas , Jadi untuk menghindari hasil count yang berbenturan dengan ID post terutama di home yg ada lebih dari 1 postingan maka saya akan pasang di homepage dan static page tanpa count,berikut codenya :

    Code:
    <b:if cond='data:blog.pageType != "item"'>
      <b:if cond='data:blog.pageType != "static_page"'>
        <div style='height: 28px;'><i class='icon-share icon-1x' style='padding-right: 5px;'/>  
          <a class='share-buttons blt' expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + " " + data:post.canonicalUrl + ""' target='_blank' title='Share on Twitter'><i class='icon-twitter'/> Twitter</a>
          <a class='share-buttons' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.canonicalUrl + ""' target='_blank' title='Share on Facebook'><i class='icon-facebook'/> Facebook</a>
          <a class='share-buttons red' expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl + ""' target='_blank' title='Share on Google+'><i class='icon-google-plus'/> Google+</a>
        </div>
      </b:if>
    </b:if>
    

    Dan untuk tampilkan count di halaman postingan tambahkan tepat dibawahnya :
    Code:
    <b:if cond='data:blog.pageType == "item"'> 
      <div style='height: 28px;margin-top: 15px;'><i class='icon-share icon-1x' style='padding-right: 5px;'/>  
        <a class='share-buttons blt' expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + " " + data:post.canonicalUrl + ""' id='twshared' target='_blank' title='Share on Twitter'><i class='icon-twitter'/> Twitter</a>
        <a class='share-buttons bfb' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.canonicalUrl + ""' id='fbshared' target='_blank' title='Share on Facebook'><i class='icon-facebook'/> Facebook</a>
        <a class='share-buttons red' expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl + ""' target='_blank' title='Share on Google+'><i class='icon-google-plus'/> Google+</a>
      </div>
    <script type='text/javascript'>
      var share_url = '<data:post.canonicalUrl/>';
      $.getJSON('http://graph.facebook.com/'+ share_url, function(fb) {
        if (fb.shares != null) {
          $('#fbshared').append('<span>' + fb.shares + '</span>');
        }
        else {
          $('#fbshared').append('<span>0</span>');
        }
      });
      $.getJSON('http://urls.api.twitter.com/1/urls/count.json?url='+ share_url + '&callback=?', function(tw) {
        $('#twshared').append('<span>' + tw.count + '</span>');
      });
    </script>
    </b:if>
    
    Demo bisa disini http://dblogskies.blogspot.com/2013/08/hanya-test-media-dan-video.html
    Sangat disayang kan sampai saat ini saya belum menemukan Google+ menyediakan api Json untuk data count share nya :)

    Update 2 : css bentrok dengan a:link untuk warnanya, sy update cssnya
    Code:
    .share-buttons, a.share-buttons {
    
     
  2. samuel

    samuel Member

    Joined:
    Feb 5, 2013
    Messages:
    478
    Likes Received:
    15
    Trophy Points:
    18
    Google+:
    simple tapi keren juga sih

    simple tapi keren juga sih Share Buttonnya, pengen nerapin ke blogspot saya tapi templatenya blm ada yang cocok nih *huh*
     
  3. jajang

    jajang Member

    Joined:
    Aug 20, 2013
    Messages:
    50
    Likes Received:
    1
    Trophy Points:
    8
    Keren euy.boleh dicoba neh:).

    Keren euy.boleh dicoba neh:).. nuhun gan :)
     
  4. ncang

    ncang Super Level

    Joined:
    Feb 7, 2013
    Messages:
    4,655
    Likes Received:
    761
    Trophy Points:
    113
    Google+:
    ternyata sudah jadi, judul

    ternyata sudah jadi, judul blognya juga di samping, kenapa gak jadi di bawah ? *peace*
     
  5. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    Barusan Update post karena

    Barusan Update post karena sudah ada count nya :)
     
  6. pram

    pram Well-Known Member

    Joined:
    Sep 23, 2013
    Messages:
    3,099
    Likes Received:
    161
    Trophy Points:
    63
    Google+:
    terlalu jos nih share

    terlalu jos nih share buttonya *bagus*
     
  7. KBlogger

    KBlogger New Member

    Joined:
    Mar 7, 2014
    Messages:
    68
    Likes Received:
    0
    Trophy Points:
    6
    Bookmark dulu,

    kebetulan udah ada tombol share, hehehe
     
Loading...

Share This Page