30 July 2013

Home » , » Tutorial 73 : Featured Content Slider Using JQuery

Tutorial 73 : Featured Content Slider Using JQuery

Admin PAIM | Tuesday, July 30, 2013 | 0Comments |
Photobucket

Meh klik sini.Bersedekah itu satu amalan yang mulia

 


Berikut tutorial menambahkan featured content slider menggunakan JQuery ini pada template blogger.
  1. Setelah sign in pada account blogger s>>> pada dashboard>>> Edit HTML
 
2. Tambahkan Script JQuery berikut sebelum tag </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>

 3. Tambahkan juga script berikut setelah kode diatas

 <script>$(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });</script>

 Catatan: 5000 adalah kecepatan link hover berpindah dari satu content ke content berikutya

4. Selanjutnya tambahkan kode CSS berikut diatas tag  ]]></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;
}
 catatan: Sila edit css diatas dengan menambahkan image selected item, image transparent, atau  jika  ingin mengganti ukuran dari widget dan mengganti warna dari hover link dll.


4. Tambahkan kode HTML berikut diatas <div id='main-wrapper'> atau  juga tambahkan pada bahagian 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>

 Catatan: Silahkan edit kode diatas dengan mengganti judul, deskripsi dan link content
6. Simpan template
Selesai.
Semoga bermanfaat.
View Live Demo


Syukran jiddan.Sila tekan like dan send jika suka entri ini ..^_^

No comments:

Related Posts Plugin for WordPress, Blogger...

Design By Saidatul Qifayah | For ! MSH PRODUCTIONS 2013-2014 ©| Resolution: 1366 x 768px | Best View: Google Chrome