Bagaimana jika gambar-gambar pada blog sobat kita buat berjalan secara manual, secara tidak langsung pengunjung akan membuka satu persatu menggunakan tombol navigasi yang disediakan, dan mereka sedikit berlama-lama nongkrong pada blog sobat. Seperti pada beberapa bentuk berikut ini ……
Bentuk 1
Bentuk 2
Bentuk 3
Semua bentuk diatas dapat sobat letakkan pada sisi Widget pada blog, sehingga dapat menghemat ruang pada kolom yang digunakan.
Oke ……!! jika sobat ingin mencoba silahkan ikuti langkah-langkahnya berikut ini :
1. Silahkan Login pada blog sobat kemudian masuk ke Tata Letak/Layout – Edit HTML
2. Copy dan letakkan kode berikut ini setelah <head>
<script type="text/javascript" src=" http://www.hotlinkfiles.com/files/2573973_g78sy/virtualpaginate.js ">
/***********************************************
* Virtual Pagination script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<style type="text/css">
/*Sample CSS used for the Virtual Pagination Demos. Modify/ remove as desired*/
.paginationstyle{ /*Style for demo pagination divs*/
width: 250px;
text-align: center;
padding: 2px 0;
margin: 10px 0;
}
.paginationstyle select{ /*Style for demo pagination divs' select menu*/
border: 1px solid navy;
margin: 0 15px;
}
.paginationstyle a{ /*Pagination links style*/
padding: 0 5px;
text-decoration: none;
border: 1px solid black;
color: navy;
background-color: white;
}
.paginationstyle a:hover, .paginationstyle a.selected{
color: #000;
background-color: #FEE496;
}
.paginationstyle a.imglinks{ /*Pagination Image links style (class="imglinks") */
border: 0;
padding: 0;
}
.paginationstyle a.imglinks img{
vertical-align: bottom;
border: 0;
}
.paginationstyle a.imglinks a:hover{
background: none;
}
.paginationstyle .flatview a:hover, .paginationstyle .flatview a.selected{ /*Pagination div "flatview" links style*/
color: #000;
background-color: yellow;
}
</style>
3. Simpan / Save Template
4. Klik Tata Letak – Layout – Add Widget / Tambah Gadget
5. Pilih Java/Script
Berikut ini sobat Copy terlebih dahulu salah satu Script untuk masing-masing Bentuk (1,2, atau 3 sesuai dengan yang di inginkan) dan Paste kan pada tampilan langkah no. 5 diatas.
Untuk Bentuk 1 :
<!-- Virtual Pagination Demo 4 -->
<div style="width: 300px; height: 230px;">
<div class="virtualpage4 hidepiece">
<img src="http://img184.imageshack.us/img184/1159/castleyi6.gif" />
</div>
<div class="virtualpage4 hidepiece">
<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" />
</div>
<div class="virtualpage4 hidepiece">
<img src="http://img201.imageshack.us/img201/8538/weedjh8.gif" />
</div>
<div class="virtualpage4 hidepiece">
<img src="http://img201.imageshack.us/img201/6923/countryxb6.gif" />
</div>
</div>
<!-- Pagination DIV for Demo 4 -->
<div id="galleryalt" class="paginationstyle" style="width: 300px; text-align: left">
<a href="#" rel="previous"><</a> <span class="flatview"></span> <a href="#" rel="next">></a>
</div>
<!-- Initialize Demo 4 -->
<script type="text/javascript">
var gallery4=new virtualpaginate({
piececlass: "virtualpage4",
piececontainer: 'div',
pieces_per_page: 1,
defaultpage: 0,
persist: true
})
gallery4.buildpagination(["galleryalt"], ["castle", "park", "harvest", "country"])
</script>
<hr style="margin-top: 35px; color: red" />
6. Klik Tambah Gadget / Add Widget / Simpan
Catattan :
Silahkan diganti pada masing-masing tag <img src="URL gambar sobat"/>
Juga pada bagian kode berikut : ………….., ["castle", "park", "harvest", "country"] sesuai dengan teks nama gambar yang akan ditampilkan.
Untuk Bentuk 2 :
<!-- Virtual Pagination Demo 1 -->
<!-- Additional Pagination DIV for Demo 1 (should be an empty DIV)-->
<div id="gallerypaginate2" class="paginationstyle"></div>
<div style="width: 300px;">
<div class="virtualpage hidepiece">
<img src="http://img184.imageshack.us/img184/1159/castleyi6.gif" />
</div>
<div class="virtualpage hidepiece">
<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" />
</div>
<div class="virtualpage hidepiece">
<img src="http://img201.imageshack.us/img201/8538/weedjh8.gif" />
</div>
<div class="virtualpage hidepiece">
<img src="http://img201.imageshack.us/img201/6923/countryxb6.gif" />
</div>
</div>
<!-- Pagination DIV for Demo 1 -->
<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>
<!-- Initialize Demo 1 -->
<script type="text/javascript">
var gallery=new virtualpaginate({
piececlass: "virtualpage", //class of container for each piece of content
piececontainer: 'div', //container element type (ie: "div", "p" etc)
pieces_per_page: 1, //Pieces of content to show per page (1=1 piece, 2=2 pieces etc)
defaultpage: 0, //Default page selected (0=1st page, 1=2nd page etc). Persistence if enabled overrides this setting.
persist: false //Remember last viewed page and recall it when user returns within a browser session?
})
gallery.buildpagination(["gallerypaginate", "gallerypaginate2"])
</script>
<a href="javascript:gallery.navigate(2)">Go to 3rd page within "gallery"</a>
<hr style="margin-top: 35px; color: red" />
Catattan :
Silahkan diganti pada masing-masing tag <img src="URL gambar sobat"/>
Untuk Bentuk 3 :
<!-- Virtual Pagination Demo 5 -->
<h3>Demo 5 (shows "SELECT" pagination interface with custom text defined):</h3>
<div style="width: 300px; height: 230px;">
<div class="virtualpage5 hidepiece">
<img src="http://img184.imageshack.us/img184/1159/castleyi6.gif" />
</div>
<div class="virtualpage5 hidepiece">
<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" />
</div>
<div class="virtualpage5 hidepiece">
<img src="http://img201.imageshack.us/img201/8538/weedjh8.gif" />
</div>
<div class="virtualpage5 hidepiece">
<img src="http://img201.imageshack.us/img201/6923/countryxb6.gif" />
</div>
</div>
<!-- Pagination DIV for Demo 5 -->
<div id="galleryselect" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <select style="width: 120px"></select> <a href="#" rel="next">Next</a>
</div>
<!-- Initialize Demo 5 -->
<script type="text/javascript">
var gallery5=new virtualpaginate({
piececlass: "virtualpage5",
piececontainer: 'div',
pieces_per_page: 1,
defaultpage: 0,
persist: true
})
gallery5.buildpagination(["galleryselect"], ["castle", "park", "harvest", "country"])
</script>
Catattan :
Silahkan diganti pada masing-masing tag <img src="URL gambar sobat"/>
Juga pada bagian kode berikut : ………….., ["castle", "park", "harvest", "country"] sesuai dengan teks nama gambar yang akan ditampilkan.
oh ya hampir lupa untuk ketiga bentuk viewer image diatas sobat dapat menggunakan gambar dengan ukuran maksimal 300 x 230 pixel, agar tepat dengan kotak viewer masing-masing bentuk.
Baiklah sobat …….. Silahkan mencoba dan lihat seperti punya saya disamping.
1 komentar:
posting ini sip bgt boss ... !
terima kasih
Post a Comment