Cara Pemasangan pada blog

Cara membuat popular post dengan efek gambar berputar pada blog :
1. Log in ke Blogger
2. Rancangan
3. Tambah Gadget => Pilih Popular Posts
4. Beri Judul Popular Posts

Langkah selanjutnya :
1. Rancangan => Edit HTML
2. Cari kode ]]></b:skin> kemudian letakkan kode berikut di atasnya

.popular-posts .item-thumbnail {
    float: left;
}

.popular-posts ul {
    padding-left: 30px;
}

.popular-posts ul li {
    list-style-image: none;
    list-style-type: none;
    display: inline;
}

.popular-posts ul li img {
    padding: 0px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border: 2px solid #CCC;
}

.popular-posts ul li img:hover {
    border: 2px solid #ccc;
    -moz-transform: scale(1.3) rotate(-360deg);
    -webkit-transform: scale(1.3) rotate(-360deg);
    -o-transform: scale(1.3) rotate(-360deg);
    -ms-transform: scale(1.2) rotate(-360deg);
    transform: scale(1.3) rotate(-360deg);
}

3. Selanjutnya anda cari kode

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

4. Silahkan anda hapus kode diatas dan ganti dengan kode di bawah 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>
                <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'>
                                    <div class='item-thumbnail'>
                                        <a expr:href='data:post.href' expr:title='data:post.title'>
                                            <b:if cond='data:post.thumbnail'>
                                                <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' /><b:else/>
                                                <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.freetradeireland.ie/site/images/no-image.gif' />
                                            </b:if>
                                        </a>
                                    </div>
                                </div><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>
            </ul><b:include name='quickedit' />
        </div>
    </b:includable>
</b:widget>