Iklan 300 x 250

Random Post

Recent Post

 

Membuat Slider Content Dengan Animasi jQuery

Text Resizer: Click for Resizer
Banyak hal yang bisa kita dapatkan dari dunia maya ini, baik yang positif ataupun negatif.. tinggal bagaimana kita memfilter diri untuk menyaring yang baik dan postif. Saya merasakan hal ini pada diri saya, saat berselancar di dunia maya,
blog walking keblog teman-teman, bahkan sekedar melihat-lihat galery template, theme atau layout web site, saya menemukan ilmu dan informasi baru bahkan terkadang inspirasi untuk postingan yang akan saya publikasikan diblog ini sampai rancangan planning yang ingin saya lakukan dimasa mendatang.Pas saat blogwalking kesuatu web site, saya melihat featured content slider ini dari blog teman saya http://amatullah83.blogspot.com/,Bagaimana Anda tertarik untuk membuatnya???Berikut tutorial menambahkan featured content slider menggunakan JQuery ini pada template blogger.

  • Log In dulu ke Account Blog Anda.
  • Klik Rancangan,Tata letak lalu Edit Html pada menu blog anda
  • Cari Kode Berikut ini </head> Setelah Ketemu Copy Semua Kode Dibawah ini lalu masukkan kode berikut diatas </head> .

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script>$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});</script>

  • Selanjutnya Tambah kode CSS dibawah ini sebelum kode ]]></b:skin> .

#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}
#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('images/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}

  • Masih belum selesai kawan,Lalu cari kode berikut ini  <div id='main-wrapper'> setelah ketemu masukkan kode HTML di bawah ini diatas <div id='main-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget.

    <div id="featured" >
    <ul class="ui-tabs-nav">
    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
    </ul>
    <!-- First Content -->
    <div id="fragment-1" class="ui-tabs-panel" style="">
    <img src="images/image1.jpg" alt="" />
    <div class="info" >
    <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
    </div>
    </div>
    <!-- Second Content -->
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
    <img src="images/image2.jpg" alt="" />
    <div class="info" >
    <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
    <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
    </div>
    </div>
    <!-- Third Content -->
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
    <img src="images/image3.jpg" alt="" />
    <div class="info" >
    <h2><a href="#" >35 Amazing Logo Designs</a></h2>
    <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
    </div>
    </div>
    <!-- Fourth Content -->
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
    <img src="images/image4.jpg" alt="" />
    <div class="info" >
    <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
    <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
    </div>
    </div>
    </div>


    • Klik Simpan Template

    Nb : Silahkan edit kode diatas dengan mengganti judul, deskripsi dan link content


    Semoga Bermanfaat...



    Artikel Terkait:

    Nobi Noku Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
    Dalam Judul : Membuat Slider Content Dengan Animasi jQuery
    Dalam Kategori :
    Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.

    5 komentar:

    joe mengatakan... Reply Comment

    nanti loadingnya jadi berat gak gan?

    Noubi noku mengatakan... Reply Comment

    Tergantung apakah blog mas nya berat atau gak.... Tes aja lewat website test jika tidak terlalu berat pasang aja Keren nie.......

    makasih yaa. . . berat tidak nya buat blog gw g berpengaruh sama JQUERY aq udah pasang 3 jenis loadingnya tetap aja sama sebelum gw pke JQUERY

    cara mengatur lebar slider yang mana y gan?
    mklum gan,, masih newbiee

    risky mengatakan... Reply Comment

    keren,, :a :p

    :a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :y: :z:

    Poskan Komentar

    Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya

     
     
     

    Temukan Kami Dalam FB

    Sahabat Blogger

    http://nobinoku.blogspot.com/

    Tukeran Link Yuk..!! Silahkan copy kode di atas..!!
    Saya akan segera link balik..!! Link & Banner Teman
    powered by PRBbutton Powered by  MyPagerank.Net backlink Site Meter http://www.wikio.com Free Automatic Backlink
    Check Google Page Rank
    Cerita Seks Panas Dewasa 17Tahun
    free counters
     
    Copyright 2010 - 2011 © This Is My Art | Didukung Oleh : Blogger
    Template Name : Evolution Magazine Template | Modification by : Argabluesky