Postingan
Salah satu daya tarik dari sebuah blog adalah gambar. blog tanpa gambar rasanya hampa. salah satu cara mempercantik blog adalah dengan memasang foto gallery pada blog. foto gallery adalah sebuah widget yang berisi foto-foto atau gambar.
memasang foto gallery pada blog tidak begitu sulit. kita tinggal menentukan letak yang pas dan strategis untuk foto gallery blog kita. model dari foto gallery ini adalah slide to slide. Berikut ini preview dari foto gallery yang akan kita pasang :
Tutorial untuk memasang foto gallery pada blog adalah sebagai berikut :
1. Menu Dashboard, klik Tata Letak, klik Edit HTML.
2. Centangin checkbox Expand Widget Template.
3. cari kode berikut :
1. Menu Dashboard, klik Tata Letak, klik Edit HTML.
2. Centangin checkbox Expand Widget Template.
3. cari kode berikut :
]]></b:skin>
4. kalau sudah ketemu, kalian ganti kode ]]></b:skin> dengan kode berikut :
.carousel{
float:left;
margin: 0;
padding:0px;
}
.carousel .widget {
width: 920px;
background:#c4d5ec;
margin: 0;
padding:0;
}
.carousel h2{
display:none;
}
.stepcarousel{
position: relative;
overflow: scroll;
width: 910px;
height: 173px;
}
.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 10px;
width: 200px;
}
.stepcarousel .panel img{
float: left;
background:#d9e5f4;
margin: 0px;
padding:10px;
border:1px solid #ccc;
}
.stepcarousel .panel img:hover{
background:#b5c5d8;
}
]]></b:skin>
<script src='http://blogipank.fileave.com/gallery1.js' type='text/javascript'/><script src='http://blogipank.fileave.com/gallery2.js' type='text/javascript'/>
(yang berwarna hijau adalah CSS kodenya sedangkan yang berwarna merah adalah scriptnya. Untuk kenyamanan, sebaiknya scriptnya anda pasang di hosting anda sendiri)
5. Klik Simpan
5. Klik Simpan
Langkah menanamkan script dan CSS kode sudah selesai, sekarang berlanjut kepemasangan widget (bisa dibawah header atau di bagian bawah blog). berikut ini langkah-langkah memasang widget foto gallery :
1. Menu Dashboard, klik Tata Letak, klik Elemen Halaman.
2. Klik Tambah Gadget. Klik HTML/Javascript.
3. Copy Paste kode berikut :
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i41.tinypic.com/j0b0j7.png', 30, 60], rightnav: ['http://i41.tinypic.com/mcu1zk.png', -65, 60]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<div id="mygallery" class="stepcarousel">
<div class="belt">
<!-- Ganti link dengan link kalian -->
<div class="panel">
<a href="URL yang dituju"><img src="URL gambar" width="180 height="130"></a>
</div>
</div>
</div>
Keterangan:
1. Apabila ingin menambahkan gambar baru, copy paste semua kode diatas yang berwarna hijau.2. Kode diatas yang berwarna ungu jangan dihapus. setiap menambah gambar, letakan kode warna hijau (sesuai keterangan no 2) diantara kode berwarna ungu.
Contoh untuk menambahkan gambar baru :
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i41.tinypic.com/j0b0j7.png', 30, 60], rightnav: ['http://i41.tinypic.com/mcu1zk.png', -65, 60]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<div id="mygallery" class="stepcarousel">
<div class="belt">
<!-- Ganti link dengan link kalian -->
<div class="panel">
<a href="http://blognyaipank.blogspot.com/"><img src="http://i39.tinypic.com/2vl7f61.png" width="180 height="130"></a>
</div>
<div class="panel">
<a href="http://blognyaipank.blogspot.com/"><img src="http://i39.tinypic.com/2vl7f61.png" width="180 height="130"></a>
</div>
<div class="panel">
<a href="http://blognyaipank.blogspot.com/"><img src="http://i39.tinypic.com/2vl7f61.png" width="180 height="130"></a>
</div>
<div class="panel">
<a href="http://blognyaipank.blogspot.com/"><img src="http://i39.tinypic.com/2vl7f61.png" width="180 height="130"></a>
</div>
<div class="panel">
<a href="http://blognyaipank.blogspot.com/"><img src="http://i39.tinypic.com/2vl7f61.png" width="180 height="130"></a>
</div>
</div>
</div>
Lihat Contoh diatas untuk menambahkan gambar baru diatas, kode berwarna hijau bertambah.
4. Klik Simpan.
Sekian tips dan trik mempercantik blog dengan menambahakan foto gallery pada blog. selamat mencoba kawan, semoga berhasil!Sumber : Blog Ifank
0 Comments:
Subscribe to:
Posting Komentar (Atom)
