Java Script Image Slider
Di dalam posting blogger ini , anda akan mempelajari bagaimana anda membuat image slider dan cara memasukkan image , banner , dan lain sebagainya di dalam image slider ini.. Ini mungkin bisa membuat blog anda menjadi lebih menarik dan lebih mempunyai nilai estetis. Sekarang untuk membuat image slide anda tinggal ikuti prosedur berikut :
http://flguid.blogspot.com/2010/08/java-script-image-slider.html
1. Backup template.
Pertama-tama anda backup template anda agar dapat kembali ke template anda sebelumnya apabila ada error dalam pembuatan image slider ini.
Buka LAYOUT > EDIT HTML dan kemudian " DOWNLOAD FULL TEMPLATE "
2. Sekarang Masuk dalam scriptnya.
Sebelum anda mengubah isi di dalam script , terlebih dahulu anda cek list " Expand Template Widget " dan klik CTRL + F . Cari kata " " lalu copy script di bawah ini sebelum " "
#myslides{
background:#000 url(http://i770.photobucket.com/albums/xx347/Frinan_Lie/BG.jpg) repeat-x;
width: 480px;
height:115px;
margin-bottom:5px;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 384px; /*Width of Carousel Viewer itself*/
height: 110px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:150px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:255px;
border:1px solid #1d2c44;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}
.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}
Kemudian Cari kata " " lalu copy script di bawah ini sebelum " " :
Save Template yang telah diubah
3. Tahap terakhir ini untuk membuat image slider itu muncul di blogger anda .
Anda buka LAYOUT > PAGE ELEMENTS > ADD A GADGET > HTML lalu copy script di bawah ini :
Ini Gadget belum mempunyai image , banner dan lainnya . Apabila anda ingin memasukkan banner ato link , anda tinggal copy code lalu paste di antara "
" dan "
" . Anda bisa memasang itu sebanyak mungkin tapi saya sarankan agar jangan terlalu banyak. Itu akan menghambat pengunjung untuk masuk ke blog anda. Bila ada masalah , anda beri coment saja dan saya akan membantu anda sebaik mungkin. Terima kasih atas kunjungan dan kerja sama anda.
0 komentar:
Posting Komentar