22 January 2015

Cara membuat tombol share button versi Mas Hidayatd

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...

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 mirip evo Magz

    <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









  • 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.


    http://syarif-hidayatd.blogspot.com


    EmoticonEmoticon