Theme Layout

Boxed or Wide or Framed

[Wide]

Theme Translation

Display Featured Slider

No

Featured Slider Styles

Display Grid Slider

No

Grid Slider Styles

Display Trending Posts

Yes

Display Author Bio

Display Instagram Footer

Tutorial Auto Read More


السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Tutorial Auto Read More | Bagi blogger yang suka letak banyak entry dalam muka depan blog kenalah letak auto read more ni supaya lebih memudahkan blog untuk cepat loading. Kalau secara manual kita buat click 'Insert jump break'  ketika menulis entry. Tapi macam leceh pulak nak kena insert setiap kali tulis entry kan. Mana tahu terlupa ke.kan..

So kita terus buat 'auto read more' lebih mudah. Hanya perlu buat sekali dan terus applikasi pada semua entry. Cara nak buat pun mudah je. Ini contoh read more yang dimaksudkan. Rujuk pada bulatan merah dalam gambar di bawah ni.

Tutorial Auto Read More

Tutorial Auto Read More untuk blogspot

1. Log in bloggger.com

2. Pergi ke dashboard>>>Template>>Edit html
[save and back up template dulu]

3.Cari code </head>
[tekan ctrl + F serentak dan paste code atas ni didalam box untuk memudahkan pencarian]
2.copy code bawah ni and paste sebelum code </head>
<script type='text/javascript'>
var thumbnail_mode = "float" ;


summary_noimg = 450;

summary_img = 350;

img_thumb_height = 140;

img_thumb_width = 140;
</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>

Editing
summary_noimg = 450; jumlah patah perkataan yang muncul pada homepage pada entri tidak bergambar
summary_img = 350;jumlah patah perkataan pada homepage pada entri bergambar
img_thumb_height = 140;tinggi gambar entri
img_thumb_width = 140;lebar gambar entri

3.Cari code <data:post.body/> kemudian gantikan code tersebut dengan code di bawah..
[tekan ctrl + F serentak dan paste code atas ni didalam box untuk memudahkan pencarian]
*Ada beberapa code ni <data:post.body/> dalam html, korang gantikan dengan code yang kedua korang jumpa.

<div class='post-body entry-content'>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<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'><span style='color:#000;font-weight:bold:font-size:20px;border-radius:5px; padding-top: 1px; padding-bottom: 1px; padding-left: 2px; padding-right: 2px; padding: 9px; background:#c7c7c7;'>Read More</span></a></span>
</b:if>
</b:if>
</div>

Editing
color :#000; Tukar warna tulisan
font-size:20px; Size tulisan
background:#c7c7c7; warna background tulisan
Tukar ikut tema warna blog ye :)

4. Preview
5. Kalau tiada error dan menjadi boleh terus save

Selamat mencuba sehingga berjaya

Click here For more tutorials
With ❤,
Azhafizah MN

Azhafizah Md Nor
32 Comments
Share :

32 comments:

  1. Bestnya lately ni Fiza banyak buat tutorial.. terima kasih Fiza..

    ReplyDelete
  2. Lama dah nak buat tutorial read more kat blog ni..

    ReplyDelete
  3. sy punya buat cara manual. oo bagus la ada mcm ni. auto terus read more, x perlu manual bagai. lbh memudahkan

    ReplyDelete
  4. terima kasih kak fizam tutorial ni awesome, nnti shad nak cuba jugak.. :D

    ReplyDelete
  5. perkongsian yang bermanfaat fiza..Tq..:)

    ReplyDelete
  6. saya juga selalunya fail edit guna html... serius

    ReplyDelete
  7. memang mudah bila dah ada auto read more ni.akak pun memang tak pandai la gode2 coding nie

    ReplyDelete
  8. Kena banyak belajar ngan Fiza bab2 coding ni hahahaha

    ReplyDelete
  9. nak cuba juga buat nie... lambat sikit kot

    ReplyDelete
  10. bila dah berjaya nanti akak share hasilnya... :P

    ReplyDelete
  11. belum try lagi.. nak buat jugak nanti. tq ye untuk tuto ni. mudah sikit sebab terus untuk semua entry.. tak perlu lagi nak edit kat satu satu entry tu kan :)

    ReplyDelete
  12. Saya dah cuba tutorial ni kat blog sis ;)

    ReplyDelete
  13. Ermmm kena bljr buat ni....nanti akak refer fiza if x jadi..hahaha

    ReplyDelete
  14. huwaaa banyak kali buat tapi tak jadi jadi.. dok cenggitu jugak.

    ReplyDelete
  15. menarik juga ni.. xde la panjang2 entry tu kan..hehe nanti la try

    ReplyDelete
  16. fiza! jijah berjaya buat.. terima kasih tutor fiza yg berguna ni...

    ReplyDelete

My blog is around for the long haul because I 'm really appreciate our relationships with one another above just about everything else. A blog entry isn’t just a block of text, but a slice of humanity and an opportunity to begin a real conversation.Please leave your comments ladies and gentleman.Thank you so much!

DISCLAIMER


All content provided on this azhafizah.com blog is for informational purposes only. The owner of this blog makes no representations as to the accuracy or completeness of any information on this site or found by following any link on this site.

The owner of azhafizah.com will not be liable for any errors or omissions in this information nor for the availability of this information. The owner will not be liable for any losses, injuries, or damages from the display or use of this information.

Blog Comments Policy

The owner of this blog reserves the right to edit or delete any comments submitted to this blog without notice due to :
1. Comments deemed to be spam or questionable spam
2. Comments including profanity
3. Comments containing language or concepts that could be deemed offensive
4. Comments that attack a person individually

This privacy policy statements is made on [January 23, 2017] and may have a change on the futures with or without notice. You should read this privacy policy on this page on the futures when updated.

[name=Azhafizah Md Nor] [img=https://scontent-kul1-1.xx.fbcdn.net/v/t1.0-1/p160x160/14448782_10210636189243803_7128433474369868727_n.jpg?oh=4425e5a9103abc1ff3665fd0f83feec3&oe=58F1F071] [description=Married.Blogger.Graphic Designer.Johorian.B.Eng (Hons) Electrical & Electronics Engineering.UiTM.Untuk tempahan DESIGN, PENGIKLANAN, COLLABORATION, SPONSORSHIP, GUEST POST dan PRODUK REVIEW boleh emailkan ke :azhafizahmdnor@gmail.com] (facebook=https://www.facebook.com/AzhafizahMdNor) (twitter=https://twitter.com/Azhafizah) (instagram=https://www.instagram.com/azhafizah.mdnor/)

Blog Sihatimerahjambu

Follow @azhafizah.mdnor