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...
( Sumber : http://1-1y4n9.blogspot.com )
Terima kasih infonya boz, sangat bermanfaat :c:
BalasHapussalam kenal sob, thanks infonya
BalasHapusthanks tutorialnya
BalasHapuskalau di bilang kerenz...gak kerenz...tapi AMAZING.... xixixi ensiklomedia.blogspot.com inilah tempat ku berteduh..kunjungi ya.di blog q yang reot ini..
BalasHapussip bos. pengen nyoba tp masih binun. thanks ya..
BalasHapusassalamualaikum...mas izin copy yah..
BalasHapusmau coba mudah2n berhasil..
makasih sob... mantap artikelnya, silakan mampir....
BalasHapusdemonya mana sob?
BalasHapusartikel2 antum luaaarrr biasaaa...salam kenal dr radio elsee fm tasikmalaya
BalasHapusakhi...ane mo tukeran link ma antum bisa kah ?
BalasHapusmas demo slide na mana ea?? =))
BalasHapusblog bgus, sangat bermanfaat...
BalasHapusthx admin...
mantab gan
BalasHapushttp://trik2-blog.blogspot.com
Mantapp tutorialnya,,,,
BalasHapussaya coba dulu bos....
BalasHapusthank you infonya...
sudah saya coba dan hasilnya bagus ...
BalasHapuschenlina20160610
BalasHapusceline outlet
michael kors uk
kate spade handbags
coach factory outlet
coach outlet
nike uk
hollister kids
true religion outlet
hollister outlet
coach outlet
timberland outlet
jordan 3
michael kors purses
michael kors outlet
michael kors outlet clearance
ray ban sunglasses
louis vuitton outlet
michael kors handbags
coach factory outlet
jordan concords
louis vuitton outlet online
oakley sunglasses cheap
air jordans
designer handbags
caoch outlet
jordan shoes
hollister kids
beats solo
polo ralph lauren
asics shoes
ray ban sunglasses
tory burch outlet
louis vuitton
toms shoes outlet online
fake watches
michael kors outlet
jordan 4 toro
gucci handbags
coach outlet
coach outlet store online
as