Wednesday, April 23, 2025

Monday, 15 February 2010

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

1. Pastekan kode CSS di bawah ini di atas kode ]]>
#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.

Iklan


Related Posts:

  • membuat page number yang unikPage Navigation dibuat selain mempercantik halaman blog, juga sangat simple untuk meloncat dari satu halaman ke halaman lainnya - dari pada mengunakan link-page standar seperti Older Post - Newer Post and Home. Akan tetapi s… Read More
  • Disqus-plug in pengganti system comment blogBosan dengan kotak komentar blogger yang itu-itu saja, yang tampilannya sudah baku dan tidak bisa di rubah lagi. Cobalah migrasi ke disqus commenting system. Disqus merupakan aplikasi comment system gratis yang dapat di integ… Read More
  • cara memberikan komentar di DisqusKemberikan Komentar pada blog, tentunya tidak asing lagi bagi para pengunjung blog atau web, baik berupa kritikan, saran, dll.Nah pada postingan ini saya akan membahas bagaimana cara memberikan komentar pada Disqus. Karena ad… Read More
  • Membuat Slide Headlines beritaSlide Headline adalah suatu efek animasi pergantian halaman headlines. Cara membuatnya seperti ini : 1. Pastekan kode CSS di bawah ini di atas kode ]] #slider { background:#101010; height: 153px; text-align:center; overflow… Read More
  • Kontes SEO 2010 Astaga.com Lifestyle On The Netsetelah saya mendengar dari teman,saya mendapatkan berita bahwa pada tahun 2010 akan diadakannya perlombaan atau kontes SEO (Search Enggine Optimizer) .Dengan beragam hadiah dan penghargaan yang akan didapatkan peserta konte… Read More

2 comments:

  1. I concord with your explanation, we are all Hera sympathize
    selfsame good indeed it is really possible

    Stop by my blog post agen judi bola terpercaya

    ReplyDelete
  2. If some one desires to be updated with most up-to-date technologies therefore he must be go to see this site and be up to date daily.

    ReplyDelete

Iklan

rss


Translate

Chat

Komentar Blog

Iklan