contact
Test Drive Blog
twitter
rss feed
blog entries
log in

Senin, 07 Mei 2012

          Blog akan tampak lebih lengkap jika diberi daftar isi Blog. Namun ternyata bukan hal yang mudah untuk merubah script terutama jika melalui template. Sudah berulangkali saya mencoba namun tidak semua template scripnya sama sehingga ketika di uji cobakan beberapa artikel berkenaan membuat daftar isi melalui template ternyata script yang tersedia dan dicari/ yang harus ada di template kita seperti pada tutorialnya, tidak saya temukan di script template saya.  Alhamdulillahnya ada artikel bagus milik mas Fendy  yang cukup membantu sekali karena cukup memasang di tata letak template, klik gadget, klik html saja...jadi cukup mudah dan tidak ruwet.
         Dengan sekali pasang javascript recent post ini maka kita tidak perlu bersusah payah mengisi posting manual karena secara otomatis postingan baru kita yang kita publikasikan akan tampil judulnya dengan sendirinya. Untuk daftar isi dalam blog saya sedikit saya utak atik lagi dengan merubah kode html warna untuk background saja biar cocok dengan warna template saya, jika mau coba maka link ini kode html warnanya. Mau mencoba...boleh...boleh...berikut ini caranya:
         
Cara Membuat Javascript Recent Posts dilengkapi Scroller Box :

  1. Login : Login ke Blogger sobat
  2. Pilih tata letak.
  3. KLIK Add Gadget (Tambah Gadget).
  4. KLIK HTML/Javascript.Copy kode HTML dan Javascript dibawah ini dan pastekan di dalam box.
  5. <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>

    KLIK SAVE/Simpan



    Kode yang harus diganti terlebih dahulu :
    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 kamu. Misalnya :
      » 
      http://vie2x.blogspot.com
    2. Apabila ruang untuk teks judul posting kurang lebar, silahkan rubahwidth: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;
    5. Selamat mencoba ...

2

2 komentar:

Posting Komentar

Silahkan anda berkomentar, namun tetap jaga kesopanan dengan tidak melakukan komentar spam.

Cari Blog Ini

Diberdayakan oleh Blogger.

MY MUSIK

>

Mengenai Saya

TIME

My Yahoo Status

Site Meter

Followers

DAFTAR ISI