Dari banyaknya social icon yang bisa dipasang dipinggiran blog kamu, kayaknya social ini juga bagus dan patut koq kalo mau coba dipasang diblognya sahabat. Dengan jquery yang membuat float lebih halus saat easing menjadi kelebihan social icon satu ini. kalo kamu udah punya social icon yang dipasang di blog, coba bandingkan dengan dengan yang satu ini. Bagus mana?
Banyak sih kelebihan memasang social icon, blog kita jadi ada sebuah fanspage disitus besar. atau hanya sekedar menambah follower. saya sendiri juga tertarik dengan social icon, apalagi yang satu ini. kalo screenshot gambar diatas kurang memuaskan, saya sudah sediakan demonya diblog saya yang lain. Link demonya dibawah ini, silahkan dilihat!
Yang minat pasang social icon float satu ini, berikut bahan yang diperlukan ;CSS
.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;
}
Jquery dan JavaScript
<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(){
$('.social-buttons .social-icon').mouseenter(function(){
$(this).stop();
$(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});
});
$('.social-buttons .social-icon').mouseleave(function(){
$(this).stop();
$(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});
});
});
</script>
HTML
<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB' 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/your twitter' 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/your G+' 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/your ID' 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/your ID' 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/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>
Nah, untuk code yang saya beri warna biru. sudah jelas dong, kalo itu harus diganti dengan ID yang sesuai, kalo sobat misalnya belum punya akun pinterest dan malas membuat cukup hapus aja bagian pinterestnya.
Cara Memasang di Blog
- Letakkan kode CSSnya diatas tag ]]></b:skin>
- Jquery dan JavaScriptnya letakkan diatas tag </head>
- HTMLnya letakkan diatas tag </body>
Jika sudah berhasil memasangnya setidaknya jangan lupa lah untuk menyapa saya melalui kotak komentar, atau mungkin masih ada yang kurang jelas bisa langsung kritik di kotak komentar juga. Widget ini saya dapat dari blognya Maskolis, blognya dengan url http://www.maskolis.com/. Coba kamu main kesana, banyak blogger yang berkhutbah melalui blogger satu ini. Terima kasih Maskolis
Kayaknya asik ni di pasang di blog aku, ijin nyobain ya kak ?
ReplyDeletemantap sob..
ReplyDeleteaku suka sekali...
Bisa dicoba nih kawan cara buat floating share untuk sosial iconnya
ReplyDeleteKeren tuh ...lengkap banget.
ReplyDeletekeren sob
ReplyDeletekapan-kapan bisa dicoba
Thanks bro
ReplyDeleteKeren nih Asrizal Wahdan Wilsa Sharing Media
ReplyDeleteterima kasih plur ..
ReplyDeleteIt’s really a great and helpful piece of information. I’m satisfied that you shared this useful information with us. Please stay us informed like this. Thanks for sharing. Also check SMS Bomber Apk & ES File Explorer Pro.
ReplyDeleteDownload Game Killer for iOS
ReplyDeleteto hack Games on iPhones and iPads.
Download IPTV Apk
to watch TV on Phone.
Download Xender for PC
and use Xender app on your PC
Thanks a lot for sharing such an awesome information with us. Also check
ReplyDeleteYoWhatsApp
GBWhatsApp
GBWhatsApp
GBWhatsApp Download
GBWhatsApp Download
This website is very helpful for me. Also check YoWhatsApp and Megabox HD Apk from my blog.
ReplyDeleteNice Comment.
ReplyDeleteIf you want to repair PSt files then download the scanpstexe software.