Cara Membuat atau Pasang Slide Headlines

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.

Selamat Mencoba, Semoga Sukses,...

Cari Artikel Lainnya Disini

Custom Search

Bagi yang ingin belajar PHP / HTML / MySQL dengan sangat mudah sambil langsung praktek dalam waktu yang singkat,di tuntun dengan tutorial video yang di rancang khusus dan mudah di mengerti, Witto Mengajak anda belajar DISINI.