ដាក់ Widget ប្រកាស​អត្ថបទ​ទើប​ចេញផ្សាយមានចលនា

អ្នកទស្សនា​ក្នុង​ បណ្ដាញ​ប្រព័ន្ធ​អ៊ីនធឺណិត​ ភាគច្រើន​ចូលចិត្ត​​ មើល​​ព័ត៌មាន​ថ្មីៗ​ដែល​អ្នក សរសេរ​​ តែងតែ​​និពន្ធ​បង្ហោះ​​ចូល​ក្នុង​ ​ប្លុក​​ឬ​ វេបសាយ​​របស់​គេ​​។ ជួនកាល ​អ្នកទស្សនា​​គាត់ មាន​ថ្ងៃ ខ្លះ​​រវល់​ពេក​មិន​បាន​ចូល​មើល​ព័ត៌មាន​ក្នុង​​ ប្លុក​យើង​ ​ថ្ងៃ ខ្លះ​​ទំនេរ​រ​គាត់​មាន​ពេល​។ ​ចឹង! បើ​ដូច្នេះ​តើ​ធ្វើ​ម៉េច​គាត់​បាន​ដឹង​អំពី​ពត៌មាន​យើង​ទើប​តែ​ប្រកាស​ក្តៅៗ​។ ​ប៉ុន្តែ​កុំ​ខ្វល់​ច្រើន​ ខ្ញុំ​មាន​កូដ​មួយ​ចំនួន​គួប​ផ្សំ​ ​មាន​ពណ៌​ចំរុះ​ ​ប្រាកដ​ជា​ទាក់​ភែ្នក​អ្នក​ទស្សនា​ ​ឲ្យ​មក​មើល​(អត់​ធានា​ទេ :D)​។ ធាតុ​ក្រាហ្វិក​ទាំងនោះ​ភាគ​ច្រើន​ប្រកាស​ជា​ CSS ​និង​ JQuery។ ​បើ​ចង់​ដឹង​ សូម​មើល​ទាំងអស់គ្នា​ខាងក្រោម​នេះ៖

ជំហានទី១

• ចូល Blogger របស់​អ្នក > ចុច Layout > ហើយ​ចុច​ Add a Gadget ដូច​រូប​ខាងក្រោម៖

• ស្វែងរក​ ប៊ូតុង ឬ អក្សរ  HTML/JavaScript   ពេលនោះ​វា​លោត​ផ្ទាំង​ទទេរ​មក​ ចម្លង​កូដ​ខាងក្រោម​ដាក់​៖

ចំណាំ

- រាល់​កូដ​ខាងក្រោម​តែង​មាន​ហាយឡាយ​ពណ៌បៃតង​មួយ​ឆ្នូត​(http://avakhmer.blogspot.com/)​​សូម​ជំនួស​ទៅ​ជា​អាស័យដ្ឋាន​ប្លុក​អ្នក​វិញផង។
-  numposts = 10 ជា​ចំនួន​ អត្ថបទ​ដែល​ត្រូវ​បង្ហាញ​។
- limitspy=4 ​ជា​ចំនួន​ ​អត្ថបទ​ដែល​មើល​ឃើញ​ (​ឧទា​៖ ​ចំនួន​ Post 10 ​នោះ​វា​នឹង​រំកិល​ម្តង​៤​រហូត​គ្រប់​ 10​)​។

- intervalspy=4000 ​ជា​ចំនួន​ល្បឿន​នៃ​ចលនា​អត្ថបទ​ ​បើ​ចំនួន​កាន់តែ​ធំ​កាន់តែ​យូរ​ផ្លាស់ទី​។ 

Φ កូដរូបទី១

<style type="text/css" media="screen">
#workwidget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}

#workwidget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}

#workwidget li {
width: 282px;
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
overflow: hidden;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwQfkMrakJk10xaD8kwObONPXvgZCPHUr4kcfN562D5QyaDPbsoc-scIOp5WYPM1JCAGQN4WBS9IlJlcYbgQ6TRumeegAxDmzlGrw9EMHrA1B68YPc3VyrEGiF7LCUhw3rQd5Oz8tFlRXj/s1600/24work-blogspot-com.jpg) repeat-x;
border: 1px solid #ddd;
}

