Contoh Gambar Floating Social Keren

Floating Social Bookmark keren dengan memakai efek easing patut dicoba, karena dengan penambahan Jquery, jika kalian mengarahkan cursor pada salah satu icon social bookmark, maka akan keluar secara perlahan icon social yang tersorot cursor mouse tersebut, itu karena efek easing yang ada pada jquery-ui.min. Berikut ini merupakan Cara Membuat Floating Social Bookmark Efek Easing tersebut:

1. Login ke dalam Blogger kalian

2. Masuk ke Template, Lalu Edit HTML

3. Letakkan kode CSS dibawah ini diatas ]]></b:skin> :

.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: #d19fe8;
    background-image: url(http://1.bp.blogspot.com/-zt3csy2DqGo/U661h1iTakI/AAAAAAAAAFc/v5tUjZIJDHs/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: #318ce7;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #08e8de;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #c32148;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #195905;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #5218fa;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #800020;
}
.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;
}

4. Untuk penambahan jquery dan javascript, Letakkan kode berikut ini sebelum </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
$(window).load(function(){
$(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
$(this).stop();
$(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});

});
$(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
$(this).stop();
$(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
});
});
</script>
Untuk jquery library warna hijau diatas, jika pada template yang kalian gunakan sudah terpasang, harap ditinggalkan saja atau jangan ikut di masukkan.


5. Untuk memanggil widget tersebut, taruh kode HTML dibawah ini sebelum </body> :
<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/Almeera-Titania-760638460707919' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/102289673422471971530' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/deemustusher' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>
   Ganti tulisan ungu diatas, dengan ID milik kalian sendiri.

6. Simpan Template dan lihat hasilnya. Selamat Mencoba..

Floating Social Bookmark Keren dengan memakai efek easing patut dicoba, Jquery Floating Social Blogger, Floating Social Efek Easing, Floating Social Facebook Twitter Google plus Youtube RSS Pinterest, Pasang Floating Social, Buat Floating Social, Floating Social Bookmark Efek Easing, CSS, HTML, Jquery, Javascript, Winget blogger, Template blogger

Posting Komentar

  1. Tutorial membuat floating social bookmark nya beneran keren.
    Makasih tutorial nya :)
    visit tips dan trik PC | http://dinamic66.tk

    BalasHapus

Dhimas Leo Prastowo

{picture#https://lh3.googleusercontent.com/-J290Zq6ovE4/VlNdjWPM3WI/AAAAAAAAARA/5PI1TDkJMgQ/s288-Ic42/b3da4b_df4b6ceed761468a89a8c018f615d778.png} Thanks you for taking the time to see me {facebook#https://www.facebook.com/deemustusher} {twitter:#https://twitter.com/AlmeeraTitania} {google#https://plus.google.com/112732691799596740474} {pinterest#https://id.pinterest.com} {youtube#https://www.youtube.com/user/deemustusher} {instagram#https://www.instagram.com}

Almeera Titania

{picture#http://4.bp.blogspot.com/-okZt1Cb46M0/VvZsbFyLcWI/AAAAAAAAANY/j8Clb7sUdpIFujXHkFwubTmSYL5re-FiA/s1600-r/12319585_864166607014131_380223887_n.jpg} Thanks you for taking the time to see me {facebook#https://www.facebook.com/Almeera-Titania-760638460707919} {twitter#https://twitter.com/AlmeeraTitania} {google#https://plus.google.com/102289673422471971530} {pinterest#https://id.pinterest.com} {youtube#https://www.youtube.com/user/deemustusher} {instagram#https://www.instagram.com}

Formulir Kontak

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.