Blog မွာ Read More Button ထည့္နည္း.

.

Friday, January 11, 2013 | 0 comments

ဘေလာ့ကို နည္းနည္းအေတြ႕အႀကံဳရလာၿပီးသူေတြအတြက္ ဒီပို႔စ္က သိပ္တန္ဖိုးမရွိေပမယ့္ ဘေလာ့ကို ခုမွ စလုပ္သူေတြအတြက္ေတာ့ အသံုး၀င္မယ့္ပို႔စ္တစ္ခုပါ.
မ်ားေသာအားျဖင့္ တန္းပလိတ္လဲတတ္ၿပီဆိုရင္ Auto Read More Button ပါတဲ့ တန္းပလိတ္နဲ႔ Menu ပါတဲ့ တန္းပလိတ္ကိုရွာေဖြၿပီး လဲတတ္ၾကပါတယ္..
(တန္းပလိတ္အစားထိုးနည္း ဒီမွာ ၾကည့္ပါ..)
ဒါေပမယ့္ ကိုယ္ႀကိဳက္တဲ့ တန္းပလိတ္က Read More အဆင္သင့္မပါလာဘူး.. junp break ေခါက္လိုက္လို႔ ေပၚလာတဲ့ Read More ကလည္း Button ေလးနဲ႔မဟုတ္ဘူး. ဒါေပမယ့္ ကိုယ္က Read More ကို Button ေလးနဲ႔
လုပ္ခ်င္တယ္ဆိုရင္ ေအာက္မွာေပးထားတဲ့နည္းကို တစ္ဆင့္ခ်င္းလုပ္သြားလိုက္ပါ.

1. Blogger Singin ၀င္လိုက္ပါ။
2. DASHBOARD မွာ ကိုယ့္ရဲ႕ဘေလာ့ကို ေရြးလိုက္ပါ.. ဆိုလိုတာက တစ္ေယက္တည္း ဘေလာ့ေတြ ၁ ခုမက ရွိေနတတ္လို႔ပါ..
3. Template ကို တစ္ခ်က္ႏွိပ္ပါ.. (blog တစ္ခ်ဳိ႕မွာေတာ့ Layout ကိုႏွိပ္ရပါတယ္..)  

4.EDIT HTML  ကိုႏွိပ္ပါ.... Process ကိုထပ္ႏွိပ္လိုက္ပါ..

5.ေပၚလာတဲ့ေဘာက္ရဲ႕ ဘယ္ဘက္အေပၚနားေလးမွာ EXPAND WIDGET TEMPLATES ကိုအမွန္ျခစ္ေပးလိုက္ပါ.

6.ခဏေစာင့္ၿပီး အဲဒီ Edit HTML ေဘာက္ထဲကို ကလစ္တစ္ခ်က္ႏွိပ္ၿပီး ကာဆာ ခ်ထားလိုက္ပါ..Ctrl+F ကိုႏွိပ္ၿပီး Find Box ေဘာက္ထဲမွာ

</head>  ထည့္ၿပီးကိုရွာပါ...

ေတြ႕ျပီဆိုရင္</head>ေအာက္မွာ ေအာက္က Code ကိုထည့္ေပးလိုက္ပါ၊

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://keerthiset2.110mb.com/excerpt.js' type='text/javascript'/> 

7.ၿပီးရင္ ေအာက္က Code ကိုထပ္ရွာပါ၊

<data:post.body/>

ေတြ႕ျပီဆိုရင္<data:post.body/>  ကို ေအာက္က Code နဲ႕အစားထိုးေပးလိုက္ပါ။။

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'>

<a expr:href='data:post.url' rel='bookmark'><b>Read More </b></a></span>
</b:if> 

ဒါဆိုရင္ေတာ့ Auto Read More ထည့္ၿပီးသြားပါၿပီ. jump break မေခါက္ဘဲနဲ႔ Read More ဆိုတာေလးကို ျမင္ရမွာျဖစ္ပါတယ္..
ထည့္ၿပီးရင္ ေတာ့ Preview နဲ႔ ၾကည့္လိုက္ပါအံုး..
အခုခ်ိန္မွာ Read More ဆိုတဲ့စာသားေလးပဲေတြ႕ရမွာပါ.. error မေပၚဘူးဆိုရင္ Save template ကို ႏွိပ္လိုက္ၿပီးခဏေစာင့္လိုက္ပါ..
ေကာင္းၿပီ.. အဲဒီ Read More ဆိုတဲ့စာေလးကို ထပ္ၿပီး ပံုေလးနဲ႔ အစားသြင္းရေအာင္

Read More စာသားကို ပံုေလးနဲ႔ အစားသြင္းျခင္း

တန္းပလိတ္မွာ Auto Read More ပါလာတဲ့သူေတြက အေပၚကအဆင့္ 6 နဲ႔ 7 ကို လုပ္စရာမလိုပါဘူး.
အေပၚမွာေျပာခဲ့သလို အဆင့္ (1)ကေန (5)ထိ ၀င္ၿပီးသြားၿပီဆိုရင္
1. Ctrl+F ကိုႏွိပ္ၿပီး Find Box ေဘာက္ထဲမွာ Read More ကို ထည့္ၿပီးရွာလိုက္ပါ..
2. ေတြ႕ၿပီဆိုရင္ Read More ကို ေအာက္က လင့္နဲ႔ အစားထိုးလိုက္ပါ..
<img src=' http://www.fileden.com/files/2012/4/30/3298584/dark-orange.gif '/> 
ဒါဆိုရင္ ဒီလိုေလးျဖစ္သြားမယ္..
<a expr:href='data:post.url'><img src=' http://www.fileden.com/files/2012/4/30/3298584/2-mini-allblogtools.gif '/> </a></span>
ဟုတ္ရဲ႕လား..
ကဲ Preview ကိုၾကည့္လိုက္ရင္ လန္းေနတာေတြ႕ရမွာပါ..
အဲဒီ Read More Button ကို မႀကိဳက္ေသးဘူးဆိုရင္ http://www.fileden.com/files/2012/4/30/3298584/2-mini-allblogtools.gif ဆိုတဲ့ေနရာမွာ ေအာက္က ပံုေတြထဲက ကိုယ္ႀကိဳက္တဲ့ ပံုရဲ႕ လင့္ကို အစားထိုးေပးလိုက္ပါ..

http://www.fileden.com/files/2012/4/30/3298584/original.gif

http://www.fileden.com/files/2012/4/30/3298584/green.gif

 

http://www.fileden.com/files/2012/4/30/3298584/green1.gif

 

http://www.fileden.com/files/2012/4/30/3298584/black.gif

http://www.fileden.com/files/2012/4/30/3298584/light-orange.gif

http://www.fileden.com/files/2012/4/30/3298584/dark-orange.gif

http://www.fileden.com/files/2012/4/30/3298584/black1.gif

http://www.fileden.com/files/2012/4/30/3298584/blue.gif

http://www.fileden.com/files/2012/4/30/3298584/blue1.gif

http://www.fileden.com/files/2012/4/30/3298584/blue-dark.gif

http://www.fileden.com/files/2012/4/30/3298584/blue.png

http://www.fileden.com/files/2012/4/30/3298584/dark-grey.gif

http://www.fileden.com/files/2012/4/30/3298584/greenish.png

http://www.fileden.com/files/2012/4/30/3298584/grey.gif

http://www.fileden.com/files/2012/4/30/3298584/light-blue.png

http://www.fileden.com/files/2012/4/30/3298584/pink.png

http://www.fileden.com/files/2012/4/30/3298584/purple.gif

http://www.fileden.com/files/2012/4/30/3298584/purple.png

http://www.fileden.com/files/2012/4/30/3298584/purple1.gif

http://www.fileden.com/files/2012/4/30/3298584/red.png

http://www.fileden.com/files/2012/4/30/3298584/red1.gif

http://www.fileden.com/files/2012/4/30/3298584/red-dark.gif

ဒါဆိုရင္ေတာ့ Read More Button ေလးနဲ႔ လန္းသြားၿပီေပါ့..
( Read More Button ေတြကို ေအာက္ကလင့္ေတြမွာ ေဒါင္းၿပီး ကိုယ့္ကိုယ္ကို တင္ၿပီးေတာ့ လင့္ယူရင္လည္း ရပါတယ္....
Download Read More Buttons >> Mediafire or Ziddu or SendSpace or Tusfiles or 
                                         Solidfiles

တစ္ခုေတာ့ ထပ္ေျပာခ်င္ေသးတယ္.. ကၽြန္ေတာ္ေျပာတဲ့နည္းကိုလုပ္ၿပီး Read More က ေတာ့ အဆင္ေျပသြားတယ္..  ဒါေပမယ့္ Post ရဲ႕ ပံုေလးေတြက ငယ္ေနၿပီး စာသားေတြကလည္း ၃/၄ ေၾကာင္းေလာက္ပဲေပၚတယ္. အဲဒါကို မႀကိဳက္ဘူးဆိုရင္..

1. Ctrl + F နဲ႔ ေအာက္က စာသားေတြကို တစ္ေၾကာင္းခ်င္း လိုက္ရွာၿပီး အနီေရာင္ ျပထားတဲ့ တန္ဖိုးေတြကို ေျပာင္းၾကည့္ၿပီး Preview နဲ႔ ၾကည့္ပါ.. ႀကိဳက္ရင္ေတာ့ Save template ေပါ့

summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;



အဆင္ေျပသြားၿပီလားဗ်ာ...

ေမာင္ေပါက္