Cara Membuat Recent Post Bergambar dan Berputar di blog

Sebelumnya saya memposting Cara Tercepat Memasang Widget Recent Post Bergambar sekarang saya akan post bagaimana Recent Post tersebut bisa bergerak seperti dizoom..ini akan bekerja apabila gambar tersebut disentuh kursor mouse,,apablia mouse anda tidak ada maka gambar tersebut tidak akan bergerak2,,

• Login ke Blog anda >> Klik Tata LEtak / Layout >> Add Gadget
• Copy kode di bawah ini 

 <style type="text/css" media="screen">
<!--

/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

#helperblogger-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#helperblogger-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#helperblogger-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgytBCGzxrWekjzrchznW6-THAu8ZlXGGMLIxaoI1KQEE1A_PCn25NUbpKfmds1jCQ8Qosg4gAw-0FMh8kXsQlQxKbUGwH-jtzLJocTAjybXY9RsWsw2b54PY_5A4t1bWh1loubdSGj6Q/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

#helperblogger-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#helperblogger-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#helperblogger-widget img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#helperblogger-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}

/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

-->
</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidu8bec7-L9mRzSsIc_YKw1xXa9EXW4Oz89xPstaNC6xNUSaqaZc6vCFV197Z6VlHH8F3TxQI6VNLJuYJfphnExZhTVSccUw8mB8fuWEZebSmbmN_rVS3mwkRUCzBCbtvLDIttBWkqzVY/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidu8bec7-L9mRzSsIc_YKw1xXa9EXW4Oz89xPstaNC6xNUSaqaZc6vCFV197Z6VlHH8F3TxQI6VNLJuYJfphnExZhTVSccUw8mB8fuWEZebSmbmN_rVS3mwkRUCzBCbtvLDIttBWkqzVY/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidu8bec7-L9mRzSsIc_YKw1xXa9EXW4Oz89xPstaNC6xNUSaqaZc6vCFV197Z6VlHH8F3TxQI6VNLJuYJfphnExZhTVSccUw8mB8fuWEZebSmbmN_rVS3mwkRUCzBCbtvLDIttBWkqzVY/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidu8bec7-L9mRzSsIc_YKw1xXa9EXW4Oz89xPstaNC6xNUSaqaZc6vCFV197Z6VlHH8F3TxQI6VNLJuYJfphnExZhTVSccUw8mB8fuWEZebSmbmN_rVS3mwkRUCzBCbtvLDIttBWkqzVY/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidu8bec7-L9mRzSsIc_YKw1xXa9EXW4Oz89xPstaNC6xNUSaqaZc6vCFV197Z6VlHH8F3TxQI6VNLJuYJfphnExZhTVSccUw8mB8fuWEZebSmbmN_rVS3mwkRUCzBCbtvLDIttBWkqzVY/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.URL BLOG ANDA.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="helperblogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div>

•  Lalu paste pada kolom yang sudah ada, dan silahkan beri judul sesuai selera anda.
•  Ubah tulisan URL BLOG ANDA dengan URL anda sendiri
•  Klik save lalu lihat hasilnya. Selamat mencoba ^_^

Related Post :

Posted in: Blog