Sabtu, 09 November 2013
Cara Membuat READMORE Otomatis di Blogspot
Trik lain agar tampilan blog kita simple dan elegan adalah dengan menampilkan sedikit gambar dan tulisan singkat dan jelas, biasanya semakin banyak kita posting maka tampilan blog kita akan memanjang kebawah di halaman depan...terliat berantakan...dan juga keliatan kalo baru belajar ngeblok,...Cara mengatasinya dengan membuat ReadMore atau Baca Selengkapnya secara otomatis pada postingan blog kita.... Cara lain dengan meminimalis postingan yang tampil di halaman depan..memang sudah banyak postingan yang membahas ini, tapi gak apalah buat para pemula ajja yang membutuhkan tutorial ini....
Dengan adanya readmore otomatis ini, kita bisa menentukan berapa ketinggian dan lebar penggalan postingan dan image yang akan muncul pada halaman depan blog kita sehingga terlihat rapi dan menarik.
langkah-langkanya yaitu ,.
- PERTAMA, silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :
cari kode </head>.. agar lebih cepat tekan CTRL - F lalu masukkan kode yang dicari - Enter.
Kalo kodenya sudah ketemu kemudian letakkan script di bawah ini persis dibawah kode tersebut.
<script type=text/javascript> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src=http://rizqi.moehamed.googlepages.com/read-moreotomatis.js type=text/javascript/>
- KEDUA, cari kode html berikut ini : (Cara cepat untuk melakukan pencarian sama dengan diatas).
<data:post.body/> atau <p><data:post.body/></p>
Kemudian ganti kode tersebut dengan kode di bawah ini :
<b:if cond=data:blog.pageType != "item">
<div expr:id="summary" + data:post.id><data:post.body/></div>
<script type=text/javascript>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class=rmlink style=float:right;padding-top:20px;>
<a expr:href=data:post.url>»»  READMORE...</a></span>
</b:if>
<b:if cond=data:blog.pageType == "item"><data:post.body/></b:if>
<div expr:id="summary" + data:post.id><data:post.body/></div>
<script type=text/javascript>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class=rmlink style=float:right;padding-top:20px;>
<a expr:href=data:post.url>»»  READMORE...</a></span>
</b:if>
<b:if cond=data:blog.pageType == "item"><data:post.body/></b:if>
Keterangan :
1. Tulisan yang berwarna biru bisa diganti sesuai keinginan kita.
2. ==> Summary noimg 430 = tinggi artikel terpenggal tanpa image
3. ==> Summar img 430 = tinggi artikel terpenggal dengan image
4. ==> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...
- Terakhir, klik preview, kalo sudah oke klik save template.
Selanjutnya kalian bisa melakukan postingan dan lihat hasilnya, Readmore atau baca selengkapnya akan secara otomatis terpasang setelah anda publish postingannya.
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar