Stylish jQuery Gambar Menu Untuk Blogger

Dalam tutorial ini im akan menjelaskan, bagaimana menambahkan jQuery
slider foto untuk blogger. Ini akan benar-benar keren
dengan blogger. Anda dapat menambahkannya di atas untuk Anda
posting blogger dengan gambar tampak bagus dengan link ke
post.For blog Anda slider ini kita menggunakan jQuery dan
jquery-pelonggaran efek. Periksa link di bawah ini untuk demo.Its
tidak sulit untuk menambahkan ke blog Anda. Dapatkan slideshow saya sebelumnya
posting di sini

1. Masuk ke akun blogger dan klik drop down.

2. Sekarang pilih "Template" Seperti bawah.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
  
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* slider www.bloggertrix.com*/

.jimgMenu {
 position: relative;
 width: 670px;
 height: 200px;
 overflow: hidden;
 margin: 25px 0px 0px;
}

.jimgMenu ul {
 list-style: none;
 margin: 0px;
 display: block;
 height: 200px;
 width: 1340px;
 }
.jimgMenu ul li {
 float: left;
}

.jimgMenu ul li a {
 text-indent: -1000px;
 background:#FFFFFF none repeat scroll 0%;
 border-right: 2px solid #fff;
 cursor:pointer;
 display:block;
 overflow:hidden;javascript:;
 width:78px;
 height: 200px;
}

.jimgMenu ul li.landscapes a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJsXjNX8wPtdR1Urm9U4lcSyS8O-zy9ELtTiQQe529vzrF77i5B3XRo-Keo6wWuElBCbHUpUgJyEus67Ok4Dhoqep55N2A1r5DRSFcSqUaRuJLPqL9W8qiO2qUlt3LtKzXgIUnJbzaC1M/s1600/abstract.png) repeat scroll 0%;
}

.jimgMenu ul li.people a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHPnNb-MqqbLjip-_EzLb4-KS7rZ8L3fsbRSOOVNwcTLfRJzTXfXb4sudDEnYlPIAIF7zR4zkrDMPxAnwGrUVvwS6icdoupNQS3Hcrm8JvtoZbXXBoUTejIV_QmI69ZWQ12vZCX9FJyIM/s1600/games.png) repeat scroll 0%;
}

.jimgMenu ul li.nature a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdTJKRJ5FbhDPnd_QyNplEKq9V8mv8i8onYkIgQGzo7hYc6V1rcdqZ_fzwGXUCPpoKClwvx6YM248iokzzj64ICZVUsML9Lu5qi-RZKqHgaUM4r4hYElpKCKwt_iswGmYQD1QjDjCUjrg/s1600/nature.png) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7SjyIOZlhyphenhyphentigi-DwxUeGQTqmey_P0WjxH1Dc2YEuFPPZj6kxSlIXW6c14dponfI5YT3gYECqJvFhb355SzXXB2zP6SHN5K51xYdJe4lSGNJB2c_PcLrw3dTGdm3h17tfv6Nl8hmq7Ek/s1600/2010-gqbycitroen-concept-car.png) repeat scroll 0%;
}
.jimgMenu ul li.urban a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ49kNFgVIZmb_Gxf14aXpRmb1HQ9wUQq5cjHAc7BfqQJhzrpwsht2Am2iiTlN3oLhvuSzcjKzqlxEA78AphrXSW80YCCgkC6UjpX9J_m0P57jAT9N7oyqvq4O7AZigK-qtURBaNAyDdg/s1600/landscape.png) repeat scroll 0%;
 min-width:310px;

}
.clear {
 clear: both;}

 7. Lagi Cari tag ini dengan menggunakan Ctrl + F </ head>


8. Paste kode di bawah Sebelum </ head> tag

<script src='http://bloggertrixcode.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://bloggertrixcode.googlecode.com/files/jquery-easing-1.3.pack.js' type='text/javascript'/>
<script src='http://bloggertrixcode.googlecode.com/files/jquery-easing-compatibility.1.2.pack.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function () {

  // find the elements to be eased and hook the hover event
  $(&#39;div.jimgMenu ul li a&#39;).hover(function() {
    
    // if the element is currently being animated (to a easeOut)...
    if ($(this).is(&#39;:animated&#39;)) {
      $(this).stop().animate({width: &quot;310px&quot;}, {duration: 450, easing:&quot;easeOutQuad&quot;});
    } else {
      // ease in quickly
      $(this).stop().animate({width: &quot;310px&quot;}, {duration: 400, easing:&quot;easeOutQuad&quot;});
    }
  }, function () {
    // on hovering out, ease the element out
    if ($(this).is(&#39;:animated&#39;)) {
      $(this).stop().animate({width: &quot;78px&quot;}, {duration: 400, easing:&quot;easeInOutQuad&quot;})
    } else {
      // ease out slowly
      $(this).stop(&#39;animated:&#39;).animate({width: &quot;78px&quot;}, {duration: 450, easing:&quot;easeInOutQuad&quot;});
    }
  });
});
</script>

 9. Pergi ke blogger dan klik Layout

10. Klik Tambah Gadget dan pilih 'HTML / Javascript

11. Paste kode di bawah ini.

<div class="jimgMenu">
  <ul>
    <li class="landscapes"><a href="#nogo">Landscapes</a></li>
    <li class="people"><a href="#nogo">People</a></li>
    <li class="nature"><a href="#nogo">Nature</a></li>
    <li class="abstract"><a href="#nogo">Abstract</a></li>
    <li class="urban"><a href="#nogo">Urban</a></li>
  </ul>
</div>

Anda dapat mengubah gambar link di 6th kode langkah.

12. Sekarang menyimpan HTML / Javascript '.

     Anda telah selesai ...

mohon tinggalkan komentarnya dibawah sini 

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot Ebook Dan Game Dll

Sobat sedang membaca artikel tentang Stylish jQuery Gambar Menu Untuk Blogger. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://hasil2.blogspot.com/2013/06/stylish-jquery-gambar-menu-untuk-blogger.html" target="_blank">Stylish jQuery Gambar Menu Untuk Blogger</a>

:: Get this widget ! ::

Related Posts

Related Posts with thumbnails and summary post for blogger