Cara Memperindah Halaman Blog.

Slider Zinmag Primus adalah slider untuk membuat gambar bergerak secara slide layaknya seperti live. Asyiknya lagi, slider ini selain bisa membuat foto menjadi slide, Zinmag Primus bisa dilengkapi dengan tulisan dalam satu paket slide. Slide bisa diaplikasikan di bawah header, di sidebar atau bahkan di footer. Background gambar dan foto yang akan dijadikan slide harus sesuai dengan ide awal kegunaan slide dalam blog anda. Slider Zinmarg Primus bisa menampilkan tulisan berberak layaknya tulisan bergerak di layar tv. Contohnya bisa dilihat di Di Sini



Slider ini adalah aplikasi dalam bentuk kode javascript yang disematkan dalam CSS dan HTML blog anda untuk menambah model tampilan halaman yang lebih baik. Intinya Slider Zinmag Primus adalah satu cara untuk mempercantik halaman blog bagi blogger mania. Banyak cara untuk mempercantik tampilan blog, cara ini salah satunya. Bagi blogger pemula sekalipun, sepertinya tidak terlalu sulit mengedit html dan css agar sesuai dengan aplikasi yang satu ini.



Awalnya saya menemukan Zinmag Primus dari blog teman: http://bangdel.blogspot.com. Meski pada awalnya agak ribet penggunaannya, tapi pada akhirnya saya menemukan cara yang lebih pas untuk pengguna blogger khususnya, nanti akan saya jelaskan.



Tapi pertama, inilah tutorial di http://bangdel.blogspot.com. Thank you bangdel.



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: #000 url('http://hosting foto anda.jpg');
height: 229px; ...... /* ukuran bisa anda sesuaikan */
overflow: hidden;
position: relative;
margin: 5px 0; ..... /* ukuran bisa anda sesuaikan */
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px; ....... /* ukuran bisa anda sesuaikan */
width: 900px; ........ /* ukuran bisa anda sesuaikan */
float: left;
position: relative; ..... /* ukuran bisa anda sesuaikan */
height:200px; ......./* ukuran bisa anda sesuaikan */
}
.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 18px; /* ukuran bisa anda sesuaikan */
color: #ac0000; /* warna bisa anda sesuaikan */
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px; ...... /* ukuran bisa anda sesuaikan */
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; /* warna bisa anda sesuaikan */
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; ..... /* ukuran bisa anda sesuaikan */
padding:0px 0px 0px 30px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 600px; /* ukuran bisa anda sesuaikan */
background:#fff;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: trebuchet;
top: 100px; /* posisi bisa anda sesuaikan */
right: 50px;
color: #0B610B; /* warna bisa anda sesuaikan */
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[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'> Tulisan Anda disini </span>
<h2><a href='#'>Judul Pertama</a></h2>
<p>Di sini space tulisan anda I</p>
<img alt='' src='http://web hosting foto anda.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Tulisan Anda di sini </span>
<h2><a href='#'>Judul ke II</a></h2>
<p>Di sini space tulisan anda II</p>
<img alt='' src='http://web host foto anda.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Tulisan Anda di Sini </span>
<h2><a href='#'>Judul ke III</a></h2>
<p>Di sini space tulisan anda III</p>
<img alt= ' src='http://web host foto anda.jpg'/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>

Sekarang klik tombol Simpan Template dan akhirnya Selesai.



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. 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.
4. 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).



Ini tambahan dari saya:



Sesudah HTML di simpan, coba klik Element Halaman atau Tata Letak halaman, lalu anda akan menemukan template laman anda berubah. Berubah karena Slider Zinmag Primus tampil di halaman Elemen halaman. Tentu saja anda akan heran karena pada awalnya halaman defaultnya polos berwarna krem. Buat beberapa orang hal ini akan menjadi masalah, saya juga tidak betah melihat tampilan seperti itu. Jadi kita perlu mengakalinya.



Cara mengedit slider ini biar lebih pas begini:



* Lakukan langkah pertama dan ke dua seperti di atas dan pending dulu langkah ke tiga. Lalu simpan template html anda.

** Copy paste kode yang ada di langkah ke tiga yakni:
<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<span class='slmet'> Tulisan Anda disini </span>
<h2><a href='#'>Judul Pertama</a></h2>
<p>Di sini space tulisan anda I</p>
<img alt='' src='http://web hosting foto anda.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Tulisan Anda di sini </span>
<h2><a href='#'>Judul ke II</a></h2>
<p>Di sini space tulisan anda II</p>
<img alt='' src='http://web host foto anda.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Tulisan Anda di Sini </span>
<h2><a href='#'>Judul ke III</a></h2>
<p>Di sini space tulisan anda III</p>
<img alt= ' src='http://web host foto anda.jpg'/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>

*** Kemudian buka Element Halaman, dan paste kode di atas ke dalam widget html itu. Selesai.



Dengan cara terakhir itu anda bisa meletakkan Slider Zinmag Primus ke posisi mana yang anda mau dalam halaman anda. Dengan cara itu pula Slider ini bisa diedit tanpa mengutak atik template Css html anda. Buat saya, kesimpulan akhir ketika slider ini sudah bisa dikendalikan caranya adalah memperindah blog.



Thank U Zinmag Primus (Pria Mushalla :D)