Blog එකට Read More Button එක ඇතුල් කරමු - Saagaraya Blog

Breaking

Movies, TV Series, Softwares, Music, Games, Trailers, Technology News, Blogger, Sinhala Tricks, Tips and Tutorials.

Tuesday, August 16, 2011

Blog එකට Read More Button එක ඇතුල් කරමු

Blog එකට Read More Button එක ඇතුල් කරමු

අද මම කියලා දෙන්න හදන්නේ ඔයාලගේ බ්ලොග් එකට Read More බොත්තම දාගන්න හැටි. ඔක්කෝටම කලින් නොදන්න කට්ටියට දැනගන්නත් එක්ක අපි මොකද්ද මේ Read More බොත්තම කියන්නේ කියලා බලමු. සාමාන්‍යයෙන් අපි Blog එකට ලිපියක් දාපුවාම Home Page එකේ මුළු ලිපියම පෙන්නනවනේ. ඉතින් මේ Read More එකෙන් කරන්නේ ඒ ලිපියේ මුල් කොටස විතරක් Home page එකේ පෙන්නන්න සලස්වන එකයි. අපිට මුලු ලිපියම බලාගන්න ඕනේනම් Read More කියන එක ක්ලික් කරලා ඒ ලිපිය තියන පි‍ටුවට යන්න වෙනවා.

මේ Read More බොත්තම දාගන්න එකෙන් ඇතිවෙන වාසිය වෙන්නේ අපේ බ්ලොග් එකේ Home Page එක ලස්සනට සහ ගොඩක් දිග වෙන්නේ නැතුව තියාගන්න පුලුවන් වෙන එක. ඒ වගේම ඔයාලගේ කැමැත්ත අනුව අපිට මේ Read More කියන එක බොත්තමක් විදිහට සහ ලින්ක් එකක් විදිහට දාගන්න පුලුවන්.

හොදයි දැන් අපි පියවරෙන් පියවර මේ වැඩේ කරගන්නේ කොහොමද කියලා කතා කරමු.

Read More Button එක නිවැරදිව ඇතුලත් කරගන්න හැටි


1.  මුලින්ම ඔයාලා blogger එකට ලොග් වෙලා template එක edit කරන තැනට යන්න. කෝකටත් කියලා මුලින්ම ඔයාලගේ template එකේ Backup එකක් අරගෙන ඉන්න. මොකද මේ කරන්න යන දේ, ඔයාලගේ අතින් පොඩ්ඩක් හරි වැරදුනොත් අපිට ලේසියෙන්ම template එක Restore කරගන්න පුලුවන්නේ.

2.  ඊලගට කරන්න තියෙන්නේ මම මේ පහල දාලා තියෙන code එක ඔයාලගේ template එකේ කොහෙද තියෙන්නේ කියලා හොයාගන්න එක.

]]></b:skin>




3.  දැන් අපි උඩ හොයාගත්ත code එකට යටින්, පහල මම දීලා තියෙන codes ටික දාගන්න.

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>



4.  ඊලගට ඔයාලට හොයාගන්න තව code එකක් තියනවා.

<data:post.body/>



5.  කලින් එක වගේම උඩ අපි හොයාගත්ත code එකට යටින්, පහල මම දීලා තියන codes ටික දාගන්න.

<!--READ-MORE-STARTS-->

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>

<div style="text-align: right;">Read More ->></div></a>
</b:if>

<!--READ-MORE-STOPS-->



මෙතනදි ඔයාලා පොඩි දෙයක් ගැන දැනගන්න ඕනේ. මම මේ උඩ දීලා තියන codes ටික දැම්මොත් ඔයාලගේ Read More Button එක එන්නේ දකුණු පැත්තටයි. ඔයාලට ඒක වම් පැත්තට එහෙම දාගන්න ඕනේනම් මේ උඩ තියන codes ටික වෙනුවට පහල codes ටික දාගන්න.

<!--READ-MORE-STARTS-->

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>

<div style="text-align: left;">Read More ->></div></a>
</b:if>

<!--READ-MORE-STOPS-->



6.  ඊටපස්සේ මතක ඇතුව template එක save කරන්න.

7.  තාම වැඩේ ඉවර නෑ. දැන් ඔයාලා ලිපි ලියන තැනට (New Post) යන්න.

