Adakalanya sobat bingung bagaimana baiknya meletakkan dan mengatur gambar pada blog sobat. Jika semua gambar ditampilkan pada bagian kolom kiri atau kanan dan terus ke bawah rasanya itu merupakan bentuk yang kurang efektif. Menggunakan script Slideshow yang banyak disediakan oleh web-web gratis juga merupakan salah satu alternative bagi blogger untuk menampilkan gambar-gambar pada blog sobat, bahkan secara otomatis gambar berjalan dan berubah secara bergantian,Jika demikian pengunjung rasanya tidak akan berlama-lama di blog sobat.
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.
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.
