Guest Book

Recent Post

Welcome To Ghulam Blogerz Hopefully This Blog Useful and What You See On This Blog Search

Sabtu, 15 Januari 2011

Panduan Pembuatan Read More (Lengkap)

Sabtu, 15 Januari 2011 |
Pada Postingan kali ini saya akan memberi sedikit tips untuk membuat readmore yang diminta oleh pengujung blog saya.sebenarnya gak cocok dengan judul diatas Panduan Pembuatan Read More (Lengkap) tapi mau di kasih judul apa lagi.dan saya akan hanya memberikan tips pembuatan readmore 3 buah aja yang sudah pernah terpasang di blog ini berikut Tutorialnya :

Pembuatan Readmore Biasa :

1. Login Ke Blogger.com
2. Klik Rancangan ---> Edit HTML
3. Klik tulisan Download Template Lengkap untuk berjaga-jaga kalau ada kesalahan pengeditan HTML
4. Beri tanda centang pada kotak di sebelah tulisan “Expand Template Widget”
5. Cari kode seperti ini <p><data:post.body/></p>
6. Kemudian ganti kode tersebut dengan kode ini :

<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>

7. Kemudian klik tombol simpan template

Catatan : Teks Readmore Bewarna merah bisa diganti dengan teks sesuka kalian seperti Baca Selengkapnya atau yang lainnya sesuai selera sobat masing2 ...

Baik lah sekarang pembuatan Readmore yang kedua yaitu :

Pembuatan Readmore Button/Image

  pada postingan Diatas saya hanya memberikan tips tentang cara membuat ReadMore biasa, sekarang saya akan memeberikan tips untuk menjadikan ReadMore menjadi bergambar supaya website kita terlihat lebih menarik lagi. Kalau begitu nggak usah banyak bacot lagi langsung aja kita pelajari cara membuat ReadMore bergambar.caranya sama koq hanya sedikit berbeda

1. Login Ke Blogger.com
2. Klik Rancangan ---> Edit HTML
3. Klik tulisan Download Template Lengkap untuk berjaga-jaga kalau ada kesalahan pengeditan HTML
4. Beri tanda centang pada kotak di sebelah tulisan “Expand Template Widget”
5. Cari kode seperti ini <p><data:post.body/></p>
6. Kemudian ganti kode tersebut dengan kode ini :


<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>

Catatan :
Jika pada postingan sebelumnya tulisan Read Morenya seperti tulisan yang berwarna merah. Tetapi pada postingan ini kita akan mengganti tulisan tersebut menjadi gambar. Caranya ganti kode “Read More” yang berwarna merah dengan kode ini

<IMG SRC='http://pic60.picturetrail.com/VOL1724/12312346/22573599/376383608.jpg'/></a>

Maka hasilnya kurang lebih akan jadi seperti ni :
<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'><IMG SRC='http://pic60.picturetrail.com/VOL1724/12312346/22573599/376383608.jpg'/></a> </b:if>

7. Kemudian klik tombol simpan template

Baiklah selanjutnya pembuatan :

Pembuatan Readmore Otomatis

Fungsi read more kali ini sedikit berbeda dan lebih modern dan memudahkan kita untuk tidak lagi membatasi artikel yang akan disembunyikan dengan readmore.

Fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-float image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman kita sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter.

1. jumlah karakter yang ditampilkan, jika ada image yang diikutsertakan dalam postingan

2, jumlah karakter tanpa image. apabila masih bingung langsung aja kita bahas dengan praktek.


Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula
!!

Pertama Klik EDIT HTML, Cari kode :

</head>

kemudian letakan script dibawah ini di atas atau dibawah kode </head>.

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

Kalau sudah jangan lupa disimpan terlebih dahulu.

2. Masih pada EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> menjadi seperti kode dibawah 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'> <a expr:href='data:post.url'>Read More... <data:post.title/></a> </span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> </b:if>

Keterangan:
Tulisan yang berwarna Ungu itu menandakan readmore+judul postingan jika kita tidak menghendakinya tinggal di hapus.
dan tulisan right yang berwarna biru menandakan letak daripada tulisan read more tersebut.
jika left : berarti berada di sebelah kiri. tetapi jika kita ganti menjadi
right : berarti berada di sebelah kanan (seperti pada contoh gambar di atas)


