image
Free CSS Template

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat mi lacus, sed accumsan neque. Donec condimentum molestie laoreet.

cara memasang read more di blog

| | Rabu, 29 Juni 2011





halo sobat bloger ketm,u lagi nieh .
di sini saya aka meng sahare bagai mana cara memasang read more secara otomatis di blog dan di samping nya akan muncul gambar pertama meski gambar yg di post ada di tengah tapi gambar secara otomatis bisa muncul sesuai yg anda inginkan,supaya blog anda tampil menarik heheheheh.
pertama-tama jang lupa save/backup dulu ke notpade ato apalah supaya kalo terjadi masalah anda tinggal mengembalikan lagi seperti semula.
ok langsung ajah ke TKP.
pertama-tama seperti biasa kalo mau ngutak ati yak  login blog rancangan Edit HTML →  jangan lupa centang bacaan Expand Template Widget jika sudah maka cari cari kode </head>
setelah ketemu kode yg di atas kemudian anda copy kan scrip yang ada di bawah ini.




<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 di copy coba pratinjau saja,kalau tidak terjadi apapa berarti suskses.
kemudian ke langkah selanjutanya,
dengan cara yg sama rancangan → Edit HTML →  jangan lupa centang bacaan Expand Template Widget jika sudah maka cari cari kode <data:post.body/>.
kalau sudah ketemu kode yg di atas kemudian gode yg di atas ganti 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'>
<a expr:href='data:post.url'>Read More... </a>
</span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

jika usdah di copy , yak save lah. hehehehehe

CATATAN:
yg di scrip ke2 ada yg bacaanya warnanya BIRU berarti itu bisa di ubah sesuai keinginan anda
o right adalah mrupakan letak daripada tulisan read more tersebut.jika ingin di letakan di kiri yg tulis jah left
Read More... adalah bacaan dari Read More itu sendiri bisa di ganti dengan SELANJUTNYA,SELENGKAPNYA,DLL.


keterangan dari scrip di atas:
var thumbnail_mode = "float"; perintah untuk menampilkan gambar di sebelah float (di sebelah kiri) jika anda ingin menggantinya ke sebelah kanan nmaka tinggal ganti jah float nya dengan (no-float)
summary_noimg = 500; perintah untuk menetapkan berapa banyak karakter/huruf/tulisan akan ditampilkan di posting tanpa gambar.
summary_img = 400;  perintah untuk menetapkan berapa banyak karakter/huruf/tulisan akan ditampilkan di posting + gambarnya.
img_thumb_height = 150;   TINGGIi gambar dalam ukuiran pixel.
img_thumb_width = 150;    LEBAR gambar dalam ukuran pixel.



nah gmna sobat blogger semoga bermanfaat bagi anda....!!!!

3 komentar:

okeh mengatakan...

kiw kumaha eta nyien menu ??

okeh mengatakan...

naha nu urg mah gagal..

beginnerSites mengatakan...

waduh sorry mas bro karek di bales...!!

gagal na nu mna/kumaha..???

Posting Komentar