Gadget Blog Anda: Cara Membuat Silde Image Java/Script

mega dropdown

Selamat Datang !

Cara mudah untuk membuat gambat hidup dan begser ke atas secara otomatis, seperti contoh gambar di bawah ini. Jika Anda ingin menerapkan atau membuat gambar bergeser secara otomatis tersebut.

Sebagai contoh gambar tersebut di bawah ini

Image

Berapapun banyaknya gambar yang ingin Anda muat pada gadget ini, semuanya akan tertampung. Langkah pertama, Anda harus masuk ke blog untuk mengedit code HTML:Klik di sini

Merubah latar Belakang

Keterangannyaada di sini>

CONTENT

About modifying the gadget guide

Sengaja saya hadirkan blog ini untuk Anda semoga bermanfaat

Pada umumnya bagi pengguna GeoCounter, hampir semuanya menggunakan dengan tampilan bawaan atau standar, mungkin pengguna juga beranggapan

Tentang Counter tersebut yang akan dirubah latar belakangnya

Berikutnya masih lagi lainnya yang belum saya tampilkan

Pada posting yang berikutnya akan membahas tentang " bagaimana membuat Cara Membuat Recent Post (JQuery) bagian ke 2, pada Recent Post (JQuery)2.

Bagaimana caranya membuat link bergerak atau bergeser? OK! kita langsung saja supaya cepat terungkap, Gunanya link bergser ini adalah untuk penampilan dan gaya tersendiri pada blog Anda.Link bergeser ketika disentuh

Creating Tag WP Culumus & Creating an automatic Read more

Membuat teks efek Neon, Teks ini sengaja saya publikasi , mungkin akan bermanfaat untuk perlengkapan blog Anda.Berikutnya..

Untuk membuat teks bergelombang, sangatlah mudah untuk membuatnya. Yang dimaksud " begelombang " bukan berarti secara slide gelombangnya namun dari bentuk teks ini yang terlihat seperti ombak yang begelombang atau seperti.bukit...

Cara membuat "Recent Post JQuery", Recent Post juga bemacam-macam bentuknya, pada Blogger juga ada isrilah ini, namun dengan istilah lain yaitu " Popular Post " dengan tampilan biasa tanpa bergerak. Pada "Recent Post JQuery" ini, image tampak di sebelah kanan Cara Membuat Recent Post (JQuery)

YouTube

BLOG CATEGORY

Lists in Boxes

Here are some image examples

Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.Read more...

Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. Read more...

BUKU TAMU

Berikan Komentar

Google

Alone

Welcome !

Welcome met back at the blog Free widgets for Blogs, at the meeting this time I have used the versatile drop down menu

If you want to apply this gadget please visit this item.

creating signature

For continuation of this post is, about how where how to create a signature to be placed on Blogger?. Here will discuss and guide you step by step overall to finish. . To create your signature.

GeoCounter

Counter

Baca Caranya di sini.......

ABOUT

Lists in Boxes

Here are some image examples

Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. Read more...

Cara Membuat Silde Image Java/Script

Cara mudah untuk membuat gambat hidup dan begser ke atas secara otomatis, seperti contoh gambar di bawah ini. Jika Anda ingin menerapkan atau membuat gambar bergeser secara otomatis tersebut.

Berapapun banyaknya gambar yang ingin Anda muat pada gadget ini, semuanya akan tertampung. Langkah pertama, Anda harus masuk ke blog untuk mengedit code HTML:

Setelah masuk pada rancangan HTML, centang tombol Expand Widget Templates.

Cari kode <head> pada edit HTML, untuk memudahkan dalam pencarian code tersebut tekan Ctrl+F atau F3.

Kemudian letakkan code tersebut pada kolom Ctrl+f tadi, setelah Anda tekan. lalu copy code di bawah ini dan paste tepat di bawah code <head>

