Langsung ke konten utama

Membuat Slide Iklan atau Slide Foto pada Blog

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!

Copyright: Blog Trik dan Tips - http://blogtrikdantips.blogspot.com/2009/09/membuat-slide-iklan-atau-slide-foto.html#ixzz2GtzuCSlO

Komentar

  1. gan masuk langsung diblogspot kami semoga berbahagia dengan istri anda ok....../?
    www.centralobatkuat69.blogspot.com

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Memperbaiki Microphone Headset Yang Tidak Mengeluarkan Suara

Internet merupakan sarana komunikasi yang murah dengan menggunakan microphone dan juga aplikasi seperti Skype, YM, dsb. Pernahkah pada suatu ketika anda mengalami microphone / headset yang tidak mengeluarkan suara meskipun kabel jack terhubung dengan baik? Atau mungkin microphone yang justrumengeluarkan suara ketika dihubungkan dengan komputer lain. Pada tulisan kali ini akan menjelaskan beberapa cara untuk mendeteksi penyebabnya. Memperbaiki Microphone Headset Yang Tidak Mengeluarkan Suara Langkah pertama untuk mengatasi permasalahan headset,atau microphone yang tidak mengeluarkan suara adalah memastikan bahwa perangkat tersebut masih berfungsi dengan baik (tidak rusak). Untuk memastikan, anda dapat mencobanya pada beberapa komputer yang berlainan. Bila headset dalam keadaan baik maka anda dapat beralih pada beberapa settingan di komputer anda agar memastikan bahwa ketiga poin dibawah ini ter-setting dalam keadaan benar: Port penghubung Microphone / HeadsetDriver & Settingan Mic…

PENJELASAN DARI SETIAP SUBBIDANG SKA (Sertifikat Keahlian)

Bagi Kawan-kawan Kontraktor yang baru mau buat SKA sebagai tenaga ahli ataupun sebagai persyaratan untuk pengurusan SBU, berikut sedikit penjelasan tentang penjabaran subbidang SKA tersebut:

1.Arsitektur ·Arsitek adalah seorang ahli yang memiliki kompetensi untuk merancang dan mengawasi pelaksanaan bangunan gedung, perkotaan dan lingkungan binaan, yang meliputi aspek astetika, budaya, dan sosial. ·Ahli desain interior adalah seorang ahli yang memiliki kompetensi seni dan ilmu merancang ruangan dalam bangunan dengan tujuan untuk menciptakan ruang yang fungsional, estetika dan struktur keindahan dan manfaat suatu bangunan. ·Ahli lansekap adalah seorang ahli yang memiliki kompetensi seni dan ilmu merancang lansekap (pertamanan) dengan tujuan untuk menciptakan ruang pertamanan yang fungsional, estetika dan struktur keindahan dan manfaat suatu pertamanan atau kawasan. ·Ahli Iluminasi adalah seorang ahli yang memilikikompetensi merancang tata cahaya, baik di luar bangunan maupun di dalam ruangan…

Anda ingin membuat tulisan atau nama anda sendiri dibuat dalam berbagai bentuk.

Anda ingin membuat tulisan atau nama anda sendiri dibuat dalam berbagai bentuk.
Ketik beberapa kata, pisahkan kata-kata tersebut dengan koma dan tekan tombol “Enter”. Anda dapat juga memilih satu s/d 3 kata atau merubahnya setiap warna pada kata tersebut. Menarik bukan?  Apabila anda ingin mencobanya silakan Klik Disini