Rabu, 26 Agustus 2009

Cara Memasang Slider

. Rabu, 26 Agustus 2009

Banyak sekali manfaat dari memasang Slider, salah satunya adalah akan membuat blog kita semakin lebih atraktif dan bergaya sehingga banyak respone dari pengunjung untuk tertarik membacanya lebih lanjut. Ngomong-ngomong sobat sekalian udah tau belum sih tentang slider yang saya maksud??? Untuk lebih jelasnya tentang slider, kita lihat demonya bersama, klik dibawah ini.
 
Nah sekarang sudah jelaskan tentang slider yang saya maksud? yuk langsung ja kita bahas Cara Membuat Slider:
  1. Login ke Blogger

  2. Masuk Tata Letak --> Edit HTML

  3. Cari kode  ]]></b:skin> , dan letakkan kode dibawah ini di atas kode ]]></b:skin>


    #slider {
    background:url(http://img526.imageshack.us/img526/3091/slide3d.png);
    height: 254px;
    overflow: hidden;
    position: relative;
    margin: 5px 0;
    }

    #mover {
    width: auto;
    position:absolute;
    overflow:hidden;
    }

    .slide {
    padding: 20px 0px;
    width: 800px;
    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: 300px;
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    }

    .slide img {
    position: absolute;
    top: 20px;
    left: 400px;
    background:#fff;
    padding:10px 10px;
    }

    #slider-stopper {
    position: absolute;
    font-family: Georgia, Helvetica, Sans-Serif;
    top: 113px;
    right: 30px;
    color: #AC0000;
    padding: 3px 8px;
    font-size: 14px;
    text-transform: uppercase;
    z-index: 1000;
    }
  4. 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>
  5. Cari kode dibawah ini:


    <div id='header-wrapper'>
    ..........
    .........
    </b:section>
  6. Kalu sudah ketemu kode diatas, letakkan kode dibaawah ini di bawahnya


    <!-- Casing -->
    <div id='casing'>
    <!-- Slider -->
    <div id='slider'>
    <div id='mover'>

    <div class='slide'>
    <span class='slmet'> Posted by Om Kempul </span>
    <h2><a href='http://blogg-tutorial.blogspot.com/2009/08/cara-daftar-dan-membuat-feedburnercom.html'>Pengen Nyoba Feedburner?</a></h2>
    <p>Rasa-rasanya da yang kurang kalau di Blog kita belum
    ada feedburner. Tanya kenapa? Karena banyak sekali
    keuntungan dari feedburner. Pengen nyoba?</p>
    <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5UNe5LBVmzLYKnYG672qlNK2DxOm4vJQvBZGO-5hH5xOefl9eJVV7NADG6WjxsinJ5TZSBc1URBecbiBfiYRouE8wYRj8iCkKGQvtKLeyUZg53f92FkckvXRZ-LDu9ul6z6qCcTIQC5uh/s320/feedburner.png'/>
    </div>

    <div class='slide'>
    <span class='slmet'> Posted by Putry Rasya </span>
    <h2><a href='http://blogg-tutorial.blogspot.com/2009/08/cara-pasang-auto-read-more-terbaru.html'>New Read More
    </a></h2>
    <p>Masihkah Anda menggunakan read more versi jadul??? Sekarang ada
    Auto Read More yang lebih praktis dan mudah untuk digunakan.
    Penasaran???.</p>
    <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZwMk3WUq2tF9f5-ih0B0-HnHV6oq3tDieXHe0zuSv76bSLESUSrnEPwiCBYhQLtl2tcnOLfEqMd1mKw6VHj_nM-8cIZJ7XnbOVNj26FHOSu90rqpxXJ518qALTdWBEUzgjzrc-XM9eyIi/s320/read+more.png'/>
    </div>

    <div class='slide'>
    <span class='slmet'> Posted by Om Kempul </span>
    <h2><a href='http://blogg-tutorial.blogspot.com/2009/08/cara-membuat-banner-di-blog.html'>Banner = Simbol</a></h2>
    <p>Banner juga merupakan simbol bagi Blog kita. Apakah Anda sudah
    membuat Banner untuk Blog kesayangan Anda??? Segera buat, disini
    kami menyediakan panduan praktis membuat Banner..</p>
    <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJuEP7jWqfhEGoJNa2Exv5Yg8_8_jCc3UIex1wR85dk63HbUCTVynl3KIjYtb0yXz_99HC79UGQurbtyQsFrkXRl91KC3ynWO0pkocboQRDYs7ykyqNehEwuiEFkjFJXBzohIOKAoB0ASj/s320/bikin+banner.png'/>
    </div>

    </div>
    <!-- /Mover -->
    </div>
    <!-- /Slider -->
    </div>
    <div class='clear'/>
  7. Simpan, dan lihat hasilnya.

