Floating Share Button For Blogger Indonesia

Floating Share Button For Blogger Indonesia

Informasi Pengirim
Pengirim: Admin
http://www.direktoriweblog.com/
Reciprocal Link:Available at Homepage

Selamat sore lagi Blogger Indonesia.

Mumpung lagi dikasih waktu luang dan kesehatan pada hari Senin yang cukup cerah sore ini, Admin Direktori Weblogger Indonesia kembali ingin berbagi tips untuk memasang widget tombol share melayang di blog, atau kalau bahasa kampungannya Floating Social Share Button yang tentunya widget ini sudah sangat populer sekali diantero jagat perblogger, khususnya di tanah air tecinta kita, Indonesia.

Widget tombol share yang akan melayang di samping blog dan yang akan saya share disini adalah tombol share yang dibalut oleh dua warna sakti mandraguna yang pastinya merupakan warna kebanggan kita semua sebagai Blogger Indonesia, yaitu Merah dan Putih, sehingga mengesankan widget floating social share button ini sangat Indonesia banget. Kemudian juga sedikit dibumbui dengan effect menarik saat didekati oleh kursor. Untuk demonya silahkan menuju link demo yang telah saya sediakan dibawah ini.

DEMO

Untuk cara pemasangan widget tombol share melayang khas Indonesia ini, mari kita simak bersama langkah-langkah berikut ini.

1. Login ke Blogger
2. Pilih menu Template dan klik Edit HTML
3. Cari kode ]]><, dan tepat diatas kode tersebut pastekan kode CSS berikut ini.
/** CSS Floating Share Button DirektoriWeblogger.Com **/ .flt-wdt { position: fixed; right: 5px; top: 25%; } .flt-wdt img { float: right; clear: right; margin: 5px; -moz-transform: scale(.8) ; -webkit-transform: scale(.8) ; -o-transform: scale(.8) ; -ms-transform: scale(.8) ; transform: scale(.8) ; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .flt-wdt img:hover { -moz-transform: scale(1.1) rotate(6deg); -webkit-transform: scale(1.1) rotate(6deg); -o-transform: scale(1.1) rotate(6deg); -ms-transform: scale(1.1) rotate(6deg); transform: scale(1.1) rotate(6deg); }
4. Save template blog Anda
5. Selanjutnya, masuk ke menu Tata Letak (Layout)
6. Klik Tambahkan Widget HTML/Javascript.
7. Lalu pastekan kodel HTML dibawah ini ke dalam kotak isian Tambahkan Widget HTML/Javascript tadi.
<div class='flt-wdt'> <!-- Facebook --> <a href='https://www.facebook.com/DirektoriWeblogger' target='blank'><img alt='Facebook' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-4xSfz4tvBL73kfWOtOvYXnn96H6d08F78B5OjZ3C1s-gdAJjLfkXM2C2jSLsclq14HtV3vi0QUn9TPQEBksqsvab57_jVwITqHkJzbe2DOP3tuSmjbv4aVv5zCSmX8LcFaObMAza0_k/s1600/Facebook.png' width='60'/></a> <!-- Twitter --> <a href='https://twitter.com/DirektoriWeblogger' target='blank'><img alt='Twitter' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE27oIYX2A6tfPf1kb2Whxq1tI3wwMyKTI9fOys1xu_qLN0YjhmnaqZAmgyJsuEl659_8t5WhjnQvDJwDw4xsneuYLaxGrDwLkNUYmp_s0axylZseZq0yoaQuv_fY3XID1VN6wsDN549c/s1600/Tweeter.png' width='60'/></a> <!-- Gplus --> <a href='https://plus.google.com/+DirektoriWeblogger' target='blank'><img alt='Gplus' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbn2km5H5kz4SSZE1mWJoklfvMXrjOWu7tmU3DMv7CqBULhSPfrn3qliphqzBFjV-_C080Hk741jaXyM3u7jUVk80O9YlnMywSBiCJDZNCJAGoLEe03Dm0O4CGVRBWbBpCRxCoa1sxvnU/s1600/Google-Plus.png' width='60'/></a> <!-- RSS --> <a href='http://feeds.feedburner.com/DirektoriWeblogger' target='blank'><img alt='Feed' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4M82n47SEDJiRqMgX0jE1wT-YYAHEFsBzxA1ijcJwQbZkMd4LuGdUe23mlPa2N8TgbftYDW1IGJ6w3ba_TlJA8VFDSXowKrKwE5OdBNGp0l7sHjK-B655kWzNSP1pmjd3gOGxUoXa5bg/s1600/RSS.png' width='60'/></a> <!-- DWI --> <a href='http://www.direktoriweblog.com/2013/11/floating-share-button-for-blogger-indonesia.html' target='blank'><img alt='Facebook' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitIm-fPgCbvicd_shvx1Xryykt-GCaLYHsRFMCWUARW2KHYH1e_Gfjp9XAXKYCW4ddc696zFC2NnDuiG0YlBN7xoH4tVU1DQgHFTaXWmVjC6XR1K8aXQosN2iHJzCXU03xPZdBMUkLDgY/s1600/Direktori-Weblogger.png' width='60'/></a> </div>
8. Ganti tulisan DirektoriWeblogger dengan URL dari masing-masing jejairing sosial milik Anda.
9. Save template dan lihat hasilnya.

Demikian sharing dari Direktori Weblogger kali ini dan semoga bermanfaat.

Salam Blogger Indonesia

Admin

Category(s):	Artikel
Date added:

Approved by: Direktori Weblogger - Follow Us on Facebook - Twitter 

Your Ads:

Direktori Weblogger

Direktori Weblogger, Updated at: 15.40