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.

Baca Selengkapnya →

Final: 3Dlue V3 Blogger Template

Akhirnya selesai juga, cukup lama memang pembuatannya karena dapat ilmu baru. Ilmu apa tuh? ilmu hitam ya? atau ilmu santet? Jangan berprasangka buruk dulu sob itu ilmu saya dapat dari gunung slamet yang ada di London amerika serikat (#?¿?). Sudah deh jangan ngaco lagi, baik disini saya akan membagikan sebuah template jelek seperti versi sebelumnya (Veris 1 dan Versi 2) yang dimana dari penampilan tidak ada bedanya hanya yang membedakan adalah widget yang terdapat pada versi masing - masing. Setiap versi memiliki ciri khas widget masing - masing.

Namun karena ada kendala dengan koneksi, saya menyatakan bahwa ini adalah template terkahir dari versi 3Dlue tapi bukan berarti saya selesai membuat template, hanya pada template ini saja. Kenapa seperti itu? ada niat sih mau istirahat dulu soalnya blog ini InsyAllah mau ganti baju karena menurut saya baju blog ini sudah usang. Oke jangan panjang lebar deh, kita lihat aja yuk templatenya :

Download Demo



Fitur pada template 3Dlue V3 Blogger Template :

1. Slide Show by labels
2. Slide image by labels
3. fitur lainnya sama dengan versi sebelumnya

Cara menggunakan Slide show by labels pada template 3Dlue V3 Blogger Template

• masuk elemen halaman lalu edit widget featured content slider by image
• Tambahkan nama kategori blog anda didalamnya
• setelah itu simpan

Cara menggunakan Slide image by labels pada template 3Dlue V3 Blogger Template

• Sama seperti pada penerapan slide show by labels edit slide image by labels
• Tambahkan nama kategori blog anda didalamnya
• setelah itu simpan

Mudah mudahan sobat semua pada suka pada template ini. Untuk kedepannya saya tidak akn membuatkan kembali versi 3Dlue. Siap siap dulu blog ini mau ganti baju, ditunggu ya :)

Baca Selengkapnya →

Penerapan Image Slider Carousels

Penggunaan image slider atau pun slide show pada blog atau template tidak bisa dikatakan hal yang tidak penting apalagi pada blog atau wen yang bertemakan Gallery. Namun disamping itu penggunaan Image slide atau pun slider akan menambah berat blog, jadi gunakanlah Slider ini sepentingnya saja.

Demo (KLik)

Pada kesempatan sebelumnya saya juga sudah membagikan tentang slide, diantaranya :

1. Slide Show di Blogger
2. Membuat slide Image dengan CSS3
3. Slider Zinmag Primus
4. Membuat Slideshow Thumbnail
5. Membuat Featured Content Slider

Nah Mungkin itu list Slider atau slide yang ada di blog ini, dari masing - masing slide/slider di atas, bentuk atau jenisnya berbeda-beda, untuk melihat lebih jelasnya silahkan sobat klik satu persatu. Oiya saya baru punya slide/slide baru lagi nih namanya Image Slider Carousels. Coba kita terapkan di template sobat yuk!

1. Login ke Blogger dengan Id Sobat
2. Masuk Ke Rancangan >> Edit HTML
3. masukan kode di bawah ini tepat di atas kode </head>
   
   
   <script src='http://btemplatescripts.googlecode.com/files/slider.js' type='text/javascript'/>
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
   
   <style type='text/css'>
   #mygallery{overflow: hidden;}
   </style>
   
   <script type='text/javascript'>
   stepcarousel.setup({
   galleryid: 'mygallery', //id of carousel DIV
   beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
   panelclass: 'panel', //class of panel DIVs each holding content
   panelbehavior: {speed:500, wraparound:true, persist:true},
   defaultbuttons: {enable: true, moveby: 3, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8SfTM8-YvREA6eAEHWY4gKw1frtnVoQ32H5_cxm-Er0aj0myhi7dNPrYK5si8aFVPdjJQcJ4R8gzdGfEaV8Xv77xXRT01BGx5Zdhth6B7lTNCuYAf5ModO_3az9QnPeKfCt2lUyMeAlI/s400/left.jpg', -48, 0], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis9wmPbuKxNnHq99raRjOFUIVIBs2tVydZxmSFj_6RI1r0NyIU5_-nrjrJAfOt0fAIakQ8YEjVi6B9VlEMrjD_8BJQDmUuLwM2oKgaNqUYI5MSV1Ta-ZlAq3BVuutQtrpH6SkK1ZeCx9o/s400/right.jpg', 0, 0]},
   statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
   contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
   })
   
   
   </script>
   
   
   
   Penjelasan :
   
   • http://btemplatescripts.googlecode.com/files/slider.js >> ini adalah alamat script dari penggunaan Image Slider Carousels, sobat dapat menggantinya
     
     
4. Setelah itu cari kode ]]></b:skin> lalu taruh kode di bawah ini tepat di atasnya
   
   
   #myslides{
   
   background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxR3iAXvtVAcMUKL_FDin63moOs-uOLYH4oGgErl-OAz130xK4-AZgXzZaNLHN9UQ_Km3iShzxnGuKNA7qlGRU5nsJqd08jyPmthsr0P8QoPms0AdOaEupTB7044453b8vy3YcXgeijA/s1600/mslid.jpg) repeat-x;
   width: 650px;
   height:165px;
   margin-bottom:5px;
   }
   
   .stepcarousel{
   position: relative;
   overflow: scroll;
   width: 554px;
   height: 160px;
   margin: 0px 48px 5px 48px;
   
   }
   
   .stepcarousel .belt{
   position: absolute; /*leave this value alone*/
   left: 0;
   top: 0;
   }
   
   .stepcarousel .panel{
   float: left; /*leave this value alone*/
   overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
   margin: 20px 10px ; /*margin around each panel*/
   width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
   background:#0e1829;
   height:120px;
   border:1px solid #1d2c44;
   
   }
   .stepcarousel .panel p{
   text-align: left; /*leave this value alone*/
   overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
   margin: 5px 5px ; /*margin around each panel*/
   
   }
   
   .stepcarousel .panel h2{
   text-align: left; /*leave this value alone*/
   height:20px;
   overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
   margin: 2px 5px ; /*margin around each panel*/
   font-size:16px;
   font-weight:bold;
   text-align:center;
   font-family:Georgia,century gothic,Arial,verdana, sans-serif;
   }
   
   .stepcarousel .panel img{
   float: left; /*leave this value alone*/
   background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
   margin: 5px 5px 5px 5px; /*margin around each panel*/
   padding:0px 0px;
   }
   
   
   Catatan : Nilai dari CSS di atas dapat sobat rubah sesuai keinginan.
   
   
5. Lalu Simpan Template dan mari kita menuju Elemen Halaman
6. Setelah berada Elemen Halaman, Tambahkan sebuah Gadget, untuk letaknya bisa di mana saja tapi saya sarankan di bawah header atau di bawah footer (baca selengkapnya : Menambah Elemen Baru )
7. Setelah itu Pilih yang HTML/Javascript dan masukan kode di bawah ini
   
   
   <div id="myslides">
   <div id="mygallery" class="stepcarousel">
   <div class="belt">
   
   <!-- 1st Template -->
   <div class="panel">
   <a href="http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRvi5KRgJaNGJ4qjLuMmtMJgZFZ5Li_DdBCRsLhuyUO_tRulthg2d1g09CoOFLQDDj66Fle3_krVH8lYFU7UaQwAmuYppyS5MoPeAhjOUcd0AGRBG_CFxeuJ6XzeTZbGK0X4N7PmicLU/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
   </div>
   <!-- end code of 1st -->
   
   <!-- 2nd Template -->
   <div class="panel">
   <a href="http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRvi5KRgJaNGJ4qjLuMmtMJgZFZ5Li_DdBCRsLhuyUO_tRulthg2d1g09CoOFLQDDj66Fle3_krVH8lYFU7UaQwAmuYppyS5MoPeAhjOUcd0AGRBG_CFxeuJ6XzeTZbGK0X4N7PmicLU/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
   </div>
   <!-- end code of 2nd -->
   
   <!-- 3rd Template -->
   <div class="panel">
   <a href="http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRvi5KRgJaNGJ4qjLuMmtMJgZFZ5Li_DdBCRsLhuyUO_tRulthg2d1g09CoOFLQDDj66Fle3_krVH8lYFU7UaQwAmuYppyS5MoPeAhjOUcd0AGRBG_CFxeuJ6XzeTZbGK0X4N7PmicLU/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
   </div>
   <!-- end code of 3rd -->
   
   <!-- 4th Template -->
   <div class="panel">
   <a href="http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRvi5KRgJaNGJ4qjLuMmtMJgZFZ5Li_DdBCRsLhuyUO_tRulthg2d1g09CoOFLQDDj66Fle3_krVH8lYFU7UaQwAmuYppyS5MoPeAhjOUcd0AGRBG_CFxeuJ6XzeTZbGK0X4N7PmicLU/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
   </div>
   <!-- end code of 4th -->
   
   <!-- 5th Template -->
   <div class="panel">
   <a href="http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRvi5KRgJaNGJ4qjLuMmtMJgZFZ5Li_DdBCRsLhuyUO_tRulthg2d1g09CoOFLQDDj66Fle3_krVH8lYFU7UaQwAmuYppyS5MoPeAhjOUcd0AGRBG_CFxeuJ6XzeTZbGK0X4N7PmicLU/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
   </div>
   <!-- end code of 5th -->
   
   <!-- 6th Template -->
   <div class="panel">
   <a href="http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRvi5KRgJaNGJ4qjLuMmtMJgZFZ5Li_DdBCRsLhuyUO_tRulthg2d1g09CoOFLQDDj66Fle3_krVH8lYFU7UaQwAmuYppyS5MoPeAhjOUcd0AGRBG_CFxeuJ6XzeTZbGK0X4N7PmicLU/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
   </div>
   <!-- end code of 6th -->
   
   <!-- 7th Template -->
   <div class="panel">
   <a href="http://oketrik.blogspot.com/2010/07/okemagazine-blogger-template.html" target="blank" title="Okemagazine Blogger Template - oketrik"> <img width="160" alt="Okemagazine Blogger Template - oketrik" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPsxQ4M5z0S-r-kJb7BoBbftqiuQC0yT-b8HUktY19SJ7uiUkDflUMVAheWLBAeg34EJjvWUbPiVpmRjyGYShivhq7xEWLJyxAo_R-fIrTpMXZ-hiIfSkhKv-LnWtbcYWRwqpv1X8KWNs/s400/okemagazinetemplate-oketrik.blogspot.com+-+2010-07-17+-+23-42-48.png" height="110"/> </a>
   </div>
   <!-- end code of 7th -->
   
   <!-- 8th Template -->
   <div class="panel">
   <a href="http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRvi5KRgJaNGJ4qjLuMmtMJgZFZ5Li_DdBCRsLhuyUO_tRulthg2d1g09CoOFLQDDj66Fle3_krVH8lYFU7UaQwAmuYppyS5MoPeAhjOUcd0AGRBG_CFxeuJ6XzeTZbGK0X4N7PmicLU/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
   </div>
   <!-- end code of 8th -->
   
   
   </div></div></div>
   
   
   Penjelasan :
   
   • http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html >> Ini adalah alamat postingan yang sesuai dengan gambar yang di tampilkan, sobat dapat menggantinya dengan alamat postingan yang sesuai dengan gambar
   • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRvi5KRgJaNGJ4qjLuMmtMJgZFZ5Li_DdBCRsLhuyUO_tRulthg2d1g09CoOFLQDDj66Fle3_krVH8lYFU7UaQwAmuYppyS5MoPeAhjOUcd0AGRBG_CFxeuJ6XzeTZbGK0X4N7PmicLU/s400/newtwocolumndenimtemplate.jpg >> ini adalah alamat gambar, sobat dapat menggantinya.
     
     
