Cara pasang slide diatas header atau dibawah header "Pasang Slider Ala Zinmag Primus Template" yang ada di blog ID CReative yang ternyata banyak yang bertanya mengenai bagaimana cara membuatnya (Pasang Slider Ala Zinmag Primus Template). ketika saya berfikir untuk pertama kali Memasang Slider Ala Zinmag Primus Template, slider ini mempunyai banyak manfaat dan tidak saya pungkiri banyak page view yang berasal dari judul artikel yang saya simpan di slider
Tampilannya (DEMO) dapat di lihat pada template blog ini, atau lihat pada gambar dibawah ini :
Bagaimana cara Pasang Slider Ala Zinmag Primus Template? mari kita simak tutorialnya
- Letakan kode CSS dibawah ini diatas kode ]]></b:skin>
#slider {
background:url(http://img99.imageshack.us/img99/9594/slide.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'><span class='slmet'> Posted by Comandante Diehard </span><h2><a href='http://idcreativity.blogspot.com/2011/02/blogger-template-seo-friendly.html'>Blogger Template SEO Friendly</a></h2><p>Blogger Template SEO Friendly merupakan hal yang sangat dicari oleh blogger dalam mengoptimalkan SEO dalam template. salah satu hal yang mendukung SEO optimal adalah template. dengan menggunakan template SEO friendly, semakin besar kemungkinan bahwa blog sobat akan lebih baik dimata search engine. SEO memang hal sulit ditebak dan banyak hal yang harus dilakukan dalam mengoptimalkan SEO, untuk itu kita perlu memahami pentingnya SEO untuk blog dan web anda.</p><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2GJ9FRKa5GurunlRY_n06aOnVcE7kHvEbJdcXVmNvtXX5akE-B52K_Q4QDhxr9y_0spffdizwOf8m5SzHTu0nDRn4ZGxIEr1fEXlWWky5SprioFSLrHSYVCP9k6h8JWHkdNlM2lfiR-E/'/></div><div class='slide'><span class='slmet'> Posted by Comandante Diehard </span><h2><a href='http://idcreativity.blogspot.com/2011/02/free-seo.html'>Free SEO Tools</a></h2><p>Free SEO Tools adalah tools yang sangat dicari-cari oleh blogger yang ingin mengoptimalkan SEO baik web/blognya. banyak tools SEO yang tersedia namun pada kebanyakan hal itu ternyata harus mengeluarkan biaya alias berbayar. browsing kesana-kemari akhirnya saya mendapatkan beberapa SEO tools gratis/Free SEO Tools yang sangat bermanfaat untuk optimasi SEO</p><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPDpYRZu3GY4ALqDHHe3R7IBX7Bh_qM6-A02VHhSPZ6FU20FTU71rK0bsMPsZ6Do8X9h73hd3agLZj93fngZPEWqab3YePo5kPhl05u0Jjoi_xmuZXTFOYGemfnnrofworW-03pcX4l1M/'/></div><div class='slide'><span class='slmet'> Posted by Comandante Diehard </span><h2><a href='http://idcreativity.blogspot.com/2011/02/blog-dofollow-pr-tinggi.html'>Daftar Blog Dofollow PR Tinggi 2010</a></h2><p>Blog Dofollow PR Tinggi merupakan blog yang sangat dicari oleh para blogger yang ingin mendapatkan backlink secara cuma-cuma dengan memanfaatkan fasilitas dofollownya. dibawah ini ada beberapa blog dofollow PR 5 dan PR 6 yang dapat sobat gunakan untuk mencari backlink. mungkin ada yang sudah berubah PR nya namun perubahan yang terjadi tidak akan jauh, ya jika turun mungkin hanya turun satu.</p><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-JJZ9dYIIb1opj7DFBUw9ofNlLmBgmE2D6Qzp3zYY3r-acqQbGf5BOmMaizTfkUSnuQL4d-hUfHdkDNVux8xucCSDOlDt2NkdAztayFatrJNO9tgeXK059oDZFOO4OKXIs7N38u0Y_so/'/></div><div class='slide'><span class='slmet'> Posted by Comandante Diehard </span><h2><a href='http://idcreativity.blogspot.com/2011/02/cara-mendapatkan-dollar-dari-blog.html'>Mendapatkan $100 dari Google Adsense</a></h2><p>Mendapatkan $100 /hari Dari Google Adsense siapakah yang mau? apakah hal ini hanya judul semata? dan apakah hal ini hanya untuk menarik pengunjung semata? jawabannya tentu tidak. Hal ini tentu menjadi topik perbincangan yang hangat, benarkah kita dapat mendapatkan $100 dari google adsense/hari, bayangkan jika dikalkulasikan 1 bulan? berapakah pendapatan anda dari pembayaran google adsense tersebut, dan bagaimana jika dijumlahkan selama satu tahun?saya pun menginginkan hal itu.</p><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP7e023m4cTvjXypPdwbGfJbJjgUGxgWWJD7TtOfTVbYVhX3Oe47epFP26jTjEh3kKEqyE2P-1qMUUiTvXWID58MyH9Df9lForsQAIa0GpbN7dlhtH5Vw1QQcTwoZwyoZpOx6OVNPwSyE/'/></div></div><!-- /Mover --></div><!-- /Slider --></div>
- Sampai disini semua proses penyimpanan kode berakhir. Sekarang lihat saja hasilnya.
Apa saja yang perlu diedit?
- Karena file javascript diatas meminjam langsung dari alamat lain, jadi saya sarankan rekan menyimpannya pada hosting masing2. Silahkan download semua file javascript disini.
- Secara default, Background image pada slider diatas kemungkinan tidak sesuai dengan ukuran template yang sobat gunakan saat ini, jadi mau tidak mau harus memperkecil ukurannya atau sebaiknya buat saja gambar baru sesuai dengan ukuran dan lebar template rekan yang sekarang.
#slider { background:url(http://img99.imageshack.us/img99/9594/slide.png); height: 254px; overflow: hidden; position: relative; margin: 5px 0; }
- Setelah rekan selesai dan berhasil memasang semua kode di atas, contoh slider yang tampil hanya sebagai sample saja, jadi silahkan dihapus link, text dan gambar milik saya dan ubahlah gambar, link dan kalimatnya sesuai kebutuhan.
<div class='slide'><span class='slmet'> Posted by Comandante Diehard </span><h2><a href='http://idcreativity.blogspot.com/2011/02/cara-mendapatkan-dollar-dari-blog.html'>Mendapatkan $100 dari Google Adsense</a></h2><p>Mendapatkan $100 /hari Dari Google Adsense siapakah yang mau? apakah hal ini hanya judul semata? dan apakah hal ini hanya untuk menarik pengunjung semata? jawabannya tentu tidak. Hal ini tentu menjadi topik perbincangan yang hangat, benarkah kita dapat mendapatkan $100 dari google adsense/hari, bayangkan jika dikalkulasikan 1 bulan? berapakah pendapatan anda dari pembayaran google adsense tersebut, dan bagaimana jika dijumlahkan selama satu tahun?saya pun menginginkan hal itu.</p><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP7e023m4cTvjXypPdwbGfJbJjgUGxgWWJD7TtOfTVbYVhX3Oe47epFP26jTjEh3kKEqyE2P-1qMUUiTvXWID58MyH9Df9lForsQAIa0GpbN7dlhtH5Vw1QQcTwoZwyoZpOx6OVNPwSyE/'/></div>
- Untuk mengatur letak text, gambar dan link bisa rekan coba otak-atik sendiri pada kode CSS, terus terang setiap template tentu berbeda ukurannya, jadi saya sendiripun gak tau harus gimana menjelaskan cara mengaturnya.
- Untuk mengatur delay pada slider, silahkan buka file slider.js kemudian tinggal ganti saja jumlah var delayLength = 4000; dengan angka berapa saja, mis 5000 atau 9000 (catatan: 1 detik = 1000)
Selamat mencoba dan utak-atik html anda
----Semoga Bermanfaat-----
No comments:
Post a Comment