#workwidget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}

#workwidget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}

#workwidget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#workwidget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
overflow: hidden;
font-size: 10px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
overflow: hidden;
font-family: Tahoma,Arial,verdana, sans-serif;
font-size: 10px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}


</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PiMVbY8Cn67f-BlNuo2ukxJXZa_JmAc_URlBK28q6LJEv5ke9E33LIf3UDkyGWT8QkeDuB3nzv2bLZeQYgQ6InqWCh_UPakBPNiwDQJcJTG7KPEHTEYdkj5UjIWO93Lb0P-fj65CQb6W/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PiMVbY8Cn67f-BlNuo2ukxJXZa_JmAc_URlBK28q6LJEv5ke9E33LIf3UDkyGWT8QkeDuB3nzv2bLZeQYgQ6InqWCh_UPakBPNiwDQJcJTG7KPEHTEYdkj5UjIWO93Lb0P-fj65CQb6W/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PiMVbY8Cn67f-BlNuo2ukxJXZa_JmAc_URlBK28q6LJEv5ke9E33LIf3UDkyGWT8QkeDuB3nzv2bLZeQYgQ6InqWCh_UPakBPNiwDQJcJTG7KPEHTEYdkj5UjIWO93Lb0P-fj65CQb6W/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PiMVbY8Cn67f-BlNuo2ukxJXZa_JmAc_URlBK28q6LJEv5ke9E33LIf3UDkyGWT8QkeDuB3nzv2bLZeQYgQ6InqWCh_UPakBPNiwDQJcJTG7KPEHTEYdkj5UjIWO93Lb0P-fj65CQb6W/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PiMVbY8Cn67f-BlNuo2ukxJXZa_JmAc_URlBK28q6LJEv5ke9E33LIf3UDkyGWT8QkeDuB3nzv2bLZeQYgQ6InqWCh_UPakBPNiwDQJcJTG7KPEHTEYdkj5UjIWO93Lb0P-fj65CQb6W/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://avakhmer.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="workwidget">
<script src='http://dl.dropboxusercontent.com/s/qegice7y4oneszj/animated-recent-posts-ycode-2.js' type='text/javascript'></script>
</div>

រូបទី១

Φ កូដរូបទី២

<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwQfkMrakJk10xaD8kwObONPXvgZCPHUr4kcfN562D5QyaDPbsoc-scIOp5WYPM1JCAGQN4WBS9IlJlcYbgQ6TRumeegAxDmzlGrw9EMHrA1B68YPc3VyrEGiF7LCUhw3rQd5Oz8tFlRXj/s1600/24work-blogspot-com.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->

</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>

imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PiMVbY8Cn67f-BlNuo2ukxJXZa_JmAc_URlBK28q6LJEv5ke9E33LIf3UDkyGWT8QkeDuB3nzv2bLZeQYgQ6InqWCh_UPakBPNiwDQJcJTG7KPEHTEYdkj5UjIWO93Lb0P-fj65CQb6W/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PiMVbY8Cn67f-BlNuo2ukxJXZa_JmAc_URlBK28q6LJEv5ke9E33LIf3UDkyGWT8QkeDuB3nzv2bLZeQYgQ6InqWCh_UPakBPNiwDQJcJTG7KPEHTEYdkj5UjIWO93Lb0P-fj65CQb6W/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PiMVbY8Cn67f-BlNuo2ukxJXZa_JmAc_URlBK28q6LJEv5ke9E33LIf3UDkyGWT8QkeDuB3nzv2bLZeQYgQ6InqWCh_UPakBPNiwDQJcJTG7KPEHTEYdkj5UjIWO93Lb0P-fj65CQb6W/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PiMVbY8Cn67f-BlNuo2ukxJXZa_JmAc_URlBK28q6LJEv5ke9E33LIf3UDkyGWT8QkeDuB3nzv2bLZeQYgQ6InqWCh_UPakBPNiwDQJcJTG7KPEHTEYdkj5UjIWO93Lb0P-fj65CQb6W/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PiMVbY8Cn67f-BlNuo2ukxJXZa_JmAc_URlBK28q6LJEv5ke9E33LIf3UDkyGWT8QkeDuB3nzv2bLZeQYgQ6InqWCh_UPakBPNiwDQJcJTG7KPEHTEYdkj5UjIWO93Lb0P-fj65CQb6W/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;

