Cara Membuat Daftar Isi Pada Blog

Kali ini saya akan coba bahas tentang pembuatan sebuah Daftar Isi pada Blog. Fungsinya ya seperti di buku-buku yang pernah Anda baca, menampilkan seluruh judul artikel yang ada pada buku. Dan tentunya kalo sekarang ya menampilkan seluruh judul pada blog. Cara ini bisa memudahkan kita dalam penulisan link ke postingan-postingan kita yang lalu. Tidak seperti saya yang membuat kumpulan link dengan manual. Tapi dengan adanya daftar isi ini, setiap postingan yang masuk akan secara otomatis tampil pada widget Daftar Isi ini. Tertarik untuk mencoba membuatnya? Check it out!
Langkah Pertama:

1. Login ke Blogger kemudian ke Layout/Tata Letak
2. Pilih Edit HTML
3. Copy kode berikut ini:
   

   #toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;} .toc-header-col1, .toc-header-col2,
   .toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;}
   .toc-header-col2 { width:75px;}
   .toc-header-col3 { width:125px;}
   .toc-header-col1 a:link, .toc-header-col1 a:visited,
   .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,
   .toc-header-col3 a:visited { font-size:100%; text-decoration:none;}
   .toc-header-col1 a:hover,
   .toc-header-col2 a:hover,
   .toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}
   .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;}

4. Taruh kode tadi di atas kode ]]></b:skin>
5. Simpan pengeditan yang sudah dilakukan

Langkah Kedua:

1. Pilih Layout/tata letak pada blogger
2. Pada menu Elemen Halaman, tambah gadget di sebelah atas elemen Post
3. Pilih HTML/Javascript dan paste kode di bawah ini ke dalamnya:
   

   <div id=”toc”></div>

4. Simpan tanpa judul
5. Jika sudah klik Tambah Gadget lagi dan posisinya bisa Anda tentukan
6. Paste kode berikut pada konten HTML/Javascript
   

   <div id=”toclink”><a href=”javascript:showToc();”>Lihat
   Daftar Isi</a><br/><br/></div>
   <script style=”text/javascript”
   src=”http://home.planet.nl/~hansoosting/downloads/blogtoc.js”></script>
   <script
   src=”http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc”></script>

   Ganti kalimat berwarna merah dengan alamat blog Anda
7. Beri judul gadget dengan Daftar Isi atau bisa dengan kalimat Anda sendiri
8. Klik tombol Simpan dan lihatlah hasilnya

Eits, dalam pembuatan daftar isi ini, ada dua macam versi. Versi keduanya adalah sebagai berikut…

Dasbor—>Layout—>Edit HTML
1. Klik Expand Template Widget terus cari kode berikut ini:
   

   <b:include data=’post’ name=’post’/>

2. Ganti kode tadi dengan kode di bawah ini:
   

   <b:if cond=’data:blog.homepageUrl != data:blog.url’>
   <b:if cond=’data:blog.pageType != &quot;item&quot;’>
   <a expr:href=’data:post.url’>
   <div style=’padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;’>
   <data:post.title/></div></a>
   <b:else/>
   <b:include data=’post’ name=’post’/>
   </b:if>
   <b:else/>
   <b:include data=’post’ name=’post’/>
   </b:if>

3. Simpan Template dan pergi ke Elemen Halaman pada menu Layout
Add sebuah Gadget dan pilih HTML/Javascript
4. Paste kode berikut ke dalam content:
   

   <a href="http://NamaBlogAnda.blogspot.com/search?max-results=200">Daftar isi&raquo;</a>

5. Ganti kode berwarna merah dengan URL Blog anda
6. Klik Simpan
7. Anda juga bisa menempatkannya pada Navbar atau manapun, tinggal copy URL berikut ke dalamnya:
   

   http://NamaBlogAnda.blogspot.com/search?max-results=200

Berhasilkah trik yang saya berikan? Nah, selamat mencoba! Have Fun!!!

 Sumber : http://www.ardi33.web.id/2009/07/cara-membuat-daftar-isi-pada-blog.html

Read more...

Membuat Pesan Pembuka pada Blog Versi 1

Kembali lagi pada posting yang akan membahas tentang trik blog degh. Trik ini sangat mudah alias gampang banget diterapkan. Trik ini berfungsi sebagai pesan pembuka, ya seperti yang dikatakan pada judul tadi, kotak yang akan muncul sebelum loading page blog, udah pernah liyat kan blog yang ada pesan pembukanya? Mereka itu pake cara ini nih. Ohya, ada beberapa trik yang membuat trik ini menjadi sebegitu indahnya, tetapi kali ini yang standar dulu deh, oke???
Langsung aja deh, caranya gini nih:

