Sama seperti pada penggunaan wibiya toolbar yang aku bahas beberapa waktu lalu. Bedanya, wibiya toolbar, kita tidak perlu masuk ke editor themes. Cukup instal dan aktifkan. Maka, sosial media toolbar melayang langsung jadi.
Nah, kali ini adhani.com akan berbagi lagi Informasi mengenai social media button dengan teknik floating. Script ini lebih mampu meningkatkan jumlah fans facebook, follower twitter, +1 dan email berlangganan feedburner secara drastis.
Berbeda juga pada penggunaan script floating statis yang kubahas beberapa waktu lalu. Dengan teknik ini, aktifitas dari visitor akan langsung tereksekusi menjadi leads / pengikut. Bukan terredirect ke halaman social media dan visitor tidak akan kerja 2 kali ketika ngebrowsing hanya untuk menjadi follower.
Tapi perlu diingat, penggunaan script ini minus terhadap kecepatan loading akses. Dimana, penggunakan script floating sosial media ini akan memperbanyak jumlah request (permintaan).
Kebetulan banyak yang nanya cara membuatnya, dan kebetulan juga aku lagi senggang. Ya.. aku buat aja daripada teman-teman semua berhenti penasaran, hehehe
Bagaimana sih gambarannya ?
Cara membuat :
Persyaratan yang harus dipersiapkan antara lain
- Script iframe Facebook Fans like box
- Script iframe Twitter follow button
- Script form Feedburner
- Script GooglePlus +1 Button
#1 Script iframe facebook
Baca terlebih dahulu tentang membuat facebook fans like box
Tips. Hilangkan centang pada semua bagian (show faces, show stream dsb) width 150px, height : 21px
#2 Script Iframe twitter following button
Tips. Langsung Ganti username “adhaniblog” menjadi username twitter teman-teman. Jika bingung, silahkan ke halaman ini untuk membuat twitter following button
[php]<iframe allowtransparency=”true” scrolling=”no” src=”//platform.twitter.com/widgets/follow_button.html?screen_name=adhaniblog” style=”width:150px; height:21px;”></iframe>[/php]
#3 Script Feedburner
Jika belum punya feedburner, silahkan buat dahulu. Kemudian ambil shortcodes form feedburnernya. Biasanya dimulai dari <form> ke </form>. Atau
Silahkan ganti http://feedburner.google.com/fb/a/mailverify?uri=adhaniblog di script bawah ini menjadi milik Anda
[php] <form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=adhaniblog’, ‘popupwindow’, ‘scrollbars=yes’);return true”>
Ingin berlangganan? <input type=”text” style=”background-color: rgb(255, 255, 160); margin-bottom: 1px; padding-left: 5px; width: 150px; padding-top: 1px; height: 13px;” onfocus=”this.value = ”;” maxlength=”100″ size=”10″ value=”Masukkan Email Anda” name=”email” valign=”middle”/>
<input type=”submit” value=”Subscribe” class=”btn1″/>
</form> [/php]
#4 Script GooglePlus +1 Button
Silahkan ganti +1 button di bawah ini menjadi URL domain milik masing-masing. Url Artikel Postingan juga bisa kok ^^. Tapi sebelum itu ke halaman ini jika sobat semua belum pernah sama sekali memasang +1 Button di blog
[php]<g:plusone size=”medium” href=”http://adhani.com”></g:plusone>[/php]
Langkah Selanjutnya
Jika sudah punya keempat persyaratan di atas, maka Langkah selanjutnya adalah memasukkan ke empat elemen avatar tadi (ups salah) ke dalam template WordPress atau Blogger
#1 WordPress
Masukkan shortcodes berikut ke dalam file CSS theme yang sedang digunakan (dashboard >> appearrance >> editor >> stylesheet css). Kemudian simpan
[php]#bottom {
width: 950px;
position:fixed;
bottom:0px;
height:30px;
border-top: 1px solid #555;
background: #FFFFFF;
text-align: center;
}[/php]
Nb. Script di atas adalah pembungkus toolbar. Sesuaikan dengan ukuran lebar (width) themes atau bisa diganti dengan ukuran 100%. Warna background juga bisa diganti.
Buka Footer.php (dashboard >> appearrance >> editor >> footer.php), masukkan kode di bawah ini tepat di atas kode lainnya, atau sebelum tag </body>
[php]<div id=’bottom’>
<table align=’center’ width=’950px’><tr>
<td>
<iframe allowtransparency=”true” frameborder=”0″ scrolling=”no” src=”//platform.twitter.com/widgets/follow_button.html?screen_name=adhaniblog” style=”width:150px; height:21px;”></iframe>
</td>
<td>Fans >> </td><td><iframe src=”//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fadhaniblog&layout=button_count&width=150&action=like&height=21″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:150px; height:21px;” allowTransparency=”true”></iframe></td>
<td><g:plusone size=”medium” href=”http://adhani.com/2011/adira-asuransi-kendaraan-terbaik-indonesia.html”></g:plusone></td>
<td><form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=adhaniblog’, ‘popupwindow’, ‘scrollbars=yes’);return true”>
Ingin berlangganan? <input type=”text” style=”background-color: rgb(255, 255, 160); margin-bottom: 1px; padding-left: 5px; width: 150px; padding-top: 1px; height: 13px;” onfocus=”this.value = ”;” maxlength=”100″ size=”10″ value=”Masukkan Email Anda” name=”email” valign=”middle”/>
<input type=”submit” value=”Subscribe” class=”btn1″/>
</form></td>
</tr>
</table>
</div>[/php]
Dari kode di atas, sudah jelas kita memanfaatkan script tabel. Ada 5 kolom (<td></td>) di dalam satu baris (<tr></tr>). Silahkan ganti dengan keempat script di atas dengan script yang telah Anda persiapkan sebelumnya.
Ukuran tabel 950px di atas adalah ukuran theme ini sesuaikan dengan ukuran theme masing-masing.
Hilangkan script frameborder=”0″
Kemudian simpan dan lihat perubahan yang terjadi
#2 Blogger
Langkah pertama, Silahkan terlebih dahulu login ke akun blogger Anda.
Langkah kedua, Saat berada di dashboard blogspot pilih blog, kemudian klik “template” klik “edit html”
Langkah ketiga, Beri tanda ceklist pada expand widget templates
Langkah keempat, Cari dan temukan kode di bawah ini dengan cara menekan CTRL + F untuk membantu Anda dalam pencarian cepat
Langkah kelima, Cari dan temukan kode di bawah ini dengan cara menekan CTRL + F untuk membantu Anda dalam pencarian cepat
[php]</body>[/php]
Langkah keenam, Copy paste script di bawah ini tepat di atas atau sebelum tag </body>
[php]
<style type=’text/css’> #bottom {width: 100%; position:fixed; bottom:0px;height:26px;border-top: 1px solid #555;background: #FFFFFF;text-align: center;}</style>
<div id=’bottom’>
<table align=’center’ width=’950px’><tr>
<td>
<iframe allowtransparency=”true” frameborder=”0″ scrolling=”no” src=”//platform.twitter.com/widgets/follow_button.html?screen_name=adhaniblog” style=”width:150px; height:21px;”></iframe>
</td>
<td>Fans >> </td><td><iframe src=”//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fadhaniblog&layout=button_count&width=150&action=like&height=21″ scrolling=”no” style=”border:none; overflow:hidden; width:150px; height:21px;” allowTransparency=”true”></iframe></td>
<td><g:plusone size=”medium” href=”http://adhani.com/2011/adira-asuransi-kendaraan-terbaik-indonesia.html”></g:plusone></td>
<td><form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=adhaniblog’, ‘popupwindow’, ‘scrollbars=yes’);return true”>
Ingin berlangganan? <input type=”text” style=”background-color: rgb(255, 255, 160); margin-bottom: 1px; padding-left: 5px; width: 150px; padding-top: 1px; height: 13px;” onfocus=”this.value = ”;” maxlength=”100″ size=”10″ value=”Masukkan Email Anda” name=”email” valign=”middle”/>
<input type=”submit” value=”Subscribe” class=”btn1″/>
</form></td>
</tr>
</table>
</div>[/php]
Dari kode di atas, sudah jelas kita memanfaatkan script tabel. Ada 5 kolom (<td></td>) di dalam satu baris (<tr></tr>). Silahkan ganti dengan keempat script di atas dengan script yang telah Anda persiapkan sebelumnya.
demo notnetbook.blogspot.com
Ukuran tabel 950px di atas adalah perkiraan ukuran theme ini sesuaikan dengan ukuran theme masing-masing.
Hilangkan script frameborder=”0″
Langkah ketujuh, Simpan perubahan yang terjadi, kemudian tinggal Anda lihat saja perubahannya.
Update 25 November 2011 : Silahkan baca komentar dari amdhas yang berkaitan dengan responsive web
Apakah bisa diterapkan ke hal lain ?
Tidak menutup kemungkinan bisa Anda costum sendiri sesuai dengan kehendak masing-masing. Bisa iklan marque, iklan text, banner, dsb. Gunakan kreatifitas masing-masing, OK.
Kok ga ada tombol close ?
Sengaja aku tidak menambahkannya (itu karena aku belum tahu, hehehe ^^). Tapi, tidak masalah bukan? karena ukurannya juga relatif kecil. Visitor juga kurang terganggu kok dengan penampilan floating sosial media tersebut. Malah banyak yang suka loh, ngencet tu tombol.. ^^
Shortcodes di atas bukan murni semuanya kreasi dhani. Aku hanya meniru dan memodifikasinya dari blog tetangga.. itu tuh.. nyontek melalui control U.. Upsss ^^ wkwkwk.
Jadi, maaf jika ada kekurangan dimana-mana. Karena script di atas hanyalah ujicoba yang kulakukan di blog ini dan di blogspot yang kumiliki. Tidak menutup kemungkinan akan mengakibatkan gambaran visual yang berbeda di blog teman-teman semua jika sampai menerapkannya. Lets do it, trial dan error ^
Mudah-mudahan saja dapat meningkatkan jumlah follower Blog Anda. Pokoknya ajib deh jika dipasang diblog. Lebih enak daripada PopUp Like facebook atau pake metode click jack sparrow, apalah namanya itu ^^
Baca juga,
Maaf jika penulisannya agak membingungkan. Jika ada pertanyaan atau ada yang keliru dari penulisan di atas, silahkan isi komentar di bawah..
Semoga bermanfaat ^^
Akhirnya di publish juga…
Hehhee…
Mantab gan..
pertamax…
pertamax harganya 9800 / liter gan hehehehe
Hehhe… naik lagi yach…
makanya ngga pake pertamax lagi neh…
qiqiqiqiii….
Untuk mengganti width menjadi presentase kira2 berapa ya sob? mengingat untuk responsive web..
width: 950px;
itu kodenya di division #bottom.. dan gimana untuk menjadi responsive, apa kode media query nya?
mohon bimbingannya..
Bukan berarti nyepam..ane bahas responsive di sini:
http://magazinist.tk/responsive-web-design-grid-layout-technique/
Klo ga berminat hapus aja nih komen.
width: 950px; itu mengikuti ukuran lebar themes ini mas, dan penentuannya juga waktu itu mengira-ngira ketika membuatnya, (trial error waktu itu)
kalau mengenai responsive web, jujur saya baru mendengar istilah tersebut dan itu ilmu baru yang saya temui soal coding
maklum mas, saya masih hijau soal beginian ^^
justru saya berterima kasih, link bermanfaat tentu akan saya approve ^^
Bisa ko ga usah mengikuti lebar themes.
Gua abis nyoba tadi di blog percobaan bisa..loe buat dua division, itu kan udah ada satu #bottom dan dalam division itu kita membuat table. di vision yang kita buat pake class dengan posisi relative. wadah 100 persen.
Itu frameborder=”0″ di hapus aja,,ga valid.
sori gua ga kasih kode..klo mau cek bisa responsive web kita di setiap halaman dan juga landing page di sini:
http://responsivepx.com/ {klo masih ada scroll panjang di bawah ga responsive, klo sedikit tak mengapa klo banyak berarti berantakan}
Responsive web itu hal terpenting dalam membangun keseriusan website..
bisa jadi loe bilang pengunjung datang dari search engine..salah bro..yang benar pengunjung datang dari layar yang berbeda.
So..pertimbangkan memasang tollbar melayang ini jika ga responsive bisa berantakan di layar 800px.
Coba di cek blog ini dah responsive blon?
apakah penambahannya seperti ini ?
#bottom {
width: 950px;
position:fixed;
bottom:0px;
height:30px;
border-top: 1px solid #555;
background: #FFFFFF;
text-align: center;
}
.bottom2 {
width: 100%;
position:relativ;
}
kemudian divisionnya menjadi
div class=’bottom2′ id=’bottom’
saya bandingkan dengan penambahan di atas dengan sebelumnya tidak ada perubahan mas dan sama saja.
dan saya tetap menggunakan shortcode di atas
sedangkan di blogspot,, notnetbook.blogspot.com,
widthnya saya ganti menjadi 100% dan jika menggunakan ukuran px malah susah mendapatkan posisinya di tempat yang sebenarnya,, mohon bimbingannya, mungkin saya keliru lagi ^^
makasih mas udh share di sedot hehe
Sengaja aku tidak menambahkannya (itu karena aku belum tahu, hehehe ^^) <<<<———- Jujur Amir,,, xixix
ato Ngerendah nih mas Dhani,, 😛
Blum niat pasang… 🙂 BukEmak aja dolok..
Tenkyu.. suatu saat pengen Reposts..
ane tadi coba kok gagal sob. . .
maaf gagal di bagian mananya?
apakah berantakan ? atau ukurannya yang tidak pas ? klo hal itu silahkan disesuaikan kembali dengan tema yang sedang digunakan,,
ada yang lebih simple gak yah… ? masih bingung nih,, newbie… 🙂
keren gan hasilnya….
ane coba nih gan…. semoga aja berhasil!!!!
Buat template berat gak gan, aq gk terlalu tahu kalau edit template jdi ada cara lain gak..? terima kasih infonya..
iya pasti akan mengurangi kecepatan loading blog, cara mudah ya, dengan menggunakan wibiya toolbar,
makasih ya gan info’a…
salam kenal ya gan,,infonya sangat bermnfaat sekali nih
wah infonya bermanfaat sekali nih