Cara Mudah Membuat Tombol Sosial Media Melayang Keren di Blog

Tanta panjang dan lebar langsung saja kita ke tutorial Cara Mudah Membuat Tombol Sosial Media Melayang Keren di Blog.

1. Seperti biasa yang anda harus lakukan pertama kali ialah login ke akun blogger sobat, hehe ya iayalah.

2. Lalu ke template >>> Edit html.

 
3. jangan lupa untuk mendownload dulu secara penuh template anda agar jika terjadi kesalahan sobat bisa menggunakan template yang telah sobat download tadi sebagai recovery.

4. Cari kode ]]></b:skin> gunakan ctrl+f untuk memudahkannya.

5. Kemudian letakan kode di bawah ini tepat diatas kode ]]></b:skin> ingat ya 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/AVvXsEgddulj7ZvFxnC3msE2LPuZf0cOdvBKowLlChsmtPdNy4xw0vilsJv4GvHXrFFhTG1LH5hMkaQhp8h19yZ_zDgpZiyFfJCIRT8vOnqLvfG_D7ehad5cfnDD5dYan2CKGVctvit7caMqvW8/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}

6. Kemudian cari kode </head>, dan pastekan kode di bawah ini tepat di atas nya ingat di atasnya.

<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>

7. Klik save template dan keluar dari editor html.

Sekarang  kita akan beralih ke tata letak.

• Mausk ke tata letak
• Add gadget 
• pilih html/java script
• Kemudian pastekan kode di bawahini ,untuk judul silahkan sobat kosongkan saja.

<div class='social-buttons button-right hidden-phone hidden-tablet'> <a class='itemsocial' href='URL Facebook Sobat' 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 Sobat' 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 Sobat' 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 Sobat' 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 Sobat' 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 Sobat' rel='nofollow' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via RSS</span></span></a> </div> gsg

• Terakhir klik simpan taraa kini tombolsosial media keren sudah ada di blog sobat . walau pun agak ribet si hehe
• NB# cari kode "url facebook sobat", "url twitter sobat" d el el ganti dengan url facebook sobat dan teitter dll.

DemikianlahCara Mudah Membuat Tombol Sosial Media Melayang Keren di Blog

Semoga bermanfaat...