Showing posts with label Javascript. Show all posts

Thursday 2 July 2015

Cara Membuat Follow Us Sosial Media Keren


Cara Membuat Follow Us Sosial Media Keren - Pada pertemuan pertemuan sebelumnya saya hanya membagikan template gratis , pada pertemuan kali ini saya akan membagikan Cara Membuat Follow Us Sosial Media dan tentunya Keren .
Oke tanpa basa basi lagi , anda simak tutorialnya
  • Masuk ke www.blogger.com
  • Pilih blog > Template > Edit HTML
  • Kemudian Cari kode ]]><b:skin>
  • Jika sudah ketemu copy dan paste kode CSS di bawah ini , tepat di atas/sebelum kode ]]><b:skin>
/* CSS Follow us */
.vienna-socials-icons ul{margin:0;padding:0;list-style:none;margin-bottom:-5px;margin-right:-5px;overflow:hidden}
.vienna-socials-icons ul li:before{display:none}
.vienna-socials-icons ul li{margin:0;padding:0;list-style:none;float:left;width:48px;height:48px;line-height:48px;text-align:center;background:#00baff;font-size:21px;margin-right:5px;margin-bottom:5px}
.secondary-sidebar .vienna-socials-icons ul li{width:36px;height:36px}
.secondary-sidebar .vienna-socials-icons ul li a{line-height:45px}
.secondary-sidebar .vienna-socials-icons ul li a i{font-size:20px}
.vienna-socials-icons ul li a{line-height:45px;display:block;color:#fff}
.vienna-socials-icons ul li a:hover{color:#fff}
.vienna-socials-icons ul li.home{background:#83868a}
.vienna-socials-icons ul li.facebook{background:#516ca4}
.vienna-socials-icons ul li.googleplus{background:#f20000}
.vienna-socials-icons ul li.rss{background:#f29400}
.vienna-socials-icons ul li.youtube{background:#f20000}
.vienna-socials-icons ul li.dribbble{background:#dc71a6}
.vienna-socials-icons ul li.deviantart{background:#4c5e51}
.vienna-socials-icons ul li.pinterest{background:#f20000}
.vienna-socials-icons ul li.instgram{background:#406f94}
.vienna-socials-icons ul li.tumblr{background:#395875}
.vienna-socials-icons ul li.linkedin{background:#1985bc}
.vienna-socials-icons ul li.soundcloud{background:#f60}

  •  Simpan Template , dan untuk tahap selanjutnya..
  • Masuk ke Tata Letak/layout
  • Tambahkan gadget > Pilih Html/Javascript
  • Pastekan kode dibawah ini tapat di kolom Html/Javascript tersebut
<div class='vienna-socials-icons mom-socials-widget'>
<ul>
<li class='facebook'><a href='#' rel='nofollow' target='_blank' title='Follow us on Facebook'><i class='fa fa-facebook'></i></a></li>
<li class='twitter'><a href='#' rel='nofollow' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter'></i></a></li>
<li class='googleplus'><a href='#' rel='nofollow' target='_blank' title='Follow us on Google+'><i class='fa fa-google-plus'></i></a></li>
<li class='rss'><a href='#' rel='nofollow' target='_blank' title='Follow us on RSS'><i class='fa fa-rss '></i></a></li>
<li class='youtube'><a href='#' rel='nofollow' target='_blank' title='Follow us on Youtube'><i class='fa fa-youtube '></i></a></li>
<li class='dribbble'><a href='#' rel='nofollow' target='_blank' title='Follow us on Dribble'><i class='fa fa-dribbble '></i></a></li>
<li class='deviantart'><a href='#' rel='nofollow' target='_blank' title='Follow us on DeviantArt'><i class='fa fa-deviantart'></i></a></li>
<li class='pinterest'><a href='#' rel='nofollow' target='_blank' title='Follow us on Pinterest'><i class='fa fa-pinterest '></i></a></li>
<li class='instgram'><a href='#' rel='nofollow' target='_blank' title='Follow us on Instagram'><i class='fa fa-instagram '></i></a></li>
<li class='tumblr'><a href='#' rel='nofollow' target='_blank' title='Follow us on Tumblr'><i class='fa fa-tumblr '></i></a></li>
<li class='linkedin'><a href='#' rel='nofollow' target='_blank' title='Follow us on LinkedIn'><i class='fa fa-linkedin '></i></a></li>
<li class='soundcloud'><a href='#' rel='nofollow' target='_blank' title='Follow us on Soundcloud'><i class='fa fa-soundcloud '></i></a></li></ul></div>

  • Simpan Setelan 

KETERANGAN : Tanda # yang berwarna Merah . anda ganti menjadi link/url media sosial anda
Read more