hai tau ga aku tuh ganteng buwanget hahahahahah

judul slide1

Hai Bagaimana kabarnya?

judul slide2

sudah berapa kali berkunjung

judul slide3

isi artikel

judul slide4

isi artikel

judul slide5

isi artikel

SLIED HEADLINE

Slide Headline adalah suatu efek animasi pergantian halaman Headlines.

Berikut Cara membuatnya :

Login ke Blogger
Klik Rancangan (yang dulunya Tata Letak)
Klik tab Edit HTML
Klik tulisan Download Template Lengkap.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget,
Kemudian cari kode ]]></b:skin>
untuk mempermudah pencarian tekan Ctrl + F di keboard sobat
Jika sudah ketemu silahkan Copy kode CSS di bawah ini dan letakkan diatasnya

#slider {
background:#ffffff;
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;
}

Kemudian cari kode </head> dan letakkan script berikut diatasnya

<script src='http://wittoblog.googlecode.com/files/jquery-1.2.6.js ' type='text/javascript'/>
<script src='http://wittoblog.googlecode.com/files/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>
Masih dalam Dasbor klik Elemen Laman klik Tambah Gadget pilih HTML/JavaScript
Copy Paste HTML berikut kedalamnya.

<!-- Casing -->
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href=" link judul slide "> judul slide </a></h2>
<p> isi artikel </p>
<img src=" link gambar "/>
</div>
<div class="slide">
<h2><a href="link judul slide "> judul slide </a></h2>
<p> isi artikel </p>
<img src=" link gambar "/>
</div>
<div class="slide">
<h2><a href=" link judul slide "> judul slide </a></h2>
<p> isi artikel </p>
<img src=" link gambar "/>
</div>
<div class="slide">
<h2><a href=" link judul slide "> judul slide </a></h2>
<p> isi artikel </p>
<img src=" link gambar "/>
</div>
<div class="slide">
<h2><a href=" link judul slide "> judul slide </a></h2>
<p> isi artikel </p>
<img src=" link gambar "/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
<div class="clear"/></div></div>

Tulisan yang berwarna biru bisa sobat ganti sesuai selera.
Simpan dan lihat hasilnya.

0 komentar

Posting Komentar