Tips Menampilkan Banner Iklan Slide Show Di Blogger

Banner Iklan merupakan gambar iklan yang berisi informasi atau promosi  yang di link kan ke salah satu artikel atau detail iklannya itu sendiri. Untuk menampilkan Banner Iklan Slide Show di blogspot kita akan gunakan script JQuery langkahnya adalah sebagai berikut :

1.       Buat Banner Iklan Dengan ukuran 450 x 110 menggunakan Photoshop atau Tools design yang lainnya

2.       Selanjutnya  buat postingan baru dengan label banner iklan dan masukan / Upload Banner Iklan tersebut

3.       Selanjutnya Edit HTML Blogspot, Klik Menu Template > Edit HTML sampai muncul Form HTML sebagai Berikut

4.       Centang Expand Template Widget

5.       Selanjutnya Cari kode Head (gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah  menemukan  kode  tersebut letakkan kode script berikut ini dibawahnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { //Execute the slideShow, set 6 seconds for each images slideShow(3000); }); function slideShow(speed) { //append a LI item to the UL list for displaying caption $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>'); //Set the opacity of all images to 0 $('ul.slideshow li').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('ul.slideshow li:first').css({opacity: 1.0}); //Get the caption of the first image from REL attribute and display it $('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title')); $('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt')); //Display the caption $('#slideshow-caption').css({opacity: 0.7, bottom:0}); //Call the gallery function to run the slideshow var timer = setInterval('gallery()',speed); //pause the slideshow on mouse over $('ul.slideshow').hover( function () { clearInterval(timer); }, function () { timer = setInterval('gallery()',speed); } ); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first')); //Get next image caption var title = next.find('img').attr('title'); var desc = next.find('img').attr('alt'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); //Hide the caption first, and then set and display the caption $('#slideshow-caption').animate({bottom:-70}, 300, function () { //Display the content $('#slideshow-caption h3').html(title); $('#slideshow-caption p').html(desc); $('#slideshow-caption').animate({bottom:0}, 500); }); //Hide the current image current.animate({opacity: 0.0}, 1000).removeClass('show'); } //]]> </script> <style type='text/css'> ul.slideshow { list-style:none; width:600px; height:240px; overflow:hidden; position:relative; margin:0; padding:0; font-family:Arial,Helvetica,Trebuchet MS,Verdana; ; } ul.slideshow li { position:absolute; left:0; right:0; } ul.slideshow li.show { z-index:500; } ul img { width:600px; height:240px; border:none; } #slideshow-caption { width:600px; height:70px; position:absolute; bottom:0; left:0; color:#fff; background:#000; z-index:500; } #slideshow-caption .slideshow-caption-container { padding:5px 10px; z-index:1000; } #slideshow-caption h3 { margin:0; padding:0; font-size:16px; } #slideshow-caption p { margin:5px 0 0 0; padding:0; } </style>

              

Keterangan: kode berwarna merah adalah kode yang bisa diganti sesuai dengan keinginan untuk menentukan lebar,tinggi serta panjang dari gadget tersebut,sedang untuk yang lain bisa di otak-atik sendiri

6.       Selanjutnya Tambahkan Gadget HTML/Javascript pilih  Dashboard>Tata Letak> klik tulisan Add a Gadget (tambah widget)> pilih HTML/Javascript lalu letakkan script ini:

<ul class="slideshow"> <li><a href="http://padepokan-it.blogspot.com/2012/09/pelatihan-pembuatan-website-menggunakan.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4zgoni53cv_tv5_D3FzpPJ-T3GQVQd_W69OpUKPGI2irPcI54wDX5zOHi9m6p0kn057TGlvKpjWXzI7PXHghMSgxWiU93E7KfJHY0dRL3mOK-99T3FBuo31NaWFUHyub6zQgAdOWjVmrV/s1600/Training-Blogger.jpg" title="Kursus/Private Pembuatan Website Menggunakan Blogspot" alt="Promo Harga Special Cuman Rp 500.000 Sampai Dengan Bulan Oktober" /></a></li> <li><a href="http://padepokan-it.blogspot.com/2009/09/kursus-jaringan-komputer-lan_2.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ4JFwhg6K-4q4QJbwR8LS0-bCevtMaIW60hK7ZNm_6qPvf0UPW7rfITy5QMifL423DWUOPYzwn5GauypyKTnDnR8Cuue5aEKBNq4K09cd2HSEkrsS-8lazFN3nZrI8uQ3kG-ol4c9vq9b/s1600/IT+Training+Network.jpg" title="Kursus/Private Jaringan Komputer" alt="Promo Harga Special Sampai Dengan Bulan Oktober" /></a></li> <li><a href="http://padepokan-it.blogspot.com/2011/09/pelatihan-komputer-it-support.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_PalH5Uu0aurmUb_VjJWLD7IXtpxphZEqjp0v7TEX84a799zdExhmZD-KShGE9U716LTN3zgS_0jcqCdgMd-GRhA3ILrO9OJH4nM_7BsHJvPoXRXlR5pCFzLeXJ1tcGgv9Kaqp0WTTsN/s1600/IT+Support+Training.jpg" title="Kursus/Private Menjadi IT Support" alt="Promo Harga Special Sampai Dengan Bulan Oktober" /></a></li> <li><a href="http://padepokan-it.blogspot.com/2012/01/pelatihan-web-design.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9CiMCuE_QyXNJc5PyuHJ-rTDft6wDgFq1TAWXDLmavvNZo-98QoTCZOPQ6xNowxncSgqbl1XoBwLZW7NwRVS5_KEnDsLrcklBfjJh2x1JJZMocr5dKhyphenhyphen8FkqztsH89SMOJ031BlP8txmQ/s1600/iklan-web-design.png " title="Training Web Design" alt="Promo Harga Special Cuman Rp. 500.000 Sampai Dengan Bulan Oktober" /></a></li>   </ul>

Script ini hanya contoh, anda harus sesuaikan dengan URL Blog Anda, Kata yang diberi tanda merah merupakan alamat Link Artikel dan Link Image yg bisa anda ganti

Keterangan : 

1.       Untuk Menampilkan Gambar Banner anda lihat kode

imgsrc=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_PalH5Uu0aurmUb_VjJWLD7IXtpxphZEqjp0v7TEX84a799zdExhmZD-KShGE9U716LTN3zgS_0jcqCdgMd-GRhA3ILrO9OJH4nM_7BsHJvPoXRXlR5pCFzLeXJ1tcGgv9Kaqp0WTTsN/s1600/IT+Support+Training.jpg

Script ini didapat dari alamat banner iklan / image yang telah tadi di upload, anda bisa melihatnya dengan cara buka gambar tersebut klik kanan kemudian pilih view image

2.       Untuk Melink kan Gambar / Iklan Banner ke Artikel anda harus mengarahkan ke URL target artikel seperti diatas

http://padepokan-it.blogspot.com/2011/09/pelatihan-komputer-it-support.html

7.       Atur Tata Letak Gadget Banner iklan yang telah dibuat sesuai dengan keinginan.

8.       Hasilnya seperti terlihat di halaman Home BlogIni

Selamat Mencoba

Share

Artikel Lainnya :