membuat slider

setelah lama bertanya sama Pak Cik kite di Malaysie, akhirnya ditulis juga tuturial tab slider( maaf kalo salah ) ini dia tutorialnya. kata Pak Cik kodenya diambil dari template Zinmag Primus dengan Theme Author: Jinsona Design.
1. Masukkan kode rss ini sebelum kode ]]></b:skin>

#slider {<br />background:url(http://img99.imageshack.us/img99/9594/slide.png);<br />height: 254px;<br />overflow: hidden;<br />position: relative;<br />margin: 5px 0;<br />}<br /><br />#mover {<br />width: auto;<br />position:absolute;<br />overflow:hidden;<br />}<br /><br />.slide {<br />padding: 20px 0px;<br />width: 1000px; /* Panjang Slider */<br />float: left;<br />position: relative;<br />height:200px; /* Lebar Slider */<br />}<br /><br />.slide h2 { /* Tajuk Post */<br />font-family:georgia, Helvetica, Sans-Serif;<br />font-size: 24px;<br />color: #ac0000;<br />padding:0px 0px 0px 30px;<br />margin:0px 0px;<br />width:500px; /* Panjang Tajuk Post Slider */<br />overflow:hidden;<br />}<br /><br />.slide h2 a:link, .slide h2 a:visited {<br />color:#fff;<br />background-color: transparent;<br />}<br /><br />.slide h2 a:hover {<br />color: #ddd;<br />background-color: transparent;<br />}<br /><br />span.slmet { /* Petikan Post */<br />color: #ee0909;<br />font-size: 10px;<br />font-family:Tahoma, georgia, Helvetica, Sans-Serif;<br />line-height: 20px;<br />width: 500px;<br />padding:0px 0px 0px 30px;<br />margin:0px 0px;<br />text-transform:uppercase;<br />}<br />.slide p { /* Post By Disini */<br />color: #999;<br />font-size: 12px;<br />font-family:georgia, Helvetica, Sans-Serif;<br />line-height: 20px;<br />width: 500px;<br />padding:0px 0px 0px 30px;<br />margin:0px 0px;<br />}<br /><br />.slide img { /* Gambar Pada Slider */<br />position: absolute;<br />top: 20px;<br />left: 577px;<br />background:#fff;<br />padding:10px 10px;<br />}<br /><br />#slider-stopper { /* Butang Stop */<br />position: absolute;<br />font-family: Georgia, Helvetica, Sans-Serif;<br />top: 113px;<br />right: 65px;<br />color: #AC0000;<br />padding: 3px 8px;<br />font-size: 14px;<br />text-transform: uppercase;<br />z-index: 1000;<br />}

2. Kemudian masukkan javascript ini dibawah kode ]]></b:skin>

3. Kemudian tambahkan elemen halaman html baru, langkah ini agak sedikit berbeda dengan yang dijelaskan Pak Cik, tapi hasilnya sama. kopi dan edit kode berikut

<br /><div id='casing'> <br /> <br /> <br /><div id='slider'> <br /><div id='mover'> <br /> <br /><div class='slide'> <br /><h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2> <br /><span class='slmet'> Posted by Author On Month - Day - Year </span> <br /><p>Potongan-Artikel-Disini</p> <br /><img alt='' src='Link-Gambar-Disini'/> <br /></div> <br /> <br /><div class='slide'> <br /><h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2> <br /><span class='slmet'> Posted by Author On Month - Day - Year </span> <br /><p>Potongan-Artikel-Disini</p> <br /><img alt='' src='Link-Gambar-Disini'/> <br /></div> <br /> <br /><div class='slide'> <br /><h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2> <br /><span class='slmet'> Posted by Author On Month - Day - Year </span> <br /><p>Potongan-Artikel-Disini</p> <br /><img alt='' src='Link-Gambar-Disini'/> <br /></div> <br /> <br /><div class='slide'> <br /><h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2> <br /><span class='slmet'> Posted by Author On Month - Day - Year </span> <br /><p>Potongan-Artikel-Disini</p> <br /><img alt='' src='Link-Gambar-Disini'/> <br /></div> <br /> <br /><div class='slide'> <br /><h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2> <br /><span class='slmet'> Posted by Author On Month - Day - Year </span> <br /><p>Potongan-Artikel-Disini</p> <br /><img alt='' src='Link-Gambar-Disini'/> <br /></div> <br /> <br /></div> <br /> <br /></div> <br /> <br /></div> <br /><div class='clear'/>

keterangan:

jika ingin menambah banyak post, tambahkan saja kode dibawah sebelum </div>

<div class="'slide'"><br /><h2><a href="'Link-Artikel-Disini'" title="'Tajuk-Post-Disini'">Tajuk-Post-Disini</a></h2><br /><span class="'slmet'"> Posted by Author On Month - Day - Year </span><br /><p>Potongan-Artikel-Disini</p><br /><img alt="''" src="'Link-Gambar-Disini'/" /><br /></div>

sumber:http://www.bloggerstyles.com/zinmag-primus-blogger-template/


Tulisan Terkait :

Best Quote Today:
Keberhasilan adalah kemampuan untuk melewati dan mengatasi dari satu kegagalan ke kegagalan berikutnya tanpa kehilangan semangat. (Winston Chuchill)

Jika Anda menyukai tulisan diatas jangan lupa untuk klik tombol suka untuk berbagi dengan teman facebook Anda. Anda juga bisa membagikan tulisan ini di twitter dan jejaring sosial lainnya. Berbagi itu indah.

Become a Fan