Cara Mudah Pasang Tombol Floating Media Sosial

Tips triks terbaru di » Blog SEO Test kali ini membahas » Media Sosial » Cara Mudah Pasang Tombol Floating Media Sosial, terbaik dlm ~ Jika anda ingin  memasangtombol floating media sosial di samping halaman posting blog sisi kiri / kanan dgncara 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 kliktombol 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 Facbook 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>
</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 halamanposting blog. Semoga berguna.

Leave a Reply