Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Minggu, 03 Januari 2010

Slide Show di Blogger

Kategori :
Slide Show di bloggerKali ini Oketrik akan menjelasakan tentang Cara Pemasangan Slide Show di Blogger dengan menggunakan jQuery. jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL.

Untuk Contoh dari Trik Slide Show di Blogger klik saja disini dan lihat widget yang ada di bawah Header. Dalam hal ini pengaruh terhadap kecepatan blog agak tinggi, namun tidak salahnyakan apabila sobat ingin mempercantik blog sobat agar blog sobat terlihat lebih menarik dan nyaman untuk di kunjungi?? Nah apabila ingin memasangnya ikuti langkah di bawah ini :
  1. Login ke blogger
  2. Masuk ke Tata Letak ==>> Edit HTML 
  3. Seperti Biasa jangan lupa di backup y Template sobat
  4. cari kode </head> lalu taruh kode di bawah ini tepat di atasnya


    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>


    Catatan : "apabila kode di atas sudah punya atau sudah ada dalam template sobat tidak usah di taruh lagi"

  5. Setelah itu taruh kode di bawah ini tepat di bawah kode yang tadi saya berikan


    <!-- Javascript div#slide-holder  -->

    <script type='text/javascript'>var _siteRoot=&#39;index.html&#39;,_root=&#39;index.html&#39;;</script>

    <script src='http://oketrik.googlecode.com/files/scriptsSlider.js' type='text/javascript'/>

    <script type='text/javascript'>
    if(!window.slider) var slider={};slider.data=[{&quot;id&quot;:&quot;slide-img-1&quot;,&quot;client&quot;:&quot;Blog Oketrik&quot;,&quot;desc&quot;:&quot;Kumpulan Trik Dan Informasi lengkap&quot;},

    {&quot;id&quot;:&quot;slide-img-2&quot;,&quot;client&quot;:&quot;Blogger Hacks&quot;,&quot;desc&quot;:&quot;kumpulan Blogger Hacks lengkap&quot;},

    {&quot;id&quot;:&quot;slide-img-3&quot;,&quot;client&quot;:&quot;Informasi Terupdate &quot;,&quot;desc&quot;:&quot;Informasi yang Di Update Hampir setiap Hari&quot;},

    {&quot;id&quot;:&quot;slide-img-4&quot;,&quot;client&quot;:&quot;Trik Hacking&quot;,&quot;desc&quot;:&quot;Kumpulan Trik-trik untuk menghacks&quot;},

    {&quot;id&quot;:&quot;slide-img-5&quot;,&quot;client&quot;:&quot;Trik Via Oketrik&quot;,&quot;desc&quot;:&quot;Trik original dari oketrik&quot;}];

    </script>

    <!-- End Javascript div#slide-holder  -->


    Catatan : "code yang berwarna Hijau bercetak tebal bisa sobat ganti dengan Kebutuhan"

  6. Setelah itu cari kode ]]></b:skin> dan taruh kode CSS di bawah ini tepat di atasnya


    /* CSS div#slide-holder */

    div#headerSlider div.wrapSlider{
    width:660px;
    height:300px;
    background:#fff;
    border: 4px solid #333;
    margin: 0 auto;
    }

    div#headerSlider div#slide-holder{
    z-index:40;
    height:300px;
    position:absolute;
    }
    div#headerSlider div#slide-holder div#slide-runner{
    top:5px;
    left:5px;
    width:650px;
    height:290px;
    overflow:hidden;
    position:absolute;
    }

    div#headerSlider div#slide-holder img{
    margin:0;
    display:none;
    position:absolute;
    }

    div#headerSlider div#slide-holder div#slide-controls{
    left:0;
    bottom:238px;
    width:650px;
    height:50px;
    display:none;
    position:absolute;
    background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SpUhSXvvaFI/AAAAAAAACK8/eYHketamvoc/slide-bg.png) repeat scroll 0 0;
    }

    div#headerSlider div#slide-holder div#slide-controls p.text{
    float:left;
    color:#fff;
    display:inline;
    font-size:10px;
    line-height:16px;
    margin:15px 0 0 20px;
    text-transform:uppercase;
    }

    div#headerSlider div#slide-holder div#slide-controls p#slide-nav{
    float:right;
    height:24px;
    display:inline;
    margin:11px 15px 0 0;
    }

    div#headerSlider div#slide-holder div#slide-controls p#slide-nav a{
    float:left;
    width:24px;
    height:24px;
    display:inline;
    font-size:11px;
    margin:0 5px 0 0;
    line-height:24px;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
    background-position:0 0;
    background-repeat:no-repeat;
    color:#fff;
    }

    div#headerSlider div#slide-holder div#slide-controls p#slide-nav a.on{
    background-position:0 -24px;
    }

    div#headerSlider div#slide-holder div#slide-controls p#slide-nav a{
    background-image:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SpPogDg6qzI/AAAAAAAACKU/DhQZk2y7GtE/s800/silde-navSlider.png);
    }


    Catatan :"code yang berwarna Hijau bercetak tebal bisa sobat ganti dengan Kebutuhan"

  7. Setelah itu bisa sobat simpan tapi ini belum selesai, ayo kita lanjutkan ke tahap selanjutnya
  8. Masuk ke Element Halaman dan tambahkan sebuah Gadget
  9. Pilih yang HTML/JavaScript
  10. masukan kode di bawah ini ke dalamnya


    <!--HTML div#slide-holder-->

    <div id="headerSlider"><div class="wrapSlider">
    <div id="slide-holder">
    <div id="slide-runner">
    <a href="http://oketrik.blogspot.com/"><img id="slide-img-1" alt="Kumpulan Trik" src="http://sites.google.com/site/oketrik/oketrik/1.jpg?attredirects=0" class="slide"/></a>

    <a href="http://oketrik.blogspot.com/search/label/Blogger%20Hack"><img id="slide-img-2" alt="Kumpulan Blogger Hacks" src="http://sites.google.com/site/oketrik/oketrik/2.jpg?attredirects=0" class="slide"/></a>

    <a href="http://oketrik.blogspot.com/search/label/Informasi"><img id="slide-img-3" alt="Free Blogger Template" src="http://sites.google.com/site/oketrik/oketrik/3.jpg?attredirects=0" class="slide"/></a>

    <a href="http://oketrik.blogspot.com/search/label/Trik%20Hacking"><img id="slide-img-4" alt="Kumpulan Trik Meng hack" src="http://sites.google.com/site/oketrik/oketrik/4.jpg?attredirects=0" class="slide"/></a>

    <a href="http://oketrik.blogspot.com/search/label/Trik%20via%20oketrik"><img id="slide-img-5" alt="Trik Original" src="http://sites.google.com/site/oketrik/oketrik/5.jpg?attredirects=0" class="slide"/></a>

    <div id="slide-controls">
    <p id="slide-client" class="text"><strong>post: </strong><span/></span></p>
    <p id="slide-desc" class="text"/>
    <p id="slide-nav"/>
    </p></p></div>
    </div>


    <!--content featured gallery here -->
    </div>

    </div></div>

    <!-- End HTML div#slide-holder -->


    Catatan :"Kode yang berwarna hijau dan bercetak tebal bisa sobat ganti sesuai kebutuhan"

  11. Setelah itu simpan dech dan lihat hasilnya