var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 500; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 400; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 150; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 150; (Thumbnail 'lebar dalam piksel)


silahkan disimpan dan lihat hasilnya :) 
ok selamat mencoba dan semoga berhasil !! amieen..pertamax 



maspeypah
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • StumbleUpon
  • Technorati
  • TwitThis

Related Posts



7 komentar:

Afi Qurrahman mengatakan...

bozz bozz... yg pling bawah itu otomatis ke read more semua itu postingan yang dulu2 itu ?

Ghulam Ridho mengatakan...

gak misalnya mau buat readmore biasa udah di simpan naah dikembaliin dulu kode scriptnya seperti semula supaya bisa buat redmore otomatis ..

Afi Qurrahman mengatakan...

WAH.... MAKASIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII........ MAKASI 100X.. AKHIRNYA BISA PAKAI READ MORE JUGA ^_^

Ghulam Ridho mengatakan...

haha Ok ...

Artri Taufan Sudrajat mengatakan...

woyy ,, gimana siih ?? bantuin saya dongg ??
ehhh editin blog saya siihh ,, nantii tak bayar yakiinn ... sumpahh
sms k no saya : 083824311332

Afi Qurrahman mengatakan...

hahaha

Anonim mengatakan...

Repost dari kaskus neh

Posting Komentar

Tutorial Blog

Panduan Membuat Blog di Blogspot

Cara Setting Blog Di blogger

Cara Mengganti Template di blogspot

Cara Post Artikel

cara membuat Cursor Bertabur Bintang

Membuat Pesan Selamat Datang Di blog

Membuat Pesan Selamat Datang Di Blog versi 2

Membuat Marquee ( Text Berjalan )

Membuat Marquee ( Text Berjalan ) versi 2

Memasang Icon Blog ( Favicon )

Membuat Buku Tamu Tersembunyi

Cara Membuat Daftar isi Blog

Memasang Widget I Love Indonesia

Cara membuat Banner di blog

cara pasang Bck top di blog

Cara pasang face book like button

cara memblokir/menghapus fungsi klik kanan di blog

Cara membuat widget flash message di blog

Cara Memasang Gadget Hamster di blog

Cara Membuat Jam di Blog

Cara Memasang Counter Di Blog

Cara Membuat Teks berkelip-kelip di blog

Membuat Back To Top Dengan Smoothscroll jQuery

Cara Membuat Tulisan berjalan secara bergantian di addres bar blog

Membuat Judul bergerak di addres bar blog

Cara membuat tulisan berjalan pada taskbar blog

Cara Membuat Tulisan berjalan dan ditarik kembali di addres bar blog

Cara Membuat Widget SMS Gratis di Blog

Script Unik untuk Menyambut Pengunjung di blog

Cara Membuat Text Mengelilingi cursor di blog

Cara Membuat Text Mengikuti cursor di blog

Tips Membuat gambar Berjatuhan (falling snow effect)

Menghilangkan Judul Blog Di Header

Membuat Link Read More Beserta Judul Postingnya

Memasang Widget Follow Tersembunyi

Membuat Gambar Bergerak Di Pojok Halaman Blog

Cara Membuat Tittle Bar Effect

Teks Roller

Cara Buat aquarium sendiri di blog

Script Unik untuk Menyambut Pengunjung di blog 2

Buat Judul Blog Keren

Cara Menghilangkan Link Berlangganan Entri Atom di Blog

Buat Tulisan Animasi sendiri

Membuat Link Tanpa Harus Di Klik Langsung Terbuka

Generator Tulisan

Generator Baner

Cara Memodifikasi Tulisan Pesan Di Cbox

Cara Mendapatkan Domain .com/.net/.org Gratis!

Cara Membuat Tombol Home, BackToTop, BackToDown, Reload

Membuat Kotak Pencari/search engine di My Blog

Cara Membuat Fungsi Scroll Pada Arsip Blog/Blog Archive Gadget

Cara Menghilangkan Border Image di Blog

Cara Membuat Shoutbox Versi Ajax

Membuka Link Di Windows Baru ( Popup Windows)

Panduan Pembuatan Read More (Lengkap)

Membuat Style Border (Bingkai Pada Blog)

Cara Menambahkan Tulisan Melayang

Label

 

Feed Burner

RSS Feed Berlangganan posting via RSS FEED

Atau berlangganan posting via email:


Pengikut

© Ghulam Ridho Design