Cara Mudah Pasang Tombol Floating Media Sosial

Jika anda ingin  memasang tombol floating media sosial di samping halaman posting blog sisi kiri / kanan dgn cara praktis dan mudah tanpa harus utak-atik kode script / edit html template, hanya cukup menambahkan widget pada design page elements blog anda saja. Anda bisa mengatur tampilan warna background agar sesuai dgn tampilan blog, juga menampilkan di sisi kiri atau sisi kanan halaman blog. Bahkan, setelah memasang tombol floating berbagi ini kita bisa membuang semua tombol share media sosial lain yg memenuhi setiap halaman yg menggangu dan memperberat loading page, karena dgn membuat widget floating ini akan selalu mengikuti scrolling pengunjung halaman blog alias akan selalu terlihat sehingga bisa mengundang dan mempermudah mereka untuk klik tombol share floating seperti : Facebook Like, Google Plus, Twitter, Linkedin, Digg...dll.


Ok silahkan login ke blog > Design  > Add widget > HTML-Javascript

Copy dan paste kode di bawah ini di HTML-Javascript Widget anda.

<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; color: #fff; float: left; font-weight: normal; font-size: 13px; padding:0 0 3px 0; position: fixed; text-decoration: none; bottom:30%; left:0; z-index:10; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -webkit-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; color:#fff; font-size:9px; text-align:center; padding-top:3px; font-family:tahoma, verdana, helvetica, arial, sans-serif; font-weight:bold; line-height:1.4; } .addbuttons a { color:#fff; background:none; } .addbuttons a:hover { color:#fff; background:none; } .sharebuttons { font-size:8px; } </style> <div id='floatingbuttons' title="Share this post!">

<div class='floatbutton' id='facebook'> Kode Tombol Like Facebook Anda </div>

<div class='floatbutton' id='sharefb'> Kode Tombol Share FB Anda </div>

<div class='floatbutton' id='twitter'> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="ID-Twitter">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> </div>

<div class='floatbutton' id='google+1'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'id'}

</script>
<g:plusone size="tall"></g:plusone> </div><br/>
<div style="clear: both;font-size: 9px;text-align:center;"><a href='http://blogseotest.blogspot.com/2012/02/cara-mudah-pasang-tombol-floating-media.html' target='_blank' title='Cara Mudah Pasang Tombol Floating Media Sosial'><font color="blue"><blink>Get Widget</blink></font></a>
</div></div>

Ganti huruf berwarna merah dgn ID anda dan kode media sosial anda.

Ganti huruf berwarna hijau utk merubah posisi widget floating, contoh: left dgn right

Jika anda ingin menyesuaikan warna tampilan background agar serasi dgn warna template blog, ganti angka / huruf yg berwarna biru dengan kode warna html.
Senang sekali, saya bisa bantu anda dalam Cara Mudah Pasang Tombol Floating Media Sosial di samping halaman blog atau di sisi kiri dan sisi kanan halaman posting blog. Semoga berguna.
 
Cara Mudah Pasang Tombol Floating Media Sosial « Copyright © 2014 Blog SEO Test™ - All Rights Reserved. | Sitemap | Privacy | DMCA
Template Design by » Borneo Templates | Powered by Blogger .

SEO | Tips Blogging | Triks Blogger | Optimasi Blog | Eksperimen Blog | Belajar Ngeblog | Blogger Hacks | Test SEO Blog | Web Tools | Kode Warna HTML | Skema Warna HTML | Skema Warna Template | Ads Script Parser | Ads Script Converter | Ads Converter Tools | Tips Bagaimana Cara | How to | Triks | HTML Color Codes | Google Adsense Script Parser | Tutorial | Posisi Teratas SERP | Cara Cepat | Index Google | Webmaster | Halaman Pertama | Search Engine | SEO Friendly