Blog Geisha

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,