Lokasi : Komplek Graha Bukit Raya 1 Blok G3 No 16 LT 3, Bandung Barat

Lokasi : Komplek Graha Bukit Raya 1 Blok G3 No 16 LT 3, Bandung Barat

VIDEO TUTORIAL MIKROTIK VIDEO + MODUL TRAINING ORDER BISA VIA TOKOPEDIA KLIK LINK GAMBAR

VIDEO TUTORIAL MIKROTIK  VIDEO + MODUL TRAINING ORDER BISA  VIA TOKOPEDIA KLIK LINK GAMBAR
Update Video Tutorial > Lebih dari 350 Video Tutorial MIkrotik

Jadwal Training Mikrotik Running Setiap Awal dan Akhir Bulan

Excel Fundamental, Excel Advanced, Dan Excel Programming VBA

IT TRAINING CENTER CONTACT : 0812-1451-8859 / 081-1219-8859

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 :



No comments:

Post a Comment

Training Bulan ini

Padepokan IT Course

Lokasi Training
Jl. H.Gofur Komplek Graha Bukit Raya 1 Blok G3 No 16 Lantai 3, Cilame, Bandung Barat

Telp : 081214518859 (WhatsApp)
E-Mail : padepokanit.course@gmail.com
Instagram : @padepokanit
Website : www.padepokanit.com

Info Site

User Online Padepokan-IT Course

IT Tutorial, Training & IT Solution