COPY CODENYA
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { //Execute the slideShow, set 6 seconds for each images slideShow(3000); }); function slideShow(speed) { //append a LI item to the UL list for displaying caption $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>'); //Set the opacity of all images to 0 $('ul.slideshow li').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('ul.slideshow li:first').css({opacity: 1.0}); //Get the caption of the first image from REL attribute and display it $('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title')); $('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt')); //Display the caption $('#slideshow-caption').css({opacity: 0.7, bottom:0}); //Call the gallery function to run the slideshow var timer = setInterval('gallery()',speed); //pause the slideshow on mouse over $('ul.slideshow').hover( function () { clearInterval(timer); }, function () { timer = setInterval('gallery()',speed); } ); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first')); //Get next image caption var title = next.find('img').attr('title'); var desc = next.find('img').attr('alt'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); //Hide the caption first, and then set and display the caption $('#slideshow-caption').animate({bottom:-70}, 300, function () { //Display the content $('#slideshow-caption h3').html(title); $('#slideshow-caption p').html(desc); $('#slideshow-caption').animate({bottom:0}, 500); }); //Hide the current image current.animate({opacity: 0.0}, 1000).removeClass('show'); } //]]> </script> <style type='text/css'> ul.slideshow { list-style:none; width:600px; height:240px; overflow:hidden; position:relative; margin:0; padding:0; font-family:Arial,Helvetica,Trebuchet MS,Verdana; ; } ul.slideshow li { position:absolute; left:0; right:0; } ul.slideshow li.show { z-index:500; } ul img { width:600px; height:240px; border:none; } #slideshow-caption { width:600px; height:70px; position:absolute; bottom:0; left:0; color:#fff; background:#000; z-index:500; } #slideshow-caption .slideshow-caption-container { padding:5px 10px; z-index:1000; } #slideshow-caption h3 { margin:0; padding:0; font-size:16px; } #slideshow-caption p { margin:5px 0 0 0; padding:0; } </style>

Catatan:

Sebelum meng-klik SAVE, sebaiknya Anda klik terlebih dahulu "PREVIEW" untuk mengetahui error atau tidaknya dalam mengedit, jika muncul publikasi pratampil, maka klik "SAVE"

3. Untuk menambahkan code berikutnya yaitu, Anda buka halaman Design, untuk menambah code HTML/JavaScript, Add a Gadget, adapun codenya di bawah ini:

<ul class="slideshow">

<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn6DdQ6LQ5xXKpTdj0xoRV-vIJ4jME33k_WxASaJ0PGzd5MxB1ukcstwykokWxH-SguggqEiyMeFHvlSxBhxurGUV7TL-DgR1F3v254JVw03TvzsxKYHoc0Du19Jci3FykI9asv_xuTGPJ/s1600/DSC_0105.JPG">
<img alt="Mungkin Jam ini tergesar di Dunia." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn6DdQ6LQ5xXKpTdj0xoRV-vIJ4jME33k_WxASaJ0PGzd5MxB1ukcstwykokWxH-SguggqEiyMeFHvlSxBhxurGUV7TL-DgR1F3v254JVw03TvzsxKYHoc0Du19Jci3FykI9asv_xuTGPJ/s1600/DSC_0105.JPG" title="Jam Terbesar" /></a></li>

<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvYjWDnPyH58Y46rJy9abqpWD-HswJafpeZqGEzfKo5L4swqpLWoz6uCyxTrRG2pylXObvAMxdgdHRpKLKDzM7mRDKKfzyolQGOyuEqHZLtFjNvVOwcUevEo7nPDw4snaimUn1Jv8smhWT/s1600/DSC_0100.JPG">
<img alt="Ini Mesjid Al Haram, dalam tahap pelebaran, foto ini diambil pada malam hari." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvYjWDnPyH58Y46rJy9abqpWD-HswJafpeZqGEzfKo5L4swqpLWoz6uCyxTrRG2pylXObvAMxdgdHRpKLKDzM7mRDKKfzyolQGOyuEqHZLtFjNvVOwcUevEo7nPDw4snaimUn1Jv8smhWT/s1600/DSC_0100.JPG" title="Pelebaran Masjid Al Haram" /></a></li>

<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghht34zIW_Sn6xENUmjx8mAe5CKCSAbz0raHK9CeDv_IBy9I4_8daWAfAfS2pnYL43c6d8CA_W5r8Lzqh0IksHEqIhWjes9yl_LYu_IsSHuHAem6hLaL0fx4oMNh7xOZMoe38j9BcRYV_R/s1600/DSC_0101.JPG">
<img alt="Alat berat meraung raung pada siang dan malam tiada henti, untuk menyelsaikan Proyek ini." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghht34zIW_Sn6xENUmjx8mAe5CKCSAbz0raHK9CeDv_IBy9I4_8daWAfAfS2pnYL43c6d8CA_W5r8Lzqh0IksHEqIhWjes9yl_LYu_IsSHuHAem6hLaL0fx4oMNh7xOZMoe38j9BcRYV_R/s1600/DSC_0101.JPG" title="Alat berat berada di area Mesjid Al Haram" /></a></li>

<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmg8_jPJWkn06JmGmsiVeDWACSSUsiG_8yL9M9eoZbuxUv32GBfVm0bhuJnVgqo-e_qEPYY5cUcHxRd3qOmv-JngjeRxdXdNmmy-8DT4GpePe3V0IXI66rGB8XMosto3Ri6JgPgJWNQdeJ/s1600/DSC_0099.JPG">
<img alt="Lihat kubah pada kedua menara, terlihat sangat indah." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmg8_jPJWkn06JmGmsiVeDWACSSUsiG_8yL9M9eoZbuxUv32GBfVm0bhuJnVgqo-e_qEPYY5cUcHxRd3qOmv-JngjeRxdXdNmmy-8DT4GpePe3V0IXI66rGB8XMosto3Ri6JgPgJWNQdeJ/s1600/DSC_0099.JPG" title="Dua Menara" /></a></li>

Perlu Anda ketahui bahwa:

Code <li><a href=" warna merah adalah URL image_JPG anda''><img alt="Slogan Image Anda" src="masukkan kembali URL image_JPG anda " title="Judul Image di sini" /></a>
</li>
</ul>

Pastikan atau koreksi kembali codenya, bila ada kesalahan dalam pengeditan, maka ketika di Save dan dipublikasi, slogan dan judul akan tumpang tindih bahkan image yang Anda tautkan tadi tidak muncul pada blog Anda.
Nah, sekian dulu panduan ini dari saya, semoga bermanfaat, Selamat mencoba...............Terima kasih.