Trik Mudah Membuat Recent Post Keren Di Blog

Cara Membuat Recent Post Keren di Blog | Hadir kembali dengan saya nih, untuk kali ini DSA Blog akan berbagi tips lagi yang ga kalah pentingnya untuk blog anda yaitu Cara Membuat Recent Post Keren di Blog.

Recent post ini sangat berguna agar pengunjung blog anda yang masuk ke salah satu artikel anda tidak usah harus ke homepage blog anda dulu agar bisa melihat postingan terbaru anda, ok hanya itu penjelasan singkatrnya berikut langkah-langkahnya!

• Login ke blog anda
• Masuk ke blog dashbor
• Masuk ke template
• Pilih edit HTML
• Cari kode </head> dengan menggunakan Ctrl+F
• Pastekan kode di bawah 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>

• Save template
• Kemudian masuk ke tata letak/layout
• Klik tambah widget di manapun yang anda suka
• Pilih HTML/javascript
• Masukan kode di bawah ini

<div style="overflow:auto;width:ancho;height:250px;">

<style type="text/css" media="screen">
<!--
#mediablogger-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}
#mediablogger-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}
#mediablogger-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/AVvXsEil54LWTM2_OD0WJ0f1wAEXgLpaXDH_9V_aWrkhvOO_ejGHsnh1AwBX1Bnm0J4o-aLFlKyaEfl423K7skeKHAIYIYZZx7wdNlI0jOiJhOBqweIhySH6WMhGqkiYsWCMRyiYjD0qG7VEsWY/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}
#mediablogger-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}
#mediablogger-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}
#mediablogger-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);
}
#mediablogger-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;
}
-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiug2bgWUEqz5ybjWjRx5h3hz9SM0Va_CDsIIb6QdB2S2MID4LnThHDbGXeNNTsR7QdtIhG2OsCEiiNxZUJPB0zZbEDk1ScJHPnI-5_-qJnEvscuWK_ZSqlqpD-NNgxJGocdkbJ14mDp5I/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiug2bgWUEqz5ybjWjRx5h3hz9SM0Va_CDsIIb6QdB2S2MID4LnThHDbGXeNNTsR7QdtIhG2OsCEiiNxZUJPB0zZbEDk1ScJHPnI-5_-qJnEvscuWK_ZSqlqpD-NNgxJGocdkbJ14mDp5I/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiug2bgWUEqz5ybjWjRx5h3hz9SM0Va_CDsIIb6QdB2S2MID4LnThHDbGXeNNTsR7QdtIhG2OsCEiiNxZUJPB0zZbEDk1ScJHPnI-5_-qJnEvscuWK_ZSqlqpD-NNgxJGocdkbJ14mDp5I/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiug2bgWUEqz5ybjWjRx5h3hz9SM0Va_CDsIIb6QdB2S2MID4LnThHDbGXeNNTsR7QdtIhG2OsCEiiNxZUJPB0zZbEDk1ScJHPnI-5_-qJnEvscuWK_ZSqlqpD-NNgxJGocdkbJ14mDp5I/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiug2bgWUEqz5ybjWjRx5h3hz9SM0Va_CDsIIb6QdB2S2MID4LnThHDbGXeNNTsR7QdtIhG2OsCEiiNxZUJPB0zZbEDk1ScJHPnI-5_-qJnEvscuWK_ZSqlqpD-NNgxJGocdkbJ14mDp5I/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://downloadsoftwareapp.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>
<div id="mediablogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div></div>

Nb : kode yang berwarna merah anda ubah dengan URL blog anda

• Beri nama sesuai keinginan anda
• Save dan lihat hasilnya

Monggo dicoba kalo ada error atau susah pasangnya komentar aja . sebaiknya di fb biar fast response :D

Tweet