Cara Membuat Widget Social Media Lengkap di Blog

Merenovasi blog dengan tambahan widget adalah cara yang baik untuk memperindah desain template blog. Tak hanya membentuk keindahan pada blog, widget juga mempunyai peranan yang cukup penting, terutama dalam segi penghubung yakni untuk membantu proses sosialisasi antara Administrator blog dengan user atau visitor. Pada kesempatan kali ini saya akan membagikan artikel yang bertemakan Cara Membuat Widget Social Media Lengkap di Blog, tentunya widget ini bisa membantu sobat blogger untuk bersosialisasi dengan pengunjung blog lewat jejaring sosial seperti facebook, twitter, dan google+. Tertarik untuk membuatnya? baiklah silakan ikuti tutorial berikut ini:

Cara Membuat Widget Social Media Lengkap di Blog

Note : Sebelumnya terapkan CSS stylesheet Font Awesome berikut ini pada HTML blog, letakkan di bawah kode

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

1. Pastikan sobat sudah login ke Blogger menggunakan akun google, masuk ke Dashboard blog, go to "Template" dan pilih "Edit HTML"

2. Salin dan letakkan kode CSS berikut ini di sebelum kode

Untuk mempermudah pencarian gunakan tombol CTRL + F pada keyboard

/* CSS Social Media */

#sosmed{margin:20px 0;padding-top:15px;}
.nengah{text-align:center!important}
.smGlobalBtn{display:inline-block;position:relative;width:40px;height:40px;padding:0px;text-align:center;color:#fff!important;font-size:20px;font-weight:normal;line-height:2em;border-radius:25px;-moz-border-radius:25px;-webkit-border-radius:25px}
.facebookBtn{background:#3b5998;opacity:0.4}
.facebookBtn:before{font-family:"FontAwesome";content:"\f09a"}
.facebookBtn:hover,.twitterBtn:hover,.googleplusBtn:hover,.linkedinBtn:hover,.pinterestBtn:hover,.rssBtn:hover{color:#fff;opacity:1}
.twitterBtn{background:#00ABE3;opacity:0.4}
.twitterBtn:before{font-family:"FontAwesome";content:"\f099"}
.googleplusBtn{background:#e13138;opacity:0.4}
.googleplusBtn:before{font-family:"FontAwesome";content:"\f0d5"}
.linkedinBtn{background:#0094BC;opacity:0.4}
.linkedinBtn:before{font-family:"FontAwesome";content:"\f0e1"}
.pinterestBtn{background:#26ae91;opacity:0.4}
.pinterestBtn:before{font-family:"FontAwesome";content:"\f0d2"}
.rssBtn{background:#fb5a03;opacity:0.4}
.rssBtn:before{font-family:"FontAwesome";content:"\f09e"}

Save Template/Simpan Template

3. Pergi ke "Tata Letak", klik "Tambahkan Gadget" terserah ingin di sidebar atau yang lainnya, tambahkan HTML/JavaScript

4. Terapkan HTML berikut ini pada kolom pengisian (text area) "HTML/JavaScript", kemudian klik "Simpan"

<div class="sosmed"><div class="nengah">
<a rel="nofollow" class="facebookBtn smGlobalBtn" title="Facebook" href="#" target="_blank"></a>
<a rel="nofollow" class="twitterBtn smGlobalBtn" title="Twitter" href="#" target="_blank"></a>
<a rel="nofollow" class="googleplusBtn smGlobalBtn" title="Google +" href="#" target="_blank"></a>
<a rel="nofollow" class="linkedinBtn smGlobalBtn" title="Linkedin" href="#" target="_blank"></a>
<a rel="nofollow" class="pinterestBtn smGlobalBtn" title="Pulsk" href="#" target="_blank"></a>
<a rel="nofollow" class="rssBtn smGlobalBtn" title="RSS Feeds" href="#" target="_blank"></a><br><br>
</div></div>

Ganti tanda "#" dengan link (tautan) milik sobat, pertinjau hasilnya

Untuk melihat displaynya silakan klik result button di bawah ini :

Result

Sekian artikel Cara Membuat Widget Social Media Lengkap di Blog, semoga bermanfaat.

Facebook

Twitter

Google+

Pinterest

Posted by : Rizal Firdaus

2 Comments

Minggu, 26 April 2015