Simple Recent Post untuk Blogger





   Oke, hari ini aku akan membagikan artikel tetang cara memasang Recent Post pada blogger. Sebelum itu apa sih kegunaan Recent Post? Diawal kita masuk blog kan sudah ada artikel/postingan terbaru. Ternyata Recent Post ini digunakan untuk menampilkan artikel/postingan terbaru kita saat seseorang sedang membaca artikel/postingan yang lain.


Apa yang dapat kamu lakukan dengan Widget Recent Post:
  • Menampilkan Artikel / Postingan terbaru hanya judulnya saja,
  • Merubah jumlah postingan,
  • Mengubah jumlah karakter postingan / kutipan,
  • Memunculkan tanggal posting.




Cara Memasang Recent Post / Postingan Terbaru
1. Masuk ke dalam blogger dasbor, kemudian pilih Tata Letak dan kemudian klik Tambahkan Gadget,


2. Dari windows pop-up, scroll ke bawah dan pilih HTML/JavaScript,


3. Pilih dan Copy kode dibawah ini dan Paste kode tersebut pada kotak HTML/JavaScript tadi,

Pilihan 1. Recent Post Widget dengan potongan artikel

<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCcDsQXwd6-K8s1kvTzXMy-WeaxJBgE79rQUHy4BPm_bEjlzW3OtzKPqP8ffzr8zdM5_KhCst3NSW2N5TRAeLG7olEWbpkjXJKqJ5o4nECo9g5f_PpuVIkyM-Ul7ybXD61k-_Lu-9wzng/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>
 Pilihan 2. Recent Post Widget hanya judul
<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCcDsQXwd6-K8s1kvTzXMy-WeaxJBgE79rQUHy4BPm_bEjlzW3OtzKPqP8ffzr8zdM5_KhCst3NSW2N5TRAeLG7olEWbpkjXJKqJ5o4nECo9g5f_PpuVIkyM-Ul7ybXD61k-_Lu-9wzng/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

4.
  • Ubah 5 dan 10 dengan jumlah postingan yang ingin kamu tunjukan.
  • Ubah false ke true jika kamu ingin tanggal posting muncul.
  • Ubah angka 100 menajadi angka yang kamu inginkan jika ingin memunculkan beberapa karakter huruf.
  • Untuk mengubah warna dan ukuran font dari link, blue untuk warna dan violet untuk ukuran huruf.  
  • Untuk mengubah warna ketenrangan, hijau (warna) dan oranye (ukuran font).
  • Ganti kata-kata your-blog  menjadi alamat blog yang kamu miliki.


Sekian dari artikel hari ini, semoga bermanfaat bagi para pembaca.
Previous
Next Post »