Papar Gambar Menarik Menerusi Nivo Slider

As-Salam. Jika anda memiliki sebuah blog peribadi yang banyak paparkan gambar, mungkin penggunaan Nivo Slider ini boleh bantu ketengahkan gambar menarik itu dalam blog. Atau mungkin, anda baru sahaja balik dari bercuti dari satu tempat yang indah dan cantik, dan mahu gambar-gambar yang anda tangkap menggunakan kamera mahal, menyerlah di dalam blog, maka anda boleh cuba menggunakan widget ini.

Papar Gambar Menarik Menerusi Nivo Slider

Nivo Slider memang popular di kalangan pengguna blogspot yang pentingkan penampilan gambar, terutama bagi blog-blog fotografi. Paparan gambar secara animasi kekotak ini menyerlahkan penampilan dan kadangkala mengasyikan.

Jika blog anda ada gambar yang awesome belaka, dan mahu terus dipertontonkan kepada pengunjung blog, maka bolehlah anda aplikasikan penggunaan Nivo Slider ini sebagai salah datu daripada widget dalam blog.

Anda boleh lihat demo Nivo Slider ini menerusi HelperBlogger (klik) dan gambar di bawah pula merupakan demo penggunaannya menerusi blog ini.

Bagi edisi HH untuk dimuatkan di dalam blog ini, ada sedikit perubahan yang dilakukan supaya dapat disesuaikan dengan penampilan blog asas. Sedikit ubahsuaian dibuat agar ia boleh diletakkan hampir di mana-mana bahagian blog termasuklah di sidebar blog anda mahupun di atas setiap entri blog anda.

Untuk adaptasi dengan reka bentuk blogspot asas ini, boleh gunakan kod html di bawah ini dan masukkan ke dalam bahagian widget blog anda.

<style> #slider { width:auto; height:auto; } .nivoSlider img { top:0; left:0; display:none; } .nivoSlider a { border:0; display:block; } .nivo-slice { display:block; position:absolute; z-index:5; height:100%; } .nivo-box { display:block; position:absolute; z-index:5; } </style> <script src="http://www.code.helperblogger.com/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(window).load(function () { $('.nivoSlider').nivoSlider({ effect: 'sliceDown', directionNavHide: true, captionOpacity: 1, controlNav: false }); }); </script> <div id="slider" class="nivoSlider"> <img src="imej #1 anda" width="600px" title="Deskripsi Gambar"/> <img src="imej #2 anda" width="600px" title="Deskripsi Gambar" /> <img src="imej #3 anda" width="600px" title="Deskripsi Gambar" /> <img src="imej #4 anda" width="600px" title="Deskripsi Gambar" /> </div>

Saiz Setiap Gambar Digunakan Perlu Sama

Pastikan saiz gambar anda adalah sama. Jika tidak akan haru biru jadinya. HH dah tetapkan kelebaran tetapan semula 600px, namun lebih baik anda sudah tetapkan setiap gambar yang anda mahu masukkan dalam dimensi yang sama. Jadi tak perlu nak letakkan width=600 tu .. ia bagi membolehkan kadar loading blog tidak terjejas.

Antara perubahan dan olahan yang HH lakukan daripada widget asal oleh Helper Blogger ialah, HH tetapkan saiz slider ini akan automatik ikut saiz default ia diletakkan dalam mana-mana bahagian blog.

Cuma, gambar yang anda hendak letak perlu disesuaikan dengan saiz perletakkan tersebut. Katakan anda letak di sidebar, yang biasanya punyai kelebaran 350px, maka anda perlu buat recalculation gambar yang diletakkan dengan meletakkan width="350px" seperti paparan di atas bagi setiap gambar anda.

Lagi satu, jika slider ini tidak berfungsi, kemungkinan besar blog anda tidak dilengkapi dengan javascript berkenaan. Jika berlaku, masukkan kod html panggilan javascript dibawah ini sebelum <.. head/>blog anda.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Ok. Selamat mencuba widget papar gambar menarik menerusi Nivo Slider ini.

p.s: Widget ini dah HH cuba, dan memang tiada masalah.