8. Setelah itu simpan dan lihat hasilnya deh

Penerapan Image Slider Carousels di blogger adalah salah satu tehnik untuk mempercantik blog dan membuat tampilan blog atau web semenarik mungkin agar pengunjung merasa nyaman dan betah di blog sobat. Namun Penerapan Image Slider Carousels di blogger ini juga mempunyai efek terhadapa berat atau kecepatan akses blog sobat. Jadi sekarang hanya sobatlah yang dapat memilih, untuk memasangnya atau tidak. Terima kasih dan Happy Blogging.

Thanks to : http://www.anshuldudeja.com/2009/06/images-slider-ie-carousels-for-blogger.html

Baca Selengkapnya →

3Dlue V2 Blogger Template

Setelah di luncurkannya 3Dlue V2 Blogger Template dan menjanjikan kepada teman blogger untuk meluncurkan versi selanjutnya. Kini saatnya saya menepati janji dengan meluncurkan versi yang bernama sama cuma beda di V1-nya aja yakni 3Dlue V2 Blogger Template. Apa yang membedakan dari versi sebelumnya? cukup banyak fitur yang membedakan dari versi sebelumnya, apa saja? Yuk kita lihat di bawah ini :

Download Demo

Apa saja fitur yang membedakan dari versi sebelumnya?

• Slide Show
• 3 Kolom Footer
• Postingan berkolom
• Subscribe Box

Itulah fitur tambahan dari versi ini, mudah - mudaha anda suka, kalau tidak suka bagaimana? Download saja untuk koleksi . Untuk penerapan fitur tambahan silahkan ikuti langkah - langkah di bawah ini :

Cara menggunakan Slide show pada template 3Dlue V2

1. Masuk pada halaman Edit HTML
2. ganit URL SLIDE POST 1 dengan alamat url postingan anda
3. ganti URL IMAGE POST 1 dengan alamat gambar postingan anda
4. ganit URL SLIDE POST 2 dengan alamat url postingan anda
5. ganti URL IMAGE POST 2 dengan alamat gambar postingan anda
6. ganit URL SLIDE POST 3 dengan alamat url postingan anda
7. ganti URL IMAGE POST 3 dengan alamat gambar postingan anda
8. ganit URL SLIDE POST 4 dengan alamat url postingan anda
9. ganti URL IMAGE POST 4 dengan alamat gambar postingan anda
10. ganit URL SLIDE POST 5 dengan alamat url postingan anda, dan yang terakhir
11. ganti URL IMAGE POST 5 dengan alamat gambar postingan anda

 Instal kotak berlangganan pada template 3Dlue V2

1. masuk pada halama elemen halaman
   
   
2. tambahkan sebuah gadget >> pilih yang HTML/Javascript
   
   
   
3. taruh kode di bawah ini tepat di dalamnya
   
   <center>
   <div class="mbtbar">
   <div class="emailsub">
   <div class="emailicon" style="text-align:left;">get tricks and tips on your email!</div>
   <div class="emailupdatesform">
   <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NAMAFEEDANDA', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Your Email..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Your Email...&#39;;}" onfocus="if (this.value == &#39;Your Email...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form></div>
   <a href="URLFEEDKAMU"><img src="http://feeds.feedburner.com/~fc/NAMAFEEDANDA?bg=111604&fg=aadd27&anim=1&label=listeners" height="26" width="88" style="border:0" alt="Trick and Tips" /></a></div>
   <div class="subicons"><div class="rssicon"><a href="http://www.ALAMATBLOGANDA.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="URLFACEBOOKANDA" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="URLTWITTERANDA" target="_blank" rel="nofollow">Twitter</a></div></div></div></center>
   
   Catatan : teks yang di beri warna harus diganti sesuai teks yang tertera
   
4. klik tombol simpan

Itulah kelebihan 3Dlue V2 Blogger Template dari versi sebelumnya. Oiya kelebihannya di buat menurut saran dari sahabat blogger juga. Nah agar versi selanjutnya lebih baik dari versi ini maka saya berharap anda dapat memberikan kritik dan sarannya.

Baca Selengkapnya →

Menu Matic For Blogger

Perkembangan teknologi web yang semakin maju membuat tampilan - tampilan web zaman sekarang menjadi lebih dinamis dan elegant. Teknologi ini akan terus berkembang dengan sendirinya seiring waktu bergulir. Dalam menjelajahi sebuah web/blog kita memerlukan salah satunya yaitu menu, biasanya kalau di blogspot di sebut dengan menu navigasi, letaknya tepat di bawah header.

Banyak variasi Menu navigasi yang kita temui, dari menu nav yang menggunakan bahasa css, javascript dan yang paling menarik mootools. Mootools baru dengar saya? Mootools dengan javascript hampir sama, sama - sama menggunakan ajax namun untuk perbedaanya saya kurang paham, silahkan cari di mbah google :D.

Setelah jalan - jalan di dunia maya yang tanpa ada batas ini akhirnya saya singgah di web luar dan menemukan Menu Matic For Blogger. Menu Menu Matic For Blogger ini adalah menu navigasi, menu navigasi adalah Menu Matic For Blogger, loh kok di bolak - balik xixixixi. oke langsung aja ke caranya.

1. Pertama Login ke blogger
   
2. masuk Rancangan >> Edit HTML
   
3. cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat diatasnya
   
   #navcontainer{Background:#5c5cff;height:38px;display:block;overflow:hidden}
   #navcontainer .current-cat a{color:#fff;background:#7575FF}
   #nav a,#subMenusContainer a{text-decoration:none;display:block}
   #nav a{margin:0 4px 0 0;float:left;padding:13px 16px;text-transform:uppercase;color:#FFF;font-weight:bold;font-size:12px}
   #subMenusContainer a,#nav li li a{font-size:12px;text-align:left;background-color:#7575FF;padding:8px 26px;color:#fff;border-top:1px dashed #000;border-bottom:1px dashed #000}
   #nav li a:hover,#nav li a:focus,#nav a.mainMenuParentBtnFocused{background:#7575FF;color:#FFF}
   #subMenusContainer a:hover,#subMenusContainer a:focus,#subMenusContainer a.subMenuParentBtnFocused{background-color:#262424;color:#FFF;border-top:1px dashed #7575FF;border-bottom:1px dashed #7575FF}
   .smOW{display:none;position:absolute;overflow:hidden;padding:0 2px;margin:0 0 0 -2px}
   #nav,#nav ul,#nav ol,#subMenusContainer ul,#subMenusContainer ol{padding:0;margin:0;list-style:none;line-height:1em}
   #nav ol,#nav ul,#subMenusContainer ul,#subMenusContainer ol{background:none;left:0}
   #nav li{cursor:pointer;float:left;margin:0;padding:0;height:38px;display:inline}
   #subMenusContainer li{list-style:none}
   #nav{width:950px;margin:0 auto;clear:both;overflow:hidden;font-size:12px;display:block}
   #nav .children{display:none}
   #subMenusContainer{display:block;position:absolute;top:0;left:0;width:100%;height:0;overflow:visible;z-index:1000000000}
   #search{border:1px solid #DFDEDE;height:28px;padding:0;background:#F9F7F7;text-align:right;overflow:hidden}
   #search input{border:0;background:none;color:#3F3F3F}
   #s{width:218px;padding:4px;margin:2px 0 0 0;background:none}
   #topsearch #search{margin-top:4px}
   #topsearch #s{width:220px}
   
   
   
4. lalu cari kembali kode <body> dan tambahkan kode di bawah ini tepat di bawahnya
   
   <script type='text/javascript'>
   window.addEvent(&#39;domready&#39;, function() {
   var myMenu = new MenuMatic();
   });
   </script>
   
   
   
