F Cara menerapkan sosial icon responsive dan keren terbaru - Jagoan Tekno

Cara menerapkan sosial icon responsive dan keren terbaru

Cara-menerapkan-sosial-icon


Hello sobat JagoanTekno, pada kesempatan kali ini saya akan membahas tentang cara menerapkan sosial icon. Pada sebelumnya saya membahas tentang 6 Tips Termudah Agar Blog Di Terima Google Adsense.

Cara menerapkan sosial icon responsive dan keren terbaru.

Untuk langkah pertama sobat Ambil terlebih dahulu kode CSS nya, kode nya ada dibawah ini.

CSS
/* SOCIAL ICON */
ul.nav-social {
list-style: none;
margin: 0;
padding: 0;
}
ul.nav-social li {
display: inline-block;
padding: 0px 15px;
margin: 0;
}
ul.nav-social li a {
color: #999999;
}
ul.nav-social li a:hover {
color:#555;
}
ul.nav-social li a.fcb:hover {
color:#3B5A9B;
}
ul.nav-social li a.gpl:hover {
color:#DD4B39;
}
ul.nav-social li a.twt:hover {
color:#1BB2E9;
}
ul.nav-social li a.ytb:hover {
color:#ED3F41;
}
ul.nav-social li a.lkdn:hover {
color:#007fb2;
}
ul.nav-social li a.igicon:hover {
color:#527fa4;
}

Jika sobat sudah mengambil kode sosial icon tersebut, maka langkah selanjutnya adalah sobat pasang kode sosial icon tersebut di blog sobat.

Dengan cara Pergi ke tema lalu KLlK edit html, setelah itu sobat cari kode </Style>. Jika sudah ketemu maka kode yang sobat ambil tersebut pasang di atas kode </Style> tersebut.

Langkah berikutnya sobat ambil kode html sosial icon dibawah ini .


<!-- social media button start -->
<ul class='nav-social'>
  <li><a class='fcb' href='https://www.facebook.com/nama' rel='nofollow'><i class='fa fa-facebook-square fa-2x'/></i></a>
  </li>
  <li><a class='igicon' href='https://www.instagram.com/nama' rel='nofollow'><i class='fa fa-instagram fa-2x'/></i></a>
  </li>
  <li><a class='gpl' href='https://plus.google.com/101145413077488990994' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'/></i></a>
  </li>
  <li><a class='twt' href='https://twitter.com/nama' rel='nofollow'><i class='fa fa-twitter-square fa-2x'/></i></a>
  </li>
          <li><a class='ytb' href='https://www.youtube.com/channel/url' rel='nofollow'><i class='fa fa-youtube fa-2x'/></i></a>
  </li>
</ul>
<!-- social media button end -->


Sebelum sobat menempelkan kode html sosial icon, sobat ganti terlebih dahulu tulisan yang berwarna merah. Ganti dengan media sosial sobat, seperti contoh nya https://www.instagram.com/@Arif_pdn.

Jika sobat sudah mengambil kode html sosial icon tersebut, maka langkah selanjutnya sobat pergi ke Tata Letak.

Nah Tempelkan kode html sosial icon tersebut pada Tata Letak, kalian bebas menempelkan nya dimana saja. Jika sobat ingin terlihat bagus maka kode html sosial icon nya lebih baik ditaruh di widget diatas footer, maka hasil nya pun akan terlihat bagus.

Penutup

Untuk pembahasan hari ini yaitu mengenai cara menerapkan sosial icon. Oke sobat silahkan mencoba nya, dan jangan lupa nantikan artikel selanjutnya dari JagoanTekno.
DONASI VIA OVO Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.jagoantekno.com. Terima kasih.

Berlangganan update artikel terbaru via email:

0 Response to "Cara menerapkan sosial icon responsive dan keren terbaru"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel