Cara Membuat Floating Social Icon Dengan Efek Easing

184 views

alhadi.org – Cara Membuat Floating Social Icon Dengan Efek Easing, Cara Membuat Floating Social Icon Dengan Efek Easing

Cara Membuat Floating Social Icon Dengan Efek Easing

Salah satu tips blog yang sangat keren nih sob yang akan saya share kali ini, yaitu cara membuat floating social icon dengan efek easing.Tips ini sangat cocok buat sobat yang ingin mempercantik tampilan widget social iconya. Selain widget ini floating alias melayang di samping kanan blog kita, efek easing nya membuat tampilanya menjadi lebih atraktif, sehingga sangat mungkin membuat pengunjung untuk mengklik social icon milik sobat. Untuk demonya silahkan lihat dibawah ini :

Bagaimana cara membuatnya ? silahkan sobat ikuti 3 langkah berikut ini :

Pertama : Letakkan kode CSS di bawah ini diatas ]]> :

.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}

Kedua : Tambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut sebelum :

Ketiga : Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum :

your FB' id='facebook-btn' target='_blank'>Follow via Facebook
your twitter' id='twitter-btn' target='_blank'>Follow via Twitter
your G+' id='google-btn' target='_blank'>Follow via Google
your ID' id='pinterest-btn' target='_blank'>
Follow via Pinterest

your ID' id='youtube-btn' target='_blank'>Follow via Youtube
your feed' id='rss-btn' target='_blank'>Follow via RSS

Note : Ganti tulisan warna biru diatas, dengan ID sobat masing-masing jangan sampai keliru dengan ID tetangga.

Itulah 3 lamgkah cara membuat  cara membuat floating social icon dengan efek easing.

Semoga Bermanfaat.

Thanks to : Maskolis
Terima Kasih Atas kunjungan anda di halaman  Cara Membuat Floating Social Icon Dengan Efek Easing, Jangan lupa untuk Membookmars Halaman ini jika  Cara Membuat Floating Social Icon Dengan Efek Easing berguna untuk anda.