home_page = "http://avakhmer.blogspot.com/";

limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://dl.dropboxusercontent.com/s/3frdg2yvzmdwsto/animated-recent-posts-ycode-1.js' type='text/javascript'></script>

</div>

រូបទី២

Φ កូដរូបទី៣

<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript" src="http://dl.dropboxusercontent.com/s/ihq11ph63uaenzv/animated-recent-posts-ycode-3.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="http://avakhmer.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script></ul>

រូបទី៣

Φ កូដរូបទី៤

<style type="text/css" media="screen">
#workwidget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}

#workwidget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}

#workwidget li {
width:285px;
background: #1ed2f2;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 1px 10px !important;
-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;
}

#workwidget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}

#workwidget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}

#workwidget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}


#workwidget li:hover {
background: #84f6f5;

}

#workwidget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
overflow: hidden;
font-size: 10px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
overflow: hidden;
font-family: Tahoma,Arial,verdana, sans-serif;
font-size: 10px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}


</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PiMVbY8Cn67f-BlNuo2ukxJXZa_JmAc_URlBK28q6LJEv5ke9E33LIf3UDkyGWT8QkeDuB3nzv2bLZeQYgQ6InqWCh_UPakBPNiwDQJcJTG7KPEHTEYdkj5UjIWO93Lb0P-fj65CQb6W/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PiMVbY8Cn67f-BlNuo2ukxJXZa_JmAc_URlBK28q6LJEv5ke9E33LIf3UDkyGWT8QkeDuB3nzv2bLZeQYgQ6InqWCh_UPakBPNiwDQJcJTG7KPEHTEYdkj5UjIWO93Lb0P-fj65CQb6W/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PiMVbY8Cn67f-BlNuo2ukxJXZa_JmAc_URlBK28q6LJEv5ke9E33LIf3UDkyGWT8QkeDuB3nzv2bLZeQYgQ6InqWCh_UPakBPNiwDQJcJTG7KPEHTEYdkj5UjIWO93Lb0P-fj65CQb6W/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PiMVbY8Cn67f-BlNuo2ukxJXZa_JmAc_URlBK28q6LJEv5ke9E33LIf3UDkyGWT8QkeDuB3nzv2bLZeQYgQ6InqWCh_UPakBPNiwDQJcJTG7KPEHTEYdkj5UjIWO93Lb0P-fj65CQb6W/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PiMVbY8Cn67f-BlNuo2ukxJXZa_JmAc_URlBK28q6LJEv5ke9E33LIf3UDkyGWT8QkeDuB3nzv2bLZeQYgQ6InqWCh_UPakBPNiwDQJcJTG7KPEHTEYdkj5UjIWO93Lb0P-fj65CQb6W/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://avakhmer.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="workwidget">
<script src='http://dl.dropboxusercontent.com/s/qegice7y4oneszj/animated-recent-posts-ycode-2.js' type='text/javascript'></script>
</div>

រូបទី៤

Φ កូដរូបទី៥

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script style='text/javascript' src="http://dl.dropboxusercontent.com/s/83365z7wnbo6025/hb-recentposts-ycode.js" ></script>
<script style='text/javascript' src='http://dl.dropboxusercontent.com/s/lw5ej1vuj8t3def/hb-jquery-ticker-nocode.js'></script>
<script style='text/javascript'>
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
$(document).ready(function () {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 3,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'
});});
</script>
<div id="sai">
<script src='http://avakhmer.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>

រូបទី៥

Φ កូដរូបទី៦

<style type="text/css">
/*<![CDATA[*/
img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:70px;width:70px}
img.label_thumb:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px}
.label_with_thumbs a{color:#3395BF;font-size:12pt;outline:0;text-decoration:none}
.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888}
#mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none!important}
#mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}
#mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px}
#mdjumplink a:hover{color:#888!important;text-decoration:none}
#mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:800}
#mdcomments:hover{background:#F4A557;text-decoration:none}
/*]]>*/
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript" src="http://dl.dropboxusercontent.com/s/lvcqh2soqpa5tty/animated-recent-posts-ycode-5.js"></script>
<script type='text/javascript'>
//<![CDATA[
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 80;
//]]>
</script>
<script src='http://avakhmer.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs'></script>

