Cara Membuat Widget Tombol Sosmed Melayang

LANGKAH PERTAMA

1. Login Ke Blogger

2. Masuk Ke Editor HTML (Template > Edit HTML)

3. Copy kode berikut ini dan letakan tepat di atas kode ]]></b:skin>

.social-buttons{position:fixed;top:150px;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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5JPTmxfwo7AzrS5f1AxhuuKQgguhraDcJXbd-MOfbVmBtUO_fG7hBPv9o8xRD86hFW6ECBlVtJKyjmaBDBtk3tzS5t9nVxo1dxj5PiC_YcBWkJsYgYvjNRc3Nc9yMUlXbX6RkP962OkI/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-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}
.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 .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;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:700;white-space:nowrap;margin:11px 40px 11px 0}
.button-right .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;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:700;white-space:nowrap;margin:11px 0 11px 40px}
.social-buttons .social-text{color:#FFF}
.button-left #pinterest-btn span,.button-right #pinterest-btn span{background-position:11px -177px}
.button-left #youtube-btn span,.button-right #youtube-btn span{background-position:11px -223px}

4. Nahh Copy lagi kode dibawah ini, dan letakan di atas kode </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>

5. Save, dan Keluar dari editor HTML

LANGKAH KEDUA

1. Masuk Ke TATA LETAK

2. ADD GADGET > Cari HTML/JavaScript

3. Copy kode berikut ini

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='URL Facebook' rel='nofollow' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Facebook</span></span></a>
<a class='itemsocial' href='URL Twitter' rel='nofollow' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Twitter</span></span></a>
<a class='itemsocial' href='URL Google Plus' rel='nofollow' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Google</span></span></a>
<a class='itemsocial' href='URL Pinterest' rel='nofollow' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow us via Pinterest</span></span></a>
<a class='itemsocial' href='URL Chanel Youtube' rel='nofollow' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Youtube</span></span></a>
<a class='itemsocial' href='URL Feedburner' rel='nofollow' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via RSS</span></span></a>
</div>