Jika Anda perhatikan dua template responsive yang saya bagikan kemarin, terdapat sosial bookmark yang menempel di sebelah kanan layar monitor, widget itu akan mengikuti gerakan naik turun. Karena untuk meminimalisir penggunaan javascript, saya sengaja membuat widget itu polos tanpa penggunaan efek tertentu dengan konsekuensi penggunaan image untuk membentuk widget itu semakin banyak. Nah, kali ini saya akan berikan tutorial atau cara untuk membuat widget floating social bookmark dengan tambahan jquery library dan efek Easing tentu saja dengan penggunaan image yang lebih sedikit (hanya satu).
DEMO
Dengan penambahan jquery, jika Anda meletakkan cursor pada salah satu icon social bookmark, dia akan keluar pelan-pelan, lebih lembut seperti putri Solo yang baru keluar dari keraton, itu karena efek easing yang ada pada jquery-ui.min. Di samping efek easing yang saya tambahkan pada widget ini, juga jenis social media yang saya pasang lebih banyak. Pada template Johny Ribet atau Pakdhe Johny hanya terdapat 4 jenis, untuk widget kali ini saya menambahkan sosial media Pinterest dan Youtube agar lebih lengkap. Berikut ini langkah-langkah pembuatannya :
- Login ke Blogger
- Masuk ke Template >> Edit HTML (centang expand widget templates)
- Letakkan kode CSS di bawah ini diatas ]]></b:skin> :.social-buttons {
position: fixed;
top: 130px;
width: 45px;
z-index: 9999;
Materi lanjutan lengkap silahkan download
Tombol Download. Prosedur khusus untuk pengguna facebook. Karena harus klik LIKE4 tombol ini >>
untuk memulai. Link Hanya Untuk Kalangan Sendiri.
.
Tombol 1 Untuk memulai:
Tombol 2 Untuk memulai:
Tombol 3 Untuk memulai:
Tombol 4 Untuk memulai:
Tombol 5 Untuk memulai:
Tombol 6 Untuk memulai:
Sekian informasi yang bisa Cool August sampaikan semoga bermanfaat. Sebelum mengakhri postingan kali ini, saya ada pantun nih buat pembaca setia.
Bersuka ria di atas awan
Jikalau ada kesempatan
Pasti bertemu dihari kemudian
Terima Kasih atas kunjungannya ya kawan ^_^
