Cari tata letak yang menurut anda bagus dalam menampilkannya
2. Klik Layout (Tata Letak) - Add a Gadget - pilih HTML/JavaScript.
3. Copas kode berikut ini di kolom konten:
<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'/>
4. Ganti tanda pagar (#) dengan url link akun media sosial Anda.
5. "Save" Simpan
Jika tidak muncul ikon, tambahkan link font awesome berikut ini tepat di atas kode </head> atau tepat di bawah kode <head> di dalam template Anda.
Klik Tema - Edit HTML, lalu copas kode berikut ini di atas kode tepat di atas kode </head> atau tepat di bawah kode <head>.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>Selesai deh simple kan.
0 komentar