ဘေလာ့မွာ Scrolling Recent Posts သုံးခ်င္ရင္

ဒီေန့တင္တဲ့ ပုိ့(စ္)ေလးကေတာ့ ဘေလာ့မွာ Scrolling Recent Posts သုံးခ်င္သူမိတ္ေဆြေတြအတြက္ သတင္းေကာင္းေလးတစ္ခုပါ။ သိၿပီးၾကေသာမိတ္ေဆြေတြလည္း ရွိနုိင္သလုိ မသိေသးတဲ့ မိတ္ေဆြေတြလည္းရွိနုိင္ပါတယ္။ ဒါေၾကာင့္ ထပ္ရွယ္ေပးလုိက္တာပါ။ ေအာက္မွာ DEMO နွင့္တကြ Cond ေပးထားပါတယ္။

ေအာက္က DEMO ျပတာပါ။

၁။ Design

၂။ Edit HTML

၃။ Proceed

၄။ ေအာက္က Cond ကုိရွာ ပါ။

</head>

ေတြ့ၿပီးဆုိရင္ </head> ရဲ့ ေအာက္မွာ ေအာက္က Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။

ထည့္ၿပီးရင္ Save Template ကုိနုိပ္လုိက္ပါ။

 ေအာက္ကေနရာ တြင္ထပ္သြားပါ။

၁။ Design

၂။ Layout

၃။ Add a Gadget

၄။ HTML/JavaScript

ေအာက္က Cond ေလးကုိထည့္ေပးလုိက္ပါ။

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

<!--



/* ========== Scrolling Recent Posts Widget By mrthangming.blogspot.com ======== */



#mrthangming-widget {

    overflow: hidden;

    margin-top: 5px;

    padding: 0px 0px;

    height: 385px;

}



#mrthangming-widget ul {

    width: 295px;

    overflow: hidden;

    list-style-type: none;

    padding: 0px 0px;

    margin: 0px 0px;

}



#mrthangming-widget 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/AVvXsEhaBLXm-pr6J3QLU2nSY0WuRyIs5FF9klVvilInCeet9f1uPTnmd1yhFdgOVGj__M3RvzAHiv8m_NbhtO5w-_MXLC326ey9iP6uK_-1F8acfBdUFYHhftTLKanFM0Z1vPVVaIQA-pwyB2k/s1600/helperblogger.com-post.jpg) repeat-x;

    border: 1px solid #ddd;

}



#mrthangming-widget li a {

    text-decoration: none;

    color: #4B545B;

    font-size: 15px;

    height: 18px;

    overflow: hidden;

    margin: 0px 0px;

    padding: 0px 0px 2px 0px;

}



#mrthangming-widget img {

    float: left;

    margin-top: 10px;

    margin-right: 15px;

    background: #EFEFEF;

    border: 0;

}



#mrthangming-widget 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);

}



#mrthangming-widget 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;

}



/* ========== Scrolling Recent Posts Widget By mrthangming.blogspot.com ======== */



-->

</style>



<script language="JavaScript">

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimdVupoGYyTa9bKDYkM9GLIbYFKObSA_V1E5pkLYbrP52B-9XyKjtcNIjhOx5nr1O08WAgO-UsPmwlcApb0G8-GJWq0rws5cSYlo4E-BncQoeXrHX_U1PhE2S9QZNk52hzr0Ju7oxWt0g/s1600/no-thumbnail.png";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimdVupoGYyTa9bKDYkM9GLIbYFKObSA_V1E5pkLYbrP52B-9XyKjtcNIjhOx5nr1O08WAgO-UsPmwlcApb0G8-GJWq0rws5cSYlo4E-BncQoeXrHX_U1PhE2S9QZNk52hzr0Ju7oxWt0g/s1600/no-thumbnail.png";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimdVupoGYyTa9bKDYkM9GLIbYFKObSA_V1E5pkLYbrP52B-9XyKjtcNIjhOx5nr1O08WAgO-UsPmwlcApb0G8-GJWq0rws5cSYlo4E-BncQoeXrHX_U1PhE2S9QZNk52hzr0Ju7oxWt0g/s1600/no-thumbnail.png";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimdVupoGYyTa9bKDYkM9GLIbYFKObSA_V1E5pkLYbrP52B-9XyKjtcNIjhOx5nr1O08WAgO-UsPmwlcApb0G8-GJWq0rws5cSYlo4E-BncQoeXrHX_U1PhE2S9QZNk52hzr0Ju7oxWt0g/s1600/no-thumbnail.png";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimdVupoGYyTa9bKDYkM9GLIbYFKObSA_V1E5pkLYbrP52B-9XyKjtcNIjhOx5nr1O08WAgO-UsPmwlcApb0G8-GJWq0rws5cSYlo4E-BncQoeXrHX_U1PhE2S9QZNk52hzr0Ju7oxWt0g/s1600/no-thumbnail.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://www.mrthangming.blogspot.com/";

limitspy=4;

intervalspy=4000;

</script>



<div id="mrthangming-widget">

<script src="http://yourjavascript.com/28853842112/recent-posts-mrthangming.js" type="text/javascript"></script>

</div>

ထည့္ၿပီးရင္ Save ကုိနုိပ္လုိက္ပါ။

မွတ္ခ်က္။  ။home_page = "http://www.mrthangming.blogspot.com/"; ေနရာမွာ မိမိ နာနည္ထည့္ေပးလုိက္ပါ။