Membuat Slider Zinmag Primus di Blog ...!

Tahukah kalian banyak perubahan pada template Blog semakin modern dan semakin canggih, dan salah satunya adalah penerapan slider Zinmag primus pada Blog, Untuk mendownload Template slider zinmag Primus bisa berkunjung disini. Untuk melihat DEMO PREVIEWNYA DISINI.
Slider zinmag primus itu sendiri sebenarnya adalah pergantian Text dan image yang berganti secara berurutan dan akan terlihat menarik jika dipasang pada blog kita. Untuk yang tidak ingin merubah templatenya namun ingin memasang slider zinmag primus ini, silahkan ikuti tahap-tahap pembuatannya.

1. Login ke blogger
2. Masuk Ke Rancangan --> Edit HTML
3. cari kode ]]></b:skin> dan simpan script berikut diatasnya

/* Slider Code
-------------------- */
#slider {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik-wsEPuDkwnDQOXhUP0h3oDVgU4ray_svn1obeMA3t1Gma9-tvc9wnJH83upXWixAen3E7fodMu-tfusoNvmJ5FxB4jBDuQE8ZRb3UHd9k5EOexFQ8OBUsDOJ94EwgKzCdcN7OPdYbU4/s1600/slide.png);
height: 229px;
overflow: hidden;
position: relative;
margin: 5px 0;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width: 900px;
float: left;
position: relative;
height:200px;
}
.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 18px;
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: #DF0101;
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: #fff;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
text-align: justify;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 600px;
background:#fff;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: trebuchet;
top: 100px;
right: 50px;
color: #0B610B;
padding: 3px 12px;
font-size: 14px;
font-weight:bold;
text-transform: uppercase;
z-index: 1000;
}

KETERANGAN :
== ganti background gambar dengan URL gambar kalian ( sesuai template kalian )
== Atur posisi gambar, tulisan dengan cara mengedit css diatas.

4. cari kode </head> dan simpan script berikut diatasnya

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

5. sekarang kalian cari kode berikut( untuk penempatannya ):

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

dan simpan script berikut dibawahnya

<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<span class='slmet'> DiPOSKAN OLEH : SAYA </span>
<h2><a href='URL TUJUAN'>JUDUL POSTINGAN KALIAN</a></h2>
<p>TULISAN POTONGAN ARTIKEL YANG DITAMPILKAN</p>
<img alt='keterangan GAMBAR' src='URL GAMBAR KALIAN'/>
</div>
<div class='slide'>
<span class='slmet'> DiPOSKAN OLEH : SAYA </span>
<h2><a href='URL TUJUAN'>JUDUL POSTINGAN KALIAN</a></h2>
<p>TULISAN POTONGAN ARTIKEL YANG DITAMPILKAN</p>
<img alt='keterangan GAMBAR' src='URL GAMBAR KALIAN'/>
</div>
<div class='slide'>
<span class='slmet'> DiPOSKAN OLEH : SAYA </span>
<h2><a href='URL TUJUAN'>JUDUL POSTINGAN KALIAN</a></h2>
<p>TULISAN POTONGAN ARTIKEL YANG DITAMPILKAN</p>
<img alt='keterangan GAMBAR' src='URL GAMBAR KALIAN'/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>

6. SIMPAN template kalian dan lihat hasilnya...

KETERANGAN :
== ganti DiPOSKAN OLEH : SAYA dengan penulis / nama kalian
== ganti URL TUJUAN dengan link yang akan kalian tuju
== ganti JUDUL POSTINGAN KALIAN dengan judul postingan yang ditampilkan
== ganti TULISAN POTONGAN ARTIKEL YANG DITAMPILKAN dengan postongan artikel kalian yang ditampilkan
== ganti keterangan GAMBAR dengan keterangan gambar kalian
== ganti URL GAMBAR KALIAN dengan URL gambar yang akan kalian pakai

Contoh :

<div class='slide'>
<span class='slmet'> Created : Azis Lamayuda </span>
<h2><a href='http://www.z33s.co.cc/2010/08/membuat-slider-zinmag-primus-di-blog.html'>CONTOH SLIDER ZINMAG PRIMUS</a></h2>
<p>Tahukah kalian banyak perubahan pada template Blog semakin modern dan semakin canggih, dan salah satunya adalah penerapan slider Zinmag primus pada Blog, Untuk mendownload Template slider zinmag Primus bisa berkunjung disini.
Slider zinmag primus itu sendiri sebenarnya adalah pergantian Text dan image yang berganti secara berurutan dan akan terlihat menarik jika dipasang pada blog kita.</p>
<img alt='zinmag primus' height="125px" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhtNdUzFyec2RiAstBZcpfUWJjJ9PYF8bGjNJn5StNLJBpg_90j4rdFcoxapWZE3xI3VebXN1mB9Ff5WlOBWsSrAjY1MvAp7pteI5xfvcgRYBm6L8wp1s6uhviVmbfNpCg3263GrsHzQQ_/s320/jojo.jpg'width="125px"/>
</div>

Semoga artikel ini akan bermanfaat bagi pembaca dan jangan lupa give me your comment... OK.