Postingan
Posting kali ini saya yakin pasti menarik bagi sahabat blogger yang berminat mempercantik blognya, kali ini saya akan memberi tau caranya membuat daftar gambar mendatar dengan tombol scroll di sampingnya, tapi kalau kamu memang kreatif kamu bisa memanipulasi daftar gambar ini menjadi menu dari blog kamu sendiri, untuk lebih jelasnya contohnya kamu bisa mengeklik , kamu bisa lihat contohnya di sini.
Sudah jelas ??, sekarang mari kita mulai penjelasanya, untuk membuat kotak gambar yang akan kita beri tombol scroll nantinya kita konfigurasikan dengan kode HTML, kalau dalam conntoh tadi itu kode HTMLnya seperti berikut
/*Kode HTML*/
<!-- HTML structures -->
<!-- "previous page" action -->
<a class="prev browse left"></a>
<!-- root element for scrollable -->
<div class="scrollable">
<!-- root element for the items -->
<div class="items">
<!-- 1-5 -->
<div>
<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
<img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
</div>
<!-- 5-10 -->
<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
<img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
</div>
<!-- 10-15 -->
<div>
<img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
<img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
<img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
<img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
<img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
</div>
</div>
</div>
<!-- "next page" action -->
<a class="next browse right"></a>
<br clear="all" />
<!-- javascript coding -->
<script>
// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {
// initialize scrollable
$(".scrollable").scrollable();
});
</script>
.<!-- "previous page" action -->
<a class="prev browse left"></a>
<!-- root element for scrollable -->
<div class="scrollable">
<!-- root element for the items -->
<div class="items">
<!-- 1-5 -->
<div>
<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
<img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
</div>
<!-- 5-10 -->
<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
<img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
</div>
<!-- 10-15 -->
<div>
<img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
<img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
<img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
<img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
<img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
</div>
</div>
</div>
<!-- "next page" action -->
<a class="next browse right"></a>
<br clear="all" />
<!-- javascript coding -->
<script>
// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {
// initialize scrollable
$(".scrollable").scrollable();
});
</script>
Selanjutnya untuk mengatur lebar dan tinggi dari kotak gambar kita nantinya kita menggunakan kode CSS, di sini kita bisa sesuaikan lebar kotak dan tinggi kotak gambar sesuai dengan template blogger kita, berikut kode cssnya
/*Kode CSS /*
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
.scrollable {
/* required settings */
position:relative;
overflow:hidden;
width: 660px;
height:90px;
}
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accommodate scrollable items.
it's enough that you set width and height for the root element and
not for this element.
*/
.scrollable .items {
/* this cannot be too large */
width:20000em;
position:absolute;
}
/*
a single item. must be floated in horizontal scrolling.
typically, this element is the one that *you* will style
the most.
*/
.items div {
float:left;
}
Terakhir adalah pengaturan Java Script :
/*Kode Java Script /*
<script>
// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {
// initialize scrollable
$(".scrollable").scrollable();
});
</script>
Sekarang akan saya jelaskan pemasangan di blogger.
Pertama kamu masuk ke blogger.com, di pada Dashboard kamu pilih Design, dan pilih Edit HTML.
Kemudian Cari kode <head>. dan letakkan kode di bawah ini tepat setelah atau di bawah kode <head>.
<script src='http://izoeljquerytools.googlecode.com/files/jquery.tools.min.js'/>
<link href='http://static.flowplayer.org/tools/css/scrollable-horizontal.css' rel='stylesheet' type='text/css'/>
<link href='http://static.flowplayer.org/tools/css/scrollable-buttons.css' rel='stylesheet' type='text/css'/>
.<link href='http://static.flowplayer.org/tools/css/scrollable-horizontal.css' rel='stylesheet' type='text/css'/>
<link href='http://static.flowplayer.org/tools/css/scrollable-buttons.css' rel='stylesheet' type='text/css'/>
Kemudian kamu cari kode ]]></b:skin>. dan letakkan /*Kode CSS /* .tepat sebelum atau di atas kode ]]></b:skin>.
Sekarang kamu cari kode </body>. dan letakkan kode /*Kode Java Script /* .tepat di atas atau sebelum kode </body>. simpan template kamu.
Keluar dari Edit HTML dan masuk ke Elemen halaman (page elements), kamu pilih Add a Gadget dan selanjutnya pilih HTML/JavaScript.
Letakkan kode /*Kode HTML*/. di dalam kotak pengisian HTML/JavaScript, kamu bisa ganti gambarnya dengan gambar yang kamu inginkan.
Simpan dan lihat Blog kamu.
Selamat mencoba, semoga berhasil.........
0 komentar:
Posting Komentar