Cara Mudah Buat Daftar Isi dengan scroll Naik Turun -Djal destar

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.Cara Membuat Javascript Recent Posts dilengkapi Scroller Box :


  • Login ke Blogger
  • Klik link design (Rancangan)
  • Klik Add gadget(Tambah Gadget) 
  • Klik Html/JavaScript Copy Script di bawah Ini..

    <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:white;border-top:1px dotted blue;border-bottom:1px dotted black;background:transparent url(
    http://djal-destar.blogspot.com) no-repeat 0 50%;padding-left:15px;}
    .daftar_posting a:hover{color:yellow;}
    </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:400px;">
    <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 SOBAT DISINI/ feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
    </div>
    </div></div>
    • ==>> Klik Simpan

              ** Keterangan **
      Ganti Kode Warna Biru ( http://djal-destar.blogspot.com ) Dengan Url sobat Sendiri
      apabila ruang teks kuran lebar silahkan rubah width 400px; dengan nilai i yang lebih besar.
      untuk merubah tinggi  scroller pada heigth 250px;
      apabila daftar posting (tanda panah menghilang/terpotong) kurangi  margin left:-40px;

      Gimana sobat cukup jelas kan.....   Selamat Mencoba



      Share On:



      2 komentar:

      1. bos kalu buatnya hanya satu di postingan bagaimana ? terima kasih..

        BalasHapus
      2. @She TheKill
        jika sobat sdang menulis artikel masuk ke HTML dan taruhkan kode yang ini kedalam postingan sobat maka slanjut akan namapk scrool pada artikel tersebut ,, terima kasih

        BalasHapus

      Ingin selalu mengetahui Update Artikel Terbaru dari Destar Blog? Silakan klik Tombol 'SUKA' dibawah ini ya .....