Artikel tentang memasang sosial media dengan teknik floating ini merupakan jawaban atas request dari saudara rossy yang sebelumnya berkomentar di laman about me. Alhamdulillah, dari pertanyaan itu saya bisa juga memproduksi satu buah lagi artikel di bulan yang penuh Berkah ini.
Mudah-mudahan saja, bagi anda yang sedang mencari tutorial mengenai teknik memasang floating dan ingin menerapkannya di blog anda masing-masing bisa terbantu dengan artikel ini. terus di simak ya ?
Beberapa persyaratan yang harus anda penuhi untuk mengikuti tutorial floating ini antara lain
- Persiapkan image (gambar) gambar sosial bookmark yang telah terupload di hosting anda, Jangan lupa persiapkan link URL image source nya. silahkan download secara gratis di sini
- Persiapkan semua link sosial media anda, baik itu link profil G+, link Facebook profil / Fans page blog, Link twitter, dan lain-lain serta jika anda ingin menambahkan, link feedburner blog anda bisa anda masukkan ke dalam teknik floating.
Jika kedua persyaratan tersebut di atas telah anda penuhi, langkah selanjutnya adalah memasangnya di blog, tapi sebelum itu silahkan simak script di bawah ini.
tips. Copy ke notepad anda agar memudahkan dalam mengedit script
[php]
<a href=”URL Profil Gplus anda” rel=”nofollow” title =”judul” target=”_blank” style=”display:scroll;position: fixed; bottom:255px;left:5px;”>
<img src=”URL Gambar anda”/></a>
<a href=”URL profil fb anda” title =”judul” rel =”nofollow” target=”_blank” style=”display:scroll;position: fixed; bottom:205px;left:5px;”>
<img src=”URL Gambar anda”></a>
<a href=”URL twitter anda” title =”judul” rel =”nofollow” target=”_blank” style=”display:scroll;position: fixed; bottom:155px;left:5px;”>
<img src=”Url gambar anda”></a>
<a href=”Alamat feedburner anda” title =”judul” rel =”nofollow” target=”_blank” style=”display:scroll;position: fixed; bottom:105px;left:5px;”>
<img src=”Url gambar anda”></a>
[/php]
Nb. Silahkan anda ganti dengan URL Image, dan URL sosial media anda pada bagian yang dibutuhkan
Beberapa keterangan yang perlu diperhatikan dari “satu contoh”
<a href=”URL profil sosial media” title =”judul yang akan muncul jika disorot tombolnya” rel =”nofollow” target=”_blank” style=”display:scroll;position: fixed; bottom:205px;left:5px;“><img src=”URL image“></a>
Silahkan anda ganti URL profil sosial media dengan URL yang telah anda persiapkan tadi.
Silahkan adan ganti dengan judul yang anda kehendaki pada gambar yang berwarna hijau di atas
Anda juga bisa mengganti posisi images dengan menganti position: fixed; dengan position: absolute; position: relative; dan position: static; sumber : adabisnis.com
Untuk mengatur posisi floating
- Lihat kode yang berwarna merah di atas, bisa anda ganti dengan right, left, top, bottom
-
Untuk ukuran silahkan anda tentukan sendiri nilai pixelnya, anda bisa bermain spasi dengan mengatur pada ukuran bottom.
Silahkan anda simak script yang telah saya berikan di atas, di bagian bottom terdapat perbandingan selisih ukuran pixel sebesar 50 px untuk tiap-tiap tombol social bookmark. Silahkan anda sesuaikan sendiri dengan keingingan anda. J
URL image ganti dengan link image yang telah anda upload sebelumnya
Cara memasang Kode Floating di blog wordpress (self host dan wordpress.com)
- Login ke dashboard wordpress anda
- Cari dan klik “appearance” >> “widgets“
- Pilih widget “text” >> pastekan script di atas yang telah anda edit sebelumnya
-
Jangan lupa klik “save” untuk menyimpan
Demo : bisa anda lihat di samping artikel ini
Cara memasang Script Floating di blogspot
- Login ke akun blogger anda
- Pilih “rancangan” >> “tambah gadget“
- Pilih gadget “html/javascript“
- Pastekan script di atas yang telah anda edit sebelumnya,
-
Jangan lupa untuk menyimpan
Mudah bukan? Setidaknya, kita berusaha meningkatkan jumlah teman di Google+, facebook / fans, twitter, dll dengan memasang tombol sosial bookmark dengan menggunakan teknik floating yang kita gunakan di blog kita masing-masing.
Terima kasih sudah menyimak, ^^ semoga bermanfaat ^^
wiw, iya bisa.. makasi yaaa.. 😀
sama-sama :), wew iconnya bagus, terutama icon youtubenya seperti dibingkai di dinding ^^
Ilmu yang sangat bermanfaat, Mas Adhani.
Salam.
sama-sama, terima kasih sudah berkunjung lagi mas fauzi ^^
langsung bookmark mas.. ntr kalau pas udah ada waktu senggang langsung praktek.. makaish ya mas infonya 😀
sama-sama mas tomi ^^
terima kasih atas kunjungannya 🙂
Wah perlu dicoba nih, hmm kayaknya floatnya mengundang selera orang buat klik hehehehe…
yup, bisa diterapkan juga untuk banner dsb. klo saya untuk saat ini masih menjaring subcriber, berguna juga untuk menarik minat orang untuk ngefans blog kita hhehehe
makasih mas. udah saya implementasikan di blog saya,,
manteeb tutorial e 😀
o ya mas.. ni tambahan tips dari saya supaya tidak mengurangi performa loading blog.
lebih baik script di copy ke file footer.php sebelum . Saya tadi coba di widget, ternyata loading blog jadi sedikit lama karena harus meload icon dl.. kalau di kasih di footer, blog akan tampil sempurna dl baru icon di load.
Cuma dari hasil experiment saya looh mas 😀
trims mas tomi, akan saya terapkan juga nanti , awalnya saja juga ingin menaruhnya di footer, tapi masih belum fix dengan letak serta bentuk iconnya,
lagi bereksperimen mas, yang mana letak serta bentuk iconnya yang memiliki klik tertinggi,
sudah beberapa kali ini saya memutar-mutar posisinya ^^, klo tarus di footer saya harus bolak balik non/aktifkan plugin firewal mas hehehe 🙂
klo sudah dapat posisi yang bagus, ntar akan saya pertimbangkan untuk menaruhnya di footer, trims atas sarannya ^^
izin bookmark dulu mas.
ntar baru di coba deh 🙂
eh iya kalau plugin firewall ga harus di nonaktifkan mas, cukup masukan ip whitelist dari koneksi yang di pakai.
kalau ip dinamis, ya tinggal masukan ip yang di pakai saat mau edit theme.
pengalaman pribadi mas 😀
wah, trims mas adi, atas informasinya 🙂
akhirnya udah pasang juga mas 😀
tetep saya taruh di samping tapi saya ga pakai widget mas 🙂
saya pasang di sidebar.php langsung tapi bawah sendiri setelah widget.
gambarnya juga saya masukkan langsung ke folder images di theme yang saya pakai 🙂
yup, saya juga sama, memasukkannya ke folder images yang dipakai juga, 🙂
tapi dalam waktu dekat ini saya akan mencoba memasangnnya di footer.php seperti saran mas tomi, soalnya berkaitan dengan fast loading, 🙂
Kalau buat Box berwarna Kuning yang ada dibawah postingan itu gimana mas? share dunk… keren Euy 😀
rahasia dong, ^^
hehehe bercanda doang kok ^^
box kuning di atas hasil kreasi dari penggunaan plugin socialize mas ari, plugin yang memiliki dua fungsi, pokoknya keren deh pluginnya
atau menunggu saya posting artikel baru yang membahas plugin ini ? ^^
tunggu besok ya, Insya Allah
Nunggu dah postingannya… pengen pasang juga 🙂
jangan Marah ya mas, kalau samma ntar,,, xixixixi…
itu mas, sudah saya publish di sini http://adhani.com/2011/plugin-menampilkan-social-media-di-blog.html
hehehe,,
tidak kok, malah saya senang, banyak yang mengikuti jejak saya, huahuahuaha..
tuh dah keduluan sama saudara ucupers ^^
Izin coba y mas, setelah di ikuti keren euy. lg nyari gambar Gif nih mas. Sharing icon yg Gif klo da mas 🙂
klo menggunakan gif bisa berat loadingnya mas,
klo menggunakan gif, tempatkan kodenya di footer agar lebih kelihatan hasilnya
langsung praktek ni mas,makasih mas sharingnya bermanfaat bgt,, 🙂
sama-sama, terima kasih atas kunjungannya 🙂
kalo buat iklan GA boleh ga mas?
yup bisa saja, tapi apa tidak takut mas, menyalahi aturan TOS GA,
klo untuk banner langsung bisa diterapkan, tapi untuk javascript, cara floatingnya lain lagi mas, ^^
gmana tuh mas caranya? ajarin donk. eh biar loading blog lebih cepat gmana caranya? ada tips ga mas?
cara yang bagaimana ya ?
klo untuk banner tinggal diganti saja URL link dan URL imagenya
Klo untuk “cara floatingnya lain lagi mas”
munkin bisa ke blognya mas satrya, ada dua, tinggal di pilih saja
1. http://www.margasatrya.com/cara-membuat-floatingmelayang-tombol-share-post.html
2. http://www.margasatrya.com/tutorial-cara-membuat-iklan-melayang-dengan-tombol-close-kali.html
tinggal penerapannya aja nanti dikondisikan,,
Untuk blog supaya cepat,, Selain mengurangi gambar dan widget, serta konsumsi file javascript di blog
saya mengkombinasikan plugin cache (hyper cache extended + db cache reloaded + wp minify) untuk gambar direduce dengan jquery lazy load + wp smush it
terus mengedit .htaccess dengan memasukkan kode yang bisa saudara andre temukan di blognya pengembang db cache reloaded fix
mungkin bebrapa di antara optimasi wordpress kebanyakan saya mengambil acuan di blognya mas alwi.
di m-alwi dot com,, mungkin bisa jalan-jalan kesana ke kategori optimasi wordpress
semoga membantu ^^
makasi ya mas. coba berkunjung dulu ke tempat yang disarankan.
unik seh cuma kayaknya orang gak suka dengan model seperti itu karena sering error apalagi masih banyak yg menggunakan IE 😀
wah terima kasih atas informasinya ^^
thnkz gan bwt infonya, sngt membantu sekali
mksi mas, test dlu 🙂
silahkan mas,, klo mau download icon sosial media,, di blog ini sudah saya rangkum yang keren2 🙂
nice post bro, visit me back
Nyoba dulu ahh…
hehhee 😀
Thanks for sharing mas Andhani…
Kalo tombol follow, like, g+ dibawah ini pasang scriptnya dimana ya?? boleh tau??
hehehe 😀
mungkin bisa coba dulu dengan menggunakan wibiya toolbar.. malah lengkap lagi.. dengan fitur2 yang ada
Okay.. thanks..
segera ke TKP 😀
langsung praktek…. 🙂
thanks gan infonya… sudah dicoba dan berhasil 🙂
Thx infonya gan ,sangat membantu 😀
Akhirnya nemu juga caranya, thanks mas bro
mkasi y infony…tpi sya msh bingung ne ttg url image.url image itu lokasi image sth d upload lgi k blog?
makasih gan…
salam kenal..
salam kenal juga gan
mohon izin nerapin di blog saya ya mas. makasih.
klo untuk joomla bisa gk gan diterapin?
bisa, di joomla kalau tidak salah ada widgetnya kan, ? kalau mau gampang implant ke themesnya
dicoba saja dulu gan, utak atik themes, tapi terlebih dulu backup agar nanti kalau error bisa dikembalikan ke posisi semula
very good
nah baru nongol artikel baru na. dari kemarin ane ke sini lom ada artikel terbaru na. sips, artikel kali ini memang keren.
dari pada floating blog2 lain, ploating blog ne keren banget, salut.