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 kalo trik ini emang 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 meng-klik link Read More, maka kita akan langsung menuju link postingan tersebut.

Udah gitu aja deh intermezo nya, wakakakak :))
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>

Ohya, 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.

Udah jelas kan? Kalau ada yang kurang jelas, tanyain pada kolom komentar aja ya? Semoga berhasil!!!