DAFTAR ISI
Nonton Televisi Online

HTML Scroll Boks Warna

Jumat, 19 Februari 2010

MEMBUAT SLIDE HEADLINE

Mat Malam Selamat Bertemu Kembali dengan saya selaku pemilik Blog ini kepada pengunjung setia Blog Code Script bersedia melowongkan waktunya untuk sekedar berkunjung ke Blog saya ini sebelumnya terima kasih yang sebesar-besarnya atas kunjungannya.
Baik dalam kesempatan kali ini tepat pada malam ini Jum'at malam tanggal 19 Pebruari 2010 kita akan membahas mengenai Pembuatan Slide Headline, baik apa bila anda ingin membuat slide ini lihat caranya sebagai berikut :

1. Login terlebih dahulu ke Blogger
2. Masuk ke bagian Tata Letak/Layout
3. Pilih Tab menu Edit HTML
4. Centang tulisan Expand Widget Template
5. Cari code ini ]]></b:skin> (untuk memudahkan pencarian tekan Ctrl+F)
6. Copy Paste code CSS dibawah ini
sebelum code diatas :

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

7. Langkah selanjutnya cari code ini </head>
8. Copy Paste code berikut
sebelum code </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>

9. Simpan hasil kerja anda
10. Langkah selanjutnya klik tab menu Elemen Laman
11. Buat klik Add a Gadget, pilih HTML/Javascript
12. Paste code dibawah ini didalamnya


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

13. Ganti tulisan http://seiparing.blogspot.com/ dengan link posting blog anda.
14. Ganti tulisan berwarna merah dengan Judul Slide anda
15. Ganti tulisan berwarna biru dengan isi artikel slide anda

NB: Untuk mengubah warna background dan lain-lainnya bisa anda edit pada code CSS
diatas

Komentar :

ada 3 komentar ke “MEMBUAT SLIDE HEADLINE”
Valter mengatakan...
pada hari 

Hello my friend, thank you very much for your visit, good weekend with happiness and peace my friend. Hugs Valter.

eas mengatakan...
pada hari 

makasih y sob infonya. mantap nihh

berita hot mengatakan...
pada hari 

kasih contoh penampakannya gan,, aku mao buat yang kayk portal sidomi.com, bisa gak kasih tutorialnya....??

Posting Komentar


weather counter

BUKU TAMU


Anda berminat buat Buku Tamu seperti ini?
Klik disini
Read more: Membuat Buku Tamu Melayang di http://paksi-dirgantara.blogspot.com

Pengikut

 
This Blog is proudly powered by Blogger.com | Template by Angga Leo Putra