CARA MEMBUAT ENTRI POPULER DENGAN EFEK SLIDE & GAMBAR BERPUTAR

 Cara membuat Entri Populer dengan efek slide dan gambar bergerak berputar.

Lihat disini

DEMO



Berikut caranya :

1. Masuk ke akun blogger
2. Masuk ke bagian Tata Letak
3. Klik " Add Gadget " lalu Pilih/tambahkan Entri Populer

selanjutnya



4. Masuk ke bagian Template >> Klik Edit HTML
5. Cari kode ]]></b:skin>
    kalo sudah ketemu letakkan script dibawah ini dibawah kode ]]></b:skin>

 #PopularPosts1 {
    overflow:hidden;
    margin-top:2px;
    padding:0px 0px;
    height:700px;
    }
    #PopularPosts1 ul {
    width:280px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:0px 0px;
    }
    #PopularPosts1 li {
    width:280px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:80px;
    overflow: hidden;
    background:none;
    border:1px solid #ddd;
    }
    #PopularPosts1 li .item-title {
        color:#A5A9AB;
        font-size:12px;
        margin-bottom:2px;
    }
    #PopularPosts1 li .item-title a {
    text-decoration:none;
    color:#4B545B;
    font-size:11px;
    height:18px;
    overflow:hidden;
    margin:0px 0px;
    padding:0px 0px 2px 0px;
    }
    #PopularPosts1 li img {
     float:left;
    margin-right:5px;
    background:#EFEFEF;
    border:0;
    }
    #PopularPosts1 li .item-snippet {
    overflow:hidden;
    font-family:Tahoma,Arial,verdana, sans-serif;
    font-size:12px;
    color:#262B2F;
    padding:0px 0px;
    margin:0px 0px;
    }
    #PopularPosts1 .item-snippet a,
    #PopularPosts1 .item-snippet a:visited {
        color:#3E4548;
        text-decoration: none;
    }
    #PopularPosts1 .spyWrapper {
        height: 100%;
        overflow: hidden;
        position: relative;
    }
    #PopularPosts1 {
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
    }
    .tags span,
    .tags a {
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
    }
    a img {
        border: 0;
    }

selanjutnya

6. Cari kode dibawah ini :

    <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>

7. Kalo sudah ketemu letakkan kode dibawah  ini  setelah kode diatas tadi :

<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>

8. Setelah itu cari dibawahnya lagi kode </ul>, dan masukan kode dibawah ini tepat sebelum/diatas kode </ul> tersebut

</marquee>

Kira-kira seperti ini hasilnya :

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if></b:if>
</li> </b:loop>
</marquee> </ul>
<b:include name='quickedit'/></div>
</div>
</b:includable>
</b:widget>

9. Terakhir Simpan Template, dan lihat blog anda.

Sekian dan Selamat mencoba :))