Mengganti Homepage dengan Daftar Isi

Diposkan oleh Madie Zha on 22 January 2012 at 1:50 PM

Mengganti Homepage dengan Daftar Isi | Tutorial Blog

Mengganti Homepage dengan Daftar Isi | Tutorial Blog

Tutorial kali ini saya buat atas permintaan dari Sobat Rangga saputra. Sobat Rangga ingin menampilkan daftar isi blog di homepage. Maksudnya tampilan homepage yang biasanya menampilkan artikel terbaru akan kita ganti dengan daftar isi.
Mungkin Sobat yang lain juga ada yang ingin Mengganti Homepage dengan Daftar Isi, Anda bisa mengikuti tutorial berikut ini :
  • Langkah pertama Login ke blogger Sobat, Pilih Design/Rancangan > Page Element/Elemen Halaman.
    Mengganti Homepage dengan Daftar Isi
  • Klik Add a Gadget/Tambah Gadget.
    Mengganti Homepage dengan Daftar Isi
  • Pilih HTML/Java Script.
    Mengganti Homepage dengan Daftar Isi
  • Silahkan Copy kode berikut dan paste didalam konten HTML/Javascript nya.
    Daftar Isi Menurut Artikel Terbaru
    Kode :
    <div style="border: 1px; padding: 5px;"><div style="text-align: center;"><h2>.:: Daftar Isi ::.</h2></div><script type="text/javascript" src="http://html-scripts.googlecode.com/files/feeds.js"></script><script type="text/javascript" src="http://wadahtutorial.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
    Daftar Isi Menurut Label
    Kode :
    <div style="border: 1px; padding: 5px;"><div style="text-align: center;"><h2>.:: Daftar Isi ::.</h2></div><script src="http://post-xml.googlecode.com/files/feeds-labels.js"></script><script type="text/javascript" src="http://wadahtutorial.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
    Daftar Isi Menurut Tanggal
    Kode :
    <div style="border: 1px; padding: 5px;"><div style="text-align: center;"><h2>.:: Daftar Isi ::.</h2></div><script src="http://post-xml.googlecode.com/files/feed-dates.js"></script><script type="text/javascript" src="http://wadahtutorial.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
    Ganti wadahtutorial.blogspot.com dengan alamat blog Sobat.
  • Lalu klik Save.
    Mengganti Homepage dengan Daftar Isi
  • Pindahkan widget tersebut ke bagian atas Blog Posts.
    Mengganti Homepage dengan Daftar Isi
  • Selanjutnya klik Settings > Formatting.
    Mengganti Homepage dengan Daftar Isi
  • Pada Show at most ganti dengan angka 0.
    Mengganti Homepage dengan Daftar Isi
  • Lalu klik SAVE SETINGS.
    Mengganti Homepage dengan Daftar Isi
  • Kemudian Klik Design/Rancangan > Edit HTML.
    Mengganti Homepage dengan Daftar Isi
  • Beri tanda centang pada Expand Template Widget.
    Mengganti Homepage dengan Daftar Isi
    Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
  • Cari kode ]]></b:skin>, lalu letakkan kode berikut ini di bawah kode ]]></b:skin>
    Kode :
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    #HTML5 {display:none;}
    </style>
    </b:if>
    Ket : Kode yang berwarna merah adalah ID widget, ganti dengan ID widget yang baru Anda buat.
    Untuk mengetahui ID widget, berikut caranya :
    • Pilih Design/Rancangan > Page Element/Elemen Halaman.
      Mengganti Homepage dengan Daftar Isi
    • Letakkan posisi mouse pada tulisan Edit widget tadi, dan lihat dibagian bawah browser, akan terlihat URL widget tersebut.
      Mengganti Homepage dengan Daftar Isi
  • Terakhir klik Save / Simpan Template.
    Mengganti Homepage dengan Daftar Isi
Selesai dan lihat hasilnya pada Homepage blog Sobat. Semoga bermanfaat...
Sekian tutorial tentang Mengganti Homepage dengan Daftar Isi.

.:. 32 komentar .:.Post a Comment

  1. Mantap sob.. udah ane coba N berhasil ... :)
    setelah dipikir2 lagi kayaknya tampilan seperti itu ane pakai kalau entri blog ane udah banyak, maklum masih dikit
    thanks sob atas tutorialnya yang good ini ..

    ReplyDelete
  2. bagian homepage ternyata bisa juga dimunculkan daftar isi postingannya

    ReplyDelete
  3. makyus,.. hehehe
    http://ragam-windows8.blogspot.com

    ReplyDelete
  4. Ok mas bisa dicoba untuk blog baru saya ini mas.Thk ya mas.

    ReplyDelete
  5. informasinya luar biasa sangat bermanfaat sekali...
    Banyak sekali ilmu pengetahuan yang saya dapatkan
    Terimakasih banyak atas informasinya ...
    Semoga semakin sukses

    ReplyDelete

  6. sukses terus gan ditunggu artikel selanjutnya

    ReplyDelete

  7. terima kasih banyak atas imformasinya ini sangat bermanfaat khususnya untuk saya pribadi, sukses ya gan..

    ReplyDelete

  8. infonya sangat menarik untuk saya simak,, nice infonya gan. sukses terus!!!!

    ReplyDelete
  9. setelah saya menyimak dari awal hingga akhir, banyak sekali ilmu yang saya terima dari artikel yang anda tulia, semoga tambah bermanfaat ya lam kenal dan sukses selalu

    ReplyDelete
  10. artikel yang anda tulis di blog ini, sungguh sangat memotivasi diri saya untuk trus berkarya, terima kasih semoga kebaikan anda mendapatkan balasa yang lebih baik.

    ReplyDelete
  11. terimakasih banyak atas info nya sangat bermanfaat sekali
    semoga sukses...

    ReplyDelete
  12. Thanks infonya sangat bermanfaat sekali buat saya, di tunggu ea artikel selanjutnya :D

    ReplyDelete

  13. Informasinya sangat keren....

    ReplyDelete
  14. wah infonya kerennnnn sob suksek selalu ea,,,

    ReplyDelete
  15. Mantappppp infonya gan thankas ea :D

    ReplyDelete
  16. terima kasih banyak atas imformasinya ini sangat bermanfaat khususnya untuk saya pribadi, sukses ya gan..

    ReplyDelete
  17. informasi yang sangat menambah wawasan saya makasih ga,.

    ReplyDelete



  18. thanks ea, kerennn bangettt infonya.... sukses selalu ea sob

    ReplyDelete
  19. nice infonya.... sukses terus ea ditunggu artikel selanjutnya!!!

    ReplyDelete
  20. terima kasih info nya ga sangat bermanfaat

    ReplyDelete
  21. thanks gan, ini yang ane cari tadi,

    ane pengen buat homepage blog ane di ganti dengan Daftar isi :like:


    Sukses lah buat blog ini :)

    ReplyDelete
  22. Gan, kalo yang ada scrool kebawah seperti daftar isi agan ini gimana caranya ?? terima kasih

    ReplyDelete
  23. tutorial yang bagus. :) . tapi kalau bisa dikasih demonya, biar sebelum coba, bisa liat yg udah jadi :)

    ReplyDelete
  24. pengin coba tapi kayaknya lumayan ribet nih

    ReplyDelete
  25. Pembelian obat denature bisa invite pin bbm kami : 7968ab6b

    ReplyDelete
  26. Pembelian obat denature bisa invite pin bbm kami : 7968ab6b

    ReplyDelete

 
Alexa Certified Traffic Ranking for http://wadahtutorial.blogspot.com
Follow
back to top
Home
back to bottom