1. Pergi ke Layout—>Edit HTML
2. Centang dulu kotak pada Expand Template Widget
3. Kemudian pasangkan kode berikut sebelum kode </body>
   

   <SCRIPT language=’JavaScript’>alert(&quot;tulis apa yang mau anda tulis&quot;)</SCRIPT>

4. Tulisan yang berwarna merah dapat Anda ganti dengan tulisan/kata-kata Anda sendiri
5. Simpan dan lihat deh Hasilnya

Semoga bermanfaat okeee… :L

Sumber : http://www.ardi33.web.id/2009/06/membuat-pesan-pembuka-pada-blog-versi-1.html

Read more...

Cara Membuat Read More Menggunakan Span-id

Karena kesal karena tidak menemukan trik untuk membuat read more menggunakan syntax <span id="fullpost"> akhirnya saya beranikan untuk bereksperimen lagi. Sudah lama tidak melakukan eksperimen lagi buat saya agak bingung. Tapi untungnya saya bisa menyelesaikannya dengan baik.

Ehm, saya menemukan trik ini sendiri lho. Tapi kalau trik ini memang udah ada dan persis menggunakan kode seperti saya, berarti itu kebetulan, hehe. Trik ini mengungkap bagaimana kita membuat read-more.
Pasti Anda sudah tahu apa itu read-more. Read-More sama saja dengan penyingkatan posting pada halaman utama blog agar tidak terlalu panjang. Dengan mengklik link Read More, maka kita akan langsung menuju link postingan tersebut.
Segitu saja dulu deh intermezonya. Saatnya membeberkan eksperimen saya. Ikuti langkah-langkah berikut ini:

1. Pertama-tama, mari kita menuju Blogger.com untuk Login
2. Kalau sudah Login, kita Langsung ke Setting/Pengaturan
3. Pada tab menu pilih Formatting
4. Pada tampilan bawah ada kotak kosong. Nah, kita isi dengan kode berikut:
   

   <span id="fullpost"> </span>

5. Kemudian klik tombol Save Setting/Simpan Pengaturan

Pemasangan kode ini bertujuan untuk mempermudah kita menampilkan kode tersebut pada Edit HTML sewaktu kita hendak memposting suatu artikel. Jadi kode tersebut akan otomatis muncul dan kita tinggal menulis posting tanpa kesulitan mengingat kode tersebut jika kita belum memasangnya.
Langkah selanjutnya adalah pengeditan pada HTML. Mari ikuti langkah-langkah berikut ini:

1. Pada Dashboard pilih Layout/Tata Letak
2. Klik Edit HTML pada tab menu yang tampil
3. Kalau sudah, klik kotak Expand Template Widget
4. Cari kode di bawah ini:
   

   <div class=’post-body’>

   Kalo nggak ketemu coba cari kode ini:
   

   <div class=’post-body’ expr:id=’&quot;post-&quot; + data:post.id’>

5. Kemudian letakkan kode berikut ini di bawah kode tadi:
   

   <b:if cond=’data:blog.pageType == &quot;item&quot;’>
   <style>#fullpost{display:inline;}</style>
   <p><data:post.body/></p>
   <b:else/>
   <style>#fullpost{display:none;}</style>

6. Nah, terus di bawahnya kan ada kode
   

   <p><data:post.body/></p>

   Taruh kode ini di bawah kode tadi:
   

   <span id=’showlink’>
   <a expr:href=’data:post.url’>Read more…</a>
   </span>
   <script type=’text/javascript’>
   checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
   </script>
   </b:if>

7. Tulisan Read more… bisa Anda ganti sesuai keinginan, misalnya Baca Selengkapnya, dll.
8. Tinggal Save Settings/Simpan Perubahan

Nah, cara mengeposkan artikelnya adalah seperti metode berikut ini:
Postingan yang akan tampil pada halaman utama<span id="fullpost">Posting yang akan disembunyikan dari halaman utama</span>
Oh ya, kode <span id="fullpost"> akan muncul hanya pada saat kita akan menulis posting pada tab Edit HTML. Kalau pada tab Compose, kode ini tidak akan muncul. Jadi pindah dulu ke Edit HTML kalau masih pada posisi Compose.
Jelas dan berhasil, bukan? Kalau bukan ya silakan kita diskusikan bersama melalui kotak komentar.

Sumber : http://www.ardi33.web.id/2009/08/cara-membuat-read-more-menggunakan-span.html

Read more...