របៀបដាក់របាទំព័រក្នុង Blogger

ខាងក្រោមនេះជាវិធីកំណត់ និងបង្ហាញរបាទំព័រ ក្នុង Blogger ដែលភ្ជាម់មកជាមួយគម្រូ Style CSS ដ៏ស្រស់ស្អាត សម្រាប់ជាគន្លឹះក្នុងការច្នៃប្រឌិតបន្ថែម។

ដើម្បីំដាក់របាទំព័រមានពីដំណាក់កាល៖

1. ដាក់ Style CSS

2. ដាក់ Java Script

1. ដាក់ Style CSS

Step 1. ទៅកាន់ Blogger Dashboard > Template > click on the Edit HTML button:

Step 2. បញ្ជា Shortcut key CTRL + F នៅពេលនោះវានឹងបង្ហាញ search box

វាយក្នុប្រអប់ search box នូវពាក្យខាងស្ដាំ  ]]></b:skin>

Step 3. នៅពេលយើយទៅដល់ពាក្យដែលត្រូវស្វែងរកហើយ ]]></b:skin> បន្ដមកទៀតត្រូវចំលង Style CSS ណាមួយក្នុងចំណោមគម្រូខាងក្រោម យកមកដាក់នៅខាងលើ ]]></b:skin>

គម្រូទី១

 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}

.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}

 .showpageOf{display:none!important}

#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}

 #blog-pager .pages{border:none;}

គម្រូទី២

 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}

#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}

 .showpageOf{display:none!important}

#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

គម្រូទី៣

 #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}

.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}

.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}

a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}

#blog-pager .pages{border:none;background: none;}

គម្រូទី៤

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}

.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}

#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}

 .showpageOf{display:none!important}

#blog-pager .pages{border:none;}

គម្រូទី៥

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}

.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}

#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}

 .showpageOf{display:none!important}

#blog-pager .pages{border:none;}

គម្រូទី៦

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}

.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}

#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}

 .showpageOf{display:none!important}

#blog-pager .pages{border:none;}

គម្រូទី៧

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}

.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}

#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}

 .showpageOf{display:none!important}

#blog-pager .pages{border:none;}

Note: if you want to hide the "First" and "Last" buttons add this line below the CSS code:

.firstpage, .lastpage {display: none;}

2. Adding The Script

Step 4. ដោយប្រើពាក្យបញ្ជា CTRL + F) ជាថ្មីមួយសាទៀត ស្វែងរក

</body>

Step 5. ចម្លងនូវកូដ Java Script ខាងក្រោម ដាក់នៅខាងលើ </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<script type='text/javascript'>

  /*<![CDATA[*/

    var perPage=7;

    var numPages=6;

    var firstText ='First';

    var lastText ='Last';

    var prevText ='« Previous';

    var nextText ='Next »';

    var urlactivepage=location.href;

    var home_page="/";

  /*]]>*/

</script>

  <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>

</b:if>

</b:if>

ការកំណត់បន្ថែមៈ

តាមរយៈកូដខាងលើយើងអាចកែសម្រួលជាអក្សរខ្មែរបាន នូវចំណុចដូចតទៅ

perPage: 7,

numPages: 6,

var firstText ='ទំព័រដំបូង';

var lastText ='ទំព័រចុងក្រោយ';

var prevText ='« ដំបូងបន្ទាប់';

var nextText ='ក្រោយបន្ទាប់ »';

}

1) perPage: សំដៅដល់ការបង្ហាញចំនួន Post ក្នុងមួយទំព័រ។ តែបើការកំណត់នៅចំណុចនេះគ្មានប្រសិទ្ធភាពទេ ត្រូវចូលទៅកាន់  "Settings menu > Posts and comments > Show at most ? posts" ក្រោយពីកំណែត្រូវ  "Save Settings" ។

2) numPages: សំដៅដល់ចំនួនទំព័រដែលត្រូវបង្ហាញលើរបា

 

Step 8. ក្រោយពេលកំណែរួចរាល់សូមរក្សាទុក និងធ្វើការសាកល្បងមើលលទ្ធផល!  ខ្ញុំសង្ឃឹមថាលោកអ្នកនឹងទទួលបានលទ្ធផលជាទីពេញចិត្ត។