animasi recent pos dengan efek rotating hover

moonroemoort

jquery, widget

5 December 2013

4 Komentar

bingung mau share apaan , soalnya ane paling nggak bisa kalo nulis artikel ,,
ya bukannya nggak bisa sih tapi males mikir ....
yaudahlah share tentang blogging ajjeh ....
kali ini moonroemoort akan share animasi recent pos dengan efek rotating hover
kurang lebih jadinye kaya di atas tuh  brader
 

ikuti langkahnya

• login blogger
• klik menu TATA LETAK
• tambah gadget > HTML/jacascript
• masukan kode di bawah ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

hapus kode di atas jika di blog anda sudah terdapat kode jquery
jika belum terdapat sambung dengan 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/AVvXsEj1AUbMb1hN2ot_Sj10cjMvlBfVcZ5BR76g1lDFM6HmHNIs2JKtOTnxHPfU_pj5GNxT6RG5lTf6UQa0XRpLb42XLF_7kJvl_xWf67KuHaDuJlVNHQsW1SERlnOtuS1Dy5PEsQA2ZfZMfSA/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/AVvXsEirpmhoYJyyxyr-WY_NNKCbyncG-FgYrQ5O9Bs1IwIKTl8Z4XEoPucxDRfClhtnwfrmb-T1vZj8ESnoRIo_kB3ommIYLETxMFLsICQxbkR9K0qlWMOKVQJOEeSQ0atyf2DApoiOW0j8JNk/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirpmhoYJyyxyr-WY_NNKCbyncG-FgYrQ5O9Bs1IwIKTl8Z4XEoPucxDRfClhtnwfrmb-T1vZj8ESnoRIo_kB3ommIYLETxMFLsICQxbkR9K0qlWMOKVQJOEeSQ0atyf2DApoiOW0j8JNk/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirpmhoYJyyxyr-WY_NNKCbyncG-FgYrQ5O9Bs1IwIKTl8Z4XEoPucxDRfClhtnwfrmb-T1vZj8ESnoRIo_kB3ommIYLETxMFLsICQxbkR9K0qlWMOKVQJOEeSQ0atyf2DApoiOW0j8JNk/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirpmhoYJyyxyr-WY_NNKCbyncG-FgYrQ5O9Bs1IwIKTl8Z4XEoPucxDRfClhtnwfrmb-T1vZj8ESnoRIo_kB3ommIYLETxMFLsICQxbkR9K0qlWMOKVQJOEeSQ0atyf2DApoiOW0j8JNk/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirpmhoYJyyxyr-WY_NNKCbyncG-FgYrQ5O9Bs1IwIKTl8Z4XEoPucxDRfClhtnwfrmb-T1vZj8ESnoRIo_kB3ommIYLETxMFLsICQxbkR9K0qlWMOKVQJOEeSQ0atyf2DApoiOW0j8JNk/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.favoritebtemplates.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>

• klik simpan 

KETERANGAN :

• ganti tulisan yang berwarna merahdengan URL blog brader
•  beri tanda [/] (garis miring ) pada akhir url blog brader
  contoh : http://chenkho.blogspot.com/