8.  එතන compose යටතේ ඔයාලගේ ලිපිය type කරලා, එහි HTML codes තියන තැනට යන්න. මෙතනින් අපි ලිව්ව ලිපියේ මුල් කොටස ( ඒ කියන්නේ ඔයාලගේ බ්ලොග් එකේ මුල් පි‍ටුවේ පෙන්නන්න ඕනේ කොටස ) ඇරෙන්න අනිත් කොටස් ඔක්කොම ටික මම මේ පහල දාලා තියන codes අතරට එන විදිහට දාගන්න.

ඒ කියන්නේ මේ ආකාරයට...


<span class="fullpost">

ඔයාලට home page එකේ පෙන්නන්න ඕන නැති කොටස් ටික.

</span>



එච්චරයි කරන්න තියෙන්නේ. මතක ඇතුව ඔයාලා හැම ලිපියක්ම ලියලා අවසන් වුනහම මේ උඩ තියන කෝඩ් එක දාගන්න.

NOTE: මම මේ උඩින් කියලා දුන්න විදිහට කරපුවාම එන්නේ Read More කියන ලින්ක් එක විතරයි. ඔයාලට ඒක වෙනුවට Button එකක් දාගන්න ඕනේනම්, උඩ මම දීලා තියන Codes වල Read More->> කියන එක වෙනුවට මේ පහල තියන code එක දාගන්න.

<img border="0" alt="read more" src="Read More Button එකේ පිංතුරය තියන තැන URL එක"/>



මතක ඇතුව "Read More Button එකේ පිංතුරය තියන තැන URL එක" කියන තැනට ඔයාලගේ Read More Button එකේ Image Location එක දෙන්න.


මෙන්න මම ගානේ ඔයාලට Read More Button කීපයක පිංතුර ටිකක්.



මෙම ලිපියෙන් ඔබ වැදගත් යමක් ඉගෙනගත්තානම් Comment එකක් දාලා යන්න.


Update:
(+) May 15, 2021: code වල පෙනුම වෙනස් කරන ලදී


බ්ලොග් ට්‍රික්ස්, Blogger ගැන සිංහලෙන්, Blogger Tutorial සිංහලෙන්, බ්ලොග් ටිප්ස්, සිංහලෙන් ඉගෙන ගමු, බ්ලොගර් උදවු, Saagaraya Blogger, Blogger Sinhala Tutorial

12 comments:

  1. මේක නම් රජ වැඩක්,මාත් දාගත්තා .එල කොල්ලෙක් අ...තැන්ක්ස් මේක නම් පිං වැඩක් දිගටම කරන් යන්න වාසනාව ලැබේවා
    ජයවේවා!!!!!!

    ReplyDelete
  2. @ Chinthaka :

    තැන්ක්ස් මචන් Comment එකට...

    ReplyDelete
  3. @ Beauty Girls Image :

    බොහෝම ස්තුතියි Comment එකට..

    ReplyDelete
  4. වැඩ කරන්නේ නෑනේ......................
    මොකක් හරි අවුලක්. :'( :'(

    ReplyDelete
  5. @ Gayan T. Piyarathna :

    වැඩ කරන්නේ නැති වෙන්නනම් විදිහක් නෑ සහෝදරයා. ආයේ පොඩ්ඩක් බලන්න.
    මම මේ විදිහට Read More එක දාන තවත් ක්‍රමයක් ලගදිම කියලා දෙන්නම්.

    ReplyDelete
    Replies
    1. Thanks මචං.
      ඒකවත්හරියට කරගන්න පුලුවන් උනොත්නම් ලොකුදෙයක්. කෝකටත් මම ආයෙත් බලන්නම්කො.

      Delete
  6. @ Sachin Dewthuru :

    Template එකේ Edit template ගිහින් search කරලා බලන්න. නැතිවෙන්න බෑ අනිවාරයෙන්ම තියෙන්නේ ඕනේ. ඒත් හොයාගන්න බැරිවුනොත් මට email එකක් එවන්න. මම උදව් කරන්නම්.

    ReplyDelete
  7. mcn.image url hoyaganne kohomada

    ReplyDelete
  8. @ Kishara :

    ඔයාට අවශ්‍ය කරන පිංතුරය තියන තැනට ගිහින්, පිංතුරය උඩ Right click කරලා "Copy Image Location" කියල එක ක්ලික් කරන්න. එතකොට ඒ Image එක තියන තැන URL එක Copy වෙනවා. ඊටපස්සේ ඔයාට තියෙන්නේ ඒ පිංතුරය ඔයාට දාන්න ඕනේ කරන තැනට ගිහින් Paste කරන එක.

    ReplyDelete
  9. e bn home page ekata label post read more ekka danne kohomada pease help

    ReplyDelete