Cara membuat Slide di Blog

Pada kesempatan kali ini saya akan mencoba berbagi dengan anda yaitu cara membuat "headline Slide". Yang tampilan aslinya bisa anda lihat Demonya Demonya   

Tapi saat ini saya akan memberikan hasil modifikasi alias main coba-coba saya yang hasilnya bisa  anda lihat pada bawah header blog saya ini, dan pada prinsipnya tidak harus di bawah Header, dengan kata lain dimana saja bisa anda taruh sesuai selera masing-masing atau ditempat strategis biar kelihatan manis dipandang mata.

Okey kalau anda tertarik untuk memasangnya dan biar jangan menoton kita langsung saja ke tujuan sambil praktek tentunya, caranya :

• Seperti biasa masuk dulu ke Blogger dengan ID anda.
• Setelah di Dasbor rancangan, Klik Edit HTML.
• Download dulu template untu jaga – jaga kalau ada kesalahan.
• Beri tanda centang pada tulisan Expand Widget Template
• Cari code ini ]]></b:skin> (untuk memudahkan pencarian tekan Ctrl+F)
• Copy-Paste code CSS dibawah ini diatas code  ]]></b:skin> 

#slider {

background:;

height: 230px;

text-align:center;

overflow: hidden;

position: relative;

margin: -5px 0px;

}

#mover {

width: 600;

position:absolute;

overflow:hidden;

}

.slide {

padding: 5px 0px;

width: 1000px;

float: left;

position: relative;

height:230px;

}

.slide h2 {

font-family:Georgia, Helvetica, Sans-Serif;

font-size: 20px;

font-weight:bold;

text-align:left;

color: #FFFF00;

padding:0px 0px 0px 0px;

margin:0px 0px;

width:500px;

overflow:hidden;

}

.slide h2 a:link, .slide h2 a:visited {

color:#FFFF00;

background-color: transparent;

}

.slide h2 a:hover {

color: #FFFFFF;

background-color: transparent;

}

span.slmet {

color: #ee0909;

font-size: 12px;

font-family:Tahoma, georgia, Helvetica, Sans-Serif;

line-height: 30px;

width: 200px;

padding:0px 0px 0px 30px;

margin:0px 0px;

text-transform:uppercase;

}

.slide p {

color: #FFFFFF;

font-size: 14px;

text-align:left;

font-family: Georgia, Helvetica, Sans-Serif;

line-height: 20px;

width: 470px;

padding:0px 0px 0px 0px;

margin:0px 0px;

}

.slide img {

position:absolute;

top: 50px;

left: 0px;

background:;

padding:0px 0px;

}

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

}

• Langkah selanjutnya cari code ini  </head>
• Copy-Paste code CSS dibawah ini diatas code   </head>

<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>

<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/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>

• Simpan template anda
• Kembali ke Dasbor dan Klik Tambah Gadget
• Pilih tanda tambah pada – HTML/JavaScript
• Copy-Paste Kode Script berikut kedalamnya

<table border="0" width="500" height="30" padding-top:35px;padding-left:1px;> <tr> <td align+"left"> <span class="Apple-style-span" style="font-size:16px; font-weight:normal; color:#0000FF;" ><b><blink>ARTIKEL UNGGULAN</blink></b></span> </td></tr><tr><td> <div style="width:500px;height:130px;padding-top:5px;padding-left:1px; border:0px solid #369"> <!-- Casing --> <div id="casing"> <!-- Slider --> <div id="slider"> <div id="mover"> <div class="slide"> <h2><a href="http://tips-blogbego.blogspot.com/2010/11/spoiler-membuat-loading-blog-lebih.html">Spoiler membuat Loading Blog lebih Ringan</a></h2> <p> </p> &nbsp; <p> </p> &nbsp; <p> </p> &nbsp; <p> </p> &nbsp; <p>Pada kesempatan ini saya akan mencoba berbagi tentang cara memperkecil tempat, yang secara tak langsung juga bisa memperingan muatan atau beban Blog kita pada saat loading &raquo;&raquo;</p> <a href="http://blogclicker.com/?username=alambali" target="_blank"> <img src="http://blogclicker.com/banners/bc468x60.gif" border="0" /></a> </div> </div> <!-- /Mover --> <!-- /Slider --> <div class="clear"/> </div></div></div></div></td></tr></table>

Keterangan :

Contoh diatas hanya satu slide, tugas anda menambahkan sesuai kebutuhan,

Judul ARTIKEL UNGGULAN diatas silahkan ganti, mungkin ARTIKEL TERBARU dll sesuai seninya anda  atau anda ingin menghilangkan silahkan.

caranya :

1. Lihat Kode script <div class="slide"> …….sampai……. </div>  ini menunjukkan satu kesatuan slide. Copy-paste sesuai kebutuhan.
2. Lihat kode script <h2> ………</h2>  ini link artikel anda yang akan menjadi Judul tiap Slide.
3. Lihat kode script <p>………..</p>  ini isi singkat dari Artikel  
4. Banner Animasi yang saya pakai ukurannya (468x60px).
5. Simpan Gadget terus lihat hasilnya, dan jangan lupa berikan komentar anda untuk memotivasi saya, terima kasih