Membuat Widget Tombol Share Media Sosial di Blogger - Tampilan Flat/datar

Membuat Widget Tombol Share Media Sosial di Blogger - Tampilan Flat/datar

Membuat Widget Tombol Share Media Sosial di Blogger (tampilan Flat/datar) | Perlu kalian ketahui, widget tombol share media sosial, adalah widget yang berisi kumpulan tombol share media sosial. Dimana, ketika pengunjung menge-klik salah satu tombol, berarti mereka setuju untuk membagikan artikel tersebut ke beranda media sosial mereka.

Keuntungan dipasangnya Widget Tombol Share Media Sosial di Blogger

Biasanya, widget ini diletakkan pada akhir postingan/artikel di sebuah blog. Keuntungan dipasangnya widget ini ialah membuat blog kalian mendapatkan backlink dofollow gratis, yakni backlink dari media sosial.

Widget satu ini, tak kalah pentingnya dengan widget follow media sosial, widget facebook like box, dll. Nah, untuk tutorial membuatnya, kalian simak saja pembahasan berikut ini.

Membuat Widget Tombol Share Media Sosial Flat

  • Login ke akun blogger kalian.
  • Selanjutnya, kalian klik opsi Tema => Edit HTML => pastekan kode dibawah ini sebelum kode ]]></b:skin> atau </b:skin> saja.
 /* CSS Social Share Button */
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
.sharepost li .twitter{background-color:#55acee;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .pinterest{background-color:#cc2127;}
.sharepost li .linkedin{background-color:#0976b4;}
.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px} 
  • Kemudian, kalian harus memasang ikon Font-awesome dahulu. Dengan cara, pastekan kode dibawah ini sebelum kode </head>
Abaikan langkah ini, jika sebelumnya kalian pernah memasang kode ikon Font-awesome.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> 
  • Jika sudah, pastekan kode ini setelah kode <data:post.body/>
Biasanya, kode tersebut ada lebih dari satu dalam template blog. Karena itu, jika pada kode pertama tidak bisa, kalian coba lagi pada kode yang kedua dan seterusnya.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharepost'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
<li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>
<li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>
<li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>
</ul>
</div> </b:if>
  • Terakhir, simpan perubahan dan cek salah satu artikel blog kalian.

Akhir Kata ...

Semoga kalian senang dengan tampilan baru widget tombol share media sosialnya. Jika kalian mengalami kendala saat pemasangannya, kalian bisa tuliskan kendala tersebut di komentar. Dan, apabila kalian tidak keberatan, mohon untuk share artikel ini ke media sosial kalian.

Sekian artikel tentang cara membuat widget tombol share media sosial flat di blogger. Terimakasih.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel