Membuat Daftar Postingan di Blog

Selamat siang sobat semua…...

Tips cara membuat daftar postingan pada blog telah banyak diulas. Namun pada kesempatan kali ini, saya mencoba mengulas kembali dengan ulasan sederhana, mungkin bisa membantu sobat yang kesulitan memahami cara membuatnya.

Menampilkan daftar postingan pada blog ( Recent Post) menurut saya memang terasa lebih menarik dan cukup membantu jika ingin melihat hasil postingan yang berbentuk barisan judul saja. Dalam kotak menu daftar judul tinggal dijalankan keatas dan kebawah melalui scroll. Ilustrasi Menu daftar postingan yang bisa digerakkan keatas dan kebawah ini, sepertinya  kita melihat langsung semua isi keseluruhan postingan pada blog, yang disodorkan dalam bentuk judul.

Langkah-langkah Membuat Daftar Postingan atau Recent Post:

Langkah-langkahnya:

Tata Letak> Add Widget> HTML/Javascript.

Copy paste kode HTML dibawah ini

Uraian:


Pertama buka blog sobat, kemudian klik opsi lainnya

 

Lalu Pilih Tata Letak

Pilih Tambahkan Gadget. Terserah posisi dimana Daftar Postingan akan ditempatkan.

Atau jika padaTata Letak  templatenya sudah ada Recent Post tinggal klik Edit  untuk membuka lalu copy paste script dibawah ini. 

Kemudian Pilih HTML/Javasript

Lalu copy paste kode script dibawah ini. Beri judul Recent Post atau terserah sobat. 

<style type="text/css">

.daftar_posting{list-style:none;margin-left:-40px;font-family:Droid

Serif;font-size:11px;color:lime;text-align:left;}

.daftar_posting a{color:yellow;border-top:1px dotted

blue;border-bottom:1px dotted blue;background:transparent url(http://i964.photobucket.com/albums/ae124/gubhugreyot

/Arrow/DoubleRedArrow.gif) no-repeat 0 50%;padding-left:15px;}

.daftar_posting a:hover{color:red;}

</style>

<div style="margin:1px; padding:4px;border:2px solid

#888;background:#333;">

<div style="border:1px solid

#444;overflow:auto;padding:4px;background:#111;height:250px;

">

<div style="width:500px;">

<script style="text/javascript">

var numposts = 1000;

var showpostsummary = false;

var standardstyling = true;

function showrecentposts(json) {document.write('<ol

class="daftar_posting">');

for (var i = 0; i < numposts; i++) { document.write('<li>');

var entry = json.feed.entry[i]; var posttitle = entry.title.$t;

var posturl; if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;

break;}}

posttitle = posttitle.link(posturl);

if ("content" in entry) { var postcontent = entry.content.$t;}

else

if ("summary" in entry) { var postcontent = entry.summary.$t;}

else var postcontent = ""; var re = /<\S[^>]*>/g;

postcontent = postcontent.replace(re, "");

if (!standardstyling) document.write('<div class="bbrecpost">');

if (standardstyling) document.write(posttitle);

if (!standardstyling) document.write('</div><div

class="bbrecpostsum"">');

if (showpostsummary == true) { if (standardstyling)

document.write('<br/>');

if (postcontent.length < numchars) { if (standardstyling)

document.write('<i>');

document.write(postcontent); if (standardstyling)

document.write('</i>');}

else { if (standardstyling) document.write('<i>');

postcontent = postcontent.substring(0, numchars); var

quoteEnd = postcontent.lastIndexOf(" ");

if (standardstyling) document.write('</i>');}}

if (!standardstyling) document.write('</div>'); if (standardstyling)

document.write('<br/>');

document.write('</li>');}

document.write('</ol>');

if (!standardstyling) document.write('<div

class="bbwidgetfooter">');

if (standardstyling) document.write('<br/>');}

</script>

<script src="http://kangfathur232.blogspot.com/feeds/posts

/default?orderby=published&alt=json-in-script&

max-results=999&callback=showrecentposts"></script>

</div>

</div>

</div>

Keterangan

• Margin-left:-40px: Berfungsi mengatur jarak setiap judul dari batas kiri box Recent Post. Ukurannya bisa dirubah sesuai yang diinginkan. Contohnya ( -20px)
• 500px : Ukuran lebar Box. Bisa dirubah sesuai yang diinginkan. Biasanya ukuran dibawah 500px misalnya 350px tampilannya kurang bagus, karena Judul Postingan terputus karena pindah ke spasi baru, mengikuti lebar boxnya. Kecuali Judul postingannya pendek sekali. 
• Perubahan warna background dan warna font bisa dirubah pada Kode CSSnya. Demikian juga dengan ukuran tinggi box.
• <script src="http://kangfathur232.blogspot.com/feeds/posts diganti dengan Url sobat sendiri. 

Semoga Bermanfaat