Cara membuat dan memasang Auto Reverse Image Slider

Slider spesial ini mampu secara otomatis memngulang kembali tampilan setiap gambar/image dengan membalik kembali posisi gambar seperti posisi awalnya. JQuery 1.3.2.min.js kembali kita manfaatkan dengan pertimbangan karena hampir bisa diyakini bahwa sebagian besar blogger memanfaatkannya sehingga kita tidak perlu lagi menambah javascript dengan kapasitas besar hanya untuk membuat sebuah slider dengan kwalitas sangat memenuhi standar dan layak ditampilkan sebagai pelengkap blog. Slider ini didesain untuk mengulang setiap 5 (lima image) dalam setiap periode dengan kecepatan rotasi yang dapat di atur. Image yang digunakan mempunyai ukuran 160px x 180px (width x height. Perubahan yang dilakukan terhadap ukuran gambar/image harus disertai dengan penyesuaian desain slider karena perubahan sekecil apapun (terutama width) akan sangat berpengaruh terhadap penampilan slider yang harus mempunyai kepresisian tinggi berkaitan dengan ketepatan setiap bagian slider terhadap image yang ditampilkan.

CSS Auto Reverse Image Slider :

.gbrA td{font-family:Tahoma;font-size:12px;color:#000;} /*box utama gallery */
.gbrA a{color:#900;}
.gbrA .title{font-size:18px;font-weight:bold;color:#eee; font-family:Times New Roman;}/* teks-1 atas gambar */
.gbrA .title a{color:#F90; text-decoration:none;}/* teks-2 (link) atas gambar */
.gbrA .title a:hover{color:yellow;} 
.gbrA .teksB{font-size:10px; font-family:Tahoma; font-weight:bold; color:#900;}/* teks-2 bawah gambar */
.gbrA .teksB:hover{color:#fff;} /*hover teks-2 bawah gambar */
.gbrA img{border:0 transparent none;padding: px;}/* Draw an image frame using padding. */
.gbrA .pics{float:left; text-align:center; line-height:13px;}
.gbrA .pics a{/* background gambar - border lewat padding */
        display:block;  /*gambar dan teks-1 bawah gambar */
        color:#000;  
        text-decoration:none;  
        font-size:10px;  
        font-weight:bold;  
        padding:5px;
        background:#333 url(https://lh3.googleusercontent.com/-SQDeLiwuikc/T3GirAtx7oI/AAAAAAAAAkU/o6Wmjc64Z-c/h120/grad-blue-carousel-1x114.png);
} 
.gbrA .pics a:hover{background:#444;color:#FF0000;}/*hover gambar dan hover teks-1 bawah gambar */
.gbrA .pics a .sheew{color:;}
.gbrA .pics a img{width:160px;height:180px;border:none;box-shadow:0 0 0 #fff;}
.jcarousel-skin-A.jcarousel-container{background:transparent;}
.jcarousel-skin-A.jcarousel-container-horizontal{width:100%; padding:0;}
.jcarousel-skin-A .jcarousel-clip-horizontal{width:870px; height:215px;}
.jcarousel-skin-A .jcarousel-item{width:165px; height:215px;}
.jcarousel-skin-A .jcarousel-item:hover{}
.jcarousel-skin-A .jcarousel-item-horizontal{margin-right:10px;}
* html .jcarousel-skin-A .jcarousel-item-horizontal{margin-right:10px;}
.jcarousel-skin-A .jcarousel-item-placeholder{}
.jcarousel-skin-A .jcarousel-next-horizontal{position:absolute;top:210px;right:5px;width:20px;height:20px;cursor:pointer;background:url(https://lh3.googleusercontent.com/-y0fvUzFe5wk/T3Gj60Be3hI/AAAAAAAAAkc/UxdbV-zzSjA/s128/arrow-next-circle-anima.gif) no-repeat;border-radius:50%;border:1px solid red;z-index:999;}
.jcarousel-next:hover{border:1px solid #000;}
.jcarousel-skin-A .jcarousel-prev-horizontal{position:absolute;top:210px;left:5px;width:20px;height:20px;cursor:pointer; background:url(https://lh3.googleusercontent.com/-sS0VfQvyHKU/T3Gj9ZAM6qI/AAAAAAAAAkk/N-WFju-Wsac/s128/arrow-prev-circle-anima.gif) no-repeat;border-radius:50%;border:1px solid red;z-index:999;}
.jcarousel-prev:hover{border:1px solid #000;}
.jcarousel-container{position:relative;}
.jcarousel-clip{z-index:2;padding:0;margin:0;overflow:hidden;position:relative;}
.jcarousel-list{z-index:1;overflow:hidden;position:relative;top:0;left:0;margin:0;padding:0;}
.jcarousel-item{float:left;list-style:none;width:178px;}
.headerContainer img{margin:2px 30px 2px 10px; float:right; border:1px solid blue;}

Javascript Auto Reverse Image Slider :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://gr-jquery.googlecode.com/files/bgsGR.jquery_jcarousel_pack.js"></script>
<script type="text/javascript"> 
function mycarousel_initCallback(carousel){carousel.buttonNext.bind('click', function(){carousel.startAuto(0);});
carousel.buttonPrev.bind('click', function(){carousel.startAuto(0);});
carousel.clip.hover(function(){carousel.stopAuto();}, function(){carousel.startAuto();});}
jQuery(document).ready(function(){jQuery('#videoSlider').jcarousel({auto : 2,
scroll : 5,
wrap : 'last',
animation : (4 * 2000),
initCallback : mycarousel_initCallback
});});
</script>

xHTML Auto Reverse Image Slider :

<div class="gbrA" align="center" style="margin:0;border-radius:10px;border:6px solid #444;">
<table style="background-color:#222;border-radius:12px;" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td>
<table style="width:100%;border-radius:6px;background:#4e0204 url(https://lh6.googleusercontent.com/-7an5ttHiUhw/T2Im9yow2PI/AAAAAAAAAX8/yvK75bKIKkQ/s128/GR_red-black-grad-8x41.gif) top repeat-x;" border="0" cellspacing="0" cellpadding="2">
<tr>
<td style="text-align:center;" colspan="15">
<div class="headerContainer"><span class="title" >Auto Reverse Image Slider - <a href="http://bloggerstuars.blogspot.com" target="_blank"> bloggertars-1</a> Tutorial Blogger<a href="http://gubhugreyot.blogspot.com" target="_blank"> gubhugreyot</a> Tips- trik Blogger</span><img style="border:0 solid;width:35px;height:auto;margin-right:6px;" src="https://lh6.googleusercontent.com/-2OmxwR2Ub98/T3GF6ngOLvI/AAAAAAAAAjQ/W5X9T3VLnUY/s128/gr-mloncat.gif"/>
</div>
</td>
</tr>                   
<tr>
<td colspan="6" align="center">
<ul id="videoSlider" class="jcarousel-skin-A">
<li>
<div class="pics"><a href="Link-1" target="_blank"> <img src="Image1.jpg" alt="" title="Teks Title-1" /><div>Gambar-1 <span class="sheew"> </span></div><span class="teksB"> Teks-1</span></a></a>
</div>
</li>
<li>
<div class="pics"><a href="Link-2" target="_blank"><img src="Image2.jpg" alt="" title="Teks Title-2" /><div>Gambar-2 <span class="sheew"> </span></div><span class="teksB"> Teks-2</span></a>
</div>
</li>
<li>
<div class="pics"><a href="Link-3" target="_blank"><img src="Image3.jpg" alt="" title="Teks Title-3" /><div>Gambar-3 <span class="sheew"> </span></div><span class="teksB"> Teks-3</span></a>
</div>
</li>
<li>
<div class="pics"><a href="Link-4" target="_blank"> <img src="Image4.jpg" alt="" title="Teks Title-4" /><div>Gambar-4 <span class="sheew"> </span></div><span class="teksB"> Teks-4</span></a>
</div>
</li>
<li>
<div class="pics"><a href="Link-5" target="_blank"> <img src="Image5.jpg" alt="" title="Teks Title-5" /><div>Gambar-5 <span class="sheew"> </span></div><span class="teksB"> Teks-5</span></a>
</div>
</li>
<li>
<div class="pics"><a href="Link-6" target="_blank"> <img src="Image6.jpg" alt="" title="Teks Title-6" /><div>Gambar-6 <span class="sheew"> </span></div><span class="teksB"> Teks-6</span></a>
</div>
</li>
<li>
<div class="pics"><a href="Link-7" target="_blank"><img src="Image7.jpg" alt="" title="Teks Title-7" /><div>Gambar-7 <span class="sheew"> </span></div><span class="teksB"> Teks-7</span></a>
</div>
</li>
<li>
<div class="pics"><a href="Link-8" target="_blank"> <img src="Image8.jpg" alt="" title="Teks Title-8" /><div>Gambar-8 <span class="sheew"> </span></div><span class="teksB"> Teks-8</span></a></a>
</div>
</li>
<li>
<div class="pics"><a href="Link-9" target="_blank"><img src="Image9.jpg" alt="" title="Teks Title-9" /><div>Gambar-9 <span class="sheew"> </span></div><span class="teksB"> Teks-2</span></a>
</div>
</li>
<li>
<div class="pics"><a href="Link-10" target="_blank"><img src="Image10.jpg" alt="" title="Teks Title-10" /><div>Gambar-10 <span class="sheew"> </span></div><span class="teksB"> Teks-10</span></a>
</div>
</li>
<li>
<div class="pics"><a href="Link-11" target="_blank"> <img src="Image11.jpg" alt="" title="Teks Title-11" /><div>Gambar-11 <span class="sheew"> </span></div><span class="teksB"> Teks-11</span></a>
</div>
</li>
<li>
<div class="pics"><a href="Link-12" target="_blank"> <img src="Image12.jpg" alt="" title="Teks Title-12" /><div>Gambar-12 <span class="sheew"> </span></div><span class="teksB"> Teks-12</span></a>
</div>
</li>
<li>
<div class="pics"><a href="Link-13" target="_blank"> <img src="Image13.jpg" alt="" title="Teks Title-13" /><div>Gambar-13 <span class="sheew"> </span></div><span class="teksB"> Teks-13</span></a></div>
</li>
<li>
<div class="pics"><a href="Link-14" target="_blank"><img src="Image14.jpg" alt="" title="Teks Title-14" /><div>Gambar-14 <span class="sheew"> </span></div><span class="teksB"> Teks-14</span></a>
</div>
</li>
<li>
<div class="pics"><a href="Link-15" target="_blank"><img src="Image15.jpg" alt="" title="Teks Title-15" /><div>Gambar-15 <span class="sheew"> </span></div><span class="teksB"> Teks-15</span></a>
</div>
</li>
</ul>
</td>
</tr>
<tr>
<td style="text-align: left;" colspan="15" class="legal">
<span style="font-size:0.8em;color:#fff;padding:3px 10px 3px 30px;"> *  Tuliskan teks tambahan di sini (teks terbawah slider hanya 1 baris !)</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

1. Login ke Blogger.
   
   • Upload javascript Rounded Corners dan buat dalam bentuk link seperti yang terlihat pada box ke-3.
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>
7. Cari kode <head>
8. Copy jQuery dan javascript kemudian letakkan di bawah <head>
9. Klik "Simpan Template (Save Template)".
10. Gunakan xHTML saat posting atau manfaatkan melalui penambahan gadget.

Catatan/Keterangan :

1. Cara backup template, cara mencari kode dan cara menyimpan berbagai kode html dapat dibuka melalui Special Tutorials yang terletak pada menu sebelah kiri halaman.
2. Gunakan image dengan ukuran 160 x 180 px (width x height).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update » Senen WAGE, Maret, 26, 2012

» Happy Blogging - gubhugreyot «