Thursday, April 26, 2007

Membuat "Intro" Pada Tulisan Yang Panjang III [Last Episode]

Oke, seperti yang kamu semua lihat sekarang. Blog saya sudah menampilkan abstraksi untuk setiap postingnya. Seperti yang sudah saya tuliskan di posting sebelumnya, coding untuk editing template blogger ini saya dapat dari sini.

Buat teman-teman (khususnya Sidik) yang ingin melakukan hal yang sama pada accountnya di blogspot dapat melihat langsung caranya di link yang saya berikan di atas.



Melakukan Editing Pada Template HTML

Buat yang mengalami kesulitan mengakses link tersebut berikut saya tuliskan (ringkas) ulang cara untuk menampilkan abstraksi pada posting blogger, (catatan: saya berasumsi anda menggunakan account blogger beta seperti teman saya Sidik dan anda telah memilih salah satu template yang disediakan blogger di menu TEMPLATE) yaitu sebagai berikut :

  1. Masuk ke menu SETTING (setelah anda masuk ke account blogger anda) kemudian pilih ARCHIVING, pada ENABLE POST PAGES pilihlah opsi YES kemudian klik SAVE CHANGES.
  2. Masuk ke menu TEMPLATE kemudian pilih EDIT HTML
  3. Klik pada check box "expand widget template"
  4. Cari baris kode berikut pada html editor tsb :

    <div class='post-header-line-1'/> <div class='post-body'>

    Bagi anda pengguna Internet Explorer bisa menggunakan shortcut dengan menekan tombol Ctrl + F dan mengisikan kode di atas pada kotak yang muncul.
  5. Letakkan kode html berikut ini pada baris setelah baris kode diatas :

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

  6. Setelah anda melakukan poin diatas, anda perhatikan pada baris berikutnya ada kode sbb :

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




    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

  7. Perhatikan "ruang kosong" yang saya sengaja buat antara baris pertama dengan kedua. Isikan kode html berikut ini pada "ruang kosong" tersebut :


    <a expr:href='data:post.url'>Read More......</a>
    </b:if>

  8. Mari kita periksa lagi hasil editing yang kita lakukan. Berikut adalah kode html template tersebut setelah kita ubah. Warna hitam untuk kode html asli dan warna biru untuk kode html yang telah kita tambahkan. Perhatikan :

    <div class='post-header-line-1'/>
    <div class='post-body'>
    <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>
    <p><data:post.body/></p>
    <a expr:href='data:post.url'>Read More......</a>
    </b:if>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

  9. Jika sudah yakin benar SAVE kode html template yang telah anda edit tersebut.
  10. Sekarang masuk ke menu SETTING dan klik menu FORMATTING. Pada bagian bawah ada kotak untuk pengaturan POST TEMPLATE. Pada kotak tersebut isikan kode html sbb:

    <span class="fullpost">

    </span>

  11. Mohon perhatikan jarak antara baris pada kode html diatas. Hal ini dimaksudkan untuk memudahkan anda memposting tulisan anda nantinya. Klik SAVE apabila sudah selesai.

POSTING

Ketika akan memposting tulisan anda, klik Edit Html, otomatis kode html yang tadi dimasukkan ke POST TEMPLATE akan muncul. Masukkan tulisan anda yang akan menjadi abstraksi di atas kode

<span class="fullpost">, dan sisanya dibawah kode html tersebut.

Tips : masukkan awal abstraksi dan sisa entry tulisan anda di menu Edit Html, kemudian sambung di menu Compose untuk mendapatkan editor WYSIWYG.

OLD POSTING

Untuk mengaplikasikan perubahan ini pada postingan anda yang lama, anda bisa melakukan dengan proses sbb :

  1. Klik menu EDIT POST
  2. Klik Edit pada artikel yang ingin dirubah
  3. Pasang (manual) kode html <span class="fullpost"> di bawah paragraf abstraksi, kemudian </span> di akhir tulisan anda.

MASALAH YANG (MUNGKIN) TIMBUL

Seperti yang saya juga alami, masalah yang mungkin timbul dalam mengaplikasikan fitur "Read More" ini antara lain :

  1. Tidak munculnya sidemenu (profil, archieve, dll)
  2. Tulisan yang muncul hanya beberapa (padahal anda mungkin telah melakukan setting untuk menampilkan lebih banyak tulisan)

Hal-hal diatas dapat terjadi karena ada kode ganda pada satu tulisan. Pastikan kode <span class="fullpost"> dan </span> tidak berulang di akhir tulisan. Edit posting terbawah yang muncul di halaman muka blog anda(buka dengan Edit Html), periksa baris terakhir dari artikel tersebut. Yang terjadi pada saya, saya menemukan di akhir artikel tersebut terdapat kode <span class="fullpost"> </span>. Buang kode tersebut, Publish, dan kembali lihat halaman muka blog anda. Edit kembali posting terbawah yang muncul di halaman muka jika masalahnya masih berulang.

Selamat ngeBLOG !

Read More......

Membuat "Intro" Pada Tulisan Yang Panjang II

Ok, menyambung tulisan yang sebelumnya. Setelah melakukan pencarian "tanpa lelah" sembari bermain pardus, akhirnya saya menemukan tulisan lain mengenai topik ini. Tulisan lengkapnya bisa anda lihat di sini. Mari kita coba lagi....

Read More......

Membuat "Intro" Pada Tulisan Yang Panjang

Hari ini seorang teman saya yang bernama Sidik Permana bertanya kepada saya melalui Yahoo Messenger. Sidik yang mulai "berkarier" di dunia blog ingin mengetahui bagaimana membuat tulisannya yang panjang-panjang itu terpublish pada frontpage hanya beberapa paragraphnya (intro :P) saja. Kemudian sayapun terpaksa mencari bagaimana caranya untuk melakukan hal tersebut. Ternyata saya beruntung (updated : or not). Mencari sebentar di Google saya mendapatkan url ini. Setelah mencoba mengaplikasikan apa yang ada dalam postingan tersebut, kemudian saya membutuhkan sebuah tulisan yang panjang. Maka terpaksa saya mengambil dengan paksa tulisan saudara Sidik yang berjudul Liberalisasi Perguruan Tinggi. Mari kita coba.
=== CUT===

Update : Ternyata script yang tadi saya dapet di melanohibi ngga bisa dipake di template-template baru blogspot. Kalo di template classic masih bisa dimasukin scriptnya, walau jadi aneh halaman blogspotnya....

Solusi ? Cari lageee

Read More......