Wednesday, October 31, 2012
Cara Buat galerry dengan efek hover Zoom
Untuk cara penerapannya juga sangat mudah, anda tinggal ikuti langkah -langkah mudah yang ada dibawah, Dan bila anda ingin menambahkan jumlah gambar pada gallery ini, anda tinggal menambahkannya pada bagian Html.
Yang perlu diingat, ini untuk seluruh gadget atau widget yang menggunaklan jQuery. Terkadang pada template blog kita sudah terdapat javascript jQuery yang sama, sehingga ketika kita ingin memasang gadget atau widget yang menggunakan jQuery, akan mengalami troble, atau gadget tersebut tidak bekerja dengan baik, bahkan kadang justru membuat gadget yang sudah terpasangpun ikut tidak bekerja.
Nah..., bila menghadapi masalah seperti diatas, anda tidak perlu bingung. Sebenarnya karena ketika kita memasang gadget baru yang menggunakan jQuery, pada template kita sudah ada jQuery yang sama. Jadi solusinya, hilangkan saja jQuery yang ada pada gadget yang baru tersebut, dan lihat hasilnya.
Sekarang LIHAT DEMO
Bila anda berminat memasang gallery ini, silahkan ikuti langkah - langkah dibawah ini. Tapi ingat, gadget ini juga menggunakan jQuery ya.... :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
</head>
|
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"> $(document).ready(function(){ //Larger thumbnail preview $("ul.thumb li").hover(function() { $(this).css({'z-index' : '1000'}); $(this).find('img').addClass("hover").stop() .animate({ marginTop: '-90px', marginLeft: '-90px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '1px' }, 200); } , function() { $(this).css({'z-index' : '0'}); $(this).find('img').removeClass("hover").stop() .animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, 400); }); //Swap Image on Click $("ul.thumb li a").click(function() { var mainImage = $(this).attr("href"); //Find Image Name $("#main_view img").attr({ src: mainImage }); return false; }); }); </script> <style type="text/css"> body { font: Arial, Helvetica, sans-serif normal 10px; margin: 0; padding: 0; } * {margin: 0; padding: 0;} img {border: none;} ul.thumb { float: left; list-style: none; margin: 20; padding: 20px; width: 360px; } ul.thumb li { margin: 0; padding: 5px; list-style:none; float: left; position: relative; width: 110px; height: 110px; } ul.thumb li img { width: 100px; height: 100px; border: 1px solid #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; -ms-interpolation-mode: bicubic; } ul.thumb li img.hover { background:url(thumb_bg.png) no-repeat center center; border: none; z-index: 1500; } #main_view { float: left; padding: 9px 0; margin-left: -10px; } </style> |
6. Simpan Template
Langkah selanjutnya anda tinggal menambahkan kode dibawah ini pada saat menulis artikel, jangan lupa tambahkan kode pada bagian Edit HTML . Cara ini bila gallery akan ditampilkan pada halaman posting.
Tapi bila anda ingin menampilkan Gallery pada
sidebar blog anda. Berrarti anda tinggal menambah gadget. Perhatikan
langkah berikut :
1. Klik Rancangan dan pilih Elemen Laman
2. Tambah Gadget
3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript
4. Copy dan paste kode dibawah ini pada gadget tersebut :
Catatan :
Silahkan anda ganti Teks berwarna MERAH dan BIRU pada kode HTML diatas.
Setiap baris tag
adalah untuk satu gambar. Bila anda ingin menambah satu gambar, anda tinggal menambah satu baris tag
.
5. Simpan.
Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.
<ul class="thumb">
<li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li> <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li> <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li> <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li> <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li> <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li> <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li> <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li> <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li> </ul> |
Tuesday, October 30, 2012
Slide Show Carousel
Menambah lagi koleksi slide show, dan slide ini menggunakan efek Carousel atau berputar seperti komedi putar. selain berfungsi untuk menampilkan gambar, slide show Carousel ini juga dilengkapi description atau cuplikan informasi singkat yang menerangkan tentang gambar yang ditampilkan. Tidak hanya itu, slide show Carousel ini sangat bagus bila dipasang di web atau blog kita untuk menampilkan artikel atau berita terbaru, dengan kata lain slide show Carousel ini kita buat sebagai sarana update web atau blog kita.
Nah bila anda berminat memasang slide show Carousel ini, silahkan anda bisa ikuti langkah - langkah berikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.
5. Jangan lupa Klik tombol "Expand Widget Templates"
6. Cari kode di bawah ini atau yang mirip dengan kode ini :
| </HEAD> |
<script src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery-1.7.min.js"></script>
<script src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery.featureCarousel.js"></script> <script src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery.featureCarousel.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var carousel = $("#carousel").featureCarousel({ // include options like this: // (use quotes only for string values, and no trailing comma after last option) // option: value, // option: value }); $("#but_prev").click(function () { carousel.prev(); }); $("#but_pause").click(function () { carousel.pause(); }); $("#but_start").click(function () { carousel.start(); }); $("#but_next").click(function () { carousel.next(); }); }); </script> <style type='text/css'> /******************** * FEATURE CAROUSEL * ********************/ #carousel-container { position:relative; padding:7px; background-color:#CCC; } #carousel { border:2px solid #fff; height:300px; background-color:#CCC; position:relative; font-size:12px; font-family: Arial; } #carousel .carousel-image { height:230px; width:400px; box-shadow: 6px 6px 10px #818181; -webkit-box-shadow: 6px 6px 10px #818181; -moz-box-shadow: 6px 6px 10px #818181; border:0; display:block; } #carousel .carousel-feature { position:absolute; top:-1000px; left:-1000px; border:2px solid #5d5d5d; cursor:pointer; } #carousel .carousel-feature .carousel-caption { position:absolute; bottom:0; width:100%; background-color:#000; } #carousel .carousel-feature .carousel-caption p { margin:0; padding:5px; font-weight:bold; font-size:12px; color:white; } #carousel .tracker-summation-container { position:absolute; color:white; right:50px; top:212px; padding:3px; margin:3px; background-color:#000; } #carousel .tracker-individual-container { position:absolute; color:white; right:95px; top:218px; padding:0; margin:0; } #carousel .tracker-individual-container li { list-style:none; } #carousel .tracker-individual-container .tracker-individual-blip { margin:0 3px; padding:0 3px; color:#000; text-align:center; border:1px solid #5d5d5d; background-color:#DDD; } #carousel .tracker-individual-container .tracker-individual-blip-selected { color:#FFC600; font-weight:bold; border:1px solid #fff; background-color:#000; } #carousel-left { position:absolute; bottom:33px; left:200px; cursor:pointer; } #carousel-right { position:absolute; bottom:33px; right:200px; cursor:pointer; } </style> |
1. Klik Rancangan dan pilih Elemen Laman
2. Tambah Gadget
3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript 4. Copy dan paste kode dibawah ini pada gadget tersebut :
| <div id="carousel-container"> <div id="carousel"> <div class="carousel-feature"> <a href="ULR ARTIKEL"> <img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a> <div class="carousel-caption"> <p>DESCRIPTION GAMBAR </p> </div> </div> <div class="carousel-feature"> <a href="ULR ARTIKEL"> <img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a> <div class="carousel-caption"> <p>DESCRIPTION GAMBAR </p> </div> </div> <div class="carousel-feature"> <a href="ULR ARTIKEL"> <img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a> <div class="carousel-caption"> <p>DESCRIPTION GAMBAR </p> </div> </div> <div class="carousel-feature"> <a href="ULR ARTIKEL"> <img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a> <div class="carousel-caption"> <p>DESCRIPTION GAMBAR </p> </div> </div> <div class="carousel-feature"> <a href="ULR ARTIKEL"> <img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a> <div class="carousel-caption"> <p>DESCRIPTION GAMBAR </p> </div> </div> </div> |
Sunday, October 14, 2012
PENCARIAN KODE BUAT HTML
Berikut situs-situs penyedia layanan HTML Generator online:
1. Quackit
2. Code-Generator
3. Spectrum-Research. Table dengan aturan CSS dan konsep Frame.
4. Hoover Web Design. Bukan untuk pengguna Browser Netscape.
5. 2CreateAWebsite
6. HTML Basix
7. HTML Portal
8. Table Generator
