Membuat Keterangan Read More Menggunakan Icon

Banyak sudah cara ini dipaparkan oleh para desain blog seperti Kang Rohman yang saya anggap sebagai guru besar para blogger , dan suhu blogger begitu saya menyebutnya yang banyak memberikan tips nya. Pada kesempatan ini saya akan memaparkan hal yang sama hanya saja sedikit saya modifikasi dan saya pun terinspirasi setelah melihat keterangan Read More dari suhu blogger pada blog-nya yang menggunakan gambar, dimana sebagian besar dari blog yang saya lihat para blogger hanya menampilkan teks untuk keterangan tersebut.


 Berikut ini adalah langkah-langkah untuk membuat Read More pada Template Baru (xml/beta)

Langkah-langkahnya sebagai berikut :
1. Login pada blog anda
2. Klik bagian Setting /Pengaturan - Klik Format
3. Pada layar paling bawah, ada text area kosong disamping tulisan Template Posting, isi text area kosong tersebut dengan kode di bawah ini :

<span class="fullpost"> </span>

4. Klik Tombol Simpan Pengaturan / Save Setting
Pemasangan kode ini di maksudkan agar pada saat posting artikel, kode tersebut langsung muncul tanpa harus menuliskan terlebih dahulu, jadi membantu kita agar tidak harus selalu mengingat kode tersebut.

5. Klik Layout / Tata Letak
6. Klik tab Edit HTML
7. Klik tulisan Download Template Lengkap.

Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula. Jika telah selesai lanjutkan langkah berikut ini

8. Beri tanda centang pada kotak di samping tulisan Expand Template Widget, pada sisi kanan atasnya
9. Tunggu beberapa saat ketika proses sedang berlangsung
10. Silahkan anda cari kode berikut pada kode template milik anda :

<data:post.body/>

atau kode dibawah ini

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

11. Hapus kode diatas, lalu ganti dengan kode di bawah ini :

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

Pada kata Selengkapnya …. Diatas dapat anda ganti dengan kata yang lain seperti Read More…. , Seterusnya…. , Lanjutannya…. , dsb.

12. Klik tombol Save Template / Simpan Template

Cara Posting Artikel

1. Klik menu Posting
2. Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi, yaitu :

<span class="fullpost"> </span>

3. Tuliskan artikel yang ingin tampak pada blog di atas kode berikut ini :


<span class="fullpost">

4. Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode berikut ini :

</span>

5. Jika artikel pada posting telah selesai silahkan anda klik TERBITKAN ENTRI / PUBLIKASIKAN POSTING
6. Lihat hasil Posting anda pada Halaman blog anda Hasilnya (ini hanya contoh) sebagai berikut :

Ya jika anda klik tulisan Read More . . . diatas maka selanjutnya blog akan menampilkan tulisan anda secara lengkap baik teks maupun gambar penyerta posting tersebut.
Bagaimana jika keterangan Read More . . . diatas kita ganti dengan logo, image, ataupun gambar diri anda seperti pada gambar berikut ini (bercanda fren . . . ini bukan kok gambar diri anda…??!!)

Bagi rekan-rekan yang berminat silahkan ikuti lanjutan cerita nya (emang saya lagi cerita ya..?)
1. Pada langkah 11 diatas perhatikan kode yang anda masukkan tadi, terutama pada 2 baris terakhir yaitu :

<strong>Selengkapnya...</strong>

2. Teks kode diatas anda ganti dengan kode HTML dari gambar yang anda upload, misalnya anda meng-upload gambar pada webhosting http://www.photobucket.com/ . Setelah anda upload silahkan Copy kode HTML nya.
Misalnya : (ini gambar yang saya upload) dan kode HTML nya

<a href="http://s647.photobucket.com/albums/uu191/admincoy/?action=view¤t=readmore1.png" target="_blank"><img src="http://i647.photobucket.com/albums/uu191/admincoy/readmore1.png" border="0" alt="Photobucket" /></a>
Anda cukup ambil kode berikut ini dari kode diatas (ingat ni cuma contoh)

<img src="http://i647.photobucket.com/albums/uu191/admincoy/readmore1.png" border="0" alt="Photobucket" />

dan sedikit modifikasi pada tag alt (kata Photobucket pada tag tersebut anda ganti dengan kata yang lain seperti View full post, atau kata yang ingin anda tampilkan saat mouse menunjuk gambar ket.Read More tadi) Kemudian gabungkan dengan template blog anda.

3. Hasil akhir dari kode diatas sebagai berikut :

<b:if cond="'data:blog.pageType"><style>.fullpost{display:inline;}</style> <p><data:post.body/></p><b:else/> <style>.fullpost{display:none;}</style> <p><data:post.body/><a href="'data:post.url'"><img src="http://i647.photobucket.com/albums/uu191/admincoy/readmore1.png" border="0" alt="View full post" /></a></p> </b:if>

4. Klik tombol Save Template / Simpan Template
5. Jika anda telah menerapkan trick ini sejak awal , Anda tinggal melakukan Klik Refresh pada layar browser di jendela blog anda dan lihat hasilnya bagaimana Read More anda sekarang
6. Jika anda ingin lcon logo, image, yang sudah saya buat silahkan anda klik tombol berikut dan Tinggal Copy saja kode URL nya.

Selamat mencoba . . . . dan mempercantik blog anda . . . . !