22 January 2015

Cara membuat tombol Share plus animasi keren

Cara Terbaru dan populer membuat tombol share button saat ini adalah Tombol Share di bawah postingan seperti Template
Setengah Jadi,Sakit Hati,Jeritan Hati
dan masih banyak yang lainnya .Ada banyak cara untuk membuat tombol share button yang dapat kita pasang di blog kita ,baik itu menggunakan java script maupun menggunakan kode kode yang lain

Kali ini saya akan bagikan bagaimana cara untuk membuat tombol share button di blog yang letaknya dibawah postingan , tombol share ini merupakan hasil inisiatif saya sendiri yang memang sebelumya telah memakan waktu berbulan-bulan bahkan berabad-abad untuk pengeditan ...he..he..he..bercanda mas bro dan hasil memang sangat luar biasa .., dan yang unik lagi tombol share ini agak sedikit berbeda lho dengan Tombol Share yang katanya seperti Template Blog Evo Magz....Ohya mas bro seperti apa tampilan tombol share button yang kita bahas ini ,,penasaran ? oky langsung saja kita pergi bareng bareng ke TKP untuk melihat dan mengikuti

Cara membuat tombol Share plus animasi keren...



nama gambar
Ilustrasi tombol Share: © social media com


Baca juga : Cara Terbaru Membuat Tombol Follow Twitter di Sidbar Blog

Berikut Cara Membuat Tombol Share Keren dari yang sudah keren
  • Seperti biasanya , masuk dulu ke editor template html

  • Pasang kode css berikut tepat di atas ]]</b:skin> atau </style>


  • /* share buttons Mas Hidayatd*/
    .share-buttons-box {
    height: 67px;
    background: url(http://1.bp.blogspot.com/-pZIi9nsJG9M/VKBq9eUihXI/AAAAAAAABF4/hye058whD1I/s1600/Mas%2BHidayatd.gif) no-repeat 330px 10px;
    margin:20px 0 15px;
    overflow:hidden;
    }
    .share-buttons {
    margin:0 0;
    height:67px;
    float:left;
    }
    .share-buttons .share {
    float:left;
    margin-right:10px;
    display:inline-block;
    }
    /* error and search */
    .status-msg-wrap {
    font-size:120%;
    font-weight:bold;
    width:100%;
    margin:20px auto;
    }
    .status-msg-body {
    padding:20px 2%;
    width:96%;
    }
    .status-msg-border {
    border:1px solid #e5e5e5;
    opacity:10;
    width:auto;
    }
    .status-msg-bg {
    background-color:#ffffff;
    }
    .status-msg-hidden {
    padding:20px 2%;
    }
    

  • Kemudian cari lagi kode <data:post.body/> ( biasanya kode tersebut lebih dari 2 , sobat pilih aja yang terakhir atau di coba satu persatu )




  • Setelah ketemu kode diatas kemudian pasang script dibawah ini tepat dibawah kode  <data:post.body/>




  • atau bisa juga sobat letakkan di atas kode Artikel terkait seperti yang saya jelaskan pada postingan beberapa waktu lalu yaitu Cara membuat artikel terkait
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    
    <!-- Scripts Start -->
    <b:if cond='data:post.isFirstPost'>
    <!-- Facebook -->
    <div id='fb-root'/>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
    </script>
    <!-- Google +1 -->
    <script type='text/javascript'>
    (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
    })();
    </script>
    <!-- Twitter -->
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
    </b:if>
    <!-- Scripts End -->
    
    
    <!-- Horizontal social buttons Start -->
    
            <div class='share-buttons-box'>
      <div class='share-buttons'>
       <div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
       <div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
       <div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>
       <div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
       <div class='share linkedin'><script src='//platform.linkedin.com/in.js' type='text/javascript'>
       lang: en_US </script><script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/></div></div></div>
    
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>
    </b:if>
  • Terkhir Simpan Template dan Lihat Hasilnya




  • Catatan:
    Pembuatan tombol Share atau pos terkait versi seluler, secara specsifik penempatan kodenya hampir sama ,screnshot anda bisa lihat blog ini atau blog mana saja, jika anda perhatikan di bagian bawah artikel blog tombol Share dan pos terkait posisinya berurutan dan biasanya tombol Share terletak dibagian bawah artikel kemudian diikuti menu post terkait

    jika Berhasil maka tombol share tadi akan seperti pada gambar diatas , atau pada share button yang saya pasang diblog ini( bila masih saya pasang ) hehheheheh , gimana mudahkan? jika ada kesulitan atau sobat gagal memasangnya silahkan kirim komentar ,saya Admin dengan senang hati akan berusaha membantu dan memberi solusinya...oky trimakasih salam blogger semuanya.


    EmoticonEmoticon