Cara Membuat Widget Tombol Share Media Sosial Beranimasi di Blogger - Menggunakan CSS

Cara Membuat Widget Tombol Share Media Sosial Beranimasi di Blogger - Menggunakan CSS

Widget tombol share media sosial, ialah salah satu widget yang penting dalam sebuah blog, selain widget recent post, widget follow media sosial, dll.

Widget ini berisi beberapa tombol share medsos seperti Facebook, Twitter, Linkedin, dll. Dimana, ketika pengunjung mengeklik salah satu tombol tersebut, otomatis mereka setuju untuk membagikan artikel blog kita ke akun media sosial mereka. 

Hal tersebut terjadi karena, biasanya si pengunjung suka akan artikel itu, pengunjung merasa bahwa artikel tersebut memecahkan masalah mereka dan ingin membagikannya ke medsos agar orang lain yang punya masalah sama dapat segera teratasi.

Oleh sebab itu, disini Saya akan membagikan kepada kalian tentang cara membuat widget tombol share media sosial dengan animasi di blogger menggunakan CSS.

Langkah - langkah ...


  • Login ke akun blogger kalian dahulu.
  • Kalian harus memasang ikon Fontawesome dulu pada template blog kalian. Dengan cara, masuk ke opsi Tema => Edit HTML => pastekan kode Javascript ini sebelum kode </head>
Abaikan langkah ini jika template blog kalian sudah terpasang kode Fontawesome.
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,300");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>
  • Jika sudah, lanjutkan tutorialnya dengan mem-pastekan kode CSS dibawah ini sebelum kode ]]></b:skin>  atau  </b:skin>.
 /* Share Button */
.post-footer{margin-top:30px;}
.share-post, .multiauthor-box {margin-bottom:50px;}
.share-post ul {padding:0;margin:0;text-align:center;}
.share-post li{list-style:none;display:inline-block;margin-right:10px;padding:0;font-weight:700;text-transform:uppercase}
.share-post li:first-child {font-size:16px;color:#22a1c4;}
.share-post li a{display:block;text-align:center;}
.share-post span{display:none;}
.share-post li a i{display:block;color:#fff;width:40px;height:40px;line-height:40px;font-size:18px;border-radius:40px;font-weight:normal;transition:all .3s;}
.share-post{margin-bottom:30px;border-top:1px solid #eff0f0;border-bottom:1px solid #eff0f0;line-height:52px;min-height:52px;margin-left:-30px;margin-right:-30px}
.share-post li a i.fa.fa-facebook{background:#3b5998;border:1px solid transparent;}
.share-post li a i.fa.fa-twitter{background:#19bfe5;border:1px solid transparent;}
.share-post li a i.fa.fa-google-plus{background:#d64136;border:1px solid transparent;}
.share-post li a i.fa.fa-linkedin{background:#006699;border:1px solid transparent;}
.share-post li a i.fa.fa-pinterest{background:#cb2027;border:1px solid transparent;}
.share-post li a i.fa.fa-facebook:hover{background:#fff;color:#3b5998;border:1px solid #4666aa;}
.share-post li a i.fa.fa-twitter:hover{background:#fff;color:#19bfe5;border:1px solid #2acef4;}
.share-post li a i.fa.fa-google-plus:hover{background:#fff;color:#d64136;border:1px solid #e95247;}
.share-post li a i.fa.fa-linkedin:hover{background:#fff;color:#006699;border:1px solid #017ab6;}
.share-post li a i.fa.fa-pinterest:hover{background:#fff;color:#cb2027;border:1px solid #e33239;}
  • Kemudian, pastekan kode dibawah ini tepat sesudah 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.
<div class='share-post'>
<ul class='entry-share-list clearfix'>
<li>Share This</li>
<li class='facebook_share'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/> </a>
</li>
<li class='twitter_share'>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
</li>
<li class='google_share'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
</li>
<li class='linkedin_share'>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/></a>
</li>
<li><a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><i class='fa fa-pinterest'/></a></li>
</ul>
</div> 
  • Simpan perubahan dan cek hasilnya.

Akhir Kata ...


Saya sendiri sudah mencobanya dan hasilnya memuaskan sekali. Oh ya, jika kalian mengalami kendala, kalian dapat bertanya di kolom komentar. Sekian artikel tentang cara membuat widget tombol share media sosial di blogger dengan animasi menggunakan css. Terimakasih.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel