INFORMASI SEPUTAR BLOG

Membuat tombol "Read More" di Blogger

Label:
Judul tentang membuat read more mungkin sudah banyak. Sebenarnya, saya tidak pernah punya ide menulis posting tentang read more ini sampai Mbak Project menulis cara membuat "Read More".

Langsung aja ya..., apa sih "read more" itu? tombol "Read More" adalah tombol yang dibuat untuk meneruskan bacaan artikel di blog. Contohnya, seperti yang ada di blog ini. (di bawah)
Read More juga berfungsi sebagai Pemberi Pancingan kepada Blogger lain yang ingin meneruskan bacaan artikel di blog. Isi artikel yang sedikit merupakan pancingan Karena itu, dengan mengklik tombol "read more", Blogger lain bisa melanjutkan membaca seluruh artikel.

Sedangkan, Bagi Pemilik Blog, Read More sangat menguntungkan. Karena, tombol itu bisa menghemat tempat di area posting utama. Tambahan juga, read more bisa menambah page view yang dilihat pemirsanya.

Selanjutnya, Untuk membuatnya tombol read more sangat mudah.....

BABAK KE KESATU. Merubah Kode HTML di menu Edit HTML di Blogger

1. Masuklah ke Blogger.
2. klik menu Tab Layout /Tata Letak.
3. klik Menu Tab Edit HTML.


4. Terus, centang kotak kecil yang ada tulisan Expand Widget Template.

5. Copy kode berikut ini.



<script src='http://mendandaniblog.googlepages.com/Readmore.js' type='text/javascript'/>


<link href='http://mendandaniblog.googlepages.com/ReadMore2.css' rel='stylesheet' type='text/css'/>


6. Kemudian taruhlah kode tersebut di bawah kode:



]]></b:skin>


7. kemudian cari kode berikut ini:



<div class='post-body'>


Kalo tidak ada kode tersebut, cari kode ini:



<div class='post-body entry-content'>


8. Kemudian, gantilah kode itu dengan kode dibawah ini:



<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>



9. Dibawahnya ada kode berikut ini:



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


10. Kemudian, taruhlah kode berikut ini, dibawahnya:



<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><div class='PostDetails' style='float:right'><ul><li class='PostCom'><a expr:href='data:post.url'><span>Read More</span></a></li></ul></div></p>
</span>
<script type='text/javascript'>checkFullundefined&quot;post-&quot; + &quot;<data:post.id/>&quot;)</script>
</b:if>



11. Save Template-mu ..........

Babak ke I telah selesai. Sekarang menuju babak kedua.

BABAK KE DUA. Merubah Setting di Setting Menu di Blogger

1. Pergi ke Tab Setting
2. Dibagian bawah, ada kotak Post Template
3. Kemudian copy dan paste kode di bawah ini ke dalam kotak Post Template itu:



<span id="fullpost">


</span>




4. Simpanlah, dengan meng-klik tombol Save di bawahnya

BABAK KE TIGA. Cara Menulis Posting
1. Ketika menulis posting, semua tulisan yang ada di atas kode di bawah adalah pemberi pancingan.



<span id="fullpost">

Sedangkan, semua tulisan dibawah </span> adalah sisa dari keseluruhan tulisan.
Lihat Gambar dibawah ini yaa..........



Jika sudah selesai menulis, jangan lupa di simpan dan publish, lalu lihat hasilnya.
Oh..iyaa... jika tidak ingin tombol read more terlihat kamu hapus saja kode yang ada di post template.
<span id="fullpost">

</span>

Selesai. Siap dicoba, bagaimana??? berhasilkah?? atau tambah hancur......??!!



Dari : Cahaya Biru
0 komentar:

Posting Komentar

Followers


Labels