Cara Membuat Tombol Share dibawah Postingan Blog Plus Smile

Catatan FireFox

Belajar Komputer merupakan sebuah blog pribadi tempat Saya berbagi mengenai tips seputar komputer dan Android.

Mudah-mudahan kedepannya blog ini dapat memberikan kontribusi serta informasi bermanfaat bagi Anda semua. Terima kasih.

Google+

Cara Terbaru Membuat Tombol Share dibawah Postingan Blog Plus Smile Ala Mas sugeng yang keren bangets - Sebetulnya tutorial ini untuk menjawab pertanyaan teman saya yang bertanya pada saya "mas gimana sih cara bikin tombol sosmed yang terdiri dari google plus , facebook dan , twitter seperti punyanya blog rahmat creations itu ?" sekalian jawab plus share juga ke teman - teman yang barang kali sedang membutuhkan.

Ada yang unik dari tombol sosial media ini yaitu di bagian sebelah kanan terdapat gambar emoticon / simle yang disertai slogan bebagi gratis , hal itu tentu saja menarik perhatian pengunjung untuk mengklik dan membagikanya . dan tentu saja dampak postifnya adalah jika yang di klik itu google plus , maka nilai seo artikel kita akan mempunyai kelebihan di mata google.

Widget share button keren dibawah postingan ini merupakan sebuah ide kreatif dari mas sugeng , yang mana widget ini telah di pamerkan di template yang mas sugeng 2015 blogger template tersebut

Gambar diatas merupakan , tombol share yang akan kita buat nantinya

Tutorial Membuat Share Button Keren di Bawah Postingan Blogspot

Widget ini saya ambilkan dari templatenya mas sugeng yang baru saja dibagikan kemaren , sebetulnya jika sobat sudah agak ngerti koding tanpa tutorialpun bisa , tapi karena masih belajar seperti saya , mending ayo mari kita buat widget sosmed Ala Mas Sugeng

Pertama , bagi yang belom login ke dasbhor blog silahkan masuk dulu
Seperti biasanya , pilih template => Edit Html

Salin dan tempelkan kode dibawah ini diatas kode ]]></b:skin>

/* social share buttons */
.social-buttons-box {
height: 67px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEiGbqKa6IGDMO7risKHvTioXJ1tdRUngyWiXnNM-0bzN3csHiPvEzpIFrxac2rn_x0SBe7-N9DBh_SkuVoRPJUtcfcc-Sn-REI8T0IgZLGpKAzfLMtEbB6XJiJ5wNr9MleWuphp49UQkb/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;
}

Selanjutnya copy kode berikut ini, lalu taruh di bawah kode <data:post.body/>atau bisa juga <div class='post-footer'>

<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;'/>

Kemudian kita pasang kode js pemanggil sosmed tadi , caranya cari kode</body> dan paasang kode dibawah ini diats kode tersebut :

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

Terkahir Klik Save dan lihat hasilnya
Taraa kini sobat sudah bisa mebuat sendiri share button ala mas sugeng yang keren bangets

Itulah bro Cara ribet membuat dan memasang share button dibawah postingan blogspot seperti templatenya mas sugeng , semoga tutorial tersebut bermanfaat bagi sobat , oh iya jika sobat masih bingung dan mengalami kendala diatas , silahkan berkomentar dibawah ini siapa tahu saya bisa membantu mengatasi masalah widget tombol share diatas , namun jika sobat mengikuti cara diatas insya Allah gak ada napa2

Source : Mas Sugeng