Sunday, June 29, 2014

Cara Memasang Recent Posts Di Bawah Postingan

Mungikn Anda sudah sering dengar dengan istilah Recent Posts yang artinya menampilkan artikel terbaru kita pada bagian tertentu agar pengunjung kita tahu bahwa artikel terbaru kita atau update terakhir kita seperti apa.

Menurut pribadi saya sangat berguna, mengapa? Karena di blog  saya kebanyakan yang baca rata-rata datang dari mesin pencarian, untuk mempermudahkan mereka untuk melihat artikel terbaru kita tidak salah rasanya kalau kita pasang recent posts dibawah postingan.

Sebetulnya recent posts ini bisa dipasang pada bagian sidebar, tapi sepertinya kurang profesional, selain itu juga memakan ruang dibagian sidebar. Agar bisa menghindari dua hal tersebut maka saya berpikir akan lebih bagus juga recent posts dipasang dibawah postingan.


01. Simpan CSS bawah ini tepat diatas ]]></b:skin> atau </style>


#recent {
   width:100%;
   color:#372F2F;
   text-align:left;
   margin:0 auto;
   text-transform:uppercase;
   font:25px Oswald;
   font-weight:700;
   position:relative;
   margin-left:-1px;
   margin-bottom:-15px;
   border-bottom:6px solid #ddd;
}
.recent-posts a {
   font:14px Arial; /* -- text link -- */
   color:#333; /* -- warna link -- */
   padding:5px;
   text-decoration:none;
   overflow:hidden;
}
.recent-posts a:hover {
   background:#3B5999;
   color:#fff;
   text-decoration:none;
}
.author {display:none;}

02. Selanjutnya cari kode <data:post.body/>, (yang kedua), dan pastekan HTML bawah ini tepat di bawah kode kedua <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='recent'>Latest <span style='color:#D52323;'>Articles</span>:</div>
<script type='text/javascript'>
    //<![CDATA[
        var homePage = "http://url-blog-anda.com",
        numPosts = 5 ;
        //]]>
</script>
<script src='https://googledrive.com/host/0Bx1BDhFqeIKHdHRLckFBWm5BXzg' type='text/javascript'/>
<ol id='recent-posts'/>
</b:if>

var homePage = "http://kangusbat.blogspot.com/", (Sesuaikan URL Blog Anda)
numPosts = 5 ; (Jumlah post yang ditampilkan)

Simpan dan lihat hasilnya.
Previous Post
Next Post