Sebenernya postingan saya kali ini tidak ada hubungannya dengan hari minggu sama sekali, karena kali ini saya akan posting Cara Membuat Nivo Slider Otomatis dan contohnya sobat bisa lihat sendiri pada blog saya di bagian kiri, itu adalah contohnya, dan cara membuat nya sangat gampang, yaitu dengan cara seperti dibawah ini :
1. Login ke akun Blogger sobat
2. Klik Rancangan/Layout, Lalu Klik Edit HTML dan Lanjutkan
3. Klik kotak kecil di samping tulisan Expand Template Widget
4. Kemudian cari kode </head> <Untuk mempermudah pencarian silahkan gunakan CTRL+F atau F3), Setelah ketemu sobat letakkan saja kode dibawah ini tepat di bagian atas kode </head> atau sebelum kode itu, Silahkan copy kode di bawah ini
<style type="text/css">Note : Kode yang diberi warna Kuning silahkan ganti dengan ukuran yang anda inginkan dan yang berwarna Hijau bisa anda hilangkan dengan cara menghapusnya kalau di biarkan saja juga tidak apa-apa, itu hanya gambar loading, tidak berpengaruh.
/* <![CDATA[ */
#w2bSlideContainer {position: relative;display: block;}
#w2bNivoSlider {position:relative;width:400px !important;height:300px !important;min-height:225px !important;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPrnWSDDxDAz4XjcKUSZCc3YNNWJ3loybgAGhZ_Zz9VFltPkw6zsBOs9Ha_y6Ez_w1oluzj3za3QN-QxDQ6UuaKFurczbmDPtYgzPg1KXyw_5XVt23VbBDtUrpDnBiD1cJfSQVQzAmtFAq/s1600/w2bLoader.gif") no-repeat 50% 50%; margin: 20px auto 35px;-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);-moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);box-shadow: 0px 1px 5px rgba(0,0,0,0.4);}
#w2bNivoSlider img {position:absolute;top:0;left:0;display:none}
.nivoSlider {position:relative;width:100%;height:auto;}
.nivoSlider img {position:absolute;top:0;left:0}
.nivo-main-image {display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box {display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img {display:block}
.nivo-caption {padding:10px;font-family:Helvetica,Arial,sans-serif;position:absolute;left:10px;bottom:10px;right:10px;background:#000;color:#fff;-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8;width:auto;z-index:8;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.nivo-caption p {padding:5px;margin:0}
.nivo-caption a {display:inline!important}
.nivo-html-caption {display:none}
.nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCbKzS_ncjISL5S7y8MuazJwki_GAA11IrgnPofjancHGEhAnncmHfaXf2EyYcsH1nyQxWpwspGnLFCSrv-Jp-1AGD7-lJeSxL_Nsg1JOVkhcEf-DwSb-Vv0W1aJZ4xM-Iq1fYgk6cqSv0/s1600/w2bArrows.png") no-repeat;text-indent:-9999px;border:0}
.nivo-prevNav {left:10px}
.nivo-nextNav {background-position:-30px 0!important;right:10px}
.nivo-controlNav {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
.nivo-controlNav a {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0mAYB4ligqYID35BlAgRtSM-w_05GNBLEOucs-nT2pBf0vhsRsTKd-FrPoR42mixX50FBPR6WAvT6EgshKZKZFj8Hhk6W5pYII86hHxbSCeAYEQzfpk7qHwaPyporVSvwAAiPRT0SvTmb/s1600/w2bBullets.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
.nivo-controlNav a.active {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('#w2bNivoSlider').nivoSlider({
effect : 'random',
slices : 15,
boxCols : 8,
boxRows : 4,
animSpeed : 500,
pauseTime : 3000,
startSlide : 0,
directionNav : true,
directionNavHide : true,
controlNav : true,
keyboardNav : true,
pauseOnHover : true,
captionOpacity : 0.7
});
});
/* ]]> */
</script>
5. Save Template/Simpan Template
6. Klik Tata Letak
<center><div id="w2bNivoSlider">Note : Yang harus Sobat perhatikan adalah menempatkan bagiangambar/posting yang akan sibat tampilkan yaitu pada bagian yang diberi warna Ungu adalah URL Gambar, Ungu bercetak Tebal adala keterangan dari gambar yang di posting, warna Biru Muda silahkan ganti dengan URL dari postingan yang akan dituju.
<a href="http://www.radiosob.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7RwEKb1OgbzzjaNrrHpZ0CaGIbGPCygJQU0Ft5MBeV2fGRiOkHgV-P4b41EpOGNLNhzHSD9AusIbWa0J4sprSGu6eCeqwzipCE5naaqs1pjzZaUYovsD6cKksnparOSM0zrtyYeS8Z-Y/s1600/w" title="Radiosob Icon" alt=""/></a>
</div></center>
Jika ingin menambahkan yang lainnya silahkan sobat copas kode dibawah ini ke tempat yang saya beri tanda "............................." untuk jumpahnya sesuaikan saja
<a href="http://www.radiosob.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7RwEKb1OgbzzjaNrrHpZ0CaGIbGPCygJQU0Ft5MBeV2fGRiOkHgV-P4b41EpOGNLNhzHSD9AusIbWa0J4sprSGu6eCeqwzipCE5naaqs1pjzZaUYovsD6cKksnparOSM0zrtyYeS8Z-Y/s1600/w" title="Radiosob Icon" alt=""/></a>
10. Sekarang lihat tampilan blog kalian sudah ada Nivo Slide Post pada bagian Homepagenya, Untuk yang pengen tampilan Nivo Slide Post nya pada Semua Halaman silahkan Lihat Disini.
Sekian Cara Membuat Nivo Slider Image, Semoga bermanfaat dan jangan lupa budayakan komentar sebelum Sobat pergi.
Terima Kasih !!!
Ijin cobain di website aku, thanks tutorialnya mas!
BalasHapusterimakasih banyak sob, sangat membantu sekali...
BalasHapus