About Me
Red Fire Pointer html { height: 100%; background: url( http://2.bp.blogspot.com/_qs3YiMzOu8M/TAO9qf8HYSI/AAAAAAAAANE/QvPcEhHMZxg/s1600/under-maintenance.gif ) no-repeat center 50%; margin: 0; } body { display: none; } --> Red Fire Pointer Created (c) by Princexells Seyka (Princelling Saki)

Minggu, 15 April 2012

IMAGE GALLERY CSS & JQUERY

Published : 20.26 Author : Dea Volenta

IMAGE GALLERY CSS &  JQUERY
Untuk membuatnya ikuti langkah-langkah dibawah ini.

   1. Login blogger
   2. Tata Letak/Layout - Edit HTML
   3. Klik pada Expand Template Widget.
   4.  Selanjutnya cari kode ]]></b:skin>, Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin>

Copy Codeprint?
  1. /*------------------------ 
  2. image gallery CSS &  jQuery 
  3. -------------------------------*/  
  4. #box {  
  5. position: absolute;  
  6. background:-moz-linear-gradient(left,Orangered, #000);  
  7. border: gray solid 1px;  
  8. visibility: hidden;  
  9. }  
  10. #screen {  
  11. position: absolute;  
  12. left: 15%;  
  13. width: 70%;  
  14. height: 40%;  
  15. top: 25%;  
  16. background:-moz-linear-gradient(left,#000,Orangered, #000);  
  17. border: gray solid 1px;  
  18. }  
  19. #box img  {  
  20. position: absolute;  
  21. border: gray solid 1px;  
  22. -ms-interpolation-mode:nearest-neighbor;  
  23. image-rendering: optimizeSpeed;  
  24. visibility: hidden;  
  25. background: #000;  
  26. }  
  27. #box span {  
  28. position: absolute;  
  29. color: #ccc;  
  30. font-family: verdana;  
  31. font-size: 12px;  
  32. width: 200px;  
  33. }  
  34. #box a {  
  35. text-decoration: none;  
  36. color:#ff8000;  
  37. }  
  38. #box a:hover{  
  39. text-decoration: none;  
  40. background:#ff8000;  
  41. color:#ffffff;  
  42. }  
  43. #box a:visited {  
  44. text-decoration: none;  
  45. color:#ff8000;  
  46. }  
  47. #box a:visited:hover {  
  48. text-decoration: none;  
  49. background:#ff8000;  
  50. color:#ffffff;  
  51. }  
  52. #lnk, #txt, #tit{  
  53. visibility: hidden;  
  54. }       
Dan sekarang sobat masukin javascript di bawah ini
Sobat bisa uploud script ke webhosting dan simpan di atas kode </body>
Copy Codeprint?
  1. <script src='http://pandet-pandet.googlecode.com/files/Ge-1-doot.js' type='text/javascript'></script>  
  2. <script type='text/javascript'>  
  3. /* ==== start script ==== */  
  4. setTimeout(imP.init, 256);  
  5. </script>     
Dan ini kode Html,sobat bisa memasukan di Edit HTML/ tambah gadget atau di bawah kode<body>
Copy Codeprint?
  1. <div id="screen"><div id="box"><img alt="depsc" src="url-gambar" title="explain">  
  2. <img alt="depsc" src="url-gambar" title="strain">  
  3. <img alt="depsc" src="url-gambar" title="retain">  
  4. <img alt="depsc" src="url-gambar" title="mundane">  
  5. <img alt="depsc" src="url-gambar" title="inhumane">  
  6. <img alt="depsc" src="url-gambar" title="disdain">  
  7. <img alt="depsc" src="url-gambar" title="never again">  
  8. <span id="txt">  
  9. <span id="tit">  
  10. <span id="lnk">  
  11. <a href="#" id="explain" target="_blank">Generation Platinum</a>  
  12. </span></span></span></div></div>  

DEMO

Label: |

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

by blogonol
wellcome to D-volnthz.blogspot.com, Gunakan lah Chrome untuk mendapatkan hasil sempurna dari blog ini lihat domain baru kami D-volnthz.net.tc thanks for your visited