Inilah Cara Membuat Social Icon Simple Keren di Blog | Memperbaiki

Admin   11.43   tutorial blog   2 comments  

Sebelumnya kita telah membahas mengenai Cara membuat Sitemap Pada Halaman Statis Blog dan untuk postingan saya kali ini akan membagikan Cara membuat Social icon. Untuk kalian yang belum tahu cara membuatnya dapat mengikuti tutorial dibawah ini:

Dalam Cara membuat social icon, 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;
}

Simpan kembali template yang sudah diedit tadi,  jika css diatas sudah kalian terapkan.
Kemudian untuk menampilkan icon social media kalian bisa menggunakan kode 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 dapat menyesuaikan kode diatas, dengan mengedit terlebih dahulu link yang ada pada code diatas, dengan link kalian masing-masing.

Demikian pembahasan mengenai Cara membuat social icon, semoga bermanfaat, selamat mencoba dan semoga berhasil.