Update! Membuat Foto Slide Blogger!

Cara Memasang Foto Slide dengan Navigasi Dot dan Angka/Update! Membuat Foto Slide Blogger!

Slide Image / Photo with Number & Dot Navigation - masih ingat script dari Nivo beberapa waktu lalu? namun kini sudah menjadi premium sehingga tutorial yang membahas slide widget foto dengan bantuan javascript Nivo sebagian besar sudah tak berfungsi lagi.

Masih menggunakan script yang sama,jadi script 'slider pack nivo' yang kami terapkan di mrpujiajadeh.comze.com tetap menjadi hak cipta mereka ya gan,so jangan diutak-atik hihihi.

Jika beberapa waktu lalu Pelajaran Blog telah berbagi informasi tentang bagaimana membuat / memasang widget slideshow image di blogger,kali ini masih dalam widget yang sama namun dengan tampilan yang berbeda.

Yup! Informasi bagaimana membuat slide image / foto widget di blogger,dengan tampilan lebih menarik dan variatif foto slide widget yang akan kita bahas ini memiliki navigasi 'Previous' dan 'Next' di sebelah kanan dan kiri dari widget slide tersebut.

Sekali lagi betul gan! untuk widget slide show gambar yang akan kita bahas kali ini dibedakan dengan adanya dot atau juga bisa diganti dengan menggunakan angka sebagai navigasi / number navigation slideshow image widget.

Untuk screenshot dari trik Cara Membuat Slide Foto dengan Tombol Prev dan Next-nya yang telah saya terapkan,sobat bisa lihat gambar dibawah ini:

Lihat gambar lebih besar klik di SINI
Sedang untuk demo live-nya sobat bisa kunjungi diSINI.

Nah,sudah sangat jelas sekali ya sob,dan saatnya kini mencari tahu bagaimana memasang widget foto slide ini di blogger/blogspot milik sobat.

Langkah dan Cara Membuat Slide Gambar dengan Tombol 'Prev' dan 'Next'

Pertama,sobat pergilah ke Dashboard (gb1) lalu pilih Tata Letak (gb2) kemudian pilih tab Edit HTML (gb3) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb4)


(1)

(2)

(3)
Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

]]></b:skin>

Setelah kode tadi sobat ketemukan,kini tepat diATASnya letakkan barisan kode css berikut:

.nivoSlider {
position:relative;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj20kMRuCMRuJFXZz71jNYL84Z_qFpBp5oFdr_jO_yfBNkDTHPvsiOGdSCqK-H5I659Xi5LwB_z7KZLvvacYNM9KTc78dz_XeBjr4T1yF8B1ClqXZ2MzG0k6fFio4mJoqwFdIph491VhxM/s1600/loading.gif) no-repeat 50% 50%;
width:618px; /* Samakan dengan lebar gambar */
height:246px; /* Samakan dengan tinggi gambar */
}

.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none; /* Menghilangkan semua gambar saat halaman masih memuat */
}

.nivoSlider a {
border:0;
display:block;
}

.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}

/* Elemen palsu yang diciptakan oleh jquery.nivo.slider.js
berupa potongan-potongan gambar */

.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}

.nivo-box {
display:block;
position:absolute;
z-index:5;
}

/* Deskripsi setiap slide */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8;
width:100%;
z-index:8;
}

.nivo-caption p {
padding:5px 10px;
margin:0;
}

.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}

/* Navigasi Next & Prev */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}

.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}

.nivo-controlNav {
position:absolute;
top:10px;
right:15px;
}

/* Navigasi 1,2,3... */
.nivo-controlNav a {
font:normal 10px Verdana,Arial,Sans-Serif;
color:white;
text-decoration:none;
position:relative;
z-index:9;
cursor:pointer;
background-color:#111;
width:17px;
padding:2px 0px 3px;
margin:0px 1px;
text-align:center;
display:inline-block;
*display:inline;
}
.nivo-controlNav a.active {
background-color:#3399ff;
}

/* Detail navigasi Next & Prev */
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://3.bp.blogspot.com/-LTDk7usJ89E/Tz-256SAdGI/AAAAAAAACK4/l0-lD459yQU/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}

a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav {left:15px;}

/* Detail caption gambar */
.nivo-caption {font:bold 12px Arial,Sans-Serif;}
.nivo-caption a {color:#fff;border-bottom:1px dotted #fff;}
.nivo-caption a:hover {color:#fff;}

Kemudian setelah itu cari lagi kode berikut:

</head>

Dan jika sudah ketemu,sobat letakkan barisan script berikut tepat diATASnya ya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://mrpujiajadeh.comze.com/mrpujiajadeh-nivo-slider.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>

Setelah itu simpan templates.

Selanjutnya,kini sobat pergilah ke Dashboard (gb1) lalu pilih Tata Letak (gb2) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:


(5)

(6)
Setelah itu pilih HTML/Javascript (gb5) dan letakkan kode widget slideshow ini:

<div class='nivoSlider'>

<a href='http://al-atsariyyah.com/wajibnya-shalat-berjamaah.html' target='_blank'><img alt='hukum shalat berjamaah' src='http://4.bp.blogspot.com/-CgG4_x14M80/UBEsU1rpqlI/AAAAAAAAB9I/mhG99GwBaXo/s1600/shalat%2Bberjamaah%2Bpelajaran%2Bblog.jpg' title='Bagaimana Hukum Shalat Berjamaah?'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2011/10/benarkah-musiklagunyanyian-itu-haram.html' target='_blank'><img alt='musik haramkah' src='http://4.bp.blogspot.com/-2Ass6ZmUVaU/UBEr-EUwQFI/AAAAAAAAB8w/-wEvqiTK2b4/s1600/musik%2Bharam%2Bpelajaran%2Bblog.jpg' title='Benarkah Musik Itu Haram?'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2011/12/bagaimana-hukum-cadar-niqabwajib-atau.html' target='_blank'><img alt='hukum cadar' src='http://3.bp.blogspot.com/-iy6Yaos6EsM/UBEr9JUjZHI/AAAAAAAAB8k/QO1sI7wEtPA/s1600/hukum%2Bcadar%2Bpelajaran%2Bblog.jpg' title='Hukum Jilbab dan Cadar'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2010/10/ahlussunnah-wa-al-jamaah.html' target='_blank'><img alt='ahlussunnah wal jamaah' src='http://1.bp.blogspot.com/-FVoBxLbHVg4/UBEr8_4ubNI/AAAAAAAAB8Y/0Kq-68Piiyk/s1600/ahlussunnah%2Bpelajaran%2Bblog.jpg' title='Siapakah Ahlussunnah wal Jamaah?'/></a>

</div>

<script type='text/javascript'>
$(window).load(function() {
$('div.nivoSlider').nivoSlider();
});
</script>

Lalu simpan templates sobat dan lihat hasilnya :D
Untuk kode yang berwarna hijau gantilah dengan atribut yang sobat inginkan ya.Selamat ngulik dan moga berhasil :D