Memasang Gambar Slide Ala Zinmag Primus

Jika temen-temen adalah seorang blogger yang senang dengan tampilan gambar bergerak, disini nanti akan saya berikan tutorialnya. Gambar di sebuah blog sangat penting karena sebuah gambar akan menggambarkan isi dari keseluruhan sebuah artikel. Jika saya sebagai pengunjung pada sebuah blog, saya akan sangat senang jika mendapatkan artikel plus gambar yang tidak harus membukanya satu persatu. Maksud saya disini adalah alangkah baiknya kalau sebuah blog mempunyai menu slider untuk gambar, jadi para pengunjung tidak usah repot-repot untuk membukanya satu per satu.

Sebenarnya sekarang sudah banyak sekali template blogger gratis yang menyediakan menu untuk slide gambar salah satunya adalah Zinmag Primus. Penempatan slider zinmag primus ini biasanya diletakkan tepat di bawah header. Tapi, anda pun bisa menyesuaikannya pada desain template blog masing-masing. Untuk referensi anda bisa lihat tempalte buatan dari bloggerstyles.com atauhttp://btemplates.com/. Kira-kira previewnya seperti ini,

Baik, sekarang kita langsung saja ke langkah-langkah pembuatannya : 

Langkah Pertama :

Login ke blogger dengan id anda >> Klik Tata Letak >> Pilih Edit HTML >> Backup dulu template anda 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 anda. Nah, anda pun bisa menyesuaikan penempatan id ini. Jadi cocokkan saja dengan template anda. 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 Maskolis </span>
<h2><a href='http://creatingwebsite-maskolis.blogspot.com/2011/01/membuat-menu-navigasi-horisontal-dan.html'>Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog</a></h2>
<p>Menu Navigasi pada blog merupakan elemen yang perlu diperhatikan di dalam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Ada bermacam-macam bentuk menu navigasi di dalam sebuah blog itu, ada menu navigasi horizontal, menu navigasi vertikal atau yang lainya. Selain menggunakan menu horisontal drop down menu, kita juga bisa membuat menu horisontal sederhana (tanpa cabang) ataupun</p>
<img alt='Tutorial Blog' src='http://i34.tinypic.com/v83g3d.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by Maskolis </span>
<h2><a href='http://creatingwebsite-maskolis.blogspot.com/2010/12/blog-spam-hati-hati-dengan-blog-anda.html'>Blog SPAM, Hati-Hati Dengan Blog Anda</a></h2>
<p>Kita akan tetap menulis dan menulis terus setiap ada ide baru. So, seperti kata mas doyok sebaiknya kita berkonsentrasi posting ketimbang sibuk marah-marah dan menggerutu tentang kelakuan blogger lain. Saya lebih setuju kepada mas o-om atau i-raka yang memberikan tips-tips agar blog kita tidak dianggap spam daripada menulis artikel tentang larangan keras mengkopi paste artikelnya (hal itu susah dilakukan mas, ya seperti pemerintah melarang keras pembajakan kaset atau CD di negara kita ini).</p>
<img alt='Blog Spam' src='http://i34.tinypic.com/33kx84w.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by Maskolis </span>
<h2><a href='http://creatingwebsite-maskolis.blogspot.com/2011/01/widget-yang-harus-dimiliki-suatu-blog.html'>Widget yang Harus Dimiliki Suatu Blog</a></h2>
<p>eman-teman blogger pasti menginginkan blog yang dibuat tampil dengan performa maksimal, dengan desain yang mantab dan bisa menarik pengunjung. Namun, apakah desain atau tampilan blog yang anda pakai sehat untuk blog anda? Karena ada banyak widget yang mengandung banyak kerusakan atau error yang mungkin anda tidak tahu. Nah, kalau begitu, apa saja widget yang seharusnya ada dalam blog anda agar blog anda tetap bagus dan sehat? Mari kita lihat satu persatu:</p>
<img alt='tutorial blog' 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 anda perhatikan hasilnya. Apakah memuaskan atau tidak atau masih banyakkah yang tidak sesuai dengan desain template blog temen-temen? 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 anda bisa meng-hosting javascript tersebut di tempat hosting yang biasa anda pakai. Silahkan download semua kode javascript di sini, dan hosting di tempat hosting javascript yang bisa digunakan.
2. Background image pada slider di atas mungkin tidak sesuai dengan template anda. Sebaiknya diperkecil saja atau mungkin anda harus membuat background baru dan sesuaikan dengan ukuran dan lebar template anda. 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 Blogmanado </span>

   <h2><a href='http://blogsmanado.blogspot.com/2010/12/blog-spam-hati-hati-dengan-blog-anda.html'>Blog SPAM, Hati-Hati Dengan Blog Anda</a></h2>

   <p>Kita akan tetap menulis dan menulis terus setiap ada ide baru. So, seperti kata mas doyok sebaiknya kita berkonsentrasi posting ketimbang sibuk marah-marah dan menggerutu tentang kelakuan blogger lain. Saya lebih setuju kepada mas o-om atau i-raka yang memberikan tips-tips agar blog kita tidak dianggap spam daripada menulis artikel tentang larangan keras mengkopi paste artikelnya (hal itu susah dilakukan mas, ya seperti pemerintah melarang keras pembajakan kaset atau CD di negara kita ini). </p>

   <img alt='Blog Spam' src='http://i34.tinypic.com/33kx84w.jpg'/>
   

   </div>

4. Untuk mengatur letak text, gambar dan link, anda 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).

Oya, tutorial diatas tidak bisa saya buat jika o-om nggak nulis tutorial dasarnya, untuk itu kepada mas o-om terima kasih banyak. Itu dulu penjelasannya, kalau masih bingung temen-temen bisa isi kotak komentar di bawah. Selamat mencoba dan semoga berhasil dengan slider Zinmag Primus-nya.