Widget Sosial Share sangat diperlukan di dalam sebuah blog atau website, karena dapat mempermudah kita ataupun pengunjung membagikan artikel yang sudah kita posting, sehingga dapat di sebar keberbagi media sosial yang ada, seperti Facebook, Twitter, Google Plus dan sebagainya. Kalau sebelumnya saya sudah pernah memposting tentang widget recent-post dengan thumbnail, kali ini saya akan coba menjelaskan sedikit mengenai cara membuat widget sosial share di blogspot. Untuk membuat tombol sosial share menggunakan CSS dapat dilakukan dengan cara sebagai berikut:
Contohnya Seperti ini:
1. Masuk ke akun blogger: klik Template >> Edit HTML
2. Cari kode ]]></b:skin> dan letakan kode dibawah ini tepat di atasnya.
#non-jok{background:transparent;color:#000;line-height:40px;padding-left:3px; text-align:left; border:1px solid #ddd}
#non-jok h4{font-size:18px;line-height:40px;margin:0;text-transform:uppercase;display:inline}
#non-jok h4 span{background:#2c3e50}
#non-jok a{position:relative;font:normal 12px/14px 'Yanone Kaffeesatz',sans-serif;color:#fff;text-transform:uppercase;padding:10px 10px 7px 10px;box-shadow:1px 1px 1px #222}
#non-jok a:hover{background:#222}#non-jok a:hover span{color:#222}
#non-jok a span{line-height:20px;width:40px;padding:6px 0;top:0}
#non-jok a span.fb{background:transparent}.fb{background:#1e90ff}
#non-jok a span.tw{background:transparent}.tw{background:#00bfff}
#non-jok a span.gp{background:transparent}.gp{background:#f83124}
#non-jok a span.me{background:transparent}.me{background:#f1c40f}
3. Cari kode <data:post.body/> lalu letakan kode berikut ini tepat dibawahnya.
<b:if cond='data:blog.pageType == "item"'>
<div id='non-jok'>
<h4><span><i class='fa fa-external-link'/></span> Share to :</h4>
<a class='fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'><span class='fb'><i class='fa fa-facebook'/></span> Facebook</a>
<a class='tw' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'><span class='tw'><i class='fa fa-twitter'/></span> Twitter</a>
<a class='gp' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'><span class='gp'><i class='fa fa-google-plus'/></span> Google+</a>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a class='me' href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' title='Share ke Lintasme' rel='nofollow'><span class='me'><i class='fa fa-plus'></i></span> Lintasme</a>");
//]]>
</script>
</div>
</b:if>
4. Terakhir cari kode </head> lalu letakan kode berikut tepat di atasnya.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
5. Save Template
6. Selesai.
Posting Komentar