Création des Logiciels de gestion d'Entreprise, Création et référencement des sites web, Réseaux et Maintenance, Conception
seo Add Recent Posts with thumbnail 2013
Seo Master present to you: 
Post image for Blogger. Add Recent Posts with thumbnail - this is the add-ons that you do not use because I want to see new posts often have a habit of returning home. Utility was written just for all the amenities of Posts by can not find more new features are considered. Is there is a recognized feature articles off Reviews, photos support my recent video on Youtube and see photos at Photobucket also stored, the number of articles downloaded from the feed get enough for some articles you want to display to avoid redundancy. These features are already in the utility Related Posts and Random Posts .
Step 1 : Add the following code before
2013, By: Seo Master
Post image for Blogger. Add Recent Posts with thumbnail - this is the add-ons that you do not use because I want to see new posts often have a habit of returning home. Step 1 : Add the following code before
]]> </ b: skin> in your template.# Recent-posts img {float: left; margin-right: 10px; border: 1px solid # 999; background: # FFF; width: 36px; height: 36px; padding: 3px}If applied to add high-speed random post to Blogger , you skip this step and replace # random-posts img { img # random-posts, # recent-posts img {sync when you want to edit. Step 2 : Add 1 widget HTML / JavaScript in places to showRecent Posts . Edit Text and paste the following code into the Content section and clickSAVE .<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts = 5 ;
var rcp_snippet_length = 150 ;
var rcp_info = ' yes ';
var rcp_comment = 'Reviews';
var rcp_disable = 'Off Comments';
function recent_posts (json) {var dw =''; a = location.href; y = a.indexOf ('? m = 0'); dw + = '<ul>'; for (var i = 0 ; i <rcp_numposts; i + +) {var entry = json.feed.entry [i]; var rcp_posttitle = entry.title. $ t; if ('content'in entry) {var rcp_get_snippet = entry.content. $ t} else {if ('summary'in entry) {var rcp_get_snippet = entry.summary. $ t} else {var rcp_snippet = rcp_get_snippet} else {rcp_get_snippet = rcp_get_snippet.substring (0, rcp_snippet_length); var space = rcp_get_snippet.lastIndexOf (""); rcp_snippet = rcp_get_snippet.substring (0, space) + "...";}; for ( var j = 0; j <entry.link.length; j + +) {if ('thr $ total'in entry) {var rcp_commentsNum = entry.thr $ total. $ t +' '+ rcp_comment} else {rcp_commentsNum = rcp_disable}; if (entry.link [j]. rel == 'alternate') {var rcp_posturl = entry.link [j]. href; if (y! = -1) {rcp_posturl = rcp_posturl + '? m = 0'} var rcp_postdate = entry.published. $ t; if ('media $ thumbnail'in entry) {var alt = "'+ rcp_posttitle +'" src = "'+ rcp_thumb +'" /> '; dw + =' <div> <a href = "'+ rcp_posturl +'" rel = "nofollow" - '+ Rcp_commentsNum +' </ span> ';}; dw + =' <div type = \ "text / javascript \"
Replace 5 with the number of posts you want to display, 150 is the number of characters of the quote post content. If you do not want to display the date information and post comments, please change the yes to any other character.
Source: http://blog.duypham.info/
seo Recent Posts Widget with Thumbnails for Blogger/Blogspot 2013
Seo Master present to you: A few days ago, I've posted a tutorial about How To Add A Simple Recent Posts Widget but today I want to present to you a very nice Recent Posts widget that comes along with posts thumbnails and post summary as well. If you want to know how to add this Recent Posts widget/gadget to your Blogger blog, then follow the steps below:
How to Add the Recent Posts Widget to Blogger
Step 1. Go To Blogger > Layout and click on "Add a Gadget" link
Step 2. From the pop-up window, scroll down and choose HTML/JavaScript
Step 3. Paste inside the empty box, the following code:
Step 4. Change YOUR-BLOG/SITE-URL with the url address of your site/blog (ex: http://www.matrixar.com) and look to have no forward slash symbol "/" at the end of your url
Note:
Step 5. Save your widget. And you're done!
If you need more help, leave your comment below.
2013, By: Seo Master
How to Add the Recent Posts Widget to Blogger
Step 1. Go To Blogger > Layout and click on "Add a Gadget" link
Step 2. From the pop-up window, scroll down and choose HTML/JavaScript
Step 3. Paste inside the empty box, the following code:
<div class="eggTray">
<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"YOUR-BLOG/SITE-URL/feeds/posts/default"},
"hideHeader":"false","height":"500","count": 8 }</script>
<div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.matrixar.com/2012/05/recent-posts-widget-with-thumbnails-for.html" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://www.matrixar.com/" target="_blank">Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript></div>
<style type=text/css>
.eggTray {margin:10px 0px;padding:0px;}
.ybr li {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr {background:transparent url(http://www.matrixar.com/-oxTuqVj1ziA/T6P6wtxqsgI/AAAAAAAACBE/wWR0bb2gfuE/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>
Step 4. Change YOUR-BLOG/SITE-URL with the url address of your site/blog (ex: http://www.matrixar.com) and look to have no forward slash symbol "/" at the end of your url
Note:
- To disable the scroll bar, remove the number 500
- By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace the number 8 with the number of posts desired
- if you want only the posts titles to appear, change true to none and "0" from padding-top:0px with 10
Step 5. Save your widget. And you're done!
If you need more help, leave your comment below.
2013, By: Seo Master
seo Simple Recent Posts Widget for Blogger/Blogspot 2013
Seo Master present to you: The main advantage on this Recent Posts widget is that it will show not only post titles but also post excerpts or snippets and it's easy to customize/ apply different style on it. To style it into your own design, you just have to modify the CSS style - you can change the link or background color, the size and color of text/links.
What you can do with this widget:
See the screenshot below:
How to add Recent Posts Widget to Blogger
Step 1. Log in to your Blogger Dashboard, then go to Layout and click on Add a Gadget link
Step 2. From the pop-up window, scroll down and choose HTML/JavaScript
Step 3. Select & Copy the code from one of the options below and paste it into the new HTML/JavaScript:
Option 1: Recent posts widget with snippets
Option 2: Recent Posts Widget Showing Post Titles Only
Step 4.
Step 5. Save your widget. And that's it! Enjoy!
If you need any help, leave a comment below.
And if you liked this post, please consider sharing it. Thanks.
2013, By: Seo Master
What you can do with this widget:
- display post titles only
- change the number of posts
- change the number of characters of the post snippet/excerpt
- show the post dates
See the screenshot below:
How to add Recent Posts Widget to Blogger
Step 1. Log in to your Blogger Dashboard, then go to Layout and click on Add a Gadget link
Step 2. From the pop-up window, scroll down and choose HTML/JavaScript
Step 3. Select & Copy the code from one of the options below and paste it into the new HTML/JavaScript:
Option 1: Recent posts widget with snippets
<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://www.matrixar.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://www.matrixar.com" title="Recent Posts Widget">Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(http://www.matrixar.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>
Option 2: Recent Posts Widget Showing Post Titles Only
<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://www.matrixar.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://www.matrixar.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( http://www.matrixar.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>
Step 4.
- Change 5 (option 1) and 10 (option 2) with the number of posts you want to display.
- Change false to true if you want the posts dates to appear
- Change 100 (option 1) if you want more characters to be displayed.
- To change the color and font size of the links, modify the values in blue (links) and violet (font-size)
- To change the style of posts summary, modify the values in green (color) and orange (font size)
- Replace the your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address like in this example:
http://www.your-site.com/feeds/posts/default....
Step 5. Save your widget. And that's it! Enjoy!
If you need any help, leave a comment below.
And if you liked this post, please consider sharing it. Thanks.
2013, By: Seo Master
seo Show Recent Posts With Thumbnails For Particular Label or Category in Blogger 2013
Seo Master present to you: Sometimes we want to have everything organized so that our readers can find topics of interest more easily, and that's when instead of putting a widget with the latest posts, we can put together the latest entries sorted by category, so that we'll be able to show the latest posts for each label we want and also display a thumbnail for our category.
To add this cool gadget/widget for the latest categories, just follow the next steps:
Steps
Step 1. From your Blogger Dashboard, go to Template/Edit HTML
...then tick the Expand Widget Templates checkbox:
Step 2. Search for this piece of code:
]]></b:skin>
and just above it, paste this one:
Step 3. Now search for this tag (CTRL + F)
...and add the following script above it:
Note: to add your own pic for the posts with no thumbnail, replace the image url in blue with your own
So we have added the Css to style the widget and the script to make it work. Now all we have to do is to add the widget's code to the blog sidebar in a Html/Javascript gadget:
Step 4. Go to Layout - click on Add a Gadget
Step 5. Choose the HTML/Javascript widget and paste this code inside the empty box:
Note: Where it says Name-of-the-label is the name of the label you want to display, and if your label is case sensitive, like in my example, then you should type it that way.
Also within the last code, there are parts that we can customize, just change true with false or vice versa:
Remember that the gadget displays the latest posts from a particular label, therefore, if you want to display the latest posts from other labels then just repeat step 5 for each additional category you want to add.
That's it :) Enjoy!2013, By: Seo Master
 |
| Screenshot |
To add this cool gadget/widget for the latest categories, just follow the next steps:
Steps
Step 1. From your Blogger Dashboard, go to Template/Edit HTML
...then tick the Expand Widget Templates checkbox:
Step 2. Search for this piece of code:
]]></b:skin>
and just above it, paste this one:
/* Recent posts by labels
--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}
.label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}
.label_with_thumbs a { text-transform: uppercase;}
.label_with_thumbs strong {padding-left:0px; }
Step 3. Now search for this tag (CTRL + F)
</head>
...and add the following script above it:
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;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;}}var thumburl;try{thumburl=entry.media$thumbnail.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=d;}else thumburl='http://www.matrixar.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png';}
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]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');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(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>
Note: to add your own pic for the posts with no thumbnail, replace the image url in blue with your own
So we have added the Css to style the widget and the script to make it work. Now all we have to do is to add the widget's code to the blog sidebar in a Html/Javascript gadget:
Step 4. Go to Layout - click on Add a Gadget
Step 5. Choose the HTML/Javascript widget and paste this code inside the empty box:
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Name-of-the-label?published&alt=json-in-script&callback=labelthumbs"></script>
Note: Where it says Name-of-the-label is the name of the label you want to display, and if your label is case sensitive, like in my example, then you should type it that way.
Also within the last code, there are parts that we can customize, just change true with false or vice versa:
var numposts ← Number of posts to display
var showpostthumbnails ← Show/hide thumbnails
var displaymore ← Show or hide the read more link
var displayseparator ← Show/hide separator
var showcommentnum ← Show/hide the number of comments
var showpostdate ← Show/hide the posts dates
var showpostsummary ← Show or not the posts summaries
var numchars ← Number of posts characters (here you have to change the 100 value)
Remember that the gadget displays the latest posts from a particular label, therefore, if you want to display the latest posts from other labels then just repeat step 5 for each additional category you want to add.
That's it :) Enjoy!2013, By: Seo Master