Recent Posts Widget With 3D And Metro Style Border

Wednesday, 28 May 2014

Recent Posts Widget With 3D And Metro Style Border

Recent Posts Widget With 3D And Metro Style Border

----------------------------------------------------------------------------------------------------------

ADD HTML/JAVA WIDGET IN BLOG LAYOUT
COPY AND PASTE BELOW CODE IN THIS WIDGET
CHANGE BLOG URL AND SAVE

READ MORE:
http://fbgadgets.blogspot.co.uk/2014/06/recent-postin-blog-with-loader-effect.html
----------------------------------------------------------------------------------------------------------

<style>
#bp_recent {
width:300px;
padding: 5px;
color: #999;
font-size: 14px;
text-align:justify;
}
#bp_recent img {
width: 70px;
height: auto;
border-top:5px groove #00a4ef !important;
border-bottom:5px groove #ffb900 !important;
border-right:5px groove #7fba00 !important;
border-left:5px groove #f25022 !important;
webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.2);
box-shadow:1px 1px 1px rgba(0,0,0,0.2);
}
#bp_recent a{
color: #fff;
font-size: 15px;
text-transformation: uppercase;
margin-bottom: 10px!important;
}
#bp_recent a:hover {
text-decoration: underline;
}
</style>

<div id='bp_recent'></div>

