Hy sobat semua
Kali ini aku akan membahas tutorial bagaiman caranya menambahkan fitur link sosial media ke blog kita
Langsung saja ke tutorialnya
1. Buka dasbor blog kalian
2. Pilih menu layout dan pilih add gadjed ( lebih baik dipasang di sebelah kanan )
3. Setelah itu kalian pilih HTML/JAVASCRIPT
4. Dikolom judul bisa kalian buat sesuka kalian
Contoh : kunjungi juga, atau lihat profil ku, dll
5. Pada kolom HTML silahkan copas script berikut ini
<style>
.social-profiles-widget{width:100%;height:auto;padding:10px 0}
.social-profiles-widget ul {list-style: none;float: RIGHT;padding: 0;}
.social-profiles-widget ul li{list-style:none;margin:0;display:inline}
.social-profile .fa {width:50px;height:45px;color:rgba(255,255,255,0.8);text-align:center;line-height: 45px;
font-size: 2em;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;margin-right: 5px;}
.social-profile .fa-facebook{background:#3b5998}
.social-profile .fa-twitter{background:#55acee}
.social-profile .fa-youtube{background:#cc181e}
.social-profile .fa-instagram{background:#9c694c}
.social-profile .fa-google-plus{background:#d34836}
.social-profile .fa:hover,.social-profile .fa:active{color:#FFF;-webkit-box-shadow:1px 1px 3px #333;-moz-box-shadow:1px 1px 3px #333;box-shadow:1px 1px 3px #333}
</style>
<div class='social-profiles-widget'>
<ul class='social-profile circle'>
<li><a href='#'><i class='fa fa-facebook'/></i></a></li>
<li><a href='#'><i class='fa fa-twitter'/></i></a></li>
<li><a href='#'><i class='fa fa-youtube'/></i></a></li>
<li><a href='#'><i class='fa fa-google-plus'/></i></a></li>
<li><a href='#'><i class='fa fa-instagram'/></i></a></li>
</ul>
</div><div class='clear'/>
.social-profiles-widget{width:100%;height:auto;padding:10px 0}
.social-profiles-widget ul {list-style: none;float: RIGHT;padding: 0;}
.social-profiles-widget ul li{list-style:none;margin:0;display:inline}
.social-profile .fa {width:50px;height:45px;color:rgba(255,255,255,0.8);text-align:center;line-height: 45px;
font-size: 2em;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;margin-right: 5px;}
.social-profile .fa-facebook{background:#3b5998}
.social-profile .fa-twitter{background:#55acee}
.social-profile .fa-youtube{background:#cc181e}
.social-profile .fa-instagram{background:#9c694c}
.social-profile .fa-google-plus{background:#d34836}
.social-profile .fa:hover,.social-profile .fa:active{color:#FFF;-webkit-box-shadow:1px 1px 3px #333;-moz-box-shadow:1px 1px 3px #333;box-shadow:1px 1px 3px #333}
</style>
<div class='social-profiles-widget'>
<ul class='social-profile circle'>
<li><a href='#'><i class='fa fa-facebook'/></i></a></li>
<li><a href='#'><i class='fa fa-twitter'/></i></a></li>
<li><a href='#'><i class='fa fa-youtube'/></i></a></li>
<li><a href='#'><i class='fa fa-google-plus'/></i></a></li>
<li><a href='#'><i class='fa fa-instagram'/></i></a></li>
</ul>
</div><div class='clear'/>
tanda # diganti dengan alamat sosmed kalian
6. Setelah itu pilih save dan coba lihat hasilnya
7. Jika pada blog kalian masih belum kelihatan hasilnya silahkan buka kembali dasbor blog kalian, lalu pilih tema dan edit html
8. Copas script berikut ini tepat diatas <\head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
9. Save dan lihat kembali blog kalian
10. Selamat,,, fitur link sosmed kalian sudah ada di blog kalian
Untuk scriptnya kalian juga bisa download disini
DOWNLOAD SCRIPT
dan untuk tutoroal lebih jelas silahkan lihat vidio dibawah ini :
Sekian dulu dari aku
Terimakasih telah berkunjung ke blog ini
Bagi kalian yg punya pertanyaan silahkan bertanya dikolom komentar
Dan jangan lupa juga share ke teman-teman kalian
Wassalam
thanks tutorialnya jangan lupa kunjungni blog saya
ReplyDelete