» » Cara Membuat Recent Post Rapi Dengan Java Script & Scoller Box

Cara Membuat Recent Post Rapi Dengan Java Script & Scoller Box

Kali ini Ranjang Informasi memberikan Script untuk merapikan tampilan blog. Mungkin Javascript dan Scroller Box ini bisa menjadi sebuah solusi untuk mengatasi ruwetnya membuat sebuah daftar posting atau recent post. Dengan sekali pasang, maka sampeyan tidak perlu susah-susah untuk mengisi daftar posting secara manual karena javascript recent post ini akan secar otomatis tertambahkan oleh judul posting yang baru ketika sebuah posting diterbitkan. 

Bingkai scroller box yang cantik tentunya akan semakin membuat tampilan blog bertambah menarik. 

Lebar scroller didesain sebesar 500px supaya judul yang cukup panjang tidak perlu terpotong hingga daftar teks judul akan terlihat bertumpuk. Cukup dengan menggeser scroller box ke kanan-kiri atau ke atas-bawah, maka semua judul posting akan terlihat dengan amat sempurna. Karena beberapa widget di sidebar blog banyak yang teramat sempit, oleh karena itu scrollernya juga kita buat fleksibel sesuai lebar widget blog sampeyan.

Tentang bisa tidaknya javascript recent post ini untuk dipasang di blog, kiranya tidak perlu kuwatir sebab javascript ini telah melalui uji coba di blog dan hasilnya bisa dikatakan cukup memuaskan.

Kode HTML, CSS dan Javascript Recent Posts


<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(image-1) no-repeat 0 50%;padding-left:15px;}
.daftar_posting a:hover{color:red;}
</style>
<div style="margin:2px; padding:4px;border:2px solid #888;background:#333;">
<div style="border:2px 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="URL BLOG/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
</div>
</div>

Langkah pembuatannya sebagai berikut :
  1. Login : Login ke BloGGeR dengan menuliskan User Name atau Email Address kemudian tuliskan juga Password (Sandi). KLIK Login.
  2. Dasboard (Dasbor) : Beberapa saat kemudian kita akan melihat sebuah halaman baru yang biasa disebut sebagai Dasbor. Di halaman ini ada beberapa link dengan berbagai fungsi, silahkan KLIK link Design (Rancangan).
  3. Design (Rancangan) : Di bagian ini kita akan jumpai Page Elements/Elemen Laman. Silahkan KLIK Add Gadget (Tambah Gadget).
  4. Elemen Laman : KLIK Add Gadget/Tambah Gadget. Tunggu beberapa saat.
  5. KLIK HTML/Javascript.
  6. Setelah box widget terlihat, Copy kode HTML dan Javascript dan pastekan di dalam box. KLIK SAVE/Simpan.
  7. Buka Blog untuk melihat hasilnya.

Kode yang harus di ganti :


1. Ganti kode yang berwarna merah sebelum Kode HTML dan Javascript di pasang :
  - Image-1, silahkan ganti dengan : » http://i49.tinypic.com/27ziu80/gubhugreyot/images/bgRPli.gif
  - URL BLOG dengan URL blog sampeyan. Misalnya : » http://gubhugreyot.blogspot.com
2. Apabila ruang untuk teks judul posting kurang lebar, silahkan rubah width:500px; dengan nilai yang lebih besar. Perubahan pada kode ini mungkin hanya perlu dilakukan ketika semua sudah terpasang dan setelah terlihat hasilnya memang sangat diperlukan untuk diperbesar. Lebar 500px sepertinya sudah mencukupi untuk sebuah judul posting.
3. Untuk merubah tinggi scroller, lakukan pada : height:250px;
4 Apabila daftar poting terlalu di sebelah kiri (tanda panah menghilang/terpotong), kurangi nilai pada kode : - margin-left:-40px;


Beri komentar pada : Cara Membuat Recent Post Rapi Dengan Java Script & Scoller Box
Labels: Panduan Membuat Blog

Terima Kasih sudah membaca artikel Cara Membuat Recent Post Rapi Dengan Java Script & Scoller Box. Bantu Like dan sebarkan melalui fb, tweeter, dll dibawah ini.. Salam Hangat..!

0 Comment for "Cara Membuat Recent Post Rapi Dengan Java Script & Scoller Box"

Back To Top