Cara Membuat Slider Zinmag Primus di Blog

Cara Membuat Slider Zinmag Primus di Blog. sebelumnya aku telah share ilmu kepada sobat tentang Membuat Draggable Popup Window jQuery pada tutorial kali ini saya akan menjelaskan kepada sobat tentang Membuat Slider Zinmag Primus. Mungkin dari para sobat blogger ada yang pernah berkunjung ke suatu blog yang menggunakan template Zigmag Primuz. Sebagai contoh seperti blognya Bangdel atau i-om yang memakai slider zigmag primus. Oh ya kalo kurang jelas sobat bisa melihat pada gambar berikut.

Jadi nanti pada halaman muka/sekitar header, nanti ada slide yang bisa diisi dengan berbagai macam kreasi sobat seperti headline,iklan dsb. Biasanya untuk penempatan slider zinmag primus terletak dibawah header. Tetapi sobat dapat menyesuaikan pada template masing-masing. Oh ya sampek lupa untuk refrensinya sobat dapat melihatnya di template buatan bloggerstyles.com atau http://btemplates.com/ Bagaimana tertarik????

Untuk membuatnya ikuti saja langkah-langkah berikut ini:

• Log in dulu ke account blog anda
• Masuk Ke Rancangan --> Edit HTML --> Centang Expand Template Widget
• Jangan lupa download template lengkap untuk jaga-jaga
• Selanjutnya cari kode ]]></b:skin> dan simpan script berikut diatasnya

/* Slider Code

-------------------- */

#slider {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEishraqCd0Hgws8m9uaMlysjmFPQHqq9E7Q6FL2JuLXqLfg4uRbpYSwDwT4chiGkBIr8k8OLwEDq5vbUXlohOwYR8ZJsf0IiAWwnFyy7UYgor6t_SIBuXbeJZ73qBkIUI5AEiHVlAhujFA/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;

}

Ganti Url gambar dengan Url gambar kalian (Sesuaikan dengan template sobat)

Kemudian Atur posisi gambar, tulisan dengan cara mengedit css diatas.

• Langkah selanjutnya 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>

• Sekarang cari kode berikut ini untuk penempatan silder zinmag primusnya.

<div id='header-wrapper'>

..........

.........

</b:section>

• Langkah terakhir 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'/>

• Simpan template kemudian preview hasilnya

banyak sekali tahap-tahapnya yach... tapi tak apa-apa, untuk menciptakan blog senyaman mungkin saat dilihat. jangan lupa follow blog saya yach.. tombol follownya ada pada halaman utama.