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 CodeLangkah Kedua
-------------------- */
#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;
}
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'/>Langkah Ketiga
<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>
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'>Letakkan kode berikut tepat di bawah kode tadi :
..........
.........
</b:section>
<!-- 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.
- 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.
- 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;
} - 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 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> - 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.
- 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).
