Memasang Slide Carousel di Blogger

Akhirnya membuat posting jg,setelah sekian lama....... hehehehe
postingan kali ini tentang slide carousel,awalnya liat dblog ganool,kok bagus ya,trus ku coba2 (trial n error) dblog game ku.eh bisa jg .hehehe
neh previewnya or contohnya klik disini


langsung saja cara membuatnya
1. Menu Dashboard, klik Tata Letak, klik Edit HTML.
2. Centangin checkbox Expand Widget Template.
3. kalian cari kode berikut :
]]></b:skin>
4. kalo udah ketemu, kalian ganti kode ]]></b:skin> dengan kode berikut:
 /*----------------------------------------------------
{--------}  carousel slider  {--------}
----------------------------------------------------*/
.carousel{
float:left;
margin: 0;
padding:0px;
}

.carousel .widget {
width: 920px;  /*sesuaikan dengan template*/
background:#000000;
margin: 0;
padding:0;
}

.carousel h2{
display:none;
}
.stepcarousel{
position: relative;
overflow: scroll;
width: 980px;
height: 155px;
}

.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 2px;
width: 106px;
}

.stepcarousel .panel img{
float: left;
background:#666666;
margin: 0px;
padding:2px;
border:1px solid #ccc;
}

.stepcarousel .panel img:hover{
background:#000000;
}

]]></b:skin>

<script src='http://sites.google.com/site/anchamanproject/CopyjQuery-1.2.6.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anchamanproject/CopyStepCarouselViewer.js' type='text/javascript'/>
5. Klik Simpan deh.

Buat nambahin ke widgetnya. langkah-langkahnya :

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://sites.google.com/site/anchamanproject/Left-Arrow.png', 30, 60], rightnav: ['http://sites.google.com/site/anchamanproject/Right-Arrow.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-ANDA" title="TITLE"> <img src="URL-GAMBAR" width="100" height=" 148" title="TITLE"/></a>
</div>


<div class="panel">
<a href="http://klipinggame.blogspot.com/2011/11/explodemon.html" title="explodemon"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGvEtroqBGH-t_gfXx_ia4FwbbFlyEIMqh9OAr36heZ3nTELFafuP72dmXQFhcFPE_F3yMuhEqgF98NYguazcy3NcVam60K_OfqF27OXK2ccnVwMWuaMDhvhrzf_K_num6G20x9cgzb87N/s400/t-expdmon.jpg" width="100" height=" 148" title="explodemon"/></a>
</div>

<div class="panel">
<a href="http://klipinggame.blogspot.com/2011/10/pro-evolution-soccer-2012-reloaded.html" title="PES2012"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIkYGvKP0ongPdWup4Rj-WXe3xxb3hmg0oc2gPAK3XZTPKoyLEnVN3Dxh0D75BPchnUbuMqYvaimgO6tiDfrIdgbS9ApzuaKMWvZ-2OVxnv4ZHcpOmRdwn48HhyphenhyphenkK79nWReougVN9rDMIj/s400/2mOvk.jpg" width="100" height=" 148" title="PES2012"/></a>
</div>


<!-- copas code diatas untuk memperbanyak tampilan -->
</div>
</div>
 4. Klik Simpan.

nb:
  • widget ini biasanya dipasang di header.kalo susah pasang diheader.pasang atas posting aja,sesuaikan dengan lebar (width) template anda
  • untuk menghilangkan fungsi otomatis slider,autostep diganti jadi false,cth : autostep: {enable:false, moveby:1, pause:3000},
  • untuk ukuran gambar tampilan jg bs dirubah. pada gadget/widget sesuaikanlah width dan heigth.
  • selamat mencoba.trial n error ..............semoga bermanfaat. hehehehe

data:newerPageTitle data:olderPageTitle data:homeMsg

5 komentar:

Unknown said...

Nice info.Kunjung bslik ok

Anonymous said...

b-uang

Simpan Gambar Aja said...

m-dukung

funkynetter said...

puyeng di aplikasikan ke template blog ane gan :(

Banglepo said...

nice post

Cara Menggunakan Emoticon DiBawah Ini

Ketik Kode disamping kanan gambar yang akan digunakan. Ex:b-dukung, b-malu, b-??, dll. Untuk Kode Piggy (p) ex: p-hihihi, p-gila, dll. dan Untuk Kode Default (d) ex: d-kabur, d-amuk, dll. Selamat Mencoba^^

Klik Show Untuk Emoticon Bear
b-dukung b-angkuh b-licik b-shock b-mohon
b-dingin b-nyerah b-diam b-menarik b-dach
b-nangis b-cool b-hihihi b-yakin b-sedih
b-kacau b-bingung b-marah b-uang b-ragu
b-hati b-linang b-malu b-thanks b-pukul
b-ketawa b-muntah b-tampar b-amuk b-lemas
b-takut b-lelah b-sweat b-lega b-kuatir
b-senyum b-kecup b-bunga b-?? b-victory
b-camen b-kabur b-bibir b-malu2 b-tidur
b-pup b-gila b-darah b-ssh b-lucu
Klik Show Untuk Emoticon Piggy
p-dukung p-angkuh p-licik p-shock p-mohon
p-dingin p-nyerah p-diam p-menarik p-dach
p-nangis p-cool p-hihihi p-yakin p-sedih
p-kacau p-bingung p-marah p-uang p-ragu
p-hati p-linang p-malu p-thanks p-pukul
p-ketawa p-muntah p-tampar p-amuk p-lemas
p-takut p-lelah p-sweat p-lega p-kuatir
p-senyum p-kecup p-bunga p-?? p-victory
p-camen p-kabur p-bibir p-malu2 p-tidur
p-pup p-gila p-darah p-ssh p-lucu
Klik Show Untuk Emoticon Default
d-dukung d-angkuh d-licik d-shock d-mohon
d-dingin d-nyerah d-diam d-menarik d-dach
d-nangis d-cool d-hihihi d-yakin d-sedih
d-kacau d-bingung d-marah d-uang d-ragu
d-hati d-linang d-malu d-thanks d-pukul
d-ketawa d-muntah d-tampar d-amuk d-lemas
d-takut d-lelah d-sweat d-lega d-kuatir
d-senyum d-kecup d-bunga d-?? d-victory
d-camen d-kabur d-bibir d-malu2 d-tidur
d-pup d-gila d-darah d-ssh d-lucu
Klik Show untuk Emoticon Monkey
m-dukung m-angkuh m-licik m-shock m-mohon
m-dingin m-nyerah m-diam m-menarik m-dach
m-nangis m-cool m-hihihi m-yakin m-sedih
m-kacau m-bingung m-marah m-uang m-ragu
m-hati m-linang m-malu m-thanks m-pukul
m-ketawa m-muntah m-tampar m-amuk m-lemas
m-takut m-lelah m-sweat m-lega m-kuatir
m-senyum m-kecup m-bunga m-?? m-victory
m-camen m-kabur m-bibir m-malu2 m-tidur
m-pup m-gila m-darah m-ssh m-lucu

Post a Comment

Silahkan memberi komentar,jangan spam y ^^

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Hot Sonakshi Sinha, Car Price in India