Peringatan :
  • Jika gambar latarnya tidak sesuai dengan template, bisa diubah ukurannya lalu di upload di tempat yang sama dan masukkan URL nya didalam scriptnya.Contoh yang berwarna merah.


    #slider {
    background:url(http://img526.imageshack.us/img526/3091/slide3d.png);
  • Untuk penempatan gambar jika tidak seperti yang kita inginkan, bisa kita edit dengan cara atur ukuran yang berwarna merah.


    .slide img {
    position: absolute;
    top: 20px;
    left: 400px;
    background:#fff;
    padding:10px 10px;
    }
  • Jika ingin melakukan pengeditan pada tulisan STOP, bisa di edit pada script berikut yang berwarna merah.


    #slider-stopper {
    position: absolute;
    font-family: Georgia, Helvetica, Sans-Serif;
    top: 113px;
    right: 30px;
    color: #AC0000;
  • Jika ingin melakukan pengeditan tulisan paragraf, (ingin memperpanjang ukuran tulisan atau memperpendek) edit script berikut yang berwarna merah.


    .slide p {
    color: #999;
    font-size: 12px;
    font-family:georgia, Helvetica, Sans-Serif;
    line-height: 20px;
    width: 300px;
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    }
  • Pengeditan pada isi.Edit yang berwarna merah


    <div class='slide'>
    <span class='slmet'> Posted by Om Kempul </span>
    <h2><a href='http://blogg-tutorial.blogspot.com/2009/08/cara-membuat-banner-di-blog.html'>Banner = Simbol</a></h2>
    <p>Banner juga merupakan simbol bagi Blog kita. Apakah Anda sudah
    membuat Banner untuk Blog kesayangan Anda??? Segera buat, disini
    kami menyediakan panduan praktis membuat Banner..</p>
    <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJuEP7jWqfhEGoJNa2Exv5Yg8_8_jCc3UIex1wR85dk63HbUCTVynl3KIjYtb0yXz_99HC79UGQurbtyQsFrkXRl91KC3ynWO0pkocboQRDYs7ykyqNehEwuiEFkjFJXBzohIOKAoB0ASj/s320/bikin+banner.png'/>
    </div>
Selamat mencoba.... Good Luck . . .

6 komentar:

darwis mengatakan...

mantap nih sob ;) permexx

Ecko mengatakan...

Mantap tutorialnya.
Punya saya dulu pernah dipasangi slider, tapi gak tahu kenapa koq jadi males ngurus karena setiap update mesti otak-atik HTML lagi. :D

Om Kempul mengatakan...

@ Ecko: iya sih mas tapi dengan cara ini kita lebih menarik perhatian pembaca untuk membacanya.

Rizkyzone mengatakan...

pengetahuan baru bt rizky... kerenz sob, dtunggu coment baliknya low smpat

Oktri darmadi mengatakan...

siiiippp bgt nie info

Berita Sepak Bola Dunia mengatakan...

hmm,,ini tutorial cuma buat blogspot duank y..kalo bwt wordpress gmn??

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

 

Recent Comment

Sahabat Setia

Recent Post

Related Websites

This Blog is proudly powered by Blogger.com | Template by miscah.blogspot.com