Membuat Social icon Simple Keren

Dhika    November 11, 2018    CSS , HTML   

Ok sobat setelah sebelumnya saya sudah memberikan tips Cara membuat Sitemap Pada Halaman Statis Blog dan untuk postingan saya selanjutnya akan membagikan Cara membuat Social icon simple Keren untuk sobat yang belum tahu cara membuatnya bisa mengikuti langkah-langkah dibawah ini, dan untuk yang sudah tahu silahkan disimak saja ya.

Untuk Cara membuat social icon simple keren, sobat bisa menggunakan code Font Awesome dibawah ini, silahkan copy code dibawah ini. dan terapkan sebelum </head>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

Jika sudah di terapkan, selanjutnya kalian ambil code CSS dibawah ini dan terapkan sebelum </style> atau </b:skin>.

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

Save kembali template yang sudah di edit tadi,  jika css diatas sudah kalian terapkan.
baca:Cara membuat Sitemap Pada Halaman Statis Blog
Selanjutnya untuk menampilkan icon social media kalian bisa gunakan code 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/agusbegang' rel='nofollow'><i class='fa fa-instagram fa-2x'/></i></a>
  </li>
  <li><a class='gpl' href='https://plus.google.com/118016537449996287824' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'/></i></a>
  </li>
  <li><a class='twt' href='https://twitter.com/agus55666' rel='nofollow'><i class='fa fa-twitter-square fa-2x'/></i></a>
  </li>
          <li><a class='ytb' href='https://www.youtube.com/channel/UCEFZtLXXuLTM3oa96pzIw5g' rel='nofollow'><i class='fa fa-youtube fa-2x'/></i></a>
  </li>
</ul>
<!-- social media button end -->

Kalian bisa sesuaikan code diatas, dengan mengedit terlebih dahulu link yang ada pada code diatas, dengan link kalian masing-masing.

Mungkin dari saya cukup dulu ya tentang Cara membuat social icon simple keren selamat mencoba dan semoga apa yang saya bagikan disini bisa bermanfaat.