<script type="text/javascript">
//<![CDATA[
var postTitleOriginal,myLink,myDiv,myImage,mySeparator;var main;var float_clear=false;var flag=0;function bprecentpostswiththumbnails(json){for(var i=0;i<numberOfPosts;i++){if(i==json.feed.entry.length)break;var s;var entry=json.feed.entry[i];var postTitle=entry.title.$t;postTitleOriginal=postTitle;if(isNaN(titleLength)||titleLength==0){postTitle='';}
else if(postTitle.length>titleLength)postTitle=postTitle.substring(0,titleLength)+"...";var postUrl="";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commentText=entry.link[k].title;var commentUrl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){postUrl=entry.link[k].href;break;}}
if(showThumbs==true){var thumbUrl="";try{thumbUrl=entry.media$thumbnail.url;thumbUrl=thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");}catch(error){if("content"in entry)s=entry.content.$t;else s="";if(thumbUrl==""&&mediaThumbsOnly==false){regex=/http\:\/\/www\.youtube(-nocookie){0,1}\.com\/(v){0,1}(embed){0,1}\/(([^"&?' ]*))/;videoIds=s.match(regex);if(videoIds!=null){videoId=videoIds[4];}
if(videoIds!=null&&videoId!=null)thumbUrl="http://img.youtube.com/vi/"+ videoId+"/2.jpg"}
if(thumbUrl==""&&mediaThumbsOnly==false){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=d;}}
if(thumbUrl.indexOf("static.flickr.com")!=-1){thumbUrl=thumbUrl.replace("_b_t.jpg","_s.jpg");thumbUrl=thumbUrl.replace("_m_t.jpg","_s.jpg");thumbUrl=thumbUrl.replace("_s_t.jpg","_s.jpg");thumbUrl=thumbUrl.replace("_b.jpg","_s.jpg");thumbUrl=thumbUrl.replace("_m.jpg","_s.jpg");}
if(thumbUrl==""&&showNoImage==true)
{thumbUrl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrwRZSbbVWL5tfffHhg_jp-OnuuZLIGkwpJFjoCueai4x9ssU3_RssOTmC55it0Qp-PgxpmlEVE9k9nqIiYUWPT0WfgYHFZdf6QRGx3X74bi7NFBVjUVGmoOWsefHHL-Cn_9lJRYcNTm8/s72-c/default.png";try{if(defaultImage!="")thumbUrl=defaultImage;}catch(error){}
thumbUrl=thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");}}
if(showPostDate==true){var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";}
code="";main=document.getElementById('bp_recent');myDiv=document.createElement('div');myDiv.setAttribute("class","bp_item_title");myLink=createLink(postUrl,"_top",postTitleOriginal)
if(main.innerHTML!=""){mySeparator=createDiv("bp_recent_separator");main.appendChild(mySeparator)}
if(postTitle!=''){myDiv.appendChild(myLink);}
main.appendChild(myDiv);if(postTitle!='')myLink.innerHTML=postTitle;if(showThumbs==true&&thumbUrl!=""){myImage=document.createElement('img');myImage.setAttribute("src",thumbUrl);if(imgFloat!="none")
{float_clear=true;myImage.style.cssFloat=imgFloat;myImage.style.styleFloat=imgFloat;}
try{if(myMargin!=0)myImage.style.margin=myMargin+"px";}catch(error){}
myImage.setAttribute("alt",postTitleOriginal);myImage.setAttribute("width",imgDim);myImage.setAttribute("height",imgDim);myLink=document.createElement('a');myLink.setAttribute("href",postUrl+"?utm_source=bp_recent&utm-medium=gadget&utm_campaign=bp_recent");myLink.setAttribute("target","_top");myLink.setAttribute("title",postTitleOriginal);myLink.appendChild(myImage);myDiv=document.createElement('div');myDiv.setAttribute("class","bp_item_thumb");myDiv.appendChild(myLink);main.appendChild(myDiv);}
try{if("content"in entry){var postContent=entry.content.$t;}
else if("summary"in entry){var postContent=entry.summary.$t;}
else var postContent="";var re=/<\S[^>]*>/g;postContent=postContent.replace(re,"");if(showSummary==true){myDiv=createDiv("bp_item_summary");if(postContent.length<summaryLength){myDiv.appendChild(document.createTextNode(postContent));}
else{postContent=postContent.substring(0,summaryLength);var quoteEnd=postContent.lastIndexOf(" ");postContent=postContent.substring(0,quoteEnd);myDiv.appendChild(document.createTextNode(postContent+'...'));}
main.appendChild(myDiv);}}
catch(error){}
myDiv=createDiv("bp_item_meta");myDiv.style.clear="both";myDiv.style.marginBottom="4px";if(showPostDate==true){myDiv.appendChild(document.createTextNode(monthnames[parseInt(cdmonth,10)]+'-'+ cdday+'-'+ cdyear));flag=1;}
if(showCommentCount==true){if(flag==1){myDiv.appendChild(document.createTextNode(" | "));}
if(commentText=='1 Comments')commentText='1 Comment';if(commentText=='0 Comments')commentText='No Comments';var myLink=createLink(commentUrl,"_top",commentText+" on "+ postTitleOriginal)
myDiv.appendChild(myLink);myLink.innerHTML=commentText;flag=1;;}
if(showReadMore==true){if(flag==1){myDiv.appendChild(document.createTextNode(" | "));}
var myLink=createLink(postUrl,"_top",postTitleOriginal)
myDiv.appendChild(myLink);myLink.innerHTML=readMore+" »";flag=1;;}
if(flag==1)main.appendChild(myDiv);}
if(float_clear==true&&imgFloat!="none")
{myDiv=createDiv("bp_clear_float");myDiv.style.clear=imgFloat;main.appendChild(myDiv);}
document.getElementById("bp_recent_link").style.backgroundImage="url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidZ54o7MdkDWSx0-6PlPfxo9-qnEAfIBxYtVfqp3g1b-XCBYkCWGylIcA5T7w04sSId2D6shueWmMqam2yYaudaCxIwVp7pGcEcpdoV1Vr6igjDqmZz2LLPPrEniGAH9zJDXiqwG5Wgq8/')";document.getElementById("bp_recent_link").style.backgroundRepeat="no-repeat";try{if(myMargin!=0&&imgFloat=="left"&&flag==0)document.getElementById("bp_recent_link").style.marginLeft=myMargin+"px";}catch(error){}}
function createDiv(className)
{var myDiv=document.createElement('div');myDiv.setAttribute("class",className);return myDiv;}
function createLink(href,target,title)
{var myLink=document.createElement('a');if(href.substring(href.length-13,href.length)=="#comment-form"){href=href.substring(0,href.length-13)+"?utm_source=bp_recent&utm-medium=gadget&utm_campaign=bp_recent"+"#comment-form";myLink.setAttribute("href",href);}
else myLink.setAttribute("href",href+"?utm_source=BP_recent&utm-medium=gadget&utm_campaign=bp_recent");myLink.setAttribute("target",target);myLink.setAttribute("title",title);return myLink;}
//]]></script>

<script style='text/javascript'>
var numberOfPosts = 9;
var showPostDate = false;
var showSummary = false;
var summaryLength = 0;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
var readMore = 'Read More';
</script>

<script src='http://fbgadgets.blogspot.co.uk/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>