Minggu, 15 Juli 2018

Cara menerapkan social icon keren di blog

Setelah sebelumnya saya membagikan FONT AWESOME, TEMPLATE BLOGGER KARYA MAS SUGENG. Yang Premium ataupun yang gratis untuk sobat semuanya.

Dan pada kesempatan kali ini postingan saya akan melengkapi post di blog saya Agus Gunawan Official akan membagikan tentang , Icon Social Media yang keren.

Jika sobat ingin menerapkannya untuk melengkapi widget blog atau situs sobat, agar terlihat bagus. Nah sobat kita langsung saya ke TKP.

untuk sobat semuanya silahkan ambil kode CSSnya dulu dibawah ini.




/* 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;
}
Ok sobat jika sudah ambil codeo cssnya , dan sudah menerapkannya ke template kesayangan sobat, selanjutnya sobat ambil code html social iconnya dibawah ini.

<!-- social media button start -->
<ul class='nav-social'>
  <li><a class='fcb' href='https://www.facebook.com/official.agusgunawan' rel='nofollow'><i class='fa fa-facebook-square fa-2x'/></i></a>
  </li>
  <li><a class='igicon' href='https://www.instagram.com/agusgunawan.official' 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/agusgn_' rel='nofollow'><i class='fa fa-twitter-square fa-2x'/></i></a>
  </li>
          <li><a class='ytb' href='https://www.youtube.com/channel/UCuX2OT_z4J1Mm0vfpuGk92g' rel='nofollow'><i class='fa fa-youtube fa-2x'/></i></a>
  </li>
</ul>
<!-- social media button end -->
NB: SILAHKAN SOBAT GANTI YANG BERWARNA MERAH DENGAN LINK SOCIAL MEDIA SOBAT. 

OK sobat silahkan mencoba, dan terserah sobat mau di pasang dimana, mau di FOOTER , DI HEADER. Pokoknya terserah sobat nyamannya di pasang dimana.
Mungkin dari saya sekian dulu ya, nantikan post selanjutnya dari saya.

Tidak ada komentar:

Posting Komentar