Pasang Slideshow Di Blogger dengan jQuery

Pada tutorial kali ini saya akan membahas tentang cara "Pasang Slide Show dengan jQuery". Blog simple, menurut pengunjung jelek, tetapi jika dipasang Slide Show jQuery ini blog tersebut tampak seperti blog professional yang kaya akan penampilan menarik. Sebenarnya faktor utama yang harus diperhatikan pada blog adalah tampilan yang menarik, rapih, seo, dan cepat saat loading, hal tersebut modal awal blog jika ingin banyak pengunjung yang nongkrong di blog tersebut. Biasanya pengunjung blog menyukai blog yang kaya akan isi dan konten blog, maksudnya isi dari blog tersebut berguna, berbobot, dan rapi pada penulisan artikel. Pengunjung blog juga suka akan blog yang menarik dari segi design, slideshow, navigasi, Css, widget yang ditata rapih, jika blog anda seperti itu maka tak salah lagi pengunjung pun akan betah berlama-lama di blog anda. Tutorial tentang Slideshow ini juga bisanya termasuk kriteria pengunjung yang arogan.

Langkah-langkahnya sebagai berikut :

• Tidak lupa untuk selalu Login ke Blogger anda,
• Pilih "Template" lalu  pilih "Edit HTML",
• Jangan lupa untuk selalu ceklist "Expand Templates Widget" jika ingin mengedit HTML,
• Selanjutnya, gunakan ctrl-F untuk mencari kode di bawah ini,

]]></b:skin>

• Letakan kode CSS di bawah ini sebelum atau di atas kode yang sudah anda temukan,

#slider {
background:#101010;
height: 153px;
text-align:center;
overflow: hidden;
position: relative;
margin: -5px 0px;
}


#mover {
width: 600;
position:absolute;
overflow:hidden;
}


.slide {
padding: 15px 0px;
width: 1000px;
float: left;
position: relative;
height:130px;
}


.slide h2 {
font-family:Georgia, Helvetica, Sans-Serif;
font-size: 18px;
font-weight:bold;
text-align:left;
color: #FFFF00;
padding:0px 0px 0px 0px;
margin:0px 0px;
width:440px;
overflow:hidden;
}


.slide h2 a:link, .slide h2 a:visited {
color:#E1771E;
background-color: transparent;
}


.slide h2 a:hover {
color: #ff0000;
background-color: transparent;
}


span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 200px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #FFFFFF;
font-size: 12px;
text-align:left;
font-family: Georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 440px;
padding:0px 0px 0px 0px;
margin:0px 0px;
}


.slide img {
position: absolute;
top: 20px;
left: 225px;
background:;
padding:10px 10px;
}


#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 1000px;
right: -125px;
color: #FF0000;
padding: 3px 8px;
font-size: 14px;
font-weight:bold;
text-transform: uppercase;
z-index: 1000;
}

•  Selanjutnya, silahkan cari kode di bawah ini,

<head/>

• Letakan kode di bawah ini sebelum atau di atas kode yang sudah anda temukan,

<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhoverb"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

• Simpan Template.

Langkah Kedua.

• Sekarang anda tinggalkan "Edit HTML" dan beralih ke "Layout",
• Pilih "Tambah Gadget" lalu cari "Javascript/HTML",
• Selanjutnya, letakan kode di bawah ini kedalam "Javascript/HTML" tersebut,

<!-- Casing -->
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="ALAMAT URL">JUDUL SLIDE 1</a></h2>
<p>isi artikel slide 1</p>
<img src="LINK GAMBAR"/>
</div>
<div class="slide">
<h2><a href="ALAMAT URL">JUDUL SLIDE 2</a></h2>
<p>isi artikel slide 2</p>
<img src="LINK GAMBAR"/>
</div>
<div class="slide">
<h2><a href="ALAMAT URL">JUDUL SLIDE 3</a></h2>
<p>isi artikel slide 3</p>
<img src="LINK GAMBAR"/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
<div class="clear"/></div></div>

Note: Silahkan anda isi "Alamat Url" , "Link Gambar" , "Judul Slide" , "Isi artikel" sesuai dengan anda.

• Terkahir, Save.

Cukup sekian mengenai penerapan slideshow pada blog, semoga artikle ini dapat bermanfaat.
Selamat Mencoba.

Posted in: BLOGGER