Membuat Tombol Share di Bawah Posting Blog Dilengkapi Emoticon

Membuat Tombol Share di Bawah Posting Blog Dilengkapi Emoticon

Cara membuat tombol berbagi media sosial atau fitur share lengkap di bawah postingan blog - Bagaimana memasang widget tombol share tepat dibawah artikel blogger ? , Nah itu merupakan pertanyaan yang wajar di lontarkan para pemain yang berada dalam dunia bloging . Peran media sosial saat ini sangat penting untuk kemajuan situs web blog dalam dunia maya, dikarenakan dengan menggunakan layanan media sosial untuk berbagi artikel postingan akan membuat blog yang kita miliki semakin dikenal orang .

Dengan Cara memasang widget Tombol share di bawah postingan misalnya, itu merupakan salah satu hal yang tidak dilupakan untuk dipasang oleh para bloggers. Tetapi jika anda bingung membuat tombol berbagi media sosial dibawah postingan blogspot atau pingin membuat tombol share yang keren, Nah dibawah ini telah saya sediakan tutorial pemasangnya untuk blog anda dan untuk demonya, anda bisa lihat tombol share tepat dibawah postingan saya ini

Membuat Tombol Share di Bawah Posting Blog Dilengkapi Emoticon

Tutorial Membuat Tombol Share Postingan Keren Dan Ringan

  1. Login ke akun blogger Anda
  2. Lalu  pilih Template => Edit Html
  3. Salin dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
  4. /* social share buttons keren */
    .social-buttons-box {
    height: 67px;
    background: url(http://1.bp.blogspot.com/-OYT-JDviP2k/VHrWc3ofkiI/AAAAAAAAEJs/yyNAhuCUELA/s1600/rect3799.png) no-repeat 200px 0px;
    margin:20px 0 15px;
    overflow:hidden;
    }
    .social-buttons {
    margin:0 0;
    height:67px;
    float:left;
    }
    .social-buttons .share {
    float:left;
    margin-right:10px;
    display:inline-block;
    }
    .share-btn {
    margin:15px 0 25px;
    height:20px;
    overflow:hidden;
    }
  5. Setelah itu anda taruh kode dibawah ini tepat di bawah kode <data:post.body/> atau bisa juga diletakkan di bawah <div class='post-footer'>
  6. <div class='social-buttons-box'>
     <div class='social-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 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>
     </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>-->
     <div style='clear: both;'/>
  7. Selanjutnya anda pasang kode js untuk memanggil sosmed tadi , caranya dengan mencari kode </body> dan pasang kode dibawah ini dibagian atas kode tersebut :
  8. <script>
      window.___gcfg = {lang: &#39;id&#39;};
    
      (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>
    <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><div id='fb-root'/>
    <script type='text/javascript'>
    //<![CDATA[
    (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 = "//connect.facebook.net/id_ID/all.js#xfbml=1&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    //]]>
    </script>
  9. Terkahir anda Klik Save dan silahkan lihat hasilnya

  10. Itulah tentang membuat dan memasang share button dibawah postingan blogspot sama seperti template yang saya pakai dan templatenya mas sugeng , semoga tutorial yang saya informasikan ini dapat bermanfaat bagi sobat , dan jika anda masih bingung atau mengalami kendala pembuatanya , silahkan anda berkomentar , dan semoga saya bisa membantu dan mengatasi masalah widget tombol share tersebut .

Saya merupakan anak ke 8 dari 8 bersaudara, berwatak keras kepala dan sangat mencintai dunia blogging serta desain.
"Love My Mom"

Previous
Next Post »