រូបទី៦

Φ កូដរូបទី៧

<style type="text/css">
#post-gallery {
width:304px;
margin:0px auto;
font:normal 11px Arial,Sans-Serif;
color:##000000
;
padding:8px;
background-color:#1BA1E2
;
-webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#post-gallery h2 {
font:20px Arial,Sans-Serif;
color:white;
text-shadow:0px 3px 2px black;
text-transform:uppercase;
margin:2px 2px 2px;
padding:7px 14px;
background-color:#000000;
text-align: center;
}
#post-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGfLhGeCPSZ_PFvGJS3vz7xuKGPkYlfAEPzfljyndNb2twOXiUnHIL6UACrKYkZFDBavWdKKUxFFo8bKYl-KX32KqTrf9_UyX97D64Z0YNY07bdS5iq4DEpYtNborfNr3OXLWUA7mEo2Gy/s1600/24work.blogspot.com.loading.gif') no-repeat 50% 50%;
width:72px;
height:72px;
}
#post-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0px 0px !important;
padding:0px 0px !important;
background:transparent !important;
display:none;
}
#post-gallery .rp-item .rp-child {
position:relative;
top:10%!important;
left:10%!important;
z-index:1000;
width:200px;
background-color:white;
border-top:5px solid #1BA1E2;
-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0px 0px 5px;
color:#1BA1E2;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript">


var rpTitle = "អត្ថបទថ្មីបំផុត", // Widget Title

numposts = 20, // The number of thumbnails / posts to display
numchar = 200, // Number of characters in the description tooltip
rcFadeSpeed = 600, // Speed of the effect. fadeIn () tooltip appears

pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PiMVbY8Cn67f-BlNuo2ukxJXZa_JmAc_URlBK28q6LJEv5ke9E33LIf3UDkyGWT8QkeDuB3nzv2bLZeQYgQ6InqWCh_UPakBPNiwDQJcJTG7KPEHTEYdkj5UjIWO93Lb0P-fj65CQb6W/s1600/noimage.png", // Image that show up if the post doesn't have a image
blogURL = "http://avakhmer.blogspot.com/"; // Your Blog Address
</script><script src="http://dl.dropboxusercontent.com/s/mcnspfkhcl2wwql/animated-recent-posts-ycode-6.js" type="text/javascript"></script>

រូបទី៧

 បើ​កូដ​នោះ​មិន​ដើរ​សូម​បន្ថែម​ជំហាន​ខាងក្រោម​នេះ​៖

ជំហានទី២

•  ចូល​ទៅ​កាន់​ Blogger Dashboard > Template > Edit HTML យើង​ក៏​អាច​ Backup Template(នៅ ចំហៀង​ខាងស្តាំ​ផ្នែក​ខាងលើ​) ទុក​ក៏​ជា​ការគួរ​ដែរ​ ព្រោះ​ជៀសវាង​ប្រថុយ​នឹង​ការខូចខាត​។ 

• ស្វែងរក ពាក្យ <head> ហើយ​ចម្លង​កូដ​ខាងក្រោម ​ទៅ​បិត​ភ្ជាប់​ពីក្រោម​វា ​ឬ​ ស្វែងរក ពាក្យ </head>  ហើយ​ចម្លង​កូដ​ខាងក្រោម​ ទៅ​បិត​ភ្ជាប់ ពី​លើ​វា​។

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

_______________________________

មតិលើអត្ថបទ៖
តាម​ខ្ញុំ​សាកល្បង​លើ​កូដ​ទាំងនោះ​ជួន​ដើរ​ជួន​អត់​ដើរ​មិន​ដឹង​ថា​ចំពោះ​តែ​ខ្ញុំ​​ ឬ​យ៉ាង​ណា​ទេ​ តែ​ពេល​វា​ដំណើរការ​គឺ​ឡូយ​ម៉ង​។​ សាកល្បង​ទៅ​មើល៎!!!!