Senin, 21 November 2011

JQuery Feature Widget Gaya Posting Untuk Blogger

18.40  ,  No comments
Pada tulisan ini saya akan share tentang tutorial membuat widget slide show berbasis JQuery untuk postingan populer diblog sobat. Widget ini dapat membuat total tayangan laman blog sobat menjadi meningkat, sobat bisa update secara manual dengan menggunakan widget ini, tentunya postingan yang menurut sobat paling berkualitas untuk ditampilkan. Sebelum lanjut ke langkah-langkah pembuatan slide show, saya sedikit memberitahu sobat bahwa widget ini dapat membuat loading page blog sobat menjadi sedikit lambat.

Langkah 1 :
Sobat login dulu ke akun blogger sobat, kemudian sobat pilih Rancangan > Edit HTML

Langkah 2 :
Cari code ini ]]></b:skin> gunakan tombol Ctrl+F pada keyboard

Langkah 3 :
Copy dan paste code dibawah ini tepat diatas ]]></b:skin>
#featured{
width:336px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
    position:absolute;
    top:0; left:336px;
    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:336px; 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIHy-QNuL29WlIA2KLmk476J-VouPHO_JQtO9ouraaryz1UWIHNcmPHb7zO3FAUSMZxeS9Qu6Aw-Ov-CVhhLa_mITHZeTLpNcUY5L6jJO31mz-1c9Wt4FvhVmNaUUi3Z4a-NvwSHWH5Nc/s1600/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnZjpPCeX8zWUTpELkBdKzPyomkTgX5uOk6AFq9Kiao74iaWhhv0q3iGrPukwNX4vgcDBFED0D1Ch3cQZpi8_mePP-vFhb66T_ZqOfVlmsd1YZOdDyQEOtpe41g-CAcgConJ9CGvRNsO8/s1600/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;
}

.ui-tabs-nav-item img {
width:45px;
height:45px;
}
Langkah 4 :
Gunakan tombol Ctrl+F dan cari code ini </head>, kemudian Copy dan Paste code dibawah ini tepat diatas code </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
    $(document).ready(function(){
        $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
    });
</script>
Langkah 5 :
Simpan Template

Langkah 6 :
Kembali ke menu Rancangan, kemudian sobat pilih  Tambah Gadget > HTML JavaScript, Copy dan Paste code dibawah ini didalamnya.
<div id="featured">

          <ul class="ui-tabs-nav">
            <li class="ui-tabs-nav-item ui-tabs-selected">
<a href="#fragment-1">
<img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg" />
<span>15+ Excellent High Speed</span></a></li>

            <li class="ui-tabs-nav-item">
<a href="#fragment-2">
<img alt="" src="http://2.bp.blogspot.com/_b0xJ7qk6DTc/TH_HWDk0CJI
/AAAAAAAAA8s/SpiYm3ZE69A/s1600/image2.jpg" />
<span>20 Beautiful Long Exposure</span></a></li>

            <li class="ui-tabs-nav-item">
<a href="#fragment-3"><img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg" /><span>35 Amazing Logo Designs</span></a></li>

            <li id="nav-fragment-4" class="ui-tabs-nav-item">
<a href="#fragment-4">
<img alt="" src="http://1.bp.blogspot.com/_b0xJ7qk6DTc/TH_FaAkb6ZI/
AAAAAAAAA8k/d9Qpzcs8sG4/s1600/image4.jpg" />
<span>Create a Vintage</span></a></li>
          </ul>

        <!-- First Content -->
        <div id="fragment-1" style="" class="ui-tabs-panel">
            <img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg" />

             <div class="info">
                <h2><a href="#fragment-1">15+ Excellent High Speed</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" style="" class="ui-tabs-panel">
            <img alt="" src="http://2.bp.blogspot.com/_b0xJ7qk6DTc/TH_HWDk0CJI/
AAAAAAAAA8s/SpiYm3ZE69A/s1600/image2.jpg" />

             <div class="info">
                <h2><a href="#fragment-2">20 Beautiful Long Exposure</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" style="" class="ui-tabs-panel">
            <img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg" />

             <div class="info">
                <h2><a href="#fragment-3">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" style="" class="ui-tabs-panel ui-tabs-hide">
            <img alt="" src="http://1.bp.blogspot.com/_b0xJ7qk6DTc/TH_FaAkb6ZI/
AAAAAAAAA8k/d9Qpzcs8sG4/s1600/image4.jpg" />

             <div class="info">
                <h2><a href="#fragment-4">Create a Vintage</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>
Langkah 7 : 
Selesai dan Simpan Gadget.

Keterangan : 
Code yang berwarna Biru, sobat gantikan dengan Url lengkap Postingan yang ingin sobat tampilkan
Code yang berwana Merah, Sobat ganti dengan Url gambar postingan sobat.
Tulisan yang berwarna Pink, sobat ganti dengan Judul Postingan sobat
Tulisan yang berwarna Hijau, sobat ganti dengan Deskripsi Postingan.

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)