Monday, October 8, 2018

Cara menambah fitur link sosmed di blog

Assalamualaikum Wr.Wb

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'/>

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

1 comment: