wis ya ngga usah pake begini-begitu, begitu-begini, ya? caranya sama kok dengan yang sudah-sudah. intinya, Classic Zoom Lens Untuk Blogger ini hampir sama kalau tidak boleh disebut mirip dengan postingan zoom-zoom lainnya. meski sekilas sama, tentulah untuk Classic Zoom Lens ini ada sedikit perbedaan. wis segit aja ya basa-basinya. source code-nya bisa anda pelajari di js fiddle saya disini.
Responsive Super Smooth Accordion ini bisa dibilang sama dengan accordion yang pernah terpublish dihalaman ini Responsive Accordion Menu untuk Blogger atau dipostingan Smooth Accordion untuk Blogger yang kapan waktu lalu saya publish. namun Responsive Super Smooth Accordion script ini jauh lebih simple dan lebih mudah dalam pengaplikasiannya. lebih minimalis dan yg terpenting ia ndak ribet untuk maslah CSS-nya.
well,
ketimbang banyak basa-basi, berikut demonya. untuk scriptnya silahkan anda pelajari Disini sedang untuk demo responsive-nya bisa anda pelajari disitu juga.
bisalah dikatakan Smooth Accordion untuk Blogger ini rada sedikit mirip dengan Modern Smooth Spoiler yang disana. namun untuk kali ini, ia jauh lebih cool dan lebih keren dengan adanya tambahan font Awesome serta efek dropdown yang lebih mantap dibanding sebelumnya.
menginat akhir-akhir ini lagi getol bikin ebook dan aplikasi android di halaman resmi saya disi Ayick Tigabelas saya tak bisa membayangkan betapa indahnya jika sebuah ebook di model semacam ini. wow, pasti keren hasilnya.
well, untuk codenya, silahkan anda pelajari di js fidlle saya disini
Smooth Accordion untuk Blogger
01:40Section Satu
Suspendisse rhoncus massa augue, eget efficitur nisi pellentesque a. Nam euismod purus eu tortor imperdiet finibus. Sed efficitur a tortor at mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce a aliquam ante, ac suscipit risus. Aenean venenatis porta arcu id iaculis. Phasellus tempus scelerisque nisl a malesuada. Vestibulum auctor scelerisque tortor eu faucibus. Quisque porttitor arcu sed nulla pharetra, sit amet sollicitudin quam suscipit. Praesent malesuada auctor metus dictum interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac lectus quis elit consectetur tempor. Maecenas ac massa id tortor feugiat auctor.
01:40Section Dua
Aliquam nec imperdiet mi. Phasellus vel leo id orci vehicula suscipit non vel lorem. Sed feugiat dolor ut metus sagittis tempus. Donec pellentesque aliquet rutrum. Praesent suscipit felis vel arcu posuere accumsan. Aenean iaculis purus ac urna tincidunt faucibus. Cras semper imperdiet enim, sed porta lorem dignissim ac. In hac habitasse platea dictumst. Pellentesque eu lacinia ipsum. Vivamus euismod erat a euismod mollis. Suspendisse in diam ut augue rutrum lacinia. Quisque luctus, tellus non aliquet mattis, arcu erat ullamcorper nunc, sed feugiat enim turpis quis mauris. Donec lobortis sem vitae turpis finibus elementum. Pellentesque molestie magna in ante tempus varius eu quis risus.
01:40Section Tiga
Ut eget suscipit justo. Donec egestas vel lorem eu maximus. Donec a felis mauris. Sed nec lacinia ex. Suspendisse fermentum justo erat, quis lacinia nisi tristique non. Cras malesuada, magna eu ultrices placerat, diam enim lacinia turpis, a convallis arcu ligula dapibus felis. Duis efficitur posuere nulla, nec maximus nulla finibus at. Integer quam sapien, porttitor vel dolor in, lacinia vestibulum urna. In in nisl mi. Etiam dignissim ipsum eget ultricies efficitur. Vestibulum elementum justo condimentum nisi rutrum, vitae imperdiet velit suscipit. Proin nisl enim, lobortis et porta in, venenatis ut dolor. Sed leo velit, pharetra vel ligula sed, tempus rutrum turpis. Sed pretium turpis vel elit rhoncus viverra. In arcu mi, tristique id elementum consectetur, ultricies pulvinar dolor.
01:40Socila Media
Ut eget suscipit justo. Donec egestas vel lorem eu maximus. Donec a felis mauris. Sed nec lacinia ex. Suspendisse fermentum justo erat, quis lacinia nisi tristique non. Cras malesuada, magna eu ultrices placerat, diam enim lacinia turpis, a convallis arcu ligula dapibus felis. Duis efficitur posuere nulla, nec maximus nulla finibus at. Integer quam sapien, porttitor vel dolor in, lacinia vestibulum urna. In in nisl mi. Etiam dignissim ipsum eget ultricies efficitur. Vestibulum elementum justo condimentum nisi rutrum, vitae imperdiet velit suscipit. Proin nisl enim, lobortis et porta in, venenatis ut dolor. Sed leo velit, pharetra vel ligula sed, tempus rutrum turpis. Sed pretium turpis vel elit rhoncus viverra. In arcu mi, tristique id elementum consectetur, ultricies pulvinar dolor.
bagi sebagian web designer mungkin sudah tak asing lagi dengan Font Awesome, bukan? yup, dengan menggunakan Font Awesome, kita ngga perlu lagi pakai mengupload sebuah gambar untuk melakukan design pada file css atau lainnya. font awesome ini memudahkan kita dalam menggunakan icon website dalam bentuk vector. bisa dibilang, Font Awesome ini hampir sama ketika kita menggunakan font face pada umumnya yang dapat dengan mudah di customized dengan berbagai style css seperti size, color, drop shadow dan lain-lain.
dan hingga saat ini, versi font awesome adalah 4.2.0 dengan jumlah koleksi icon 479 icon dan akan terus dikembangkan dengan menambah koleksi iconnya. Penasaran yah seperti apa font awesome itu? Lihat demonya icon social share button dibawah atau jQuery Social Button Animation Hover
lalu apa keuntungan dengan font awesome ini?
Dalam satu file font terdiri 369 icon.
Gratis digunakan untuk keperluan komersial.
Compatible dengan Bootstrap 3.0.0. atau diatasnya
Tidak perlu menggunakan javascript.
Sangat mudah diberikan style CSS.
Selalu akan terlihat baik dalam berbagai ukuran font
Cara menggunakan jika anda memiliki hostng1. Download font awesome disini: disini
2. Silahkan extract file yang sudah di download. Kemudian open file fontawesome.html di dreamweaver. Untuk menggunakannya anda hanya perlu menulis tag dan classnya untuk setiap icon.
sedang untuk non-hosting (mis:blogspot) tambahkan code berikut tepat diatas code <head>
lalu untuk memanggilnya gunakan tag class yang sesuai dengan tag font awesome. misal untuk icon facebook
<i class="fa fa-facebook-square fa-3x"></i>
untuk lebih lanjut silahkan pelajari cara pemasangannya disini
Jika di halaman Hack Amazing Zoom Cloud hanya ada satu gambar, namun untuk postingan ini saya coba menduplikasi ulang dengan menyamakan persis seperti yang ada di situs resminya berikut slider dan beberapa gambar sekaligus.
untuk source codenya sih ngga beda-beda amat dengan yang kemarin. untuk mempelajari source code lebih lanjut, silahkn klik tombol download dibawah.
ini hanya catatan dan aslinya source Code ini berbayar di halaman ini → Disini. tapi saya mencoba untuk memodifikasi hingga tepat untuk bisa diterapkan di blogger atau di cms apa saja.
meski Hack Amazing Zoom Cloud ini terkesan sama dengan jQuery Magic Zoom cloud Gallery atau Smooth Zoom cloud untuk Blogger tapi Hack Amazing Zoom Cloud ini memiliki efek easing yang unik. ketika onmousehover (ketika mouse diarahkan) semacam ada efek swingOut, begitulah.
jika anda ingin mempelajari lebih lanjut silahkan pelajari source codenya sendiri. pintunya Disini
jQuery Magic Zoom Cloud Gallery ini adalah pengembangan dari Smooth Zoom cloud untuk Blogger jika disana hanya ada satu gambar, namun pada jQuery Magic Zoom Cloud Gallery ini bisa terinclude dengan beberapa gambar sekaligus.
berikut demo dan codenya.
oh ya, jika anda telah mempelajari basic web coding harusnya lebih mudah dalama mengaplikasikannya. karena ada yang kesulitan ketika melakukan installasi di halaman Smooth Zoom cloud untuk Blogger maka, untuk dihalaman ini, saya tidak akan memisahkan beberapa code antara CSS, javaScript Library, jQuery dan HTML-nya. namun saya menginclude seluruh code agar bisa anda terapkan di halaman blogger anda.
