Sunday, September 10, 2017

How to Add Resent Post Widget on Blogger Blog- Hindi

How to Add Resent Post Widget on Blogger Blog

Resent Post Widget- यह एक ऐसा Widget है जिसकी Help से आप अपने Blog के Resent Articles के बारे में अपने Blog Visitors को Information दे सकते हैं। जब हम अपना एक Blog Create करते हैं तो हम अपने Blog की Ranking को Improve करने के लिए On Page SEO और Off Page SEO पर बहुत ही ज्यादा ध्यान देते हैं जिससे हमारे Blog पर सबसे ज्यादा Traffic Search Engine के Though आ जाता है। Search Engine से हमारे Blog पर जो Traffic आता है वह Normal हमारे किसी Article पर आता है तो हमें चाहिए की हम अपने Visitors को अपने Latest Articles की Information को Provide करें जिससे वह हमारे Resent Publish किये गए Article को भी Read करे इसके लिए आपको अपने Blog पर Resent Post Widget को Add करना होता है जिससे जब कोई Visitor आपके Blog पर Visit  करे तो उसे आपके Resent Post के बारे में Information मिल जाए  और वह आपके Resent Article को भी Read कर सकता है।
resent post

Resent Post Widget को अपने Blogger Blog पर Add करने करने से आप अपने Blog Visitors को अपने Latest Articles की Information को Provide कर सकते हैं जिससे वह आपके Blog पर Available Resent Articles को Read करते हैं और आपके Blog पर Traffic Increase हो जाता है। इसलिए Resent Post Widget आपके Blog पर Traffic Increase करने का एक अच्छा Source बन सकता है। जिससे आप अपने Visitors की Help भी कर सकते  है और वह आपके Blog पर ज्यादा Time तक रुके रहते हैं।

Blogger Blog पर Resent Post Widget को कैसे Add करें

Blogger Blog पर Resent Post Widget को Add करना बहुत ही Easy है आपको निचे दिए गए Steps को Follow करना होता है और आप Easily Resent Post Widget को अपने Blogger Blog पर Add कर सकेंगे-

Step 01- Copy Widget Code

इस Article के अंदर हम आपको 2 Types के Resent Post Code को दे रहे हैं जिन्हे आप Image में भी देख सकते हैं कि वह Resent Post किस प्रकार Show होते हैं इनमे से आप किसी भी एक Code को Copy कर सकते हैं। जिसे आप अपने Blogger Blog पर Add करना चाहते हैं।

अब आप निचे दिए गए Box में "Code" को Copy करें। Code को Copy करने  के लिए आप पहले इस पूरे Code को Select करें और फिर Keyword से (Ctrl + C) Press करें जिससे यह Code Copy हो जाए।

Resent Post Widget 01 
resent post


<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;}
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>


Resent Post Widget 02 
resent post



<div class="recentpoststyle">
<script type="text/javascript">
function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
</script>
<script type="text/javascript">
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none;color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}
.recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}
.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}
</style></div>


Step 02- Blogger Dashboard

Resent Post Widget को Add करने के लिए सबसे पहले आपको आपके Blogger Blog Dashboard को Open करना होता है। जिसके लिए आप www.blogger.com Website पर Visit करें और अपने Login Id & Password को Enter करके अपने Blogger Dashboard को Open कर सकते हैं।

Step 03- Layout

Blogger Blog में किसी भी Widget को Add करने के लिए आपको Layout Section में ही जाना होता है। Layout आपके Blogger Dashboard में Left Hand Side के Sidebar में दिया गया होता है। आप सबसे पहले Layout के Option पर Click करें।

Step 04- Add a Gadget 

Layout के Page को Open करने पर आपके Blog का Layout Section Open हो जाता है जहाँ आपक Header, Sidebar और Footer में Add A Gadget का Option मिल जाता है। इसलिए आप अपने Blogger के जिस Section में Resent Post Widget को Add करना चाहते हैं वहां Available Add a Gadget के Option पर Click करें।

For Example- मान लीजिये आप अपने Blogger Blog के अंदर Available Sidebar में Resent Post Widget को Add करना चाहते हैं तब आपको Blogger Dashboard के अंदर Sidebar में दिए गए Add a Widget के Option पर Click करना होता है। लगभग सभी Bloggers Sidebar में ही Resent Post Widget को Add करते हैं।

Step 05- HTML / Java Script

अब आपके सामने एक Popup Box Open हो जाता है इस Box में आपको बहुत सारे Options दिए जाते हैं आपको "HTML / Java Script" के Option पर Click करना होता है।

Step 06- Paste Copied Code in Content Box 

अब आपके सामने एक दूसरा Popup Open हो जाता है इस Page में आपको दो Boxes दिए जाते हैं 1- Title और 2- Content. सबसे पहले आपको Title Box में अपने Widget का एक Title Write करना होता है जिसमे आप Resent Post Write कर सकते हैं या आप अपनी मर्जी से भी किसी Name को इस Box में Write कर सकते हैं।

इसके बाद Content Box के अंदर आप Copy किये गए Code को Paste कर दें और Save के Button पर Click कर दें जिससे आपका Resent Post Widget आपके Blog पर Save हो जाए और इसके बाद आप "Save Arrangement" के Option पर भी Click कर दें जिससे आपके द्वारा किये गए Changes आपके Blog पर Apply हो जाते हैं।

Step 07- Check your Blog 

जब आप इस पूरे Process को कर लें तो एक बार अपने Blog को Open करके Check कर लें की आपका Resent Blog Post Widget आपके Blog पर ठीक तरह से Work कर रहा है या नहीं जिससे आप Satisfied हो सकते हैं।

Conclusion 

Resent Post Widget को Blogger Blog पर Add करना बहुत ही ज्यादा Important होता है क्योंकि जब आप Resent Post Widget को अपने Blogger Blog पर Add कर देते हैं तब आपके Blog Visitors को आपके Resent Post की Information भी आसानी से मिल जाती है और वह आपके Latest Articles को भी Read कर लेते हैं जिससे आपके Blog पर Traffic Increase हो जाता है।

अब आप Resent Post Widget को आसानी  से अपने Blog पर Add करना सिख गए होंगे और अगर आपको Resent Post Widget को Add करने में किसी प्रकार की Problem आती है तो आप हमें Comment Box में जरूर बताएं हम आपकी Problem को Solve करने की पूरी कोशिश करेंगे।

कुछ महत्वपूर्ण Articles इन्हे भी जरूर Read करें