Memasang Widget Social Media

Athhar Kautsar   6/21/2017   blogger, widget  

Didalam artikel ini saya akan membagikan sebuah widget media sosial untuk menghiasi sidebar blog kalian. Widget sosial media berfungsi untuk menyimpan link dari akun sosial media kalian dengan tanpilan menarik.

Jadi bagi yang mau memasang widget ini silahkan ikuti langkah-langkah dibawah ini/

Memasang Widget Sosial Media

Widget ini menggunakan font awesome, jika kalian bellum memasang link font awesome di template blog kalian maka copy dan paste kode dibawah ini diatas kode </head>

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

1. Login ke blogger > Buka template editor > Cari kode ]]></b:skin> atau </style> dan salin kode dibawah sebelum kode tersebut.

CSS/*SocialMediaWidget By Athharkautsar.com*/
.socialmedia {text-align:center;font-size:20px;margin-top:10px}
.icon-button {background-color: white;border-radius: 3.6rem;cursor: pointer;display: inline-block;font-size: 2.0rem;height: 3.6rem;line-height: 3.6rem;margin: 0 5px;position: relative;text-align: center:-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width: 3.6rem;}
.icon-button span {border-radius: 0;display: block;height: 0;left: 50%;margin: 0;position: absolute;top: 50%;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;width: 0;}
.icon-button:hover span {width: 3.6rem;height: 3.6rem;border-radius: 3.6rem;margin: -1.8rem;}
.twitter span {background-color: #4099ff;}
.facebook span {background-color: #3B5998;}
.google-plus span {background-color: #db5a3c;}
.border-tw, .border-fb, .border-gp{border:2px solid}
.border-tw{border-color:#4099FF}
.border-fb{border-color:#3B5998}
.border-gp{border-color:#DB5A3C}
.icon-button i {background: none;color: white;height: 3.6rem;left: 0;line-height: 3.6rem;position: absolute;top: 0;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;width: 3.6rem;z-index: 10;}
.icon-button .fa-twitter {color: #4099ff;}
.icon-button .fa-facebook {color: #3B5998;}
.icon-button .fa-google-plus {color: #db5a3c;}
.icon-button:hover .fa-twitter,
.icon-button:hover .fa-facebook,
.icon-button:hover .fa-google-plus {color: white;}

2. Masuk ke bagian Tata Letak > Tambahkan Gadget disidebar kalian lalu pilih HTML/Javascript, salinlah kode dibawah ini dan paste di kolom tersebut, Kolom Judul diisi dengan "Sosial Media"

HTML<div class="socialmedia">
<a href="#" class="icon-button twitter border-tw"><i class="fa fa-twitter"></i><span></span></a>
<a href="#" class="icon-button facebook border-fb"><i class="fa fa-facebook"></i><span></span></a>
<a href="#" class="icon-button google-plus border-gp"><i class="fa fa-google-plus"></i><span></span></a></div>

Kurang lebih hasilnya seperti dibawah ini.

Klik Untuk Memperbesar

Catatan: 
Ganti tulisan # dengan link sosial media kalian.

Untuk Demonya Bisa lihat di https://codepen.io/athharkautsar/full/pwwNxp/
Cukup sekian, Sampai berjumpa lagi di artikel berikutnya.