របៀបធ្វើឲ្យប្រកាសពេញនិយម (POPULAR POST) មានម៉ូតស្អាតប្លែក បែបទំនើប
ងាកមកមើលអំពីរបៀបដាក់វិញ ក៏មិនពិបាកឆ្អីដែរ ច្រួលណាស់ :D បើអ្នកធ្លាប់ចេះដាក់វា គឺអាចដាក់បានហើយ។ ខ្ញុំក៏សូមទោសផងដែរ ដែលមិនអាចដាក់ Demo មើលលទ្ធផលជាក់ស្ដែងឲ្យមើល តែមានរូបជាឧទាហរណ៍ដែរ សូមមើល :
៙ ទីមួយត្រូវដាក់ POPULAR POSTឲ្យហើយមុនសិន ៖
យើងត្រូវដាក់ ប្រកាសពេញនិយម (POPULAR POST) ដែលមានស្រាប់នៅក្នុង Blogger ជាមុន :
- កត់ត្រាចូល (Log In) គណនី Blogger របស់លោកអ្នក។
- ចូលទៅកាន់ផ្នែក Layout >> រួចចុចលើតំណអក្សរ Add a Gadget នៅទីតាំងណាមួយ (ឧទាហរណ៍សូមមើលរូបខាងក្រោម)
- Most viewed : បង្ហាញចំណងជើងប្រកាសដែលមានអ្នកអានច្រើនជាងគេ គិតជា ក្នុងសប្ដាហ៍, ក្នុងខែ ឬក៏ គ្រប់ពេល។ (ស្រេចតែអ្នក)
- Show : កំណត់ការបង្ហាញចំណងជើងប្រកាស ភ្ជាប់មកជាមួយ ៖
+ image thumbnail : កំណត់អោយបង្ហាញរូបភាពតូចក្នុងប្រកាសបើមាន (សូមធីក)
+ snippet : បង្ហាញអត្ថបទសង្ខេបបន្តិចពីក្រោមចំណងជើង (សូមកុំធីក)
- Display up to ... post(s) : កំណត់ចំនួនបង្ហាញចំណងជើងប្រកាស (ខ្ញុំសូមអោយអ្នកបង្ហាញច្រើនបំផុតតែប្រាំបួន (10) ចំណងជើងប្រកាសល្បីៗបានហើយ (អ្នកអាចដាក់តិចជាងនេះ)។
- កំណត់រួចសូមចុចប៊ូតុង Save ដើម្បីរក្សាទុក។ រួចអ្នកអាចចាប់ទាញ Popular Posts Gadget ទៅដាក់នៅទីតាំងសមរម្យ ដែលអ្នកចង់បាន (ឧទាហរណ៍ នៅខាងក្រោមគេបំផុតក្នុងផ្នែកខាងស្ដាំ)។
៙ ជំហានទីពីរ ជាជំហានដែលត្រូវដាក់កូដ ៖
- ចូលទៅកាន់ម៉ឺនុយ Template >> Edit HTML (មើលរូប)
កូដដែលត្រូវយកទៅដាក់នៅខាងលើស្លាក ]]></b:skin>
- បន្ទាប់មក ស្វែងរកកូដ </body> (សូមចុច Ctrl + F ទើបងាយរក)។
- ពេលរកឃើញហើយ សូមបិទភ្ជាប់ (Past) កូដខាងក្រោមនៅពីលើ </body> (មើលរូប)
/* Popular Posts Widget tingmoung.com */
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-content:hover img {transform: rotate(10deg) scale(1.2);}
.item-content { position: relative; }
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-content:hover img {transform: rotate(10deg) scale(1.2);}
.item-content { position: relative; }
- បន្ទាប់មក ស្វែងរកកូដ </body> (សូមចុច Ctrl + F ទើបងាយរក)។
- ពេលរកឃើញហើយ សូមបិទភ្ជាប់ (Past) កូដខាងក្រោមនៅពីលើ </body> (មើលរូប)
កូដដែលត្រូវយកទៅដាក់នៅខាងលើស្លាក </body>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
</script>
<script type='text/javascript'>
//<![CDATA[
// Popular Posts customization by AllBloggerTricks.com
// Trim Code by MS-potilas 2012
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,120);
var j=txt.lastIndexOf(' ');
if(j>10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
</script>
<script type='text/javascript'>
//<![CDATA[
// Popular Posts customization by AllBloggerTricks.com
// Trim Code by MS-potilas 2012
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,120);
var j=txt.lastIndexOf(' ');
if(j>10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
//]]>
</script>
