Cara Membuat Slideshow Headline News Horizontal

Cara Membuat Slideshow Headline News Horizontal adalah sebagai berikut :

1. LogIn ke akun blogger.
2. Setelah masuk dasbor, Pilih Rancangan/Design.
3. Pada menu bagian atas, Klik Edit HMTL, tepatnya berada di sebelah menu edit elemen.
4. Beri centang pada kotak Expand Widget Templates.
5. Tekan CTRL + F di keyboard, masukkan kata kunci ]]></b:skin> ke dalam kotak find.
6. Setelah ketemu, copy script kode berikut dan letakkan tepat di atas kode ]]></b:skin>

#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 carilah kode </head>. Copy Script code berikut dan letakkan tepat di atas kode </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(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

Kalau sudah klik simpan template dan tunggu beberapa saat sampai penyimpanan selesai. Berikutnya klik kembali menu Rancangan, atau dalam blog versi English Design. Tambahkan gadget/widget baru, gulir ke bawah dan klik tanda + pada HTML/JavaScript. Sekarang masukkan script kode dibawah ini ke dalam widget.

<!-- Casing -->
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="http://4softcomputer.blogspot.com/">JUDUL SLIDE 1</a></h2>
<p>iaisrtikel slide 1</p>
<img src="LINK GAMBAR"/>
</div>
<div class="slide">
<h2><a href="http:// 4softcomputer.blogspot.com/">JUDUL SLIDE 2</a></h2>
<p>isi artikel slide 2</p>
<img src=" LINK GAMBAR "/>
</div>
<div class="slide">
<h2><a href="http://4softcomputer.blogspot.com /">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 4softcomputer.blogspot.com dengan link url posting blog anda.
Ganti tulisan berwarna merah dengan Judul Slide anda. Ganti tulisan berwarna biru dengan isi artikel slide anda. Ganti tulisa LINK GAMBAR dengan link image yang sudah di upload. Misal di Flickr.com dan ambil linknya. Atau bisa juga upload di posting blog sendiri. Simpan, dan lihat hasilnya.