Membuat Slide Headlines

Slide Headline adalah suatu efek animasi pergantian halaman headlines. Cara membuatnya seperti ini :

1. Pastekan kode CSS di bawah ini 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;
}

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

3. Buat Element baru HTML/JAVA SCRIPT kemudian Pastekan kode HTML di bawah ini :

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

4. Untuk mengganti warna background dan lain-lain silakan sobat otak-atik sendiri.

Selamat Berkreasi...

Share this history on :

Tweet

Title : Membuat Slide Headlines
URL : http://blogcunayz.blogspot.com/2011/06/membuat-slide-headlines.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Membuat Slide Headlines sebagai Sumbernya.