Bikin tombol ikon terhubung ke social media, cara cepat.

Cari rapikan letak yg menurut anda mengagumkan dalam menampilkannya

1. Login ke Blogger.

dua. Klik Layout (Tata Letak) – Add a Gadget – pilih HTML/JavaScript.

Tiga. Copas kode ini dia pada 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.

Baca Juga :   Cara Membuat Menu Login di WordPress jadi Menarik

LEAVE A REPLY

Please enter your comment!
Please enter your name here