membuat Artikel Slideshow posting blog

Untuk membuat Artikel Slideshow ini, silahkan login ke blogger dan pilih menu Rancangan, trus pilihEdit HTML. setelah itu cari tulisan ]]></b:skin> pada template Anda.

 copy kode dibawah ini dan letakkan diatas kode ]]></b:skin>

#slider {
background:#101010;
height: 150px;
text-align:center;
overflow: hidden;
position: relative;
margin: -5px 0px;
}

#mover {
width:300px;
position:absolute;
overflow:hidden;
}

.slide {
padding: 15px 10px;
width: 300px;
float: left;
position: relative;
height:150px;
}

.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:500px;
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: 150px;
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: 500px;
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;
}

"Anda juga bisa memodifikasi atau mengembangkan kode diatas sesuai selera masing-masing, "

Copy juga kode dibawah ini, dan letakkan diatas kode </head> 

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

Simpan template Anda. dengan menekan tombol SIMPAN TEMPLATE

Sekarang tinggal satu langkah lagi dengan menambah widget pada blog Anda, terserah mau di letakkan dimana. pilih tab Elemen Laman, klik tambah widget maka akan tampil from dengan jenis-jenis widgetnya. pilih HTML/JavaScript.

masukkan kode dibawah ini pada HTML/JavaScript tersebut.

<!-- Casing -->
    <div id="casing">
    <!-- Slider -->
    <div id="slider">
    <div id="mover">
    <div class="slide">
    <h2><a href="#">JUDUL ARTIKEL 1</a></h2>
    <p>isi artikel 1 disini</p>
    <img src="#"/>
    </div>

    <div class="slide">
    <h2><a href="#">JUDUL ARTIKEL 2</a></h2>
    <p>isi artikel 2 disini</p>
    <img src="#"/>
    </div>

    <div class="slide">
    <h2><a href="#">JUDUL ARTIKEL 3</a></h2>
    <p>isi artikel 3 disini</p>
    <img src="#"/>
    </div>

    </div>
    <!-- /Mover -->
    </div>
    <!-- /Slider -->
    <div class="clear"/></div></div>

     
Keterangan:
1. "#" yang berwarna biru isi dengan link url JUDUL ARTIKEL.
2. "#" yang berwarna hitam isi dengan link images.