Pasang Slider Zinmag Primus Di Blogger

Zimag Primus template menerapkan slider di blognya. Banyak saya temui blog yang sudah memakai animasi image slider ini. Blog akan semakin cantik dan lebih hidup dengan tampilan silih berganti dari text dan image yang disetting pada slider. Penempatan animasi slider zinmag primus ini biasanya diletakkan tepat di bawah header. Namun, sobat pun bisa menyesuaikannya pada desain template blog masing-masing. Saat ini saya telah memakainya di blog Bang Del dan memilih menampilkan beberapa artikel yang saya anggap layak untuk dibaca pengunjung.

Gambarnya kira-kira seperti ini :


Jika sobat tertarik untuk memasang Slider Zinmag Primus di blog masing-masing, maka bersiaplah dipusingkan dengan begitu banyaknya kode CSS dan setting gambar, link serta setting teks yang lumayan membingungkan . Kalau sudah terbisa sih, ya ga papa. Namun patut dan layak untuk dicoba. Buat o-om.com, terimakasih atas tutorialnya di memasang slider ala Zinmag Primus Template. Oke, langsung saja ke prakteknya.

Langkah Pertama :

Login ke blogger dengan id sobat >> Klik Tata Letak >> Pilih Edit HTML >> Backup dulu template sobat dengan mengklik Download Template Lengkap.
Letakkan kode berikut di atas kode ]]></b:skin>

/* Slider Code
-------------------- */
#slider {
background:url(http://i33.tinypic.com/2l8hgi.jpg);
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;
}

Langkah Kedua

Jangan kemana-mana dulu ya, karena kita masih dalam posisi Edit HTML. Sekarang letakkan kode berikut di bawah kode ]]></b:skin>.

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

Langkah Ketiga

Kita akan meletakkan id untuk slider zinmag primus tepat di bawah header blog sobat. Nah, sobat pun bisa menyesuaikan penempatan id ini. Jadi cocokkan saja dengan template sobat. Apalagi template blogger yang sudah banyak dimodifikasi. Oke langsung saja. Silahkan cari kode :

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

Letakkan kode berikut tepat di bawah kode tadi :

<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<span class='slmet'> Posted by Bang Del </span>
<h2><a href='http://bangdel.blogspot.com/2009/07/cara-membuat-blog-yang-bagus.html'>Blog yang Bagus Gimana Sih?</a></h2>
<p>Apakah blog yang bagus menurut saya sudah bagus menurut orang lain. Apakah blog yang bagus menurut orang lain sudah bagus menurut saya. Jawaban untuk kedua pertanyaan di atas adalah belum tentu. Terkadang bagus menurut saya ternyata jelek di mata pembaca dan terkadang bagus menurut pembaca ternyata tidak bagus menurut saya. Menurut kamu blog yang bagus gimana sih?</p>
<img alt='blog yang bagus' src='http://i34.tinypic.com/v83g3d.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by Bang Del </span>
<h2><a href='http://bangdel.blogspot.com/2009/07/cara-promosi-blog-yang-baik.html'>Cara Promosi Blog yang Baik</a></h2>
<p>Ingin blog anda terkenal? Temukan jawabannya di sini &quot;Cara Promosi Blog yang Baik&quot;. Hampir semua pemilik blog ingin blognya menjadi terkenal dan ramai dikunjungi dengan trafik yang tinggi pula. Saya pun begitu, sama seperti anda :) Posting tentang cara promosi blog ini adalah berdasarkan pengalaman pribadi. Silahkan dibaca-baca dulu dan ambil poin-poin yang cocok buat blog anda. Semoga bermanfaat.</p>
<img alt='promosi blog' src='http://i34.tinypic.com/33kx84w.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by Bang Del </span>
<h2><a href='http://bangdel.blogspot.com/2009/06/jenis-jenis-bisnis-online.html'>Jenis-Jenis Bisnis Online</a></h2>
<p>Sudah sering mendengar tentang Bisnis Online ya. Saya akan memberikan sedikit ulasan tentang bisnis online dan jenis-jenis bisnis online. Barangkali anda tertarik untuk memonetisasi blog. Hitung-hitung bisa dapat dollar dari internet. Artikel ini mengulas beberapa jenis bisnis online yang sedang marak dan digandrungi para blogger.</p>
<img alt='bisnis online' src='http://i33.tinypic.com/2whm22w.jpg'/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>

Sekarang klik tombol Simpan Template dan akhirnya Selesai.

Coba sobat perhatikan hasilnya. Apakah memuaskan atau tidak atau masih banyakkah yang tidak sesuai dengan desain template blog sobat? Jika ya, berarti ada yang harus diedit lagi.


Hal-hal yang perlu diedit.

1. Pemanggilan kode JavaScript di atas, masih berasal dari situs bloggerstyles.com dan sobat bisa meng-hosting javascript tersebut di tempat hosting yang biasa sobat pakai. Silahkan download semua kode javascript di sini, dan hosting di tempat hosting javascript yang bisa sobat gunakan.
2. Background image pada slider di atas mungkin tidak sesuai dengan template sobat. Sebaiknya diperkecil saja atau mungkin sobat harus membuat background baru dan sesuaikan dengan ukuran dan lebar template sobat. Bagian tersebut adalah ini :
   

   #slider {
   background:url(http://i33.tinypic.com/2l8hgi.jpg);
   height: 229px;
   overflow: hidden;
   position: relative;
   margin: 5px 0;
   }

3. Nah, pada contoh slider di atas, saya menyertakan link dan teks dari blog ini. Jadi, silahkan mengganti link, teks dan gambar (image) buatan sendiri, sesuaikan dengan kebutuhan. Bagian tersebut adalah seperti ini :
   

   <div class='slide'>
   <span class='slmet'> Posted by Bang Del </span>
   <h2><a href='http://bangdel.blogspot.com/2009/07/cara-promosi-blog-yang-baik.html'>Cara Promosi Blog yang Baik</a></h2>
   <p>Ingin blog anda terkenal? Temukan jawabannya di sini &quot;Cara Promosi Blog yang Baik&quot;. Hampir semua pemilik blog ingin blognya menjadi terkenal dan ramai dikunjungi dengan trafik yang tinggi pula. Saya pun begitu, sama seperti anda :) Posting tentang cara promosi blog ini adalah berdasarkan pengalaman pribadi. Silahkan dibaca-baca dulu dan ambil poin-poin yang cocok buat blog anda. Semoga bermanfaat.</p>
   <img alt='promosi blog' src='http://i34.tinypic.com/33kx84w.jpg'/>
   </div>

4. Untuk mengatur letak text, gambar dan link, sobat bisa mengutak-atik sendiri pada kode CSS. Yang pasti, setiap template punya ukuran lebar yang mungkin berbeda. Terus terang saya juga bingung untuk menjelaskannya, karena penerapan slider di blog ini pun butuh percobaan yang berulang-ulang agar benar-benar pas. So, trial and error aja dulu.
5. Untuk mengatur delay pada slider, silahkan buka file slider.js kemudian tinggal ganti saja jumlah var delayLength = 4000; dengan angka berapa saja, misalnya 5000 atau 9000 (catatan: 1 detik = 1000).

Udah itu aja koq, dijamin pasti sobat pusing sendiri . Kalau sobat pusing, jangan bilang-bilang ke daku ya . Selamat mencoba dan semoga berhasil dengan slider Zinmag Primus-nya.

Related Post:

CSS

• CSS Dock Menu Untuk Blogger
• CSS Compressor Kurangi Berat Blog Anda
• Belajar CSS Border Padding dan Margin
• Border Dan Background Pada Template Blogger

or or