MEMBUAT HEADLINE DENGAN SLIDESHOW

Hai Sobat semua kita berjumpa kembali dengan saya disini, adapun maksud perjumpaan kali ini adalah untuk memberikan ilmu hasil dari blogwalking ke penjuru google dan alhamdullih saya membawa beberapa bingkisan pemberian dari sahabat-sahabat baik kita dan tentunya tidak semua penduduk google yang baik hati ada juga segelintiran manusia yang pada pelit diproteksi halaman blognya supaya tidak di Copy Paste pengunjung tapi mungkin ada alasan -alasan tertentu bagi dia, kita sendiri tidak manyalahkannya mau di proteksi silahkan itu hak dia, baik kita tidak perlu mempersoalkannya yang penting postingan kita jalan terus nah ini code script hasil Blogwalking . . . satu saja dulu ya kita tampilkan ntar saya kasih lagi.

Cara pasangnya seperti biasa kita masuk ke Edit HTML dan sebaiknya kita download template lengkap untuk jaga-jaga selanjutnya mari kita ikuti langkah-langkah berikut 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 untuk melanjutkan langkah berikutnya
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://www.seiparing.co.cc/">JUDUL SLIDE 1</a></h2>
<p>iaisrtikel slide 1</p>
<img src="LINK GAMBARR"/>
</div>
<div class="slide">
<h2><a href="http://www.seiparing.co.cc/">JUDUL SLIDE 2</a></h2>
<p>isi artikel slide 2</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="www.seiparing.co.cc/">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://www.seiparing.co.cc dengan link posting blog anda.
14. Ganti tulisan berwarna merah dengan Judul Slide anda
15. Ganti tulisan berwarna biru dengan isi artikel slide anda
16. Ganti tulisa LINK GAMBAR dengan link image yang sudah di upload. misal di Photobucket.com dan ambil linknya.
Selesai silahkan anda setting sendiri sesuaikan dengan blog anda.
Catatan Code ini sudah saya coba dengan hasil bagus dan memuaskan mau liha nih hasilnya klik disini