Membuat Floating Social Bookmark Melayang dengan Efek Easing

Membuat Floating Social Bookmark Melayang dengan Efek Easing » The FIM Site kali ini akan sedikit berbagi info dari kami yang disponsori oleh MASFIM.com | Portal Informasi Terkini. Hallo teman-teman semua sudah lama juga saya tidak update artikel diblog ini juga ya.. Oiya bagaimana kabar kalian semua? Sehat selalu bukan? Oiya kali ini saya memiliki trik untuk mempercantik blog Anda. Kebetulan tutorial ini saya peroleh dari www.maskolis.com yang merupakan salah satu master pembuat tema blog dan tutorial yang ciamik. Menurut saya lho.

DEMO

Nah jika kalian ingin membuat blognya menjadi lebih atraktif mungkin bisa mencoba untuk memasang icon share yang melayang disamping kanan blog kalian dan ini tentu bisa membuat tampilan blog lebih indah dan enak untuk dilihat. Oiya jika kalian memiliki sejumlah pertanyaan nanti akan saya bantu untuk menjawab namun jika saya tidak bisa menjawabnya kalian bisa langsung mengunjungi situs www.maskolis.com ya untuk mendapatkan jawaban yang detail dan tepatnya. Maklum saya ini hanya seorang newbie yang ingin berbagi informasi yang saya peroleh. Heheheheh..

Ok langsung saja ke tutorialnya ya:

1. Login ke Blogger
2. Masuk ke Template
3. Letakkan kode CSS di bawah 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: #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; }
4. Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut 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(){ $('.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>
Untuk jquery library http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja atau hapus.
5. Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum </body> :
<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>
6. Terakhir, Save Templates 

Nah demikian tadi tutorialyang bisa saya berikan. Jika memiliki sejumlah pertanyaan silahkan bertanya dan saya akan mencoba menjawabnya namun jika tidak bisa menjawabnya mohon dimaafkan ya.. :)