Membuat Slide Headline

Wah, hampir seminggu absen ngeblog nih setelah kemarin sempat disibukkan oleh kegiatan offline.

Pada kesempatan kali ini mencoba menghadirkan satu tips untuk membuat "headline Slide". Cukup sederhana sekali, untuk demonya bisa lihat Disini.

Oke, jika anda tertarik untuk membuatnya, silakan ikuti langkah-langkahnya dibawah ini :

1. Login terlebih dahulu ke Blogger
2. Masuk ke bagian Tata Letak/Layout
3. Pilih Tab menu Edit HTML
4. Centang tulisan Expand Widget Template
5. Cari code ini  ]]></b:skin> (untuk memudahkan pencarian tekan Ctrl+F)
6. Copy Paste code CSS dibawah ini sebelum code diatas :

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

7. Langkah selanjutnya cari code ini </head>
8. Copy Paste code berikut sebelum 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>

9. Simpan hasil kerja anda
10. Langkah selanjutnya klik tab menu Elemen Laman
11. Buat klik Add a Gadget, pilih HTML/Javascript
12. Paste code dibawah ini didalamnya

<!-- Casing -->
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="http://serba-seru.blogspot.com/">JUDUL SLIDE 1</a></h2>
<p>isi artikel slide 1</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://serba-seru.blogspot.com/">JUDUL SLIDE 2</a></h2>
<p>isi artikel slide 2</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://serba-seru.blogspot.com/">JUDUL SLIDE 3</a></h2>
<p>isi artikel slide 3</p>
<img src=""/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
<div class="clear"/></div></div>

13. Ganti tulisan http://serba-seru.blogspot.com dengan link posting blog anda.
14. Ganti tulisan berwarna merah dengan Judul Slide anda
15. Ganti tulisan berwarna biru dengan isi artikel slide anda

NB: Untuk mengubah warna background dan lain-lainnya bisa anda edit pada code CSS diatas

Selamat berkreasi
Semoga bermanfaat
(Sumber : http://forantum.blogspot.com)