0 Cara Membuat Slide Headlines

Kali ini saya akan membahas bagaimana Cara Membuat Slide Headlines.
Slide Headline adalah suatu Efek Animasi pergantian halaman Headlines. 
Jika diantara sobat Blogger ada yang tertarik
Berikut cara membuatnya :

Login ke Blogger
Klik Rancangan → 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> 
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)

Jika sudah ketemu Copy kode CSS di bawah dan Paste 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;
}

Kemudian cari kode </head> dan Copy Paste Script berikut di atasnya

<script src='http://imtikhan.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'/>
<script src=' http://imtikhan.googlecode.com/files/slide.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>

jika sudah SIMPAN TEMPLATE

Kemudian klik Elemen Laman → Tambah Gadget → HTML/JavaScript 
Copy Paste kode HTML di bawah ini :

<!-- Casing -->
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="http://tipblogger.blogspot.com//">Judul Demo Slide</a></h2>
<p>Isi Artikel Disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://tipblogger.blogspot.com//">Judul Demo Slide</a></h2>
<p>Isi Artikel Disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://tiptrikblogger.blogspot.com//">Judul Demo Slide</a></h2>
<p>Isi Artikel Disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://tipkblogger.blogspot.com//">Judul Demo Slide</a></h2>
<p>Isi Artikel Disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://tiptikblogger.blogspot.com//">Judul Demo Slide</a></h2>
<p>Isi Artikel Disini</p>
<img src=""/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
<div class="clear"/></div></div>

Keterangan : ganti tulisan yang berwarna biru Url, Judul Demo dan Isi Artikel.
jika sudah selesai SIMPAN dan lihat hasilnya

Selamat mencoba

Tweet

Komentar →