Slide Show di Blogger

Kali 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