Cara menerapkan social icon keren di blog - Halo.. apa kabar teman-teman Teknologi Blogging, Artikel yang teman-teman baca kali ini dengan berjudul Cara menerapkan social icon keren di blog, Teknologi Blogging telah mempersiapkan artikel ini dengan sangat baik untuk teman-teman baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, Artikel CSS, Artikel Tips dan trik, semoga artikel yang disampaikan ini dapat anda pahami dengan baik. ok kalau begitu, selamat membaca.

Judul : Cara menerapkan social icon keren di blog
link : Cara menerapkan social icon keren di blog

Cara menerapkan social icon keren di blog

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.

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;
}

Ok sobat jika sudah ambil codeo cssnya , dan sudah menerapkannya ke template kesayangan sobat, selanjutnya sobat ambil code html social iconnya dibawah ini.

HTML
<!-- 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.

Demikianlah artikel Cara menerapkan social icon keren di blog

Sekianlah dulu artikel Teknologi Blogging tentang Cara menerapkan social icon keren di blog kali ini, mudah-mudahan bisa memberi manfaat untuk teman-teman semua jika bermanfaat silahkan sharing arikel ini ke kawan atau kerabat anda ke media sosial seperti facebook, twiter, dan lainnya. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang sedang membaca artikel Cara menerapkan social icon keren di blog dengan alamat link https://www.teknologiblogging.net/2018/07/cara-menerapkan-social-icon-keren-di.html

Artikel Terkait

Cara menerapkan social icon keren di blog

4/ 5

Oleh APA ?

APA ? July 15, 2018 Komentar