Cara buat recent post / posting terbaru bergerak

Home / widget / Cara buat recent post / posting terbaru bergerak

Cara buat recent post / posting terbaru bergerak

Posted by Unknown Kamis, 27 September 2012 0 komentar

glundong.com

Post atau yang lebih dikenal postingan terbaru merupakan widget yang sangat berpengaruh dalam menarik daya tarik blogger. Selain itu para pembaca setia-pun akan mengetahui postingan terbaru yang akan mereka ikuti, karena itulah saya coba cari tutorial cara mudah membuat recent post tampilan slide show untuk membantu blogger mania yang ingin menerapkan widget ini pada blog mereka.

Proses ini memerlukan 2 kali tahapan, yang pertama teks umpan Javascript pada elemen edit HTML, yang kedua masuk pada elemen add gadget. Langsung saja kita praktekkan:

LANGKAH 1 :

1. Log in ke blog anda >> masuk dasbor blogger >> klik template

2. Klik edit HTML >> klik LANJUTKAN

3. Cari kode berikut </ Head>

biar mudah dan cepat tekan CTRL + F

4. Lalu copi paste-kan kode di bawah ini tepat di atas kode no. 3

5. Terakhir klik save

LANGKAH 2 :

1. Masuk dasbor blog >> klik tata letak

2. Klik add widget lalu cari opsi HTML javascript

3. Lalu paste kode di bawah ini pada kolom yang sudah tersedia

/ * ========== 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 repeat-x;
    border: solid 1px # ddd;
}

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

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

# Helperblogger-widget img {
    -Webkit-transisi: semua kemudahan 0.5s;
    -Moz-transisi: semua kemudahan 0.5s;
    Transisi: semua kemudahan 0.5s;
    padding: 4px;
    background: # eee;
    background:-webkit-gradient (linear, kiri atas, kiri bawah, dari (# eee), warna-stop (0.5, # ddd), warna-stop (0.5, # c0c0c0), untuk (# 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: 0px 0px 0px 1px;
    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>

4. Klik save

NB.
Untuk menyesuaikan dengan blog anda, ganti URL www.glundong.blogspot.com dengan URL blog anda sendiri.

numposts = 10; Total jumlah posting yang Anda ingin tampilkan
limitspy = 4; Jumlah tulisan yang tampil pada widget
intervalspy = 4000; Scrolling kecepatan widget, jika Anda mengurangi nilainya maka slide-nya akan bergerak semakin cepat.

Opsi di atas bisa anda sesuaikan sendiri, dan selamat mencoba.

Cara buat recent post / posting terbaru bergerak

If You Like This Post, Share it With Your Friends

0 komentar:

Posting Komentar

Arsip Blog

Popular Posts

Mengenai Saya

Recent comment

Labels

Statistic blog