18 Mei 2012

Mengganti Homepage dengan Daftar Isi

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.
Previous Post
Next Post

0 Please Share a Your Opinion.: