Cara membuat recent post dengan efek gambar berputar

Cara membuat recent post dengan efek gambar berputar ketika kursor kita tujukan pada gambar ini sangat mudah dalam aplikasinya. Tapi syaratnya setiap anda posting jangan lupa untuk memasang gambar yang sesuai dengan tema postingannya, agar tampilan pada recent post kelihatan fresh. Widget ini dilengkapi pula dengan tanggal posting dan jumlah comment. Widget ini sangat cocok untuk anda yang pingin mempercantik tampilan blognya. Untuk mengetahui live demonya silahkan klik di sini, dan berikut tutorialnya:

1. Login ke blog anda >> Klik TATA LETAK / LAY OUT >> ADD GADGET

2. Copi kode di bawah ini

/* ========== 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/AVvXsEg3Nax7BSagD1i4dIuJAWkE4b6Zu02HKxXY0cRFTq2d3xDkmVH2hG4GaHBaN5GmFqbq7GZKwEXGoltDzsG1k0TjniDc1XhS_RPaDMBtZeRuLbC8FzfT3FF8d24jliiAQn-qj6te_UiTWMA/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>

Lalu paste pada kolom yang sudah ada, dan silahkan beri judul sesuai selera anda.

3. Ubah tulisan URL BLOG ANDA dengan URL anda sendiri

4. Klik save lalu lihat hasilnya. Selamat mencoba

Jika ada masalah silahkan sharing dengan berkomentar pada kolom di bawah ini.

About Me

Advertise

Status Blog ini

Link Bolo-Bolo

Cara membuat recent post dengan efek gambar berputar

14 Responses to "Cara membuat recent post dengan efek gambar berputar"

Label

Cari Blog Ini

Pengen Tanya Apa Bro?

Entri Populer

Comment Anyar