ဒီေန႔ Online ေပၚက ဘေလာ့ မိတ္ေဆြမ်ားကုိ လက္ေဆာင္ေလးေပးခ်င္တဲ့ ဘေလာ့နည္း ပညာ ပုိ႔(စ္)ေလးကေတာ့ တစ္ခ်ဳိ႕ ဘေလာ့မိတ္ေဆြမ်ားက တင္ေပးပါလုိ႔ ေတာင္းဆုိေနၾကတဲ့ Recent Post Slider ေလးကုိ မ်ွေ၀ေပးလုိက္ပါတယ္။ ဘေလာ့မိတ္ေဆြမ်ားကလည္း ႀကဳိက္ၾကမယ္လုိ႔ ေမွ်ာ္လင့္ထားပါတယ္။ MTM ဘေလာ့ေလးကုိ အၿမဲလာေရာက္ အားေပးေနၾကတဲ့ Online ပရိသတ္မ်ားကုိ အခုတေလာ အလုပ္ေတြမ်ားေနလုိ႔ Posts မ်ား မတင္ေပးနုိင္တဲ့ အတြက္ ခြင့္လြတ္နာလည္းေပး ေစလုိပါတယ္ဗ်ာ။ ေနာက္ အားတဲ့အခ်ိန္ၾကရင္ Online ပရိသတ္မ်ားမွ ေမးထားတာေလးေတြကုိ အကုန္းလုံး ျပန္တင္ေပးသြားမွာပါ။
Views Demo
၁။Sign In Blogger
၂။ Template
၃။ Edit HTMl
၄။ ေအာက္က Cond ကုိ ရွာပါ။ Ctrl နဲ႔ F ကုိတြဲနွိပ္၍ရွာပါ။ ရွာရတာ လြယ္ကူပါတယ္။
]]></b:skin>
၅။ ေတြ႕ၿပီးဆုိရင္ ]]></b:skin> ရဲ႕အေပၚမွာ ေအာက္က ေပးထားတဲ့ Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။
/* Slider */
.sompret-wrapper {float:right; position: relative;}
.sompret { overflow: hidden; position: relative; width:320px; height:360px;}
.image_reel { position: absolute; top: 0; left: 0; }
.image_reel img {overflow: hidden;float: left;width:320px; height:auto;}
.paging {background:#B39CFF; border:1px solid #B39CFF;padding: 4px 0 2px; text-align: right;z-index: 100; }
.paging a { text-indent:-9999px; background:url(http://mr-thangming.ucoz.com/Images/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }
.paging a.active { background:url(http://mr-thangming.ucoz.com/Images/slider_item_active.png) no-repeat center; border:none; outline:none;}
.paging a:hover {font-weight: bold; border:none; outline:none;}
.crott { width:320px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(http://mr-thangming.ucoz.com/Images/darkbg.png);padding:5px 10px; }
.crott a{color: #FFFFFF;font: 18px Zawgyi-one }
.crott p{color: #FFFFFF;font: 14px Zawgyi-one;}
၆။ ၿပီးရင္ ေအာက္က Cond ကုိ ထပ္ရွာပါ။
</head>
၇။ ရွာလုိ႔ ေတြ႕ၿပီးဆုိရင္ </head> ရဲ႕ အေပၚမွာ ေအာက္က ေပးထားတဲ့ Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။
<link href='http://static.graddit.com/css/graddit.css' rel='stylesheet' type='text/css'/>
<script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
<script src='http://mrthangming.ucoz.com/JsCond/metalhammer.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($){
var stepInterval = 400;
var initialDelay = 200;
var fadeTime = 100;
var carouselID;
var i=1;
function myAfterCall() {
$('.carouselProgress').width(0);
}
function myBeforeCall() {
$('#sliderTimer-header .active').removeClass('active');
startProgress();
carouselID = $(this).attr('id').replace('mas-', '');
startProgress(carouselID);
$('#mas-head-'+carouselID).addClass('active');
}
function startProgress(carouselID){
parentWidth = $('#mas-head-'+carouselID).width();
$('#mas-head-'+carouselID+' .carouselProgress').animate({width: parentWidth+"px"}, (stepInterval), 'linear');
}
$('.sliderTimer-item-header').live('click', function(a){
var clicked = $(this);
$('.sliderTimer-item-header').each(function(e){
console.log(clicked.attr('id'));
console.log($(this).attr('id'));
if(clicked.attr('id')!=$(this).attr('id')){
$(this).children('.carouselProgress').stop();
}
});
});
//$('.sliderTimer-item').hover(function(){}, function(){});
$('#sliderTimer').cycle({
delay: initialDelay,
timeout: stepInterval,
speed: fadeTime,
after: myAfterCall,
before: myBeforeCall,
pager: '#sliderTimer-header',
pause: true,
pagerAnchorBuilder: function(idx, slide) {
carouselID = slide.id.replace('mas-', '');
carouselTitle = $(slide).attr('ref');
if(i==1) {
myClass="active"
} else {
myClass="";
}
i++;
return '<li> \
<a href="#" class="sliderTimer-item-header '+myClass+'" id="mas-head-'+carouselID+'"> \
<div class="carouselProgress"></div> \
<span class="carouselHeaderContent">'+carouselTitle+'</span> \
<span class="carouselHeaderDecorator"></span> \
</a> \
</li>';
}
});
//$('#sliderTimer-header:first-child').addClass('active');
parentWidth = $('#sliderTimer-header .active .carouselProgress').width();
$('#sliderTimer-header .active .carouselProgress').animate({width: parentWidth+"px"}, (stepInterval), 'linear');
});
//]]>
</script>
<script type='text/javascript'>
$(function() {$('.sompret-image').hover(function(){$(this).find('img').animate({top:'260px',right:'200px'},{queue:false,duration:500});}, function(){$(this).find('img').animate({top:'0px',right:'0px'},{queue:false,duration:500});});})
</script>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".sompret").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
$(".crott").stop(true,true).slideUp('slow');
$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 10000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://mr-thangming.ucoz.com/Images/noimage.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;
summaryPost1 = 100;
summaryTitle = 12;
numposts = 1;
numposts1 = 8;
function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<div class="infos"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><div class="carousel_buttons"><a class="carousel_link" href="'+posturl+'"><span>Watch Now</span></a></div></div><div class="attachment-full"><a class="carouselImageLink" href="'+posturl+'"><img src="'+img[i]+'"/></a></div>';document.write(trtd);j++}}function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","June","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=m+' '+day+' '+y;var trtd='<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';document.write(trtd);j++}}function showrecentposts2(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';document.write(trtd);j++}}
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj47eWiYs4LGHkUwTKWEjEYQ54B_HlqLPJXsDGISgtU2RH7WUtL2VakecY12BYvxVaMfEteqZRHr-5R6yR7HynuY4QtxQxpG1UIO2Tibmg9F_TcHTbH5o5t5cKqjX4XrQc6vnP4Y4m9ZFUY/s1600/no-video.gif'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h3>'+relatedpoststitle+'</h3>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<12&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 20px 10px 0;float:left;background:#e6e6e6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhISXGCSFVGYOWzQwpVxdRyG97phu-_pUpgNzvWyO4pcF45JLjiYNRqjn__ze_SRUOT3n5gSzSM-FXlzdXH9C_gaY5-ooWQFgfJDTYu2IY1w2maPoe86X26dlp3bWFnKjU4ts_VARWo8Wo/s1600/bar-bg2.png) repeat-x top;border:1px solid #c9c9c9;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="maskolis_img" src="'+thumburl[r]+'"/><br/><div style="width:126px;padding:0 0px;color:#222;height:auto;text-align:center;margin:0px 0px; font:12px Oswald; line-height:auto;text-shadow:0 0px 0px #fff">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(el, from, to) {
$(el).each(function() {
$(this).attr({
'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),
'width': to, 'height': to
});
});
}
$(function() {
resizeThumb('#PopularPosts1 img', '72', '105');
});
//]]>
</script>
<script type='text/javascript'>
$(function() {
$('#comments p').find('a').remove();
});
</script>
၈။ ေအာက္ပါ အဆင့္ကုိ ထပ္သြားပါ။
ဒီေနရာမွာ ေတာ့ မိမိထည့္ခ်င္တဲ့ sidebar မွာ ထည့္ရပါမယ္။ ဘယ္ေနရာ ထည့္ရမယ္ဆုိတာ အတိအက် ေျပာလုိ႔မရပါဘူး။ ဘာျဖစ္လုိ႔လဲဆုိေတာ့ Template တစ္ခုနဲ႔တစ္ခု Sidbar အေနအထား မတူညီတာေၾကာင့္ပါ။ အနည္းစဆုံးေျပရမယ္ဆုိရင္။ <div class='widget-content'> (သုိ႔မဟုတ္) <div id='sidebar-wrapper'> Cond ေနရာမ်ားမွာ ရွိတတ္ပါတယ္။
Layout ကုိ သြားၿပီး sidebar-wrapper ေနရာမွ Widget တစ္ခုခုနဲ႔ လည္း ရွာၿပီးထည့္နုိင္ပါတယ္။
<b:if cond='data:blog.pageType == "item"'>
<div class='sompret-wrapper'>
<div class='sompret'>
<div class='image_reel'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script></div>
<div class='description'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
</div>
<div class='paging'>
<a href='#' rel='1'/>
<a href='#' rel='2'/>
<a href='#' rel='3'/>
<a href='#' rel='4'/>
<a href='#' rel='5'/>
<a href='#' rel='6'/>
<a href='#' rel='7'/>
<a href='#' rel='8'/>
</div>
</div> </b:if>
အားလုံး ထည့္ၿပီးသြားရင္ေတာ့ Save Template ကုိ နွိပ္ေပးလုိက္ပါ။ ဘေလာ့ Post တစ္ခုခု ကုိ ဖြင့္ၾကည့္ပါ။ အဆင္ေျပသြားေတာ့မွာပါ။ ဒါမွမဟုတ္ ဘေလာ့ဖြင့္ Home Page မွာတုိင္းေပၚေစခ်င္ရင္ေတာ့
<b:if cond='data:blog.pageType == "item"'>
ေနရာမွာ ေအာက္က Cond နဲ႔လဲေပးလုိက္ပါ။
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Post a Comment Blogger Facebook
အခုစာဖတ္သူၾကည့္ေနတဲ့ ပုိ့(စ္) ေလးမွာ ဘယ္လုိထင္ျမင္ခ်က္ရွိလဲ? စာဖတ္သူရဲ့ထင္ျမင္ခ်က္ကုိ ဤေနရာေလးမွာ ေရးခ်ၾကည့္ပါလား။..~!!!