Cara Membuat Floating Social Media Button| Social Media Button merupakan salah satu tools untuk mempermudah pengunjung blog Anda berbagi artikel postingan Anda ke berbagai sosial media. Semakin banyak artikel postingan blog Anda di-share (dibagikan) ke sosial media akan terbuka kemungkinan mendatangkan pengunjung ke blog Anda sehingga blog Anda akan semakin dikenal dan sudah tentu akan menguntungkan Anda.Di internet banyak tersedia social media button (tombol sosial media). Salah satu social media button yang paling banyak disukai adalah Floating Social Media Button ini.
Berikut saya mau berbagi dengan Anda cara mudah membuat Floating Social Media Button yang paling aku sukai karena untuk memasangnya di blog caranya sangat mudah. Lihat contohnya di sebelah kiri blog ku ini. Mau seperti yang saya punya? Kalo YA! Silahkan teruskan baca tutorialnya ke bawah.
Disini saya berikan 8 warna pilihan agar supaya Anda bisa menyesuaikan dengan warna blog Anda. Atau mungkin Anda bisa merubah warnanya sendiri jika warna yang saya sediakan tidak cocok dengan warna blog Anda. Untuk merubah warnanya sangatlah mudah, Anda hanya perlu mengganti kode CSSnya saja. Untuk pilih warna silahkan scroll ke bawah tutorial ini.
Ada 2 cara memasang Floating Social Media Button ini di blogspot. Silahkan ikuti saja petunjuknya dibawah ini.
Cara 1: Script Floating Social Media Button diletakkan di widget blog.
- Login ke blog Anda.
- Pilih Design
- Pilih Add Gadget (saran: pilihlah gadget paling bawah)
- Pilih HTML/JavaScript.
- Copy dan Paste-kan script dibawah ini ke dalamnya dan klik Save.
- Coba lihat blog Anda, sekarang Floating Social Media Button sudh nongol disebelah kiri blog Anda.
<!-- +++++ START OF FLOATING BUTTON +++++ -->Cara 2: Script Floating Social Media Button diletakkan di dalam template blog.
<style>
#floatingbuttons{background:#aaa;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f2f2), color-stop(1, #aaa));background:-moz-linear-gradient(top, #f2f2f2, #aaa);border:1px solid #808080;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}
</style>
<!-- Google Plus 1 -->
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<div id='floatingbuttons' title='Share this post!'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script type='text/javascript'>
(function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName
('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src =
'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script>
<!-- Medium Button -->
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<div class='floatbutton' id='facebook'><fb:like font='' layout='box_count' show_faces='false'/>
</div>
<div class='floatbutton' id='google+1'>
<g:plusone size='tall'/>
</div>
<div class='floatbutton' id='twitter'>
<a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a>
</div>
<div class='floatbutton' id='rss-feed'>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"' target='_blank'><img alt='feed' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjryoOgOexRZ6Nl2GHeLK0UCPEfBvkWkeslDHypwnaYbYusYk-LSg9LUFWdMzZUaTlJbOxCP9yPyGFn25Nyah68YvotrbuzwNJpEGuYCta45xwRvigCDa4UOuEbrsyKH5hXq94lPXz4_ZQ/s1600/feed.png'/></a>
</div>
</div>
<!-- +++++ END OF FLOATING BUTTON +++++ -->
- Login ke blog Anda.
- Backup dulu template blog Anda.
- Pilih Design -> Edit HTML
- Carilah (tekan CTRL+F) kode </body>
- Copy dan Paste-kan script diatas tepat diBAWAHnya. Dan SAVE template Anda.
- Coba lihat blog Anda, sekarang Floating Social Media Button sudah nongol disebelah kiri blog Anda.
Untuk mengatur posisi vertikal Floating Social Media Button ini Anda hanya perlu merubah nilai persen kode ini bottom:15% di dalam kode CSS. Silahkan dicoba-coba nilainya dan temukan posisi yang Anda inginkan.
Selamat mencoba dan berblogria! Jangan lupa share tutorial ini ke social media Anda. Thanks!
Kode CSS untuk pilihan warna: (Copy saja semuanya ke notepad)
<!-- +++++ BLUE Floating Social Media Button +++++ -->
#floatingbuttons{background:#254B9D;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #254B9D), color-stop(1, #254B9D));background:-moz-linear-gradient(top, #254B9D, #254B9D);border:1px solid #1E4A8A;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}
<!-- +++++ SILVER Floating Social Media Button +++++ -->
#floatingbuttons{background:#aaa;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f2f2), color-stop(1, #aaa));background:-moz-linear-gradient(top, #f2f2f2, #aaa);border:1px solid #808080;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}
<!-- +++++ RED Floating Social Media Button +++++ -->
#floatingbuttons{background:#C12424;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #F54F4F), color-stop(1, #C12424));background:-moz-linear-gradient(top, #F54F4F, #C12424);border:1px solid #B31919;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}
<!-- +++++ BLUE Floating Social Media Button +++++ -->
#floatingbuttons{background:#295698;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #3980E6), color-stop(1, #295698));background:-moz-linear-gradient(top, #3980E6, #295698);border:1px solid #1E4A8A;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}
<!-- +++++ GREEN Floating Social Media Button +++++ -->
#floatingbuttons{background:#80A81C;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #A1D423), color-stop(1, #80A81C));background:-moz-linear-gradient(top, #A1D423, #80A81C);border:1px solid #739619;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}
<!-- +++++ ORANGE Floating Social Media Button +++++ -->
#floatingbuttons{background:#C15F24;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #F58D4F), color-stop(1, #C15F24));background:-moz-linear-gradient(top, #F58D4F, #C15F24);border:1px solid #B35319;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}
<!-- +++++ YELLOW Floating Social Media Button +++++ -->
#floatingbuttons{background:#FFF19D;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF8CA), color-stop(1, #FFF19D));background:-moz-linear-gradient(top, #FFF8CA, #FFF19D);border:1px solid #F1E7AC;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#000;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}
<!-- +++++ WHITE Floating Social Media Button +++++ -->
#floatingbuttons{background:#F9F9F9;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #F9F9F9));background:-moz-linear-gradient(top, #fff, #F9F9F9);border:1px solid #ccc;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#000;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#000;background:none;text-decoration:underline;}
Semoga artikel Cara Membuat Floating Social Media Button bermanfaat untuk Anda.
