Home » , , » Membuat Slide Iklan atau Slide Foto pada Blog

Membuat Slide Iklan atau Slide Foto pada Blog

Redi Apri Handoko | 20.32 | 0 comments
Pengen punya slide iklan atau slide foto gallery? Anda dapat menampilkan beberapa jenis iklan dalam bentuk slide yang akan bergerak. Iklan akan ditampilkan bergantian dan akan berhenti ketika cursor mouse berada tepat diatas iklan tersebut. Trik ini sedikit rumit buat blogger yang masih newbie. Berikut ini saya akan berikan langkah-langkah cara membuat slide iklan tersebut:

1. Login ke blogger
2. Masuk ke Rancangn -- Edit HTML
3. Jangan lupa untuk memback up template sobat
4. Centang Expand Widget Template
5. Cari kode ini ]]></b:skin>
6. Letakan kode dibawah ini diatas kode ]]></b:skin>
.carousel{
float:left;
margin: 0;
padding:0px;
}

.carousel .widget {
width: 720px;
background:#c4d5ec;
margin: 0;
padding:0;
}

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

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

.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 5px 20px 5px 0px;
width: 140px;
}

.stepcarousel .panel img{
float: left;
background:#940f04;
margin: 5px;
padding:5px;
border:1px solid #ccc;
}

.stepcarousel .panel img:hover{
background:#ffffff;
}
.quickedit{display:none}

#under_header{
opacity: 100;

}

Keterangan:
- Kode berwarna biru diatas adalah ukuran slide iklan atau carousel. Soabt dapat sesuaikan dengan lebar sidebar apabila ditempatkan pada area tersebut.

7. Letakan kode dibawah ini dibawah kode ]]></b:skin>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/slide_gallery1.js' type='text/javascript'/>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/slide_gallery2.js' type='text/javascript'/>
8. Simpan template sobat

Selanjutnya kita akan menambahkan widget slide gallery tersebut pada elemen halaman atau pada pada sidebar blog sobat

1. Masuk ke Rancangan -- Elemen Laman
2. Tambah gadjetkan lalu pilih HTML/Javascript
3. Masukan kode dibawah ini pada gadjet tersebut
<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://1.bp.blogspot.com/_4HKUHirY_2U/S2FVY1DGRHI/AAAAAAAAAtc/BZkCromQU-I/prev.png', 30, 60 ], rightnav: ['http://4.bp.blogspot.com/_4HKUHirY_2U/S2FVWGJQahI/AAAAAAAAAtU/l-hiX3uOqBo/nxt.png', -55, 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">

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

Keterangan:
- Kode berwarna merah adalah url gambar iklan pada slide
- Kode berwarna hijau adalah url link iklan pada slide

4. Simpan gadjet sobat dan lihat hasilnya!
Berbagi Dengan Teman:

Posted by : Redi A.H ~ / Tutorial windows, SEO , Info gadget, Download game

Artikel Membuat Slide Iklan atau Slide Foto pada Blog Di posting oleh Redi A.H pada 21 Sep 2009. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kontak atau komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Happy blogging!!!

0 comments:

Posting Komentar

Terimakasih atas kunjungan anda semua, sebelumnya mohon maaf kami tidak menerima komentar yang berbau tentang pornografi.
TERIMAKASIH atas partisipasinya.

 
Site Meter :
Copyright © 2011. Tutorial Windows 7 - All Rights Reserved
Proudly powered by Blogger
Thank You For Google