Membuat Recent Post Dengan Scrool



Untuk mebuat Recent Post seperti pada demo diatas cukup mudah ko, sobat tinggal ikuti langkah-langkah dibawah ini :
  1. Login Ke Akun Blogger Sobat > Klik Template 
  2. Klik Edit HTML 
  3. Jangan Lupa Centang Expand Template Widget
  4. Kemudian Cari Kode </head> Gunakan Ctrl+F untuk mempercepat pencarin, dan letakan kode Javascript Dibawah ini tepat di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

Dan dibawah ini Kode yang harus agan pasang di side bar.
Caranya tinggal agan tambahkan widget dan masukan script dibawah ini lalu simpan.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style media="screen" type="text/css">
<!--

/* ========== Scrolling Recent Posts Widget By joens-tutorial.blogspot.com ======== */

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

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

#joenstutorial-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/AVvXsEhInM9Ecj5uXMqSoNLdl_IWTgypEjG-vGSnRPrgmJDBL6Ce6iZRKD_oDyrGAX9md_4AcLNKmNHreXa4iCNMu1_8ia8ltvGJ5-JlThjvPqLFzoinAkkwSQ6T9fH5wCXacPnwUPwZYNlxH3k8/s1600/joens-tutorial.blogspot.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

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

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

#joenstutorial-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);
}

#joenstutorial-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 joens-tutorial.blogspot.com ======== */

</style>
--&gt;

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhno3MGxFm3lJMwlF4UhLvSFe_W_67otmiEyqHA9_HcgzOIKO2v7p6udiosESP2JBUKbScIrpyyyX4FELMy093sJxHHnmuBEQv6Z5y_xFsrS8H2koPsc0xLzNWhD2Xi1BFt2HsPqTJe2FmF/s1600/joens-tutorial.blogspot.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhno3MGxFm3lJMwlF4UhLvSFe_W_67otmiEyqHA9_HcgzOIKO2v7p6udiosESP2JBUKbScIrpyyyX4FELMy093sJxHHnmuBEQv6Z5y_xFsrS8H2koPsc0xLzNWhD2Xi1BFt2HsPqTJe2FmF/s1600/joens-tutorial.blogspot.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhno3MGxFm3lJMwlF4UhLvSFe_W_67otmiEyqHA9_HcgzOIKO2v7p6udiosESP2JBUKbScIrpyyyX4FELMy093sJxHHnmuBEQv6Z5y_xFsrS8H2koPsc0xLzNWhD2Xi1BFt2HsPqTJe2FmF/s1600/joens-tutorial.blogspot.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhno3MGxFm3lJMwlF4UhLvSFe_W_67otmiEyqHA9_HcgzOIKO2v7p6udiosESP2JBUKbScIrpyyyX4FELMy093sJxHHnmuBEQv6Z5y_xFsrS8H2koPsc0xLzNWhD2Xi1BFt2HsPqTJe2FmF/s1600/joens-tutorial.blogspot.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhno3MGxFm3lJMwlF4UhLvSFe_W_67otmiEyqHA9_HcgzOIKO2v7p6udiosESP2JBUKbScIrpyyyX4FELMy093sJxHHnmuBEQv6Z5y_xFsrS8H2koPsc0xLzNWhD2Xi1BFt2HsPqTJe2FmF/s1600/joens-tutorial.blogspot.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://joens-tutorial.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="joenstutorial-widget">
<script src="http://joens-tutorial.googlecode.com/files/joens-tutorial-recent-post.js" type="text/javascript"></script>
</div>

Note :
Ganti Tulisan http://joens-tutorial.blogspot.com/ dengan alamt blog sobat
Visit Kabar Sehat

Related Posts

6 Responses to "Membuat Recent Post Dengan Scrool"

  1. gan kalau mau diganti jumlah post yg didalamnya bagaimana?

    ReplyDelete
    Replies
    1. Tinggal di rubah aja tulisan
      numposts = 10; angka 10 ganti sesuai keinginan sobat

      Delete
    2. ok sob, terima kasih infonya :)

      Delete
    3. ok gan,,,,, thank atas kunjungannya

      Delete
  2. thank gan atas kunjungannya serta supportnya. ok gan

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami M. Alex Joenaedi

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel