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.
Langganan:
Postingan (Atom)