Cara Membuat Headlines Slide Show

Sekarang saya akan share bagaimana cara membuat atau menampilkan beberapa posting dengan slideshow supaya lebih terlihat dan menarik perhatian pengunjung blog Anda.

Untuk membuatnya silahkan ikuti langkahnya berikut ini :

1. Login ke akun Blogger
2. Klik Design
3. Pilih Tab menu Edit HTML
4. Centang tulisan Expand Widget Template
5. Letakkan kode dibawah ini sebelum kode ]]></b:skin> ,untuk memudahkan pencarian tekan Ctrl+F atau F3

#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;
}

6. Kemudian Copy Paste code dibwah ini sebelum / diatas code </head>

<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>

7. Save Template
8. Langkah selanjutnya klik tab menu Elemen Laman
9. Klik Add a Gadget, pilih HTML/Javascript
10. Paste code dibawah ini didalamnya

<!-- 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>

*Keterangan
- Ganti tulisan ALAMAT URL dengan link posting blog anda.
- Ganti tulisan JUDUL SLIDE dengan Judul Slide anda
- Ganti tulisan Isi artikel dengan isi artikel slide anda
- Ganti tulisan LINK GAMBAR dengan link image yang sudah di upload.
11. Klik Save dan lihat hasilnya....
NOTE: Untuk mengubah warna background dan lain-lainnya bisa anda edit pada code CSS diatas

http://situstutorial.blogspot.com/2011/01/cara-membuat-headlines-slide-show.html 

Artikel Terkait