Memasang sliding ala Zinmag Primus

Kebetulan nih..blognyaipank lama gak ngepost tips blogging..hehe.. agak lupa juga buat codingnya..hehe.. sekarang, blognyaipank mau ngebahas, bagaiman memasang sliding ala zinmag Primus. pada tahu maksudnya gak sob? bisa dilihat diblognyaipank ini di menu home dibawah header..hehe.. previewnya juga ada nih sob..hehe..




nah, uda pada ngerti kan sob?hehe.. langsung aja ke cara buatnya..

step 1
1. Menu Dashboard, klik Tata Letak, klik Edit HTML.
2. Centangin checkbox Expand Widget Template.
3. Copy paste kode berikut ini diatas / sebelum kode ]]></b:skin> :

#slider {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRb56bIafnKqHKTboxicrhK3BmwV6iXXp-HVTpoWwLr2sb9NqJNbi_FrDWYt100qDdBmF9ECsmPkDS6YHJaA2JfFnMcsT4qm0kQcmfOnIMIJf4vxn29mTMPuc1s_oAFNOMsuirHGTU4Yw/s1600/slide.png);
height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0; }

#mover {
width: auto;
position:absolute;
overflow:hidden; }

.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px; }

.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #3b5998;
padding:0px 0px 10px 30px;
margin:0px 0px;
width:500px;
overflow:hidden; }

.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent; }

.slide h2 a:hover {
color: #ddd;
background-color: transparent; }

span.slmet {
color: #3b5998;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase; }

.slide p {
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px; }

.slide img {
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px; }

#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 20px;
color: #3b5998;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000; }

4. Copy paste kode berikut diatas/sebelum kode </head> :

<script src='http://blogipank.fileave.com/js/jquery-1.2.6.min.js' type='text/javascript'/>

<script src='http://blogipank.fileave.com/js/slider.js' type='text/javascript'/>

5. klik simpan.


oke, sekarang kita masuk ke step 2

1. Menu Dashboard, klik Tata Letak, klik Elemen Halaman.
2. Klik Tambah Gadget. Klik HTML/Javascript. (widget ini lebarnya kurang lebih 900pixel)
3. Copy Paste kode berikut (warna hijau):

<!-- Slider -->
<div id="slider">
<div id="mover">
<!-- kode diatas jgn dihapus-->


<!-- mulai menu-->

<div class="slide"><h2>
<a href="URL judul">

(JUDUL)

</a></h2>
<br/><p>

Deskripsi kalian..
scascasc
ascascsa
ascascasc

</p>
<img alt="" src="URL Gambar"/>
</div>

<!-- selesai menu yg kalian buat. kalian bisa copy paste sesuai banyaknya yg kalian butuhkan-->


<!-- kode dibawah jgn dihapus-->
</div>
</div>


(Penjelasan & Contoh dibawah ini)

<!-- Slider -->
<div id="slider">
<div id="mover">
<!-- kode diatas jgn dihapus-->


<!-- mulai menu 1-->

<div class="slide">
<h2>
<a href="#">

blognyaipank.blogspot.com

</a></h2>
<br/><p>

Blognya ipank berisi tips2 blogging dan lain...

</p>
<img alt="" src="http://i677.photobucket.com/albums/vv136/bebsaa/logo.jpg"/>
</div>
<!--akhir menu 1-->

<!-- mulai menu 2-->

<div class="slide">
<h2>
<a href="#">

blognyaipank.blogspot.com

</a></h2>
<br/><p>

Blognya ipank berisi tips2 blogging dan download film gratis...

</p>
<img alt="" src="http://i677.photobucket.com/albums/vv136/bebsaa/logo.jpg"/>
</div>
<!--akhir menu 2-->

<!-- kode dibawah jgn dihapus-->
</div>
</div>

kalo uda, klik simpan n udah jadi sob..hehe..agak rumit yah?hehe..selamat mencoba yah sob!hehe..