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

  1. TUGAS PEMBUATAN BLOG WEB SMAN 1 PACET 2019/2020
  2. TUGAS PEMBUATAN BLOG DAN WEBSITE SMAN 1 PACET
  3. WEBSITE/BLOG HASIL KARYA SISWA KELAS XI IPA/IPS SMA NEGERI 1 TRAWAS 2012-2013
  4. CARA DAFTAR ATAU SUBMIT BLOG KE SEARCH ENGINE
  5. CARA MEMBUAT TEKS MELINGKAR MENGIKUTI GERAKAN MOUSE
  6. CARA MEMBUAT CURSOR DIIKUTI BINTANG
  7. 15 HASIL KARYA WEBSITE/BLOG TERBAIK KELAS XI IPA-IPS SMAN 1 TRAWAS TAHUN PELAJARAN 2012-2013
  8. CARA MEMASANG GAMBAR ANIMASI LUCU (WIDGET ANIMASI BLOG GRA
  9. CARA MEMBUAT EFEK BINTANG JATUH DAN DAUN GUGUR TANPA EDIT HTML TEMPLATE
  10. CARA MENGGANTI ICON BLOG TANPA EDIT HTML TEMPLATE
  11. DAFTAR KODE WARNA HTML UNTUK BLOG
  12. CARA MENGHIAS BLOG
  13. CARA MEMBUAT BUKU TAMU TERSEMBUNYI PADA SIDEBAR BLOG
  14. CARA MEMASANG PET / HEWAN PELIHARAAN, ANIMASI DI BLOG (BAG.2)
  15. CARA MEMASANG MUSIK PADA BLOG VERSI BARU
  16. CARA MEMBUAT PET / HEWAN PELIHARAAN DALAM BLOG
  17. CARA MEMBUAT SHOUTBOX
  18. CARA MEMBUAT SITEMETER
  19. CARA MEMBUAT SCROLLBOX PADA POSTINGAN BLOG
  20. CARA MEMBUAT SCROLL NAIK TURUN UNTUK DAFTAR ISI
  21. CARA MEMBUAT EFEK SALJU DI BLOG VERSI TERBARU
  22. CARA MENGGANTI KURSOR PADA BLOG VERSI TERBARU
  23. CARA MEMBUAT KALENDER DAN JAM PADA BLOG
  24. CARA MEMPOSTING ARTIKEL
  25. CARA MEMBUAT LENCANA FACEBOOK
  26. CARA MERUBAH TEMPLATE BLOG VERSI TERBARU
  27. CARA MENDAFTAR DI GMAIL
  28. CARA MEMBUAT BLOG VERSI TERBARU
  29. Manfaat, Keunggulan dan Kelemahan Browsing Data di Internet