Tuesday, August 25, 2009

Cara Membuat Slider Header Di Bawah Judul Blog Slider Headline

Hampir satu minggu mencari cara membuat Slider yang bagus akhirnya nemu juga. Special Thank buat "KOKODA" dan "MAS DOYOK" yang memberi shareng dan tutorialnya. Bukan untuk apa "LOVE IS BEAUTY" tampilkan tutorial atau postingan ini tapi hanya untuk dokumen jika lain hari slidernya aku buang dan aku pasang lagi. Setuju sobat semua? langsung saja ini caranya.
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. a. log in ke blog b. tata letak c. 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://kluwan.blogspot.com/">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://kluwan.blogspot.com/">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://kluwan.blogspot.com/">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://kluwan.blogspot.com/">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://kluwan.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 mencoba bagi sobat yang berminat...
( Sumber :
1http://1-1y4n9.blogspot.com
2http://forantum.blogspot.com
3http://www.masdoyok.co.cc/
4http://kokoda-artikel.blogspot.com/).

Anda Sudah Baca Yang Ini? :

tutorial blog
berita
tutorial tip dan trik
daftar isi blog
Label: , , ,

4 komentar:

Klik Here To Show All Comment


naura,  Friday, August 28, 2009 7:32:00 PM  

great tutor nih.. mo nyoba.. tq ya..

Baem,  Monday, September 07, 2009 10:01:00 AM  

jadi berat euy blognya...
menyiksa pengunjung..
visit my blog yee...
http://kumpul-blogger.blogspot.com/2009/09/mengembalikan-jati-diri-bangsa.html

FATAMORGANA,  Tuesday, September 08, 2009 4:10:00 AM  

Aku sudah banyak menemukan pembelajaran disini,.... Makasih buanyak.

Admin,  Wednesday, December 23, 2009 10:01:00 PM  

mantap sob postingannya, aku coba ya

Post a Comment

newer page older page home
Subscribe to: Post Comments (Atom)
top