Nah mudah bukan Memasang Slide Show di Blogger?? dan gimana ada masalah?? kalau ada masalah tinggalkan pesan y di kotak komentar di bawah ini. semoga trik ini bermanfaat bagi kalian semua oiya saya hampir lupa kalau kode ini saya dapatkan dari mas Choen. Sekian dari oketrik Terima kasih.
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

19 Komentar untuk Slide Show di Blogger

ngeri untuk merubahnya, tapi klo ga di coba mana bisa...

aku sudah gabung d blog km, gabung balik yup, oiya trimakasih ilmunya :) www.ropiuddin.co.cc

mantab mantab,,,:)) semangat trus berbagi sob...

Memang saat ini hampa rasanya kalo blog/website tidak dibumbui dengan ajax. Terima kasih atas infonya, akan saya coba nanti.

Kunjungi balik ya blog saya

BACA JUGA CARA MEMBUAT BLOG DOMAIN .COM HANYA 90 RIBUAN >> www.planet-pangandaran.com

keren ..
follow me iia :)

http://cyberkiie.co.cc

gabung balik yoo

.wah, saya udah coba, BERHASILLL...
meskipun masih ad yg ingin saya tanyain (banyak)..

@vos©ot >> tanyakan saja sobat insyallah saya bisa menjawab...

makasih gan.
berhasil :)

bisa bikin jadi terupdate gak gan ?

belum bisa mas untuk saat ini, tapi kedepannya pasti bisa nanti pasti akan saya post disini :)

Kalo mau nambahin cuplikan artikel disamping gambarnya gimana caranya gan..??
Jadi yg geser itu bukan hanya gambarnya aja, tpi separoh gambar trs disampingnya cuplikan teks.
Ditunggu gan.., makasih sebelumnya.

sepertinya saya pernah post apa yang kamu maksud, coba cari disini ya

Visit and follow pleaase.
Fllw my blog = follback
klik yaa!: http://sarahistiqomah.blogspot.com/

gabung balik yo ..
www.hyundaiindo.blogspot.com

Bagus sekali mas slide shownya. Jadi kepengen pasang.
Makasih sharing bagusnya.

Salam kenal dari Direktori Penerjemah Indonesia.

Thanks sudah berbagi infonya, sukses selalu...

wah info yang sangat berarti buat aq,ni yang masih pemula
....