Cumulus swf - flash

Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Membuat Widget Recent Posts - Daftar Posting Terbaru

Panduan dan Tutorial BloGGeR Posts :

Recent Posts atau bisa juga nantinya di beri judul "Daftar Posting Lengkap" seperti contoh di bawah, sangat bermanfaat bagi pembaca blog untuk menelusuri dan mendapatkan posting dengan lebih cepat dan mudah. Apa yang terlihat di bawah ini hanyalah sekedar contoh untuk mendemonstasikan bentuk akhir dari recent post yang akan kita buat. Recent posts ini juga bermanfaat untuk meringankan kerja karena daftar isi secara otomatis tertambahkan dengan judul posting terbaru ketika posting diterbitkan. Untuk memudahkan kita melakukan improvisasi, baik box ataupun teksnya, desain recent posts ini juga menyertakan KODE CSS yang mudah dimengeri oleh blogger pemula sekalipun.

Langkah untuk membuat Daftar Posting - Recent Posts :

  1. Login ke Blogger (Login to Blogger).
  2. Dasbor (Dasboard).
  3. Rancangan (Design).
  4. KLIK Elemen Laman (Page Elements).
  5. HTML/Javascript.
  6. Copy paste KODE HTML (KODE CSS, Javascript dan xHTML).
  7. KLIK SIMPAN (SAVE).
  8. Buka blog untuk melihat hasilnya.

KODE CSS, Javascript dan xHTML :


<style type="text/css">
.daftar_posting{list-style:none;margin-left:-20px;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(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/mart-2010/images/DoubleRedArrow.gif) 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="http://Alamat Blog/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
</div>
</div>

Keterangan/Catatan :


1. margin-left:-20px; digunakan untuk mengatur jarak setiap judul posting dari batas kiri box. Apabila kurang ke kiri perbesar dalam nilai minus (misal jadi -30px).
2. Ganti Alamat Blog dengan Alamat blog kamu : misalnya
gubhugreyot.blogspot.com
3. Box Daftar Posting ini akan lebih bagus seandainya ditempatkan pada ruangan widget dengan lebar mencukupi (di atas 350px) supaya setiap judul posting tidak terputus (pindah spasi).
4. Penggunaan warna background dan warna font dapat di atur pada KODE CSS.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » January, 09, 2012

» Happy Blogging - gubhugreyot «

11 komentar:

  1. wakh gmna nih.,,gan...mzak stelah q pasang script tdi.,.,.background blog gwe jdi rusak...

    BalasHapus
  2. Buh .. sial!
    Bener kata sampeyan! Ada gambar yang nyelonong mo ikutan tampil. Ups ... dasar gambar kurang kerjaan. Untung saja sampeyan bilang. Klo enggak?! Pasti banyak yang pada ikutan kena penyakit.
    Udah tak benerin, nih...
    Makasih banget, commentnya. Nih untungnya ada nyang kasih comment. Jadi bisa kontrol ulang ma postingnya.

    Salam ...

    gubhug reyot

    BalasHapus
  3. trus html diatas udah di benerin blom gan,soalnya ku juga takut rusak blogku nih....
    maklum saya masih newbie.
    so,law mank udah di benerin saya mau coba-caoba.....

    BalasHapus
  4. slm kenal.... i like your blog and keep posting

    BalasHapus
  5. pengin nyoba ..tapi ga bisa di kopas ya kodenya???

    BalasHapus
  6. trims q uda bikin. wkkwkw GBU

    BalasHapus
  7. Makasih boz............. dah bagi pengalaman

    BalasHapus
  8. Blog walking gan....
    waw...keyeeen....
    http://blitari.blogspot.com/

    BalasHapus
  9. kok saya buat mahal tampilan nya blank hitam??
    gak ada recent document nya??,
    cara masukin nya gmna , tolong infonya dong??

    BalasHapus

 
GR | Edited by | gubhug reyot