5. cari lagi deh kode </head> dan tambahkan lagi deh kode dibawah ini tepat di atasnya
   
   <script src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools-yui-compressed.js' type='text/javascript'/>
   
   <script type='text/javascript'>
   //<![CDATA[
   
   /**
   * menuMatic
   * @version 0.68.3 (beta)
   * @author Jason J. Jaeger | greengeckodesign.com
   * @copyright 2008 Jason John Jaeger
   * @license MIT-style License
   * Permission is hereby granted, free of charge, to any person obtaining a copy
   * of this software and associated documentation files (the "Software"), to deal
   * in the Software without restriction, including without limitation the rights
   * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
   * copies of the Software, and to permit persons to whom the Software is
   * furnished to do so, subject to the following conditions:
   *
   * The above copyright notice and this permission notice shall be included in
   * all copies or substantial portions of the Software.
   *
   * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
   * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
   * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
   * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
   * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   * THE SOFTWARE.
   **/
   var MenuMatic=new Class({Implements:Options,options:{id:"nav",subMenusContainerId:"subMenusContainer",effect:"slide & fade",duration:600,physics:Fx.Transitions.Pow.easeOut,hideDelay:1000,stretchMainMenu:false,matchWidthMode:false,orientation:"horizontal",direction:{x:"right",y:"down"},tweakInitial:{x:0,y:0},tweakSubsequent:{x:0,y:0},center:false,opacity:95,mmbFocusedClassName:null,mmbClassName:null,killDivider:null,fixHasLayoutBug:false,onHideAllSubMenusNow_begin:(function(){}),onHideAllSubMenusNow_complete:(function(){}),onInit_begin:(function(){}),onInit_complete:(function(){})},hideAllMenusTimeout:null,allSubMenus:[],subMenuZindex:1,initialize:function(B){this.setOptions(B);this.options.onInit_begin();if(this.options.opacity>99){this.options.opacity=99.9}this.options.opacity=this.options.opacity/100;Element.implement({getId:function(){if(!this.id){var E=this.get("tag")+"-"+$time();while($(E)){E=this.get("tag")+"-"+$time()}this.id=E}return this.id}});this.options.direction.x=this.options.direction.x.toLowerCase();this.options.direction.y=this.options.direction.y.toLowerCase();if(this.options.direction.x==="right"){this.options.direction.xInverse="left"}else{if(this.options.direction.x==="left"){this.options.direction.xInverse="right"}}if(this.options.direction.y==="up"){this.options.direction.yInverse="down"}else{if(this.options.direction.y==="down"){this.options.direction.yInverse="up"}}var A=$(this.options.id).getElements("a");A.each(function(F,E){F.store("parentLinks",F.getParent().getParents("li").getFirst("a"));F.store("parentLinks",F.retrieve("parentLinks").erase(F.retrieve("parentLinks").getFirst()));F.store("childMenu",F.getNext("ul")||F.getNext("ol"));theSubMenuType="subsequent";if($(F.getParent("ul")||F.getParent("ol")).id===this.options.id){theSubMenuType="initial"}F.store("subMenuType",theSubMenuType);if(theSubMenuType==="initial"&&$(F.getNext("ul")||F.getNext("ol"))){F.addClass("mainMenuParentBtn")}else{if($(F.getNext("ul")||F.getNext("ol"))){F.addClass("subMenuParentBtn")}}}.bind(this));var D=new Element("div",{id:this.options.subMenusContainerId}).inject($(document.body),"bottom");$(this.options.id).getElements("ul, ol").each(function(F,E){new Element("div",{"class":"smOW"}).inject(D).grab(F)}.bind(this));D.getElements("a").set("tabindex","-1");A.each(function(G,E){if(!G.retrieve("childMenu")){return }G.store("childMenu",G.retrieve("childMenu").getParent("div"));this.allSubMenus.include(G.retrieve("childMenu"));G.store("parentSubMenus",G.retrieve("parentLinks").retrieve("childMenu"));var F=new MenuMaticSubMenu(this.options,this,G)}.bind(this));var C=$(this.options.id).getElements("a").filter(function(F,E){return !F.retrieve("childMenu")});C.each(function(F,E){F.addEvents({mouseenter:function(G){this.hideAllSubMenusNow();if(this.options.mmbClassName&&this.options.mmbFocusedClassName){$(F).retrieve("btnMorph",new Fx.Morph(F,{duration:(this.options.duration/2),transition:this.options.physics,link:"cancel"})).start(this.options.mmbFocusedClassName)}}.bind(this),focus:function(G){this.hideAllSubMenusNow();if(this.options.mmbClassName&&this.options.mmbFocusedClassName){$(F).retrieve("btnMorph",new Fx.Morph(F,{duration:(this.options.duration/2),transition:this.options.physics,link:"cancel"})).start(this.options.mmbFocusedClassName)}}.bind(this),mouseleave:function(G){if(this.options.mmbClassName&&this.options.mmbFocusedClassName){$(F).retrieve("btnMorph",new Fx.Morph(F,{duration:(this.options.duration*5),transition:this.options.physics,link:"cancel"})).start(this.options.mmbClassName)}}.bind(this),blur:function(G){if(this.options.mmbClassName&&this.options.mmbFocusedClassName){$(F).retrieve("btnMorph",new Fx.Morph(F,{duration:(this.options.duration*5),transition:this.options.physics,link:"cancel"})).start(this.options.mmbClassName)}}.bind(this),keydown:function(H){var G=new Event(H);if(H.key==="up"||H.key==="down"||H.key==="left"||H.key==="right"){H.stop()}if(H.key==="left"&&this.options.orientation==="horizontal"||H.key==="up"&&this.options.orientation==="vertical"){if(F.getParent("li").getPrevious("li")){F.getParent("li").getPrevious("li").getFirst("a").focus()}else{F.getParent("li").getParent().getLast("li").getFirst("a").focus()}}else{if(H.key==="right"&&this.options.orientation==="horizontal"||H.key==="down"&&this.options.orientation==="vertical"){if(F.getParent("li").getNext("li")){F.getParent("li").getNext("li").getFirst("a").focus()}else{F.getParent("li").getParent().getFirst("li").getFirst("a").focus()}}}}.bind(this)})},this);this.stretch();this.killDivider();this.center();this.fixHasLayoutBug();this.options.onInit_complete()},fixHasLayoutBug:function(){if(Browser.Engine.trident&&this.options.fixHasLayoutBug){$(this.options.id).getParents().setStyle("zoom",1);$(this.options.id).setStyle("zoom",1);$(this.options.id).getChildren().setStyle("zoom",1);$(this.options.subMenusContainerId).setStyle("zoom",1);$(this.options.subMenusContainerId).getChildren().setStyle("zoom",1)}},center:function(){if(!this.options.center){return }$(this.options.id).setStyles({left:"50%","margin-left":-($(this.options.id).getSize().x/2)})},stretch:function(){if(this.options.stretchMainMenu&&this.options.orientation==="horizontal"){var C=parseFloat($(this.options.id).getCoordinates().width);var D=0;var B=$(this.options.id).getElements("a");B.setStyles({"padding-left":0,"padding-right":0});B.each(function(F,E){D+=F.getSize().x}.bind(this));if(C<D){return }var A=(C-D)/B.length;B.each(function(F,E){F.setStyle("width",F.getSize().x+A)}.bind(this));B.getLast().setStyle("width",B.getLast().getSize().x-1)}},killDivider:function(){if(this.options.killDivider&&this.options.killDivider.toLowerCase()==="first"){$($(this.options.id).getElements("li")[0]).setStyles({background:"none"})}else{if(this.options.killDivider&&this.options.killDivider.toLowerCase()==="last"){$($(this.options.id).getElements("li").getLast()).setStyles({background:"none"})}}},hideAllSubMenusNow:function(){this.options.onHideAllSubMenusNow_begin();$clear(this.hideAllMenusTimeout);$$(this.allSubMenus).fireEvent("hide");this.options.onHideAllSubMenusNow_complete()}});var MenuMaticSubMenu=new Class({Implements:Options,Extends:MenuMatic,options:{onSubMenuInit_begin:(function(A){}),onSubMenuInit_complete:(function(A){}),onMatchWidth_begin:(function(A){}),onMatchWidth_complete:(function(A){}),onHideSubMenu_begin:(function(A){}),onHideSubMenu_complete:(function(A){}),onHideOtherSubMenus_begin:(function(A){}),onHideOtherSubMenus_complete:(function(A){}),onHideAllSubMenus_begin:(function(A){}),onHideAllSubMenus_complete:(function(A){}),onPositionSubMenu_begin:(function(A){}),onPositionSubMenu_complete:(function(A){}),onShowSubMenu_begin:(function(A){}),onShowSubMenu_complete:(function(A){})},root:null,btn:null,hidden:true,myEffect:null,initialize:function(B,A,C){this.setOptions(B);this.root=A;this.btn=C;this.childMenu=this.btn.retrieve("childMenu");this.subMenuType=this.btn.retrieve("subMenuType");this.childMenu=this.btn.retrieve("childMenu");this.parentSubMenus=$$(this.btn.retrieve("parentSubMenus"));this.parentLinks=$$(this.btn.retrieve("parentLinks"));this.parentSubMenu=$(this.parentSubMenus[0]);if(this.parentSubMenu){this.parentSubMenu=this.parentSubMenu.retrieve("class")}this.childMenu.store("class",this);this.btn.store("class",this);this.childMenu.store("status","closed");this.options.onSubMenuInit_begin(this);this.childMenu.addEvent("hide",function(){this.hideSubMenu()}.bind(this));this.childMenu.addEvent("show",function(){this.showSubMenu()}.bind(this));if(this.options.effect){this.myEffect=new Fx.Morph($(this.childMenu).getFirst(),{duration:this.options.duration,transition:this.options.physics,link:"cancel"})}if(this.options.effect==="slide"||this.options.effect==="slide & fade"){if(this.subMenuType=="initial"&&this.options.orientation==="horizontal"){this.childMenu.getFirst().setStyle("margin-top","0")}else{this.childMenu.getFirst().setStyle("margin-left","0")}}else{if(this.options.effect==="fade"||this.options.effect==="slide & fade"){this.childMenu.getFirst().setStyle("opacity",0)}}if(this.options.effect!="fade"&&this.options.effect!="slide & fade"){this.childMenu.getFirst().setStyle("opacity",this.options.opacity)}var D=$(this.childMenu).getElements("a").filter(function(F,E){return !F.retrieve("childMenu")});D.each(function(F,E){$(F).addClass("subMenuBtn");F.addEvents({mouseenter:function(G){this.childMenu.fireEvent("show");this.cancellHideAllSubMenus();this.hideOtherSubMenus()}.bind(this),focus:function(G){this.childMenu.fireEvent("show");this.cancellHideAllSubMenus();this.hideOtherSubMenus()}.bind(this),mouseleave:function(G){this.cancellHideAllSubMenus();this.hideAllSubMenus()}.bind(this),blur:function(G){this.cancellHideAllSubMenus();this.hideAllSubMenus()}.bind(this),keydown:function(H){var G=new Event(H);if(H.key==="up"||H.key==="down"||H.key==="left"||H.key==="right"||H.key==="tab"){H.stop()}if(H.key==="up"){if(F.getParent("li").getPrevious("li")){F.getParent("li").getPrevious("li").getFirst("a").focus()}else{if(this.options.direction.y==="down"){this.btn.focus()}else{if(this.options.direction.y==="up"){F.getParent("li").getParent().getLast("li").getFirst("a").focus()}}}}else{if(H.key==="down"){if(F.getParent("li").getNext("li")){F.getParent("li").getNext("li").getFirst("a").focus()}else{if(this.options.direction.y==="down"){F.getParent("li").getParent().getFirst("li").getFirst("a").focus()}else{if(this.options.direction.y==="up"){this.btn.focus()}}}}else{if(H.key===this.options.direction.xInverse){this.btn.focus()}}}}.bind(this)})},this);$(this.btn).removeClass("subMenuBtn");if(this.subMenuType=="initial"){this.btn.addClass("mainParentBtn")}else{this.btn.addClass("subParentBtn")}$(this.btn).addEvents({mouseenter:function(E){this.cancellHideAllSubMenus();this.hideOtherSubMenus();this.showSubMenu();if(this.subMenuType==="initial"&&this.options.mmbClassName&&this.options.mmbFocusedClassName){$(this.btn).retrieve("btnMorph",new Fx.Morph($(this.btn),{duration:(this.options.duration/2),transition:this.options.physics,link:"cancel"})).start(this.options.mmbFocusedClassName)}}.bind(this),focus:function(E){this.cancellHideAllSubMenus();this.hideOtherSubMenus();this.showSubMenu();if(this.subMenuType==="initial"&&this.options.mmbClassName&&this.options.mmbFocusedClassName){$(this.btn).retrieve("btnMorph",new Fx.Morph($(this.btn),{duration:(this.options.duration/2),transition:this.options.physics,link:"cancel"})).start(this.options.mmbFocusedClassName)}}.bind(this),mouseleave:function(E){this.cancellHideAllSubMenus();this.hideAllSubMenus()}.bind(this),blur:function(E){this.cancellHideAllSubMenus();this.hideAllSubMenus()}.bind(this),keydown:function(E){E=new Event(E);if(E.key==="up"||E.key==="down"||E.key==="left"||E.key==="right"){E.stop()}if(!this.parentSubMenu){if(this.options.orientation==="horizontal"&&E.key===this.options.direction.y||this.options.orientation==="vertical"&&E.key===this.options.direction.x){if(this.options.direction.y==="down"){this.childMenu.getFirst().getFirst("li").getFirst("a").focus()}else{if(this.options.direction.y==="up"){this.childMenu.getFirst().getLast("li").getFirst("a").focus()}}}else{if(this.options.orientation==="horizontal"&&E.key==="left"||this.options.orientation==="vertical"&&E.key===this.options.direction.yInverse){if(this.btn.getParent().getPrevious()){this.btn.getParent().getPrevious().getFirst().focus()}else{this.btn.getParent().getParent().getLast().getFirst().focus()}}else{if(this.options.orientation==="horizontal"&&E.key==="right"||this.options.orientation==="vertical"&&E.key===this.options.direction.y){if(this.btn.getParent().getNext()){this.btn.getParent().getNext().getFirst().focus()}else{this.btn.getParent().getParent().getFirst().getFirst().focus()}}}}}else{if(E.key==="tab"){E.stop()}if(E.key==="up"){if(this.btn.getParent("li").getPrevious("li")){this.btn.getParent("li").getPrevious("li").getFirst("a").focus()}else{if(this.options.direction.y==="down"){this.parentSubMenu.btn.focus()}else{if(this.options.direction.y==="up"){this.btn.getParent("li").getParent().getLast("li").getFirst("a").focus()}}}}else{if(E.key==="down"){if(this.btn.getParent("li").getNext("li")){this.btn.getParent("li").getNext("li").getFirst("a").focus()}else{if(this.options.direction.y==="down"){this.btn.getParent("li").getParent().getFirst("li").getFirst("a").focus()}else{if(this.options.direction.y==="up"){this.parentSubMenu.btn.focus()}}}}else{if(E.key===this.options.direction.xInverse){this.parentSubMenu.btn.focus()}else{if(E.key===this.options.direction.x){if(this.options.direction.y==="down"){this.childMenu.getFirst().getFirst("li").getFirst("a").focus()}else{if(this.options.direction.y==="up"){}}}}}}}}.bind(this)});this.options.onSubMenuInit_complete(this)},matchWidth:function(){if(this.widthMatched||!this.options.matchWidthMode||this.subMenuType==="subsequent"){return }this.options.onMatchWidth_begin(this);var A=this.btn.getCoordinates().width;$(this.childMenu).getElements("a").each(function(E,D){var C=parseFloat($(this.childMenu).getFirst().getStyle("border-left-width"))+parseFloat($(this.childMenu).getFirst().getStyle("border-right-width"));var B=parseFloat(E.getStyle("padding-left"))+parseFloat(E.getStyle("padding-right"));var F=C+B;if(A>E.getCoordinates().width){E.setStyle("width",A-F);E.setStyle("margin-right",-C)}}.bind(this));this.width=this.childMenu.getFirst().getCoordinates().width;this.widthMatched=true;this.options.onMatchWidth_complete(this)},hideSubMenu:function(){if(this.childMenu.retrieve("status")==="closed"){return }this.options.onHideSubMenu_begin(this);if(this.subMenuType=="initial"){if(this.options.mmbClassName&&this.options.mmbFocusedClassName){$(this.btn).retrieve("btnMorph",new Fx.Morph($(this.btn),{duration:(this.options.duration),transition:this.options.physics,link:"cancel"})).start(this.options.mmbClassName).chain(function(){$(this.btn).removeClass("mainMenuParentBtnFocused");$(this.btn).addClass("mainMenuParentBtn")}.bind(this))}else{$(this.btn).removeClass("mainMenuParentBtnFocused");$(this.btn).addClass("mainMenuParentBtn")}}else{$(this.btn).removeClass("subMenuParentBtnFocused");$(this.btn).addClass("subMenuParentBtn")}this.childMenu.setStyle("z-index",1);if(this.options.effect&&this.options.effect.toLowerCase()==="slide"){if(this.subMenuType=="initial"&&this.options.orientation==="horizontal"&&this.options.direction.y==="down"){this.myEffect.start({"margin-top":-this.height}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.subMenuType=="initial"&&this.options.orientation==="horizontal"&&this.options.direction.y==="up"){this.myEffect.start({"margin-top":this.height}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.options.direction.x==="right"){this.myEffect.start({"margin-left":-this.width}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.options.direction.x==="left"){this.myEffect.start({"margin-left":this.width}).chain(function(){this.childMenu.style.display="none"}.bind(this))}}}}}else{if(this.options.effect=="fade"){this.myEffect.start({opacity:0}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.options.effect=="slide & fade"){if(this.subMenuType=="initial"&&this.options.orientation==="horizontal"&&this.options.direction.y==="down"){this.myEffect.start({"margin-top":-this.height,opacity:0}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.subMenuType=="initial"&&this.options.orientation==="horizontal"&&this.options.direction.y==="up"){this.myEffect.start({"margin-top":this.height,opacity:0}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.options.direction.x==="right"){this.myEffect.start({"margin-left":-this.width,opacity:0}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.options.direction.x==="left"){this.myEffect.start({"margin-left":this.width,opacity:0}).chain(function(){this.childMenu.style.display="none"}.bind(this))}}}}}else{this.childMenu.style.display="none"}}}this.childMenu.store("status","closed");this.options.onHideSubMenu_complete(this)},hideOtherSubMenus:function(){this.options.onHideOtherSubMenus_begin(this);if(!this.btn.retrieve("otherSubMenus")){this.btn.store("otherSubMenus",$$(this.root.allSubMenus.filter(function(A){return !this.btn.retrieve("parentSubMenus").contains(A)&&A!=this.childMenu}.bind(this))))}this.parentSubMenus.fireEvent("show");this.btn.retrieve("otherSubMenus").fireEvent("hide");this.options.onHideOtherSubMenus_complete(this)},hideAllSubMenus:function(){this.options.onHideAllSubMenus_begin(this);$clear(this.root.hideAllMenusTimeout);this.root.hideAllMenusTimeout=(function(){$clear(this.hideAllMenusTimeout);$$(this.root.allSubMenus).fireEvent("hide")}).bind(this).delay(this.options.hideDelay);this.options.onHideAllSubMenus_complete(this)},cancellHideAllSubMenus:function(){$clear(this.root.hideAllMenusTimeout)},showSubMenu:function(A){if(this.childMenu.retrieve("status")==="open"){return }this.options.onShowSubMenu_begin(this);if(this.subMenuType=="initial"){$(this.btn).removeClass("mainMenuParentBtn");$(this.btn).addClass("mainMenuParentBtnFocused")}else{$(this.btn).removeClass("subMenuParentBtn");$(this.btn).addClass("subMenuParentBtnFocused")}this.root.subMenuZindex++;this.childMenu.setStyles({display:"block",visibility:"hidden","z-index":this.root.subMenuZindex});if(!this.width||!this.height){this.width=this.childMenu.getFirst().getCoordinates().width;this.height=this.childMenu.getFirst().getCoordinates().height;this.childMenu.setStyle("height",this.height,"border");if(this.options.effect==="slide"||this.options.effect==="slide & fade"){if(this.subMenuType=="initial"&&this.options.orientation==="horizontal"){this.childMenu.getFirst().setStyle("margin-top","0");if(this.options.direction.y==="down"){this.myEffect.set({"margin-top":-this.height})}else{if(this.options.direction.y==="up"){this.myEffect.set({"margin-top":this.height})}}}else{if(this.options.direction.x==="left"){this.myEffect.set({"margin-left":this.width})}else{this.myEffect.set({"margin-left":-this.width})}}}}this.matchWidth();this.positionSubMenu();if(this.options.effect==="slide"){this.childMenu.setStyles({display:"block",visibility:"visible"});if(this.subMenuType==="initial"&&this.options.orientation==="horizontal"){if(A){this.myEffect.set({"margin-top":0}).chain(function(){this.showSubMenuComplete()}.bind(this))}else{this.myEffect.start({"margin-top":0}).chain(function(){this.showSubMenuComplete()}.bind(this))}}else{if(A){this.myEffect.set({"margin-left":0}).chain(function(){this.showSubMenuComplete()}.bind(this))}else{this.myEffect.start({"margin-left":0}).chain(function(){this.showSubMenuComplete()}.bind(this))}}}else{if(this.options.effect==="fade"){if(A){this.myEffect.set({opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}else{this.myEffect.start({opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}}else{if(this.options.effect=="slide & fade"){this.childMenu.setStyles({display:"block",visibility:"visible"});this.childMenu.getFirst().setStyles({left:0});if(this.subMenuType==="initial"&&this.options.orientation==="horizontal"){if(A){this.myEffect.set({"margin-top":0,opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}else{this.myEffect.start({"margin-top":0,opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}}else{if(A){if(this.options.direction.x==="right"){this.myEffect.set({"margin-left":0,opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}else{if(this.options.direction.x==="left"){this.myEffect.set({"margin-left":0,opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}}}else{if(this.options.direction.x==="right"){this.myEffect.set({"margin-left":-this.width,opacity:this.options.opacity});this.myEffect.start({"margin-left":0,opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}else{if(this.options.direction.x==="left"){this.myEffect.start({"margin-left":0,opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}}}}}else{this.childMenu.setStyles({display:"block",visibility:"visible"}).chain(function(){this.showSubMenuComplete(this)}.bind(this))}}}this.childMenu.store("status","open")},showSubMenuComplete:function(){this.options.onShowSubMenu_complete(this)},positionSubMenu:function(){this.options.onPositionSubMenu_begin(this);this.childMenu.setStyle("width",this.width);this.childMenu.getFirst().setStyle("width",this.width);if(this.subMenuType==="subsequent"){if(this.parentSubMenu&&this.options.direction.x!=this.parentSubMenu.options.direction.x){if(this.parentSubMenu.options.direction.x==="left"&&this.options.effect&&this.options.effect.contains("slide")){this.myEffect.set({"margin-left":this.width})}}this.options.direction.x=this.parentSubMenu.options.direction.x;this.options.direction.xInverse=this.parentSubMenu.options.direction.xInverse;this.options.direction.y=this.parentSubMenu.options.direction.y;this.options.direction.yInverse=this.parentSubMenu.options.direction.yInverse}var C;var A;if(this.subMenuType=="initial"){if(this.options.direction.y==="up"){if(this.options.orientation==="vertical"){C=this.btn.getCoordinates().bottom-this.height+this.options.tweakInitial.y}else{C=this.btn.getCoordinates().top-this.height+this.options.tweakInitial.y}this.childMenu.style.top=C+"px"}else{if(this.options.orientation=="horizontal"){this.childMenu.style.top=this.btn.getCoordinates().bottom+this.options.tweakInitial.y+"px"}else{if(this.options.orientation=="vertical"){C=this.btn.getPosition().y+this.options.tweakInitial.y;if((C+this.childMenu.getSize().y)>=$(document.body).getScrollSize().y){A=(C+this.childMenu.getSize().y)-$(document.body).getScrollSize().y;C=C-A-20}this.childMenu.style.top=C+"px"}}}if(this.options.orientation=="horizontal"){this.childMenu.style.left=this.btn.getPosition().x+this.options.tweakInitial.x+"px"}else{if(this.options.direction.x=="left"){this.childMenu.style.left=this.btn.getPosition().x-this.childMenu.getCoordinates().width+this.options.tweakInitial.x+"px"}else{if(this.options.direction.x=="right"){this.childMenu.style.left=this.btn.getCoordinates().right+this.options.tweakInitial.x+"px"}}}}else{if(this.subMenuType=="subsequent"){if(this.options.direction.y==="down"){if((this.btn.getCoordinates().top+this.options.tweakSubsequent.y+this.childMenu.getSize().y)>=$(document.body).getScrollSize().y){A=(this.btn.getCoordinates().top+this.options.tweakSubsequent.y+this.childMenu.getSize().y)-$(document.body).getScrollSize().y;this.childMenu.style.top=(this.btn.getCoordinates().top+this.options.tweakSubsequent.y)-A-20+"px"}else{this.childMenu.style.top=this.btn.getCoordinates().top+this.options.tweakSubsequent.y+"px"}}else{if(this.options.direction.y==="up"){if((this.btn.getCoordinates().bottom-this.height+this.options.tweakSubsequent.y)<1){this.options.direction.y="down";this.options.direction.yInverse="up";this.childMenu.style.top=this.btn.getCoordinates().top+this.options.tweakSubsequent.y+"px"}else{this.childMenu.style.top=this.btn.getCoordinates().bottom-this.height+this.options.tweakSubsequent.y+"px"}}}if(this.options.direction.x=="left"){this.childMenu.style.left=this.btn.getCoordinates().left-this.childMenu.getCoordinates().width+this.options.tweakSubsequent.x+"px";if(this.childMenu.getPosition().x<0){this.options.direction.x="right";this.options.direction.xInverse="left";this.childMenu.style.left=this.btn.getPosition().x+this.btn.getCoordinates().width+this.options.tweakSubsequent.x+"px";if(this.options.effect==="slide"||this.options.effect==="slide & fade"){this.myEffect.set({"margin-left":-this.width,opacity:this.options.opacity})}}}else{if(this.options.direction.x=="right"){this.childMenu.style.left=this.btn.getCoordinates().right+this.options.tweakSubsequent.x+"px";var D=this.childMenu.getCoordinates().right;var B=document.getCoordinates().width+window.getScroll().x;if(D>B){this.options.direction.x="left";this.options.direction.xInverse="right";this.childMenu.style.left=this.btn.getCoordinates().left-this.childMenu.getCoordinates().width+this.options.tweakSubsequent.x+"px";if(this.options.effect==="slide"||this.options.effect==="slide & fade"){this.myEffect.set({"margin-left":this.width,opacity:this.options.opacity})}}}}}}this.options.onPositionSubMenu_complete(this)}});
   
   //]]>
   </script>
   
   
   
6. Sekali lagi nih, cari kode
   
   <div id='header-wrapper'> .............. </div>
   
   biasanya di setiap template kodenya berbeda namun intinya adalah header-wrapper, tambahkan kode di bawah ini tepat di bawahnya (kode penutupnya)
   
   
   <div id='navcontainer'>
   <ul id='nav'>
   
   <li class='current-cat'><a expr:href='data:blog.homepageUrl'>Home</a></li>
   
   <li><a href='#'>Text Sobat disini</a>
   <ul class='children'>
   <li><a href='#'>Text submenu Sobat disini</a></li>
   <li><a href='#'>Text submenu Sobat disini</a></li>
   <li><a href='#'>Text submenu Sobat disini</a></li>
   </ul>
   </li>
   
   <li><a href='#'>Text Sobat disini</a>
   <ul class='children'>
   <li><a href='#'>Text submenu Sobat disini</a></li>
   <li><a href='#'>Text submenu Sobat disini</a></li>
   <li><a href='#'>Text submenu Sobat disini</a>
   <ul class='children'>
   <li><a href='#'>Office</a>
   </li>
   </ul>
   </li>
   </ul>
   </li>
   
   <li><a href='#'>Text Sobat disini</a>
   <ul class='children'>
   <li><a href='#'>Text submenu Sobat disini</a>
   <ul class='children'>
   <li><a href='#'>Text submenu1 Sobat disini</a></li>
   <li><a href='#'>Text submenu1 Sobat disini</a></li>
   <li><a href='#'>Text submenu1 Sobat disini</a></li>
   </ul>
   </li>
   <li><a href='#'>Text submenu Sobat disini</a></li>
   <li><a href='#'>Text submenu Sobat disini</a></li>
   <li><a href='#'>Text submenu Sobat disini</a></li>
   </ul>
   </li>
   
   <li><a href='#'>Text Sobat disini</a></li>
   
   <li><a href='#'>Text Sobat disini</a>
   <ul class='children'>
   <li><a href='#'>Text submenu Sobat disini</a></li>
   <li><a href='#'>Text submenu Sobat disini</a></li>
   </ul>
   </li>
   <li style='float:right;padding-right:5px;'><div id='topsearch'>
   <div id='search'>
   <form action='/search' id='searchform' method='get'>
   <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}' onfocus='if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}' type='text' value='Search'/>
   <input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhysBlecJ9wOEClsX8p-6uszTPXfyX7hMnGmtFPAzPXkVzpbj6cFxlHfSNfKMcjHg4_ZubsfWQtKdV8nQXXiLcEPRKKb2GPOZ26fT5m_4Ah6apaiqxVZyDZQIau2cp3CfSh-zIa1mtG6wa6/s1600/search.gif' style='border:0; vertical-align: top;' type='image'/>
   </form>
   </div>
   </div></li>
   </ul>
   </div>
   <div style='clear:both;'/>
   
   
   Catatan :
   
   • Kode yang berwarna merah dapat kamu ganti sesuai kebutuhan
   
7. Nah langkah yang paling terakhir adalah menyimpannya, klik tombol simpan
8. Selesai

Bagaimana teknologi Mootools menurut kamu? kabarnya Mootools lebih ringan loh dari pada javascript, tapi jangan asal percaya aja kalau belum pernah merasakannya, silahkan kamu rasakan kehebatan Mootools tentang Menu Matic For Blogger ini di blog kamu. Sekian dari saya kurang lebihnya mohon maaf. Terima kasih.

Baca Selengkapnya →

Continuous Reel Slideshow For Blogspot

Perkembangan Javascript menjadi fenomenal dikalangan Web. Javascript dapat membuat blog kita menjadi lebih aktif dan menarik untuk di kunjungi. Namun Javasript pun dapat membuat blog kita menjadi berat apabila kita memakainya berlebihan seperti penumpukan penggunaan javascript yang sama pada web/blog kamu. Jadi efesienkan penggunaan javascript pada web/blog kamu.

saya mempunyai trik yang cukup menarik tentang Javascript yang dapat membuat blog kamu menjadi lebih ciamik, apa itu? Continuous Reel Slideshow For Blogspot adalah jenis slide show yang menggunakan ajax dan javascript yang sederhana sehingga apabila kita menggunakan di blog maka pengaruh terhadap loading blog tidak terlalu berat tapi tetap saja apabila kita memakai javascript yang berlibihan. baik, langsung saja kita lihat cara pemasangannya pada blogspot.

1. Kamu harus login terlebih dahulu di Blogspot, tentunya dengan akun kamu sendiri y
   
2. Setelah itu kamu masuk ke halaman Elemen Halaman, bagaimana cara mengaksesnya? Klik Tulisan Rancangan saja dan biasanya sudah berada pada halaman Elemen Halaman
   
   
   
   
3. Lalu, tambahkan sebuah gadget, untuk tempat kamu bisa memilih dimana saja, saran saya tambahkan gadget di sidebar, Pada Windows baru setelah mengklik tulisan Tambah Gadget, kamu pilih yang HTML/Javascript lalu masukan kode di bawah ini
   
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
   
   <style type="text/css">
   
   #myreel{ /*sample CSS for demo*/
   border:15px solid black;
   }
   
   .paginate{
   width: 330px;
   margin-top:5px;
   font:bold 14px Arial;
   text-align:center;
   }
   
   </style>
   
   <script src="http://oketrik.googlecode.com/files/reelslideshow.js" type="text/javascript">
   
   /***********************************************
   * Continuous Reel Slideshow- © Dynamic Drive (www.dynamicdrive.com)
   * This notice MUST stay intact for legal use
   * Visit http://www.dynamicdrive.com/ for this script and 100s more.
   ***********************************************/
   
   </script>
   
   <script type="text/javascript">
   
   var firstreel=new reelslideshow({
   wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
   dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
   imagearray: [
   ["http://i26.tinypic.com/11l7ls0.jpg"], //["image_path", "optional_link", "optional_target"]
   ["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"],
   ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1sK_vaLBhSktxx2W0ijU30DG2vJ-eT8yJmT2K_XAgF7Ykk9vLDYzATI5QPXSLT_VXKvupBGOURDmDnNrQo5kvRcYa0SQxVNkAzLKZCkUWWX9O-Q3dS2yBWXfikLlmLpmpJA-nxUzDK9u1/s1600-r/Header.png"],
   ["http://i31.tinypic.com/119w28m.jpg"] //<--no trailing comma after very last image element!
   ],
   displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true},
   orientation: "h", //Valid values: "h" or "v"
   persist: true, //remember last viewed slide and recall within same session?
   slideduration: 300 //transition duration (milliseconds)
   })
   
   </script>
   <div id="myreel"></div>
   
   <div class="paginate">
   << <a href="javascript:firstreel.navigate('back')" style="margin-right:200px;">Previous</a> <a href="javascript:firstreel.navigate('forth')">Next</a> >>
   </div>
   
   
   
   
   
   
   Catatan :
   
   • Kode yang berwarna merah, menunjukan alamat gambar, jadi kamu bisa menggantinya dengan alamat gambar yang kamu miliki.
     


4. Lalu simpan dan lihat hasilnya

Dengan menambahkan Continuous Reel Slideshow For Blogspot di blog kamu, blog kamu mempunyai daya tarik tersendiri sehingga ada kemungkinan hal ini meningkatkan trafik blog kamu. Mungkin hanya itu saja yang bisa saya sampaikan kurang lebihnya mohon maaf, Terima Kasih.

Baca Selengkapnya →

Membuat Featured Content Slider

Membuat Featured Content Slider. Ini adalah salah satu widget yang keren dan bagus buat blog anda. Dengan adanya widget ini blog sobat terlihat lebih profesional dari sebelumnya. Namun widget ini akan membuat blog sobat berat karena penggunaan javascript yang banyak dan panjang banget. Widget ini saya ambil dari template buatan Anshul yaitu Newzmag Blogger Template dan untuk melihat demonya sobat bisa lihat di sini letaknya di atas elemen post. Sekarang kita lihat cara pemasangannya yuk!

1. Login ke blogger
2. masuk ke Tat Letak => Edit HTML
3. cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat di atasnya
   
   /* Features */
   #featured {height: 250px; overflow: hidden; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR5yE4HPZsfag0Lt3U3NY9RhSJn2oWV8H79YS5EsHUZPDXuEtL9PE4uubNr3e2RYRu3ij3qEb-WtOwK77-T2KKFA2RXGe5RljpPzyN0ulcRSQYZ19Mo6IM909nZWKOaxsi-ynVT3qUm7c/s800/featured-bg.gif') no-repeat top center; clear: both; font-size: 0.85em; margin-bottom: 30px;}
   #featured .post {padding: 20px;}
   #featured .post .featured-thumb {background: url() no-repeat center; float: left; border: 5px solid #999; overflow: hidden; height: 120px; width: 200px; margin-right: 15px;}
   #featured .post .featured-thumb img {width: 200px;height:130px;}
   #featured .post .featured-text {padding-bottom: 10px;}
   #featured .post .featured-title {font: normal 1.9em Georgia, Times, Serif; line-height: 1.1em;}
   #featured .post .featured-meta {color: #999; clear: both; padding: 10px 0px; overflow: hidden; font-size: 0.9em;}
   #featured .post .featured-read {display: block; float: right; background: #f80; width: 80px; color: #fff !important; padding: 5px 0px; text-align: center;}
   
   
4. Setelah itu sobat cari kode </head> lalu tambah lagi kode di bawah ini tepat di atasnya juga (catatan :kalau sudah mempunyai kode di bawah ini tidak usah di pasang lagi)
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
   
   
5. Setelah itu tambahkan kode dibawah ini tepat di bawah kode di atas
   
   
   <!-- Featured Gallery script -->
   
   <script type='text/javascript'>
   //<![CDATA[
   /*
   * jQuery Cycle Plugin (with Transition Definitions)
   * Examples and documentation at: http://jquery.malsup.com/cycle/
   * Copyright (c) 2007-2009 M. Alsup
   * Version: 2.63 (17-MAR-2009)
   * Dual licensed under the MIT and GPL licenses:
   * http://www.opensource.org/licenses/mit-license.php
   * http://www.gnu.org/licenses/gpl.html
   * Requires: jQuery v1.2.6 or later
   *
   * Originally based on the work of:
   * 1) Matt Oakes
   * 2) Torsten Baldes (http://medienfreunde.com/lab/innerfade/)
   * 3) Benjamin Sterling (http://www.benjaminsterling.com/experiments/jqShuffle/)
   */
   ;(function($){var ver="2.63";if($.support==undefined){$.support={opacity:!($.browser.msie)};}function log(){if(window.console&&window.console.log){window.console.log("[cycle] "+Array.prototype.join.call(arguments," "));}}$.fn.cycle=function(options,arg2){var o={s:this.selector,c:this.context};if(this.length==0&&options!="stop"){if(!$.isReady&&o.s){log("DOM not ready, queuing slideshow");$(function(){$(o.s,o.c).cycle(options,arg2);});return this;}log("terminating; zero elements found by selector"+($.isReady?"":" (DOM not ready)"));return this;}return this.each(function(){options=handleArguments(this,options,arg2);if(options===false){return;}if(this.cycleTimeout){clearTimeout(this.cycleTimeout);}this.cycleTimeout=this.cyclePause=0;var $cont=$(this);var $slides=options.slideExpr?$(options.slideExpr,this):$cont.children();var els=$slides.get();if(els.length<2){log("terminating; too few slides: "+els.length);return;}var opts=buildOptions($cont,$slides,els,options,o);if(opts===false){return;}if(opts.timeout||opts.continuous){this.cycleTimeout=setTimeout(function(){go(els,opts,0,!opts.rev);},opts.continuous?10:opts.timeout+(opts.delay||0));}});};function handleArguments(cont,options,arg2){if(cont.cycleStop==undefined){cont.cycleStop=0;}if(options===undefined||options===null){options={};}if(options.constructor==String){switch(options){case"stop":cont.cycleStop++;if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);}cont.cycleTimeout=0;$(cont).removeData("cycle.opts");return false;case"pause":cont.cyclePause=1;return false;case"resume":cont.cyclePause=0;if(arg2===true){options=$(cont).data("cycle.opts");if(!options){log("options not found, can not resume");return false;}if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);cont.cycleTimeout=0;}go(options.elements,options,1,1);}return false;default:options={fx:options};}}else{if(options.constructor==Number){var num=options;options=$(cont).data("cycle.opts");if(!options){log("options not found, can not advance slide");return false;}if(num<0||num>=options.elements.length){log("invalid slide index: "+num);return false;}options.nextSlide=num;if(cont.cycleTimeout){clearTimeout(this.cycleTimeout);cont.cycleTimeout=0;}if(typeof arg2=="string"){options.oneTimeFx=arg2;}go(options.elements,options,1,num>=options.currSlide);return false;}}return options;}function removeFilter(el,opts){if(!$.support.opacity&&opts.cleartype&&el.style.filter){try{el.style.removeAttribute("filter");}catch(smother){}}}function buildOptions($cont,$slides,els,options,o){var opts=$.extend({},$.fn.cycle.defaults,options||{},$.metadata?$cont.metadata():$.meta?$cont.data():{});if(opts.autostop){opts.countdown=opts.autostopCount||els.length;}var cont=$cont[0];$cont.data("cycle.opts",opts);opts.$cont=$cont;opts.stopCount=cont.cycleStop;opts.elements=els;opts.before=opts.before?[opts.before]:[];opts.after=opts.after?[opts.after]:[];opts.after.unshift(function(){opts.busy=0;});if(!$.support.opacity&&opts.cleartype){opts.after.push(function(){removeFilter(this,opts);});}if(opts.continuous){opts.after.push(function(){go(els,opts,0,!opts.rev);});}saveOriginalOpts(opts);if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($slides);}if($cont.css("position")=="static"){$cont.css("position","relative");}if(opts.width){$cont.width(opts.width);}if(opts.height&&opts.height!="auto"){$cont.height(opts.height);}if(opts.startingSlide){opts.startingSlide=parseInt(opts.startingSlide);}if(opts.random){opts.randomMap=[];for(var i=0;i<els.length;i++){opts.randomMap.push(i);}opts.randomMap.sort(function(a,b){return Math.random()-0.5;});opts.randomIndex=0;opts.startingSlide=opts.randomMap[0];}else{if(opts.startingSlide>=els.length){opts.startingSlide=0;}}opts.currSlide=opts.startingSlide=opts.startingSlide||0;var first=opts.startingSlide;$slides.css({position:"absolute",top:0,left:0}).hide().each(function(i){var z=first?i>=first?els.length-(i-first):first-i:els.length-i;$(this).css("z-index",z);});$(els[first]).css("opacity",1).show();removeFilter(els[first],opts);if(opts.fit&&opts.width){$slides.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}var reshape=opts.containerResize&&!$cont.innerHeight();if(reshape){var maxw=0,maxh=0;for(var i=0;i<els.length;i++){var $e=$(els[i]),e=$e[0],w=$e.outerWidth(),h=$e.outerHeight();if(!w){w=e.offsetWidth;}if(!h){h=e.offsetHeight;}maxw=w>maxw?w:maxw;maxh=h>maxh?h:maxh;}if(maxw>0&&maxh>0){$cont.css({width:maxw+"px",height:maxh+"px"});}}if(opts.pause){$cont.hover(function(){this.cyclePause++;},function(){this.cyclePause--;});}if(supportMultiTransitions(opts)===false){return false;}if(!opts.multiFx){var init=$.fn.cycle.transitions[opts.fx];if($.isFunction(init)){init($cont,$slides,opts);}else{if(opts.fx!="custom"&&!opts.multiFx){log("unknown transition: "+opts.fx,"; slideshow terminating");return false;}}}var requeue=false;options.requeueAttempts=options.requeueAttempts||0;$slides.each(function(){var $el=$(this);this.cycleH=(opts.fit&&opts.height)?opts.height:$el.height();this.cycleW=(opts.fit&&opts.width)?opts.width:$el.width();if($el.is("img")){var loadingIE=($.browser.msie&&this.cycleW==28&&this.cycleH==30&&!this.complete);var loadingOp=($.browser.opera&&this.cycleW==42&&this.cycleH==19&&!this.complete);var loadingOther=(this.cycleH==0&&this.cycleW==0&&!this.complete);if(loadingIE||loadingOp||loadingOther){if(o.s&&opts.requeueOnImageNotLoaded&&++options.requeueAttempts<100){log(options.requeueAttempts," - img slide not loaded, requeuing slideshow: ",this.src,this.cycleW,this.cycleH);setTimeout(function(){$(o.s,o.c).cycle(options);},opts.requeueTimeout);requeue=true;return false;}else{log("could not determine size of image: "+this.src,this.cycleW,this.cycleH);}}}return true;});if(requeue){return false;}opts.cssBefore=opts.cssBefore||{};opts.animIn=opts.animIn||{};opts.animOut=opts.animOut||{};$slides.not(":eq("+first+")").css(opts.cssBefore);if(opts.cssFirst){$($slides[first]).css(opts.cssFirst);}if(opts.timeout){opts.timeout=parseInt(opts.timeout);if(opts.speed.constructor==String){opts.speed=$.fx.speeds[opts.speed]||parseInt(opts.speed);}if(!opts.sync){opts.speed=opts.speed/2;}while((opts.timeout-opts.speed)<250){opts.timeout+=opts.speed;}}if(opts.easing){opts.easeIn=opts.easeOut=opts.easing;}if(!opts.speedIn){opts.speedIn=opts.speed;}if(!opts.speedOut){opts.speedOut=opts.speed;}opts.slideCount=els.length;opts.currSlide=opts.lastSlide=first;if(opts.random){opts.nextSlide=opts.currSlide;if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{opts.nextSlide=opts.startingSlide>=(els.length-1)?0:opts.startingSlide+1;}var e0=$slides[first];if(opts.before.length){opts.before[0].apply(e0,[e0,e0,opts,true]);}if(opts.after.length>1){opts.after[1].apply(e0,[e0,e0,opts,true]);}if(opts.next){$(opts.next).click(function(){return advance(opts,opts.rev?-1:1);});}if(opts.prev){$(opts.prev).click(function(){return advance(opts,opts.rev?1:-1);});}if(opts.pager){buildPager(els,opts);}exposeAddSlide(opts,els);return opts;}function saveOriginalOpts(opts){opts.original={before:[],after:[]};opts.original.cssBefore=$.extend({},opts.cssBefore);opts.original.cssAfter=$.extend({},opts.cssAfter);opts.original.animIn=$.extend({},opts.animIn);opts.original.animOut=$.extend({},opts.animOut);$.each(opts.before,function(){opts.original.before.push(this);});$.each(opts.after,function(){opts.original.after.push(this);});}function supportMultiTransitions(opts){var txs=$.fn.cycle.transitions;if(opts.fx.indexOf(",")>0){opts.multiFx=true;opts.fxs=opts.fx.replace(/\s*/g,"").split(",");for(var i=0;i<opts.fxs.length;i++){var fx=opts.fxs[i];var tx=txs[fx];if(!tx||!txs.hasOwnProperty(fx)||!$.isFunction(tx)){log("discarding unknown transition: ",fx);opts.fxs.splice(i,1);i--;}}if(!opts.fxs.length){log("No valid transitions named; slideshow terminating.");return false;}}else{if(opts.fx=="all"){opts.multiFx=true;opts.fxs=[];for(p in txs){var tx=txs[p];if(txs.hasOwnProperty(p)&&$.isFunction(tx)){opts.fxs.push(p);}}}}if(opts.multiFx&&opts.randomizeEffects){var r1=Math.floor(Math.random()*20)+30;for(var i=0;i<r1;i++){var r2=Math.floor(Math.random()*opts.fxs.length);opts.fxs.push(opts.fxs.splice(r2,1)[0]);}log("randomized fx sequence: ",opts.fxs);}return true;}function exposeAddSlide(opts,els){opts.addSlide=function(newSlide,prepend){var $s=$(newSlide),s=$s[0];if(!opts.autostopCount){opts.countdown++;}els[prepend?"unshift":"push"](s);if(opts.els){opts.els[prepend?"unshift":"push"](s);}opts.slideCount=els.length;$s.css("position","absolute");$s[prepend?"prependTo":"appendTo"](opts.$cont);if(prepend){opts.currSlide++;opts.nextSlide++;}if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($s);}if(opts.fit&&opts.width){$s.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}s.cycleH=(opts.fit&&opts.height)?opts.height:$s.height();s.cycleW=(opts.fit&&opts.width)?opts.width:$s.width();$s.css(opts.cssBefore);if(opts.pager){$.fn.cycle.createPagerAnchor(els.length-1,s,$(opts.pager),els,opts);}if($.isFunction(opts.onAddSlide)){opts.onAddSlide($s);}else{$s.hide();}};}$.fn.cycle.resetState=function(opts,fx){fx=fx||opts.fx;opts.before=[];opts.after=[];opts.cssBefore=$.extend({},opts.original.cssBefore);opts.cssAfter=$.extend({},opts.original.cssAfter);opts.animIn=$.extend({},opts.original.animIn);opts.animOut=$.extend({},opts.original.animOut);opts.fxFn=null;$.each(opts.original.before,function(){opts.before.push(this);});$.each(opts.original.after,function(){opts.after.push(this);});var init=$.fn.cycle.transitions[fx];if($.isFunction(init)){init(opts.$cont,$(opts.elements),opts);}};function go(els,opts,manual,fwd){if(manual&&opts.busy&&opts.manualTrump){$(els).stop(true,true);opts.busy=false;}if(opts.busy){return;}var p=opts.$cont[0],curr=els[opts.currSlide],next=els[opts.nextSlide];if(p.cycleStop!=opts.stopCount||p.cycleTimeout===0&&!manual){return;}if(!manual&&!p.cyclePause&&((opts.autostop&&(--opts.countdown<=0))||(opts.nowrap&&!opts.random&&opts.nextSlide<opts.currSlide))){if(opts.end){opts.end(opts);}return;}if(manual||!p.cyclePause){var fx=opts.fx;curr.cycleH=curr.cycleH||$(curr).height();curr.cycleW=curr.cycleW||$(curr).width();next.cycleH=next.cycleH||$(next).height();next.cycleW=next.cycleW||$(next).width();if(opts.multiFx){if(opts.lastFx==undefined||++opts.lastFx>=opts.fxs.length){opts.lastFx=0;}fx=opts.fxs[opts.lastFx];opts.currFx=fx;}if(opts.oneTimeFx){fx=opts.oneTimeFx;opts.oneTimeFx=null;}$.fn.cycle.resetState(opts,fx);if(opts.before.length){$.each(opts.before,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});}var after=function(){$.each(opts.after,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});};if(opts.nextSlide!=opts.currSlide){opts.busy=1;if(opts.fxFn){opts.fxFn(curr,next,opts,after,fwd);}else{if($.isFunction($.fn.cycle[opts.fx])){$.fn.cycle[opts.fx](curr,next,opts,after);}else{$.fn.cycle.custom(curr,next,opts,after,manual&&opts.fastOnEvent);}}}opts.lastSlide=opts.currSlide;if(opts.random){opts.currSlide=opts.nextSlide;if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{var roll=(opts.nextSlide+1)==els.length;opts.nextSlide=roll?0:opts.nextSlide+1;opts.currSlide=roll?els.length-1:opts.nextSlide-1;}if(opts.pager){$.fn.cycle.updateActivePagerLink(opts.pager,opts.currSlide);}}var ms=0;if(opts.timeout&&!opts.continuous){ms=getTimeout(curr,next,opts,fwd);}else{if(opts.continuous&&p.cyclePause){ms=10;}}if(ms>0){p.cycleTimeout=setTimeout(function(){go(els,opts,0,!opts.rev);},ms);}}$.fn.cycle.updateActivePagerLink=function(pager,currSlide){$(pager).find("a").removeClass("activeSlide").filter("a:eq("+currSlide+")").addClass("activeSlide");};function getTimeout(curr,next,opts,fwd){if(opts.timeoutFn){var t=opts.timeoutFn(curr,next,opts,fwd);if(t!==false){return t;}}return opts.timeout;}$.fn.cycle.next=function(opts){advance(opts,opts.rev?-1:1);};$.fn.cycle.prev=function(opts){advance(opts,opts.rev?1:-1);};function advance(opts,val){var els=opts.elements;var p=opts.$cont[0],timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}if(opts.random&&val<0){opts.randomIndex--;if(--opts.randomIndex==-2){opts.randomIndex=els.length-2;}else{if(opts.randomIndex==-1){opts.randomIndex=els.length-1;}}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{if(opts.random){if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{opts.nextSlide=opts.currSlide+val;if(opts.nextSlide<0){if(opts.nowrap){return false;}opts.nextSlide=els.length-1;}else{if(opts.nextSlide>=els.length){if(opts.nowrap){return false;}opts.nextSlide=0;}}}}if($.isFunction(opts.prevNextClick)){opts.prevNextClick(val>0,opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,val>=0);return false;}function buildPager(els,opts){var $p=$(opts.pager);$.each(els,function(i,o){$.fn.cycle.createPagerAnchor(i,o,$p,els,opts);});$.fn.cycle.updateActivePagerLink(opts.pager,opts.startingSlide);}$.fn.cycle.createPagerAnchor=function(i,el,$p,els,opts){var a=($.isFunction(opts.pagerAnchorBuilder))?opts.pagerAnchorBuilder(i,el):'<a href="#">'+(i+1)+"</a>";if(!a){return;}var $a=$(a);if($a.parents("body").length==0){$a.appendTo($p);}$a.bind(opts.pagerEvent,function(){opts.nextSlide=i;var p=opts.$cont[0],timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}if($.isFunction(opts.pagerClick)){opts.pagerClick(opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,opts.currSlide<i);return false;});if(opts.pauseOnPagerHover){$a.hover(function(){opts.$cont[0].cyclePause++;},function(){opts.$cont[0].cyclePause--;});}};$.fn.cycle.hopsFromLast=function(opts,fwd){var hops,l=opts.lastSlide,c=opts.currSlide;if(fwd){hops=c>l?c-l:opts.slideCount-l;}else{hops=c<l?l-c:l+opts.slideCount-c;}return hops;};function clearTypeFix($slides){function hex(s){s=parseInt(s).toString(16);return s.length<2?"0"+s:s;}function getBg(e){for(;e&&e.nodeName.toLowerCase()!="html";e=e.parentNode){var v=$.css(e,"background-color");if(v.indexOf("rgb")>=0){var rgb=v.match(/\d+/g);return"#"+hex(rgb[0])+hex(rgb[1])+hex(rgb[2]);}if(v&&v!="transparent"){return v;}}return"#ffffff";}$slides.each(function(){$(this).css("background-color",getBg(this));});}$.fn.cycle.commonReset=function(curr,next,opts,w,h,rev){$(opts.elements).not(curr).hide();opts.cssBefore.opacity=1;opts.cssBefore.display="block";if(w!==false&&next.cycleW>0){opts.cssBefore.width=next.cycleW;}if(h!==false&&next.cycleH>0){opts.cssBefore.height=next.cycleH;}opts.cssAfter=opts.cssAfter||{};opts.cssAfter.display="none";$(curr).css("zIndex",opts.slideCount+(rev===true?1:0));$(next).css("zIndex",opts.slideCount+(rev===true?0:1));};$.fn.cycle.custom=function(curr,next,opts,cb,speedOverride){var $l=$(curr),$n=$(next);var speedIn=opts.speedIn,speedOut=opts.speedOut,easeIn=opts.easeIn,easeOut=opts.easeOut;$n.css(opts.cssBefore);if(speedOverride){if(typeof speedOverride=="number"){speedIn=speedOut=speedOverride;}else{speedIn=speedOut=1;}easeIn=easeOut=null;}var fn=function(){$n.animate(opts.animIn,speedIn,easeIn,cb);};$l.animate(opts.animOut,speedOut,easeOut,function(){if(opts.cssAfter){$l.css(opts.cssAfter);}if(!opts.sync){fn();}});if(opts.sync){fn();}};$.fn.cycle.transitions={fade:function($cont,$slides,opts){$slides.not(":eq("+opts.currSlide+")").css("opacity",0);opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.opacity=0;});opts.animIn={opacity:1};opts.animOut={opacity:0};opts.cssBefore={top:0,left:0};}};$.fn.cycle.ver=function(){return ver;};$.fn.cycle.defaults={fx:"fade",timeout:4000,timeoutFn:null,continuous:0,speed:1000,speedIn:null,speedOut:null,next:null,prev:null,prevNextClick:null,pager:null,pagerClick:null,pagerEvent:"click",pagerAnchorBuilder:null,before:null,after:null,end:null,easing:null,easeIn:null,easeOut:null,shuffle:null,animIn:null,animOut:null,cssBefore:null,cssAfter:null,fxFn:null,height:"auto",startingSlide:0,sync:1,random:0,fit:0,containerResize:1,pause:0,pauseOnPagerHover:0,autostop:0,autostopCount:0,delay:0,slideExpr:null,cleartype:!$.support.opacity,nowrap:0,fastOnEvent:0,randomizeEffects:1,rev:0,manualTrump:true,requeueOnImageNotLoaded:true,requeueTimeout:250};})(jQuery);
   /*
   * jQuery Cycle Plugin Transition Definitions
   * This script is a plugin for the jQuery Cycle Plugin
   * Examples and documentation at: http://malsup.com/jquery/cycle/
   * Copyright (c) 2007-2008 M. Alsup
   * Version: 2.52
   * Dual licensed under the MIT and GPL licenses:
   * http://www.opensource.org/licenses/mit-license.php
   * http://www.gnu.org/licenses/gpl.html
   */
   ;(function($){$.fn.cycle.transitions.scrollUp=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var h=$cont.height();opts.cssBefore={top:h,left:0};opts.cssFirst={top:0};opts.animIn={top:0};opts.animOut={top:-h};};$.fn.cycle.transitions.scrollDown=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var h=$cont.height();opts.cssFirst={top:0};opts.cssBefore={top:-h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.scrollLeft=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:0-w};};$.fn.cycle.transitions.scrollRight=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:-w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.scrollHorz=function($cont,$slides,opts){$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.left=fwd?(next.cycleW-1):(1-next.cycleW);opts.animOut.left=fwd?-curr.cycleW:curr.cycleW;});opts.cssFirst={left:0};opts.cssBefore={top:0};opts.animIn={left:0};opts.animOut={top:0};};$.fn.cycle.transitions.scrollVert=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.top=fwd?(1-next.cycleH):(next.cycleH-1);opts.animOut.top=fwd?curr.cycleH:-curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0};opts.animIn={top:0};opts.animOut={left:0};};$.fn.cycle.transitions.slideX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;});opts.cssBefore={left:0,top:0,width:0};opts.animIn={width:"show"};opts.animOut={width:0};};$.fn.cycle.transitions.slideY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;});opts.cssBefore={left:0,top:0,height:0};opts.animIn={height:"show"};opts.animOut={height:0};};$.fn.cycle.transitions.shuffle=function($cont,$slides,opts){var w=$cont.css("overflow","visible").width();$slides.css({left:0,top:0});opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);});opts.speed=opts.speed/2;opts.random=0;opts.shuffle=opts.shuffle||{left:-w,top:15};opts.els=[];for(var i=0;i<$slides.length;i++){opts.els.push($slides[i]);}for(var i=0;i<opts.currSlide;i++){opts.els.push(opts.els.shift());}opts.fxFn=function(curr,next,opts,cb,fwd){var $el=fwd?$(curr):$(next);$(next).css(opts.cssBefore);var count=opts.slideCount;$el.animate(opts.shuffle,opts.speedIn,opts.easeIn,function(){var hops=$.fn.cycle.hopsFromLast(opts,fwd);for(var k=0;k<hops;k++){fwd?opts.els.push(opts.els.shift()):opts.els.unshift(opts.els.pop());}if(fwd){for(var i=0,len=opts.els.length;i<len;i++){$(opts.els[i]).css("z-index",len-i+count);}}else{var z=$(curr).css("z-index");$el.css("z-index",parseInt(z)+1+count);}$el.animate({left:0,top:0},opts.speedOut,opts.easeOut,function(){$(fwd?this:curr).hide();if(cb){cb();}});});};opts.cssBefore={display:"block",opacity:1,top:0,left:0};};$.fn.cycle.transitions.turnUp=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=next.cycleH;opts.animIn.height=next.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,height:0};opts.animIn={top:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnDown=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,top:0,height:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnLeft=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=next.cycleW;opts.animIn.width=next.cycleW;});opts.cssBefore={top:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.turnRight=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={top:0,left:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.zoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false,true);opts.cssBefore.top=next.cycleH/2;opts.cssBefore.left=next.cycleW/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};opts.animOut={width:0,height:0,top:curr.cycleH/2,left:curr.cycleW/2};});opts.cssFirst={top:0,left:0};opts.cssBefore={width:0,height:0};};$.fn.cycle.transitions.fadeZoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false);opts.cssBefore.left=next.cycleW/2;opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};});opts.cssBefore={width:0,height:0};opts.animOut={opacity:0};};$.fn.cycle.transitions.blindX=function($cont,$slides,opts){var w=$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.blindY=function($cont,$slides,opts){var h=$cont.css("overflow","hidden").height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.blindZ=function($cont,$slides,opts){var h=$cont.css("overflow","hidden").height();var w=$cont.width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:w};opts.animIn={top:0,left:0};opts.animOut={top:h,left:w};};$.fn.cycle.transitions.growX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=this.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:0};});opts.cssBefore={width:0,top:0};};$.fn.cycle.transitions.growY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=this.cycleH/2;opts.animIn={top:0,height:this.cycleH};opts.animOut={top:0};});opts.cssBefore={height:0,left:0};};$.fn.cycle.transitions.curtainX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true,true);opts.cssBefore.left=next.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:curr.cycleW/2,width:0};});opts.cssBefore={top:0,width:0};};$.fn.cycle.transitions.curtainY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false,true);opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,height:next.cycleH};opts.animOut={top:curr.cycleH/2,height:0};});opts.cssBefore={left:0,height:0};};$.fn.cycle.transitions.cover=function($cont,$slides,opts){var d=opts.direction||"left";var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);if(d=="right"){opts.cssBefore.left=-w;}else{if(d=="up"){opts.cssBefore.top=h;}else{if(d=="down"){opts.cssBefore.top=-h;}else{opts.cssBefore.left=w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.uncover=function($cont,$slides,opts){var d=opts.direction||"left";var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(d=="right"){opts.animOut.left=w;}else{if(d=="up"){opts.animOut.top=-h;}else{if(d=="down"){opts.animOut.top=h;}else{opts.animOut.left=-w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.toss=function($cont,$slides,opts){var w=$cont.css("overflow","visible").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(!opts.animOut.left&&!opts.animOut.top){opts.animOut={left:w*2,top:-h/2,opacity:0};}else{opts.animOut.opacity=0;}});opts.cssBefore={left:0,top:0};opts.animIn={left:0};};$.fn.cycle.transitions.wipe=function($cont,$slides,opts){var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.cssBefore=opts.cssBefore||{};var clip;if(opts.clip){if(/l2r/.test(opts.clip)){clip="rect(0px 0px "+h+"px 0px)";}else{if(/r2l/.test(opts.clip)){clip="rect(0px "+w+"px "+h+"px "+w+"px)";}else{if(/t2b/.test(opts.clip)){clip="rect(0px "+w+"px 0px 0px)";}else{if(/b2t/.test(opts.clip)){clip="rect("+h+"px "+w+"px "+h+"px 0px)";}else{if(/zoom/.test(opts.clip)){var t=parseInt(h/2);var l=parseInt(w/2);clip="rect("+t+"px "+l+"px "+t+"px "+l+"px)";}}}}}}opts.cssBefore.clip=opts.cssBefore.clip||clip||"rect(0px 0px 0px 0px)";var d=opts.cssBefore.clip.match(/(\d+)/g);var t=parseInt(d[0]),r=parseInt(d[1]),b=parseInt(d[2]),l=parseInt(d[3]);opts.before.push(function(curr,next,opts){if(curr==next){return;}var $curr=$(curr),$next=$(next);$.fn.cycle.commonReset(curr,next,opts,true,true,false);opts.cssAfter.display="block";var step=1,count=parseInt((opts.speedIn/13))-1;(function f(){var tt=t?t-parseInt(step*(t/count)):0;var ll=l?l-parseInt(step*(l/count)):0;var bb=b<h?b+parseInt(step*((h-b)/count||1)):h;var rr=r<w?r+parseInt(step*((w-r)/count||1)):w;$next.css({clip:"rect("+tt+"px "+rr+"px "+bb+"px "+ll+"px)"});(step++<=count)?setTimeout(f,13):$curr.css("display","none");})();});opts.cssBefore={display:"block",opacity:1,top:0,left:0};opts.animIn={left:0};opts.animOut={left:0};};})(jQuery);
   //]]>
   </script>
   
   <script type='text/javascript'>
   //<![CDATA[
   function showVideo(id) {
   document.write("<object width=\"291\" height=\"225\"><param name=\"movie\" value=\"http://www.youtube.com/v/"+id+">&amp;hl=en&amp;fs=1\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/"+id+"&amp;hl=en&amp;fs=1\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"291\" height=\"225\"></embed></object>");
   }
   
   $(function() {
   $('#featured').cycle({
   fx: 'scrollLeft',
   speed: 700,
   timeout: 5000
   });
   });
   
   $(document).ready(function(){
   $(".click").click(function(){
   $("#panel").slideToggle("medium");
   $(this).toggleClass("active"); return false;
   });
   });
   //]]>
   </script>
   
   <!-- End Featured Gallery script -->
   
   
   
   
   
   
6. Setelah itu simpan dan menuju ke halaman Elemen Halaman
7. setelah berada pada elemen Halaman, tambahkan sebuah gadget (untuk letaknya terserah anda) lalu pilih yang HTML/Javascript
   
   
   
   
8. Setelah itu masukan kode di bawah ini ke dalamnya
   
   
   <!-- begin featured -->
   <div id="featured">
   
   <div class="post">
   <div class="featured-text"><h1><a href="URL / ALAMAT JUDUL" class="featured-title">TEKS JUDUL</a></h1></div>
   <div class="featured-thumb"><img src="GAMBAR ARTIKEL" /></div>
   <p>DESKRIPSI ARTIKEL.</p>
   <div class="featured-meta">
   <a href="ALAMAT (URL) TKP" class="featured-read">Ke TKP</a>
   </div>
   </div>
   
   <div class="post">
   <div class="featured-text"><h1><a href="URL / ALAMAT JUDUL" class="featured-title">TEKS JUDUL</a></h1></div>
   <div class="featured-thumb"><img src="GAMBAR ARTIKEL" /></div>
   <p>DESKRIPSI ARTIKEL.</p>
   <div class="featured-meta">
   <a href="ALAMAT (URL) TKP" class="featured-read">Ke TKP</a>
   </div>
   </div>
   
   <div class="post">
   <div class="featured-text"><h1><a href="URL / ALAMAT JUDUL" class="featured-title">TEKS JUDUL</a></h1></div>
   <div class="featured-thumb"><img src="GAMBAR ARTIKEL" /></div>
   <p>DESKRIPSI ARTIKEL.</p>
   <div class="featured-meta">
   <a href="ALAMAT (URL) TKP" class="featured-read">Ke TKP</a>
   </div>
   </div>
   
   </div>
   <!-- end featured -->
   
   
   
   
9. Setelah itu simpan dan lihat hasilnya

Keindahan dan terlihat profesional sebuah blog diantaranya : Kecepatan akses blog, Penggunaan Widget, tampilan blog, isi dari blog tersebut dan efek yang ada di blog tersebut . Mungkin hanya sekian langkah-langkah Membuat Featured Content Slider. Kalau ada yang kurang silahkan sobat tambahkan di bagian kolom komentar. Terima kasih dan Happy Blogging .

Slider Lainnya :

• Slide Show
• Slide Show Vertikal
• Slider Zinmag Primus
  

Baca Selengkapnya →