កាលលើកមុនប្លុក Idea for khmer ធ្លាប់បានបង្ហាញពី Widget (ធាតុក្រាហ្វិក)
ដាក់អត្ថបទចៃដន្យឲ្យបង្ហាញតំណអត្ថបទទាំងចាស់ទាំងថ្មី
ហើយក្នុងអត្ថបទនេះដែរ ខ្ញុំនឹងបង្ហាញពី Widget អត្ថបទចៃដន្យដែលមានផ្ទៃពណ៌ចម្រុះ
ទាក់ទាញភ្នែកអ្នកចូលមើល។ Random posts Widget គឺមានសារសំខាន់ណាស់
ព្រោះអាចធ្វើឲ្យអត្ថបទចាស់ងាយស្រួលមានគេចូលមើលនៅពេលដែលប្លកកាន់តែមានអត្ថបទច្រើនទៅៗ
ត្រូវការជំនួយឲ្យបង្ហាញអត្ថបទចាស់ឡើងវិញ។
ហើយរបៀបដាក់គឺងាយស្រួលមែនទែន បើចង់ដឹងសូមមើលខាងក្រោមនេះ ៖
- Log In ចូលគណនី Blogger របស់លោកអ្នក។
- ចូលទៅតាប Layout >>>
- រមូរចុះ (scroll down) រកមើល gadget ដែលមានឈ្មោះថា
HTML/JavaScript រួចចុចលើវាដើម្បីបើក
(មើលរូបខាងក្រោមនេះ)
-ចម្លង Code (Multi Colored Random Posts Widget) ខាងក្រោម យកទៅបិទភ្ជាប់ក្នុង gadget ហើយដាក់ចំណងជើងឲ្យ Widget ផង, រួច
Save ដើម្បីទទួលយក។ ចូលដល់តាម Layout វិញ
យើងអាចចាប់ទាញយកទៅដាក់ទៅទីតាំងសមរម្យ ឧទាហរណ៍ : នៅផ្នែកខាងក្រោមគេ។
<style
type="text/css">
.noop-random-posts
ul li {
list-style-image:none;
}.noop-random-posts
ul {
list-style-type:
none;
margin: 0;
padding: 5px
0;
}
.noop-random-posts
ul li {
border: 0
none;
margin: 5px
0;
padding:
10px;
position:
relative;
}
.noop-random-posts
ul li:first-child {
background:
none repeat scroll 0 0 #FF4C54;
width: 97%;
}
.noop-random-posts
ul li:first-child:after {
content:
"1";
}
.noop-random-posts
ul li:first-child + li {
background:
none repeat scroll 0 0 #FF764C;
width: 87%;
}
.noop-random-posts
ul li:first-child + li:after {
content:
"2";
}
.noop-random-posts
ul li:first-child + li + li {
background:
none repeat scroll 0 0 #FFDE4C;
width: 84%;
}
.noop-random-posts
ul li:first-child + li + li:after {
content:
"3";
}
.noop-random-posts
ul li:first-child + li + li + li {
background:
none repeat scroll 0 0 #C7F25F;
width: 81%;
}
.noop-random-posts
ul li:first-child + li + li + li:after {
content:
"4";
}
.noop-random-posts
ul li:first-child + li + li + li + li {
background:
none repeat scroll 0 0 #33C9F7;
width: 78%;
}
.noop-random-posts
ul li:first-child + li + li + li + li:after {
content:
"5";
}
.noop-random-posts
ul li:first-child + li + li + li + li + li {
background:
none repeat scroll 0 0 #7EE3C7;
width: 75%;
}
.noop-random-posts
ul li:first-child + li + li + li + li + li:after {
content:
"6";
}
.noop-random-posts
ul li:first-child + li + li + li + li + li + li {
background:
none repeat scroll 0 0 #F6993D;
width: 72%;
}
.noop-random-posts
ul li:first-child + li + li + li + li + li + li:after {
content:
"7";
}
.noop-random-posts
ul li:first-child + li + li + li + li + li + li + li {
background:
none repeat scroll 0 0 #F59095;
width: 69%;
}
.noop-random-posts
ul li:first-child + li + li + li + li + li + li + li:after {
content:
"8";
}
.noop-random-posts
ul li:first-child + li + li + li + li + li + li + li + li {
background:
none repeat scroll 0 0 #C7F25F;
width: 66%;
}
.noop-random-posts
ul li:first-child + li + li + li + li + li + li + li + li:after {
content:
"9";
}
.noop-random-posts
ul li:first-child:after, .noop-random-posts ul li:first-child + li:after,
.noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul
li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li
+ li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li
+ li:after, .noop-random-posts ul li:first-child + li + li + li + li + li +
li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li +
li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li +
li + li:after {
background:
none repeat scroll 0 0 #353535;
border-radius:
50% 50% 50% 50%;
color:
#FFFFFF;
font-size:
25px;
height:
30px;
position:
absolute;
right:
-17px;
text-align:
center;
top: 1px;
width: 30px;
}
.noop-random-posts
ul li a {
color:
#444444;
font-size:
13px;
text-decoration:
none;
}
</style>
<div
class="noop-random-posts"><script
type="text/javascript">
var randarray = new Array();var l=0;var
flag;
var numofpost=5;function
nooprandomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i <
numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j
in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var
entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length;
k++){if(entry.link[k].rel=='alternate'){var item = "<li>" +
"<a href=" + entry.link[k].href + ">" +
entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script
type="text/javascript"
src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>
លោកអ្នកអាចកំណត់បន្ថែម
ឬមិនកំណត់ក៏បាន ៖
- នៅត្រង់ font-size: 13px; កំណត់ទំហំអក្សរ ។
ចំណាំ៖
ដើម្បីដក Widget មួយនេះចេញវិញ
យើងគ្រាន់តែចូលទៅតាប Layout
រកមើល Gadget ដែលផ្ទុក Code: Multi Colored Random Posts Widget រួច remove ចេញជាការស្រេច។
បើកអ្នកជាអ្នកនិយមពណ៌ ខ្ញុំជឿថា Widget មួយនេះនឹងត្រូវចិត្ត ជួបគ្នានៅគន្លឹះ Blogger លើកក្រោយទៀត តែមុននឹងលា សូម Like និងចែករំលែកដល់បងប្អូនខ្មែរយើងផងដែលគាត់កំពុងប្រើ
Blogger៕