Cara Widget Membuat Slide Artikel manual

Widget Slide Artikel. Slide Artikel  adalah suatu efek animasi pergantian halaman headlines.

Cara Widget Membuat Slide Artikel sangat mudah kok membuatnya, penasaran..??. berikut tutorialnya…

Pertama-tama:
1. Login blog sobat
2. Pastekan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

 <!——Start slide artikel——>

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

<!——End slide artikel——>

3. Pasang kode script ini 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>

4. pilih Rancangan >> Elemen halaman >> tambah Gadget (HTML/JavaScript)
copas code di bawah ini:

<!-- Casing -->
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="http://anggavoith.blogspot.com /">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://anggavoith.blogspot.com /">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://anggavoith.blogspot.com /">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://anggavoith.blogspot.com /">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://anggavoith.blogspot.com /">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
<div class="clear"/></div></div>

5. klik save/simpan..

Selamat mencoba…