Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 «

5 komentar:

  1. napa g muncul gambarnya y bro???

    BalasHapus
  2. thanks atas ilmunya bro, tapi knapa ea stelah gambar muncul tapi g gerak malah tersusun kebawah?? mohon petunjuknya dunk,,

    BalasHapus
  3. thanks atas ilmunya bro, tapi knapa ea stelah gambar muncul tapi g gerak malah tersusun kebawah?? mohon petunjuknya dunk,,

    BalasHapus
  4. thanks atas ilmunya bro, tapi knapa ea stelah gambar muncul tapi g gerak malah tersusun kebawah?? mohon petunjuknya dunk,,

    BalasHapus
  5. BEWARE OF LOAN SCAMS ONLINE. Are you seeking for a legitimate and trusted Finance/Lender? Beware of many lender from West Africa, Singapore and India. I am Williams Burke, a British Citizen currently residing in Bulgaria; am 52 years of age. I want to use this medium to inform everyone here about my encounter with a reliable/trusted loan lender. I have been scammed by other fake lenders and was hopeless and didn't know who to trust, until I contacted DAVID HERLEY FINANCE HOME loated in USA and they did carried out their promises by putting a great smile on my face at my greatest surprise by sending me the loan that I did applied for. Anyone of you that have also been a victim of scam, you should bother no more because, I have bring you good news and the only lender you can trust here is DAVID HERLEY FINANCE HOME, just contact them now via email: { loans@dherleyfinancehome.net } or Tel: +13213231809 & Skype: dherleyfinance for more information on how to get a loan from them.

    BalasHapus

 
GR | Edited by | gubhug reyot