Jumat, 25 Februari 2011

Panduan Cara Pasang Slide Headlines di Blog

Untuk memperindah blog anda agar lebih keren bisa menambahkan Slide Headline artikel sesuai pilihan anda. Slide Headline adalah suatu efek animasi pergantian halaman Headlines.


Berikut Panduan Cara Pasang Slide Headlines di Blog
:

  • Login ke Blogger
  • Klik Rancangan
  • 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
  • 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 dibawah ini diatasnya kode tersebut



<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>



  • Kemudian lanjutkan masih dalam Dasbor klik Elemen Laman klik Tambah Gadget pilih HTML/JavaScript
  • Copy dan Pastekan kode HTML berikut di bawah ini 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 anda ganti sesuai pilihan anda.
  • Save dan lihat hasilnya.


Semoga bermanfaat.

1 komentar:

  1. info menarik bro dan aku suka, juga artikelnya menarik nie, dan tetap berkarya. sekalian bagi teman2 yg suka download film box office ampe setengah blu silakan kunjungi web nya nie, krn aku nemu di google dan makasi utk admin disini thanks dan gbu,makasi

    BalasHapus

Entri Populer

Silahkan Memasukkan TAHUN, BULAN dan TGL LAHIR Anda untuk mengetahui Zodiak Dan Shio Anda

Tahun
Bulan
Tanggal
Zodiak:
Shio:

This script by
WEB AGUNG