Cara Memasang Artikel Terkini Berupa Slide Show Bergerak

Beginilah gunanya blogwalking ... karena teman itu bisa memberi banyak solusi.. CMIIW ....
Kemarin sempet keliyeng-keliyeng kelimpungan, begitu nemu temen eeeh dapet deh solusinya ... nah pasang deh apa yang dah di posting kawan blog jalan eh walking ... Hasilnya lihat di Blog Baru Launching
Mantepkan ?? Yo-i pasti a-gree lah ... nih saya edit dikit dari sumber aslinya dari kawan blogwalking mas adik Komputer66
Cara memasangnya adalah sebagai berikut ...

Masuk ke akunmu, lalu ke rancangan  ; edit HTML  ; centang expand widgetnya lalu

kopi kode dibawah ini lalu pasang diatas kode : ]]></b:skin>

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

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

.slide {
padding: 15px 10px;
width: 1000px;
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;
}

selanjutnya kopi kode di bawah ini, lalu pasang 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>

Sampai sini Save templatenya ...

Lalu masuk ke rancangan elemen laman Selanjutnya kopi kode dibawah ini lalu PAsang di widget HTML

<!-- Casing -->

        <div id="casing">

        <!-- Slider -->

        <div id="slider">

        <div id="mover">

        <div class="slide">

        <h2><a href="Url link Artikel#">Judul Artikel 1</a></h2>

        <p>isi dengan cuplikan info dari artikel anda</p>

        <img src="#"/>

        </div>

        <div class="slide">

        <h2><a href="Url link Artikel#">Judul Artikel 2</a></h2>

        <p>Isi dengan cuplikan artikel anda</p>

        <img src="#"/>

        </div>

        <div class="slide">

        <h2><a href="Url link Artikel#">Judul Artikel 3</a></h2>

        <p>isi dengan cuplikan artikel anda</p>

        <img src="#"/>

        </div>

        </div>

        <!-- /Mover -->

        </div>

        <!-- /Slider -->

        <div class="clear"/></div></div>

Nah edit sebagaimana petunjuk diatas sebelumnya, lalu save ... 

Eng-ing - eng gggggggggggggg .... lihat hasilnya ndiri ya ...

Free Template Blogger collection template Distributor jahe Merah Karomah Blog Indahku Goresan Jari Jemariku cafe Gaul Para Salafiyyin

Disimpan dalam kategori tulisan: trik