Seperti biasa :
1. Login ke Blog Sobat
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
cari kode ]]></b:skin> dan letakan kode CSS dibawah ini tepat di atas kode tersebut :
#slider {
background:url(http://i649.photobucket.com/albums/uu217/teaade/slide-1.png);
height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}
.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
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: #ee0909;
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: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 65px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}
Kemudian letakan kode javascript dibawah ini dibawah 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>
Kemudian cari kode dibawah ini:
<div id='header-wrapper'>
..........
.........
</b:section>
Letakan kode dibawah ini dibawah kode diatas.
<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<h2><a href='http://kangfatur.blogspot.com/2009/11/membuat-buku-tamu-tersembunyi.html' target='new' title='CARA MEMBUAT BUKU TAMU TERSEMBUNYI'>CARA MEMBUAT BUKU TAMU TERSEMBUNYI</a></h2>
<span class='slmet'> Posted By Kang Fatur</span>
<p>Para sobat bloger, Kang Fatur nongol lagi nie setelah satu bulan lebih ga posting-posting yaa malum jadi orang susah akhirnya waktu buat postingpun ga ada karena sibuk masalah pribadi. Walaupun sibuk yaa alhamdullilah dihari minggu ini Kang Fatur bisa posting lagi untuk berbagi dengan sobat-sobat blogger [...}</p>
<img alt='' src='http://t0.gstatic.com/images?q=tbn:h-qkbait9Lx-lM:http://harsono81.files.wordpress.com/2009/03/notepad-logo.jpg'/>
</div>
<div class='slide'>
<h2><a href='http://ade-tea.blogspot.com/2009/08/pasang-tv-di-blog.html' target='new' title='PASANG TV DI BLOG'>PASANG TV DI BLOG</a></h2>
<span class='slmet'> Posted by Kang Fatur</span>
<p>Halo para sobat sobat bloger setelah dua minggu lebih kang fatur gak muncul karena kesibukan pribadi kini kang fatur hadir lagi dihadapan para sobat semua. Setelah dua minggu lebih kang fatur gak buka-buka blog pas buka lagi kang fatur mendapat permintaan dari sobat kurang lebih seperti ini "Kang gimana yaa cara memasang TV di sidebar ??" [...]</p>
<img alt='' src='http://t0.gstatic.com/images?q=tbn:tT-I7ykjNCYh1M:http://www.satcure.co.uk/tech/images/tv_set.jpg'/>
</div>
<div class='slide'>
<h2><a href='http://ujicobakangfatur.blogspot.com/2009/11/fitur-baru-dari-facebook.html' target='new' title='fITUR BARU DARI FACEBOOK'>fITUR BARU DARI FACEBOOK</a></h2>
<span class='slmet'> Posted by Kang Fatur</span>
<p>Beberapa hari yang lalu facebook sudah mengumumkan kepada penggunanya bahwa pada tanggal 13/6/2009 para pengguna facebook sudah dapat mulai menggunakan fitur baru dari facebook, yaitu mempersonalisasikan alamat profil facebook mereka.</p>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYXAXSmWQ5fZ33vUnfN8IZQ2TBPMHXNDcZDSPa7tZ-EzhOIeeSqlBAxC6147YCwkGoUc7fAlYNPOIm9SQTUJXAs2vBGwQDxU_Jm2TA4bga9-J5_qXpu3vOyz7cKdeRkBaQfHnp5chx4bg/s400/facebook-logonew.jpg'/>
</div>
<div class='slide'>
<h2><a href='http://tipsdantrikfatur.blogspot.com/2009/11/membuat-cloud-widget.html' title='MEMBUAT TAG CLOUD 3D'>MEMBUAT TAG CLOUD 3D</a></h2>
<span class='slmet'> Posted by KANG FATUR</span>
<p>Yeah! Tadi malam sedang mencari animasi "Tag Clouds" widget. Kang Fatur menemukan situs menarik oleh Roy Tanck's. Penulis telah menulis sebuah skrip yang sangat baik untuk menampilkan tag, kategori yang berputar dalam 3D animasi. Tapi Roy Tanck's telah menulis skrip ini hanya untuk Wordpress yang disebut[...]</p>
<img alt='' src='http://t3.gstatic.com/images?q=tbn:Q_Onq9MJJysReM:http://www.idratherbewriting.com/wp-content/uploads/2009/02/tagcloud-400x344.jpg'/>
</div>
<div class='slide'>
<h2><a href='ALAMAT POSTINGAN SOBAT DISINI' title='JUDUL POSTINGAN SOBAT DISINI'>POST-TITLE-HERE</a></h2>
<span class='slmet'> Posted by KANG FATUR</span>
<p>ISI POTONGAN POSTING DISINI</p>
<img alt='' src='ALAMAT GAMBAR SOBAT DISINI'/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
<div class='clear'/>
Sampai disini semua proses penyimpanan kode berakhir. Sekarang lihat saja hasilnya. Selamat mencoba....
1. Secara default, Background image pada slider diatas kemungkinan tidak sesuai dengan ukuran template sobat saat ini, jadi mau tidak mau harus memperkecil ukurannya atau sebaiknya buat saja gambar baru sesuai dengan ukuran dan lebar template sobat yang sekarang.
#slider { background:url(http://i649.photobucket.com/albums/uu217/teaade/slide-1.png); height: 254px; overflow: hidden; position: relative; margin: 5px 0; }
2. Setelah sobat selesai dan berhasil memasang semua kode di atas, contoh slider yang tampil hanya sebagai sample saja, jadi silahkan dihapus link, text dan gambar milik kang fatur dan ubahlah gambar, link dan kalimatnya sesuai kebutuhan para sobat.
<div class='slide'>
<h2><a href='http://kangfatur.blogspot.com/2009/11/membuat-buku-tamu-tersembunyi.html' target='new' title='CARA MEMBUAT BUKU TAMU TERSEMBUNYI'>CARA MEMBUAT BUKU TAMU TERSEMBUNYI</a></h2>
<span class='slmet'> Posted By Kang Fatur</span>
<p>Para sobat bloger, Kang Fatur nongol lagi nie setelah satu bulan lebih ga posting-posting yaa malum jadi orang susah akhirnya waktu buat postingpun ga ada karena sibuk masalah pribadi. Walaupun sibuk yaa alhamdullilah dihari minggu ini Kang Fatur bisa posting lagi untuk berbagi dengan sobat-sobat blogger [...}</p>
<img alt='' src='http://t0.gstatic.com/images?q=tbn:h-qkbait9Lx-lM:http://harsono81.files.wordpress.com/2009/03/notepad-logo.jpg'/>
</div>
3. Untuk mengatur letak text, gambar dan link bisa Sobat coba otak-atik sendiri pada kode CSS, terus terang setiap template tentu berbeda ukurannya, jadi kang fatur sendiripun gak tau harus gimana menjelaskan cara mengaturnya.
4. Jika sobat ingin menambah jumlah Slide. Sobat tinggal Copy aja kode berikut :
<div class='slide'>
<h2><a href='ALAMAT POSTINGAN SOBAT DISINI' title='JUDUL POSTINGAN SOBAT DISINI'>POST-TITLE-HERE</a></h2>
<span class='slmet'> Posted by KANG FATUR</span>
<p>ISI POTONGAN POSTING DISINI</p>
<img alt='' src='ALAMAT GAMBAR SOBAT DISINI'/>
</div>
5. Kemudian paste tepat di bawahnya atau diatas kode dibawah ini :
</div>
<!-- /Mover -->
Selamat Mencoba dan Semoga Berhasil
yang pertama masuk nie. bagus sekali kerana ramai yang mahu slider seperti ini tapi masih sayangkan template mereka ditukar dengan template zigmag primus.
ReplyDelete