shad0w-share

Ternyata banyak juga sobat yang ingin mencoba memasang Image Slider/Text Slider ala template Zinmag Primus, Slider yang sudah kang fatur terapkan sendiri di blog uji coba kang fatur disini, ini ternyata selain membuat tampilan blog lebih atraktif dan bergaya, sumbangan kunjungan langsung melalui slider ternyata tidak sedikit jumlahnya. Baik para sobat kang fatur lagi malas basa-basi nie kita langsung aja ke-tahap pemasangan OK.

Seperti biasa :

1. Login ke Blog Sobat
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget

cari kode ]]></b:skin> dan letakan kode CSS dibawah ini tepat di atas kode tersebut :

#slider {
background:url(http://i649.photobucket.com/albums/uu217/teaade/slide-1.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: #ac0000;
padding:0px 0px 0px 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: #ee0909;
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: 65px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}

<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>

<div id='header-wrapper'>
..........
.........
</b:section>

<!-- Casing -->
<div id='casing'>

<!-- Slider -->
<div id='slider'>
<div id='mover'>

<div class='slide'>
<h2><a href='http://kangfatur.blogspot.com/2009/11/membuat-buku-tamu-tersembunyi.html' target='new' title='CARA MEMBUAT BUKU TAMU TERSEMBUNYI'>CARA MEMBUAT BUKU TAMU TERSEMBUNYI</a></h2>
<span class='slmet'> Posted By Kang Fatur</span>
<p>Para sobat bloger, Kang Fatur nongol lagi nie setelah satu bulan lebih ga posting-posting yaa malum jadi orang susah akhirnya waktu buat postingpun ga ada karena sibuk masalah pribadi. Walaupun sibuk yaa alhamdullilah dihari minggu ini Kang Fatur bisa posting lagi untuk berbagi dengan sobat-sobat blogger [...}</p>
<img alt='' src='http://t0.gstatic.com/images?q=tbn:h-qkbait9Lx-lM:http://harsono81.files.wordpress.com/2009/03/notepad-logo.jpg'/>
</div>

<div class='slide'>
<h2><a href='http://ade-tea.blogspot.com/2009/08/pasang-tv-di-blog.html' target='new' title='PASANG TV DI BLOG'>PASANG TV DI BLOG</a></h2>
<span class='slmet'> Posted by Kang Fatur</span>
<p>Halo para sobat sobat bloger setelah dua minggu lebih kang fatur gak muncul karena kesibukan pribadi kini kang fatur hadir lagi dihadapan para sobat semua. Setelah dua minggu lebih kang fatur gak buka-buka blog pas buka lagi kang fatur mendapat permintaan dari sobat kurang lebih seperti ini &quot;Kang gimana yaa cara memasang TV di sidebar ??&quot; [...]</p>
<img alt='' src='http://t0.gstatic.com/images?q=tbn:tT-I7ykjNCYh1M:http://www.satcure.co.uk/tech/images/tv_set.jpg'/>
</div>

<div class='slide'>
<h2><a href='http://ujicobakangfatur.blogspot.com/2009/11/fitur-baru-dari-facebook.html' target='new' title='fITUR BARU DARI FACEBOOK'>fITUR BARU DARI FACEBOOK</a></h2>
<span class='slmet'> Posted by Kang Fatur</span>
<p>Beberapa hari yang lalu facebook sudah mengumumkan kepada penggunanya bahwa pada tanggal 13/6/2009 para pengguna facebook sudah dapat mulai menggunakan fitur baru dari facebook, yaitu mempersonalisasikan alamat profil facebook mereka.</p>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwDrl5bLi4cd2WV4XpQjVR6wf8dD5iEpYwQ_tNFcjbxVEwNTsR4H310av2m7fuFZR_pEyol1X6Juvhi0ruVtd6dQiQy2Jnrw8KZbdTngmXEO1Fh-SMsj6ggSWft5Iz8VCpBr_q7G1Aiz8/s400/facebook-logonew.jpg'/>
</div>

<div class='slide'>
<h2><a href='http://tipsdantrikfatur.blogspot.com/2009/11/membuat-cloud-widget.html' title='MEMBUAT TAG CLOUD 3D'>MEMBUAT TAG CLOUD 3D</a></h2>
<span class='slmet'> Posted by KANG FATUR</span>
<p>Yeah! Tadi malam sedang mencari animasi &quot;Tag Clouds&quot; widget. Kang Fatur menemukan situs menarik oleh Roy Tanck&#39;s. Penulis telah menulis sebuah skrip yang sangat baik untuk menampilkan tag, kategori yang berputar dalam 3D animasi. Tapi Roy Tanck&#39;s telah menulis skrip ini hanya untuk Wordpress yang disebut[...]</p>
<img alt='' src='http://t3.gstatic.com/images?q=tbn:Q_Onq9MJJysReM:http://www.idratherbewriting.com/wp-content/uploads/2009/02/tagcloud-400x344.jpg'/>
</div>

<div class='slide'>
<h2><a href='ALAMAT POSTINGAN SOBAT DISINI' title='JUDUL POSTINGAN SOBAT DISINI'>POST-TITLE-HERE</a></h2>
<span class='slmet'> Posted by KANG FATUR</span>
<p>ISI POTONGAN POSTING DISINI</p>
<img alt='' src='ALAMAT GAMBAR SOBAT DISINI'/>
</div>

</div>
<!-- /Mover -->
</div>
<!-- /Slider -->

<div class='clear'/>