Report Abuse

Post Bottom Ad

Author Details

(Teknologi Blogging) adalah blog yang dibuat bertujuan untuk memberi informasi seputar blogging, teknologi dan berbagi file seperti aplikasi, game, dan software gratis. Terima kasih telah berkunjung di blog saya, semoga anda senang berkunjung di blog saya

Histat

Recent

Comments

Cara menerapkan social icon keren di blog

Post a Comment
Pada kesempatan kali ini postingan saya akan melengkapi post di blog 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/teknologiblogging' rel='nofollow'><i class='fa fa-facebook-square fa-2x'/></i></a>  </li>
  <li><a class='igicon' href='https://www.instagram.com/teknologiblogging' rel='nofollow'><i class='fa fa-instagram fa-2x'/></i></a>
  </li>
  <li><a class='gpl' href='https://plus.google.com/99999999999999999' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'/></i></a>
  </li>
  <li><a class='twt' href='https://twitter.com/teknologiblogging' rel='nofollow'><i class='fa fa-twitter-square fa-2x'/></i></a>  </li>
          <li><a class='ytb' href='https://www.youtube.com/channel/teknologiblogging' 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.

Related Posts

Post a Comment