Breaking News
Loading...
Senin, 09 Maret 2015

Memasang Icon Media Sosial Pada ''HTML/JavaScript''






Widget ini memiliki Effect Hover dengan tiga tombol jejaring sosial yang umum digunakan  seperti Facebook, twitter, G plus dan di tambah ikon RSS. Dengan penampilan yang cukup menarik dan elegan, widget ini akan terlihat rapih apabila dipasang di sidebar blog anda.

Berikut cara pemasangannya
  1. Masuk ke akun Blogger anda
  2. Pilih bagian Menu ''Tata Letak''
  3. Klik ''Tambah Gadget''
  4. Cari kemudian pilih ''HTML/JavaScript''
  5. Letakkan kode dibawah pada bagian ''HTML/JavaScript''

    <div class="abt-social-slide">
        <ul>
        <li><a class="facebook" href="#" target="_blank">Facebook</a></li>
        <li><a class="twitter" href="#">Twitter</a></li>
        <li><a class="google-p" href="#" target="_blank">Google plus</a></li>
        <li><a class="rss" href="#" target="_blank">Rss</a></li>
        </ul>
        </div>
        <style>
        .abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
        .abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
        .abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifvk4s31G7M3srH3JQYHz4sK29fxAds-n4hHlGANqkGuU6PrNmPD4D9WttEMb4MItxEeIHm0NPFlnoULNB4L6KgDyu_s963RZLkwBu43zZT-Wye4c1C2DwlH-R7tpmzp80_uwi3NgQHw/s1600/facebook.png) no-repeat 0 -88px}
        .abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifvk4s31G7M3srH3JQYHz4sK29fxAds-n4hHlGANqkGuU6PrNmPD4D9WttEMb4MItxEeIHm0NPFlnoULNB4L6KgDyu_s963RZLkwBu43zZT-Wye4c1C2DwlH-R7tpmzp80_uwi3NgQHw/s1600/facebook.png) no-repeat 0 0}
        .abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEignny3MKVjXudZwtnfzzdM5sLJHoCDaAcwQr9n7Igb4tFM6spoYLV6JXt5ri-kGFpAYcdYbwba05-lisqZ-OGX_72mEvsukL8ZsUDuiOgoPpyI-dYXNDcDZ-k2MyipSvz2FIzvIy2Siw/s1600/twitter-1.png) no-repeat 0 -88px}
        .abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEignny3MKVjXudZwtnfzzdM5sLJHoCDaAcwQr9n7Igb4tFM6spoYLV6JXt5ri-kGFpAYcdYbwba05-lisqZ-OGX_72mEvsukL8ZsUDuiOgoPpyI-dYXNDcDZ-k2MyipSvz2FIzvIy2Siw/s1600/twitter-1.png) no-repeat 0 0}
        .abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx9i8ZeDD5zJ-vPPMtDrgjwCZoKaQ-wdFLey2ArwUpY4qyjIRnHX2LcbAlVEtdW8s50Iq2LmDaOcUeRT7CqVov3yGh3NU9b15DYDZzBPmP0Z1fgc-ziYltMl8dpuF_lYkR1mR66eO6rg/s1600/google.png) no-repeat 0 -88px}
        .abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx9i8ZeDD5zJ-vPPMtDrgjwCZoKaQ-wdFLey2ArwUpY4qyjIRnHX2LcbAlVEtdW8s50Iq2LmDaOcUeRT7CqVov3yGh3NU9b15DYDZzBPmP0Z1fgc-ziYltMl8dpuF_lYkR1mR66eO6rg/s1600/google.png) no-repeat 0 0}
        .abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsnNhEO0xHbQSLRXMLK9G7ZachrFxGzN__Zp92nk6cU20ApuKJSJxpvwslDdNY5D9GdhU_Tgrqftw_MYd6dKwU86uiT-Qe9hdVF7QgkhAXsnVEDJEUDawrNvbTr58pN4LLt6_jeQpq1Q/s1600/twitter.png) no-repeat 0 -88px}
        .abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsnNhEO0xHbQSLRXMLK9G7ZachrFxGzN__Zp92nk6cU20ApuKJSJxpvwslDdNY5D9GdhU_Tgrqftw_MYd6dKwU86uiT-Qe9hdVF7QgkhAXsnVEDJEUDawrNvbTr58pN4LLt6_jeQpq1Q/s1600/twitter.png) no-repeat 0 0}
        </style>
Ganti semua tanda # dengan URL jejaring sosial anda. Setelah Semua  Di Ganti klik Simpan






0 komentar:

Posting Komentar

 
Toggle Footer