.jpg)
Panduan BloGGeR dan Tutorial BloGGeR Image Gallery.
Menggunakan image gallery sebagai box untuk menampilkan foto atau gambar menjadi sangat penting sekaligus bermanfaat karena ruang dalam blog menjadi tidak berjejalan. Penggunaan slider sebagai sebuah gallery menjadi sangat jamak karena tidak terlalu banyak penambahan kode CSS ataupun javascript. Kalau kita perhatikan dengan seksama, pada saat ini hampir semua jaringan persuratkabaran, televisi dan radio pastilah menggunakan website sebagai satu media alternatif untuk lebih mendekatkan diri ke tengah masyarakat. Disitulah kita bisa melihat bahwa hampir keseluruhannya menggunakan slider sebagai fungsi penampil gambar atau foto bahkan sekaligus kepala beritanya. Bagaimana sebenarnya slider ini dibuat? Dengan Penggabungan javascript dan sedikit CSS, ditanggung kamupun akan memiliki sebuah slider cantik yang tak kalah menarik dari banyak yang telah kamu lihat.
Langkah pembuatan Onmouseover Image Slider :
- Login : Tulis User Name/alamat email dan Password (kata sandi).
- Tata Letak : KLIK link "Tata Letak"
- Edit HTML : KLIK link "Edit HTML".
- ]]><b/:skin> : Cari Kode "]]><b/:skin>", kemudian copy paste KODE CSS, letakkan persis di atas ]]><b/:skin>, sementara slider.js (javascript) letakkan persis di atas KODE </head>.
- Lanjutkan dengan, mencari </body> kemudian copy javascript ke-2dan letakkan persis di atasnya.
- Simpan : Sebagai langkah terakhir penyimpanan CSS, slider.js dan javascript, KLIK "Simpan Template !"
- Setelah semuanya tersimpan dengan baik, kamu hanya tinggal menggunakan xHTML Onmouseover Slider di bagian body di antara tag <body> dan tag </body>, atau gunakan saat melakukan posting.
Kode CSS
.GRboxsliderku{
position:relative;
width:428px;
height:328px;
}
#GRsliderku{
border:4px solid #888;
background:#aaa;
margin:0;
}
#GRcontroll-GRsliderku{
margin:0;
position:absolute;
bottom:12px;
right:5%;
z-index:999999;
}
#GRcontroll-GRsliderku a.paijo{padding:0;margin:0}
#GRcontroll-GRsliderku a.paijo img.GRthumb{
width:40px;
height:40px;
margin:2px;
padding:0;
border:1px solid transparent;
opacity:0.3;
filter:alpha(opacity=30);
transition:1s ease-in;
-o-transition:1s ease-in;
-moz-transition:1s ease-in;
-webkit-transition:1s ease-in;
-ms-transition:1s ease-in;
}
#GRcontroll-GRsliderku a.paijo:hover img.GRthumb{
opacity:1.0;
filter:alpha(opacity=100);
border:1px solid red;
}
#GRcontroll-GRsliderku a.paijo.selected img.GRthumb{
opacity:0.8;
filter:alpha(opacity=80);
border:1px solid blue;
}
.GRgallery{
position:relative;
overflow:hidden;
width:420px;
height:320px;
border-radius:12px;
}
.GRgallery .gambarku{
position: absolute;
left:10px;
top:10px;
display:none;
width:400px;
height:300px;
border-radius:5px;
box-shadow:0 0 6px #000;
background-repeat:no-repeat;
background-position:left center;
background-size:400px 300px !important;
}Javascript slider.js:
<script src="http://gubhugreyotprojects.googlecode.com/svn/GRslider.js" type="text/javascript"></script>
Javascript-2:
<script type="text/javascript">
//<![CDATA[
bangGRslider.init({
id:"GRsliderku",
contentsource:["inline",""],
paijo:"markup",
nextprev:["","Next"],
revealtype:"mouseover",
enablefade:[true, 0.1],
autorotate:[true, 3000],
onChange:function(previndex,curindex){
}
})
//]]>
</script>xHTML untuk posting
<div class="GRboxsliderku"> <div class="GRgallery" id="GRsliderku"> <div style="background:url(URL big-image-1.jpg);" class="gambarku"> </div> <div style="background:url(URL big-image-2.jpg)" class="gambarku"> </div> <div style="background:url(URL big-image-3.jpg" class="gambarku"> </div> <div style="background:url(URL big-image-4.jpg);" class="gambarku"> </div> </div> <div id="GRcontroll-GRsliderku"><a class="paijo" href="http://gubhugreyot.blogdetik.com" target="_blank" title="Aksha dan Vani selesai menari."/><img class="GRthumb" src="URL thumbnail-1.jpg"/></a><a class="paijo" href="http://jueryprojects.blogdetik.com" target="_blank" title="Harimau Sumatra yang harus bersama-sama kita jaga kelestariannya."><img class="GRthumb" src="URL thumbnail-2.jpg"/></a><a class="paijo" href="http://bloggerstuars.blogspot.com" target="_blank" title="Jonathan Rangga Hadibrata baru pak-pung."><img class="GRthumb" src="URL thumbnail-3.jpg"/></a><a class="paijo" href="http://gubhugreyot-demo-tutorial-blogger1.blogspot.com" target="_blank" title="Malam yang luar biasa indah."><img class="GRthumb" src="URL thumbnail-4.jpg"/></a></div> </div> </div>
Catatan/Keterangan :
- Amankan template terlebih dahulu sebelum proses pembuatan slider dimulai demi menjaga seandainya terjadi kegagalan selama proses pembuatan. Cara : Setelah masuk di Edit HTML, KLIK Download Template lengkap dan simpan di dalam folder PC.
- Slider ini digunakan untuk memuat 4 buah gambar/image atau lebih. Besar Gambar yang ditamilkan di halaman blog mempunyai lebar=400pixel dan tinggi=300pixel (URL big-image-1.jpg s/d URL big-image-4.jpg). Apabila ingin menampilkan ukuran yang berbeda harus dilakukan beberapa perubahan pada KODE CSS yang berkaitan dengan width dan height.
- Thumbnail merupakan gambar berukuran kecil yang sesuai dengan image yang akan ditampilkan di slider (URL thumbnail-1.jpg s/d URL thumbnail-4.jpg). Ukuran thumbnail 40px (width) dan 40px (height).
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Update » Jemuah KLIWON, Maret, 02, 2012 » Happy Blogging - gubhugreyot «
trims sob kungan balik y
BalasHapushttp://mrradotv.blogspot.com/