៙ ទីមួយត្រូវដាក់ POPULAR POSTឲ្យហើយមុនសិន ៖
យើងត្រូវដាក់ ប្រកាសពេញនិយម (POPULAR POST) ដែលមានស្រាប់នៅក្នុង Blogger ជាមុន :
- កត់ត្រាចូល (Log In) គណនី Blogger របស់លោកអ្នក។
- ចូលទៅកាន់ផ្នែក Layout >> រួចចុចលើតំណអក្សរ Add a Gadget នៅទីតាំងណាមួយ (ឧទាហរណ៍សូមមើលរូបខាងក្រោម)
- រមូរចុះ (scroll down) រកមើល gadget ដែលមានឈ្មោះថា Popular Posts រួចចុចលើវាដើម្បីបើក (មើលរូបខាងក្រោមនេះ)
- លោកអ្នកនឹងឃើញដូចខាងក្រោម ហើយសូមធ្វើការកំណត់ ៖
- Title : ជាឈ្មោះ Gadget អ្នកអាចដាក់ជាភាសាខ្មែរបាន (ប្រកាសពេញនិយម) ឬក៏មិនបាច់ដូរក៏បាន។
- Most viewed : បង្ហាញចំណងជើងប្រកាសដែលមានអ្នកអានច្រើនជាងគេ គិតជា ក្នុងសប្ដាហ៍, ក្នុងខែ ឬក៏ គ្រប់ពេល។ (ស្រេចតែអ្នក)
- Show : កំណត់ការបង្ហាញចំណងជើងប្រកាស ភ្ជាប់មកជាមួយ ៖
+ image thumbnail : កំណត់អោយបង្ហាញរូបភាពតូចក្នុងប្រកាសបើមាន (សូមធីក)
+ snippet : បង្ហាញអត្ថបទសង្ខេបបន្តិចពីក្រោមចំណងជើង (សូមធីក)
- Display up to ... post(s) : កំណត់ចំនួនបង្ហាញចំណងជើងប្រកាស (ខ្ញុំសូមអោយអ្នកបង្ហាញច្រើនបំផុតតែប្រាំបួន (10) ចំណងជើងប្រកាសល្បីៗបានហើយ (អ្នកអាចដាក់តិចជាងនេះ)។
- កំណត់រួចសូមចុចប៊ូតុង Save ដើម្បីរក្សាទុក។ រួចអ្នកអាចចាប់ទាញ Popular Posts Gadget ទៅដាក់នៅទីតាំងសមរម្យ ដែលអ្នកចង់បាន (ឧទាហរណ៍ នៅខាងក្រោមគេបំផុតក្នុងផ្នែកខាងស្ដាំ)។
៙ ជំហានទីពីរ ជាជំហានដែលត្រូវដាក់កូដ ៖
- ចូលទៅកាន់ម៉ឺនុយ Template >> Edit HTML (មើលរូប)
- រកមើលស្លាក <b:skin>...</b:skin> ដោយចុចលើសញ្ញាព្រួញពណ៌ខ្មៅដែលនៅពីមុខវា បើសិនជាវាមិនទាន់ត្រូវបានពន្លាចេញ។
- រមូលចុះ (scroll down) ទៅដល់ ]]></b:skin>
- រមូលចុះ (scroll down) ទៅដល់ ]]></b:skin>
- ចម្លងកូដខាងក្រោមទៅបិទភ្ជាប់ នៅពីលើស្លាក ]]></b:skin> ។
- ពេលរកឃើញហើយ សូមបិទភ្ជាប់ (Past) កូដខាងក្រោមនៅពីលើ </body> ។
/* Popular Posts */ .PopularPosts .item-thumbnail{float:none;margin:0 0 10px} .PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;} .PopularPosts .item-title:hover{background:rgba(0,0,0,.2)} .PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)} .PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)} .PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear} .PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;} .PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;} .PopularPosts .item-snippet{display:none;} .PopularPosts ul li .item-content{position:relative;overflow:hidden;} .PopularPosts ul{padding:0;line-height:normal;counter-reset:count;} .PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;} .PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;} .PopularPosts .widget-content ul li:hover:before{right:-55px;} .PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);} .PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);} .PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);} .PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);} .PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);} .PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);} .PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}- បន្ទាប់មក ស្វែងរកកូដ </body> (សូមចុច Ctrl + F ទើបងាយរក)។- ពេលរកឃើញហើយ សូមបិទភ្ជាប់ (Past) កូដខាងក្រោមនៅពីលើ </body> ។
<script type='text/javascript'> // Popular Post Thumb$(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});//<![CDATA[// Custom Popular Post$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});//]]></script>- ពេលដាក់កូដរួចរាល់អស់ហើយ សូមចុច ប៊ូតុង Save Template ជាការស្រេច។Sign up here with your email
មានបញ្ហាទាក់ទង សូមបញ្ចេញមតិខាងក្រោម សន្ទនាសន្ទនា រូបស្ទីគ័ររូបស្ទីគ័រ