How to add simple recent post widget in blog : Is recent post widget ka sabse bada advantage yah hai ki yah widget sirf blog post ke titles ko hi show nahi karta hai balki post ke titles ke saath post ke summary ko bhi show karta hai. Is widget ko aap apne tarike se design bhi kar sakte hai.
Agar aap sirf post ke titles ko hi show karna chahte hai to uske liye aapko CSS Style ko modify karna padega. Iske alava aap text ya links ke size aur color ko bhi change kar sakte hai.
Recent Post Widget Me Kya-Kya Changing Kar Sakte Hai ?
- Post ke titles ko sirf display kar sakte hai.
- Post ke number ko change kar sakte hai.
- Post snippet (post ka summary) ke character ke number ko change kar sakte hai.
- Post ke dates ko show kar sakte hai.
Maine aapko is widget ka saara feature bata diya. Aap apne hisab se is widget me changing kar skate hai.
Recent Post Widget Ko blogger Me Kaise Add Kare ?
Recent Post Widget ko blogger me add karne ke liye mere steps ko follow kare.
Step 1 : Sabse pahle aap apne blogger ke dashboard me login kare.
Step 2 : Blogger dashboard me login karne ke baad layout par click kare.
Step 3 : Uske baad aapko jis place par widget ko lagana hai waha par ke ‘Add a Gadget‘ ki link par click kare.
Step 4 : Uske baad ek pop-up window open hoga. Scroll down karke HTML/JavaScript par click kare.
Step 5 : Ab ek page open hoga.
- Title me ‘Recent Post‘ likhe.
- Niche two types ka code diya hua hai. Aapko jis code ko lagana hai us code ko select & copy karke HTML/JavaScript content box me paste kar de.
- Save button par click kare.
Note : Save karne se pahle code me http://blog-address.blogspot.com ke place par apna blog ka URL likhe.
Recent Post Widget With Snippets (Post Summary)
<div id=”hlrpsa”><script type=”text/javascript”>function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)
break;for(var s=0;s<r.link.length;s++)if(“alternate”==r.link[s].rel)
{n=r.link[s].href;break}i=i.link(n);var a=”…”,d=r.published.$t,u=d.substring(0,4),
o=d.substring(5,7),c=d.substring(8,10),l=new Array;if(l[1]=”Jan”,l[2]=”Feb”,l[3]=”Mar”,l[4]=”
Apr”,l[5]=”May”,l[6]=”Jun”,l[7]=”Jul”,l[8]=”Aug”,
l[9]=”Sep”,l[10]=”Oct”,l[11]=”Nov”,
l[12]=”Dec”,”content”in r)var m=r.content.$t;else
if(“summary”in r)var m=r.summary.$t;else
var m=””;var w=/<S[^>]*>/g;if(m=m.replace(w,””),document.write(‘<div class=”rctitle”>’),standardstyling&&
document.write(“<br/>”),document.write(i),1==showpostdate&&
document.write(” -“+l[parseInt(o,10)]+” “+c+” “+u),document.write(‘</div><div class=”rcsumm”>’),1==showpostsummary)
if(standardstyling&&document.write(“”),
m.length<numchars)standardstyling&&
document.write(“<i>”),document.write(m),
standardstyling&&document.write(“</i>”);else{standardstyling&&document.write(“”),
m=m.substring(0,numchars);var g=m.lastIndexOf(“”);m=m.substring(0,g),
document.write(m+a),standardstyling&&
document.write(“”)}document.write(“</div>”),standardstyling&&document.write
(“”)}standardstyling||document.write(‘<div class=”bbwidgetfooter”>’),standardstyling&&
document.write(“”),document.write(“”),
standardstyling||document.write(“”)}</script><script>var numposts =5;var showpostdate =true;
var showpostsummary = true;var numchars =100;var standardstyling = true;</script><script src=”http://blog-address.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts”></script>
</div><a style=”font-size: 9px; color: #CECECE; float: right; margin-top: 10px;” href=” http://www.newfeatureblog.com/2016/10/simple-recent-post-widget-for-blogger-blogspot.html ” rel=”nofollow” >
Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><style type=”text/css”>.rctitle a{color:#000000;text-transform:capitalize;font-size:13px;}#hlrpsa {color:#999999; font-size:12px;}.rcsumm {border-bottom:1px dotted #cccccc; padding-bottom:10px;margin-top:5px;}</style>
Recent Post Widget With Titles Only
<div id=”hlrpsb”><script type=”text/javascript”>
function showrecentposts(t)
{for(var e=0;e<numposts;e++)
{var n,r=t.feed.entry[e],i=r.title.$t;
if(e==t.feed.entry.length)break;for(var d=0;d<r.link.length;d++)
if(“alternate”==r.link[d].rel){n=r.link[d].href;
break}i=i.link(n);var s=r.published.$t,a=s.substring(0,4),o=s.substring
(5,7),l=s.substring(8,10),u=new Array;u[1]=”Jan”,u[2]=”Feb”,
u[3]=”Mar”,u[4]=”Apr”,u[5]=”May”,u[6]=”Jun”,
u[7]=”Jul”,u[8]=”Aug”,u[9]=”Sep”,u[10]=”Oct”,
u[11]=”Nov”,u[12]=”Dec”,
standardstyling||document.write(“”),
document.write(‘<div class=”rctitles2″>’),standardstyling&&
document.write(“”),document.write(i),
standardstyling&&document.write(“”),
1==showpostdate&&document.write
(” – “+l+””+u[parseInt(o,10)]+” “+a),standardstyling||document.write(“</div>”),document.write(“</div>”),standardstyling&&document.write(“”)}
standardstyling||document.write(‘<div class=”bbwidgetfooter”>’),standardstyling&&
document.write(“”),document.write(“”),
standardstyling||document.write(“/div”)}
</script><script type=”text/javascript”>
var numposts =10;var showpostdate =false;
var standardstyling = true;</script>
<script src=”http://blog-address.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts”>
</script></div><a style=”font-size: 9px;
color: #CECECE; float: right; margin-top: 10px;” href=” http://www.newfeatureblog.com/2016/10/simple-recent-post-widget-for-blogger-blogspot.html ” rel=”nofollow” >
Recent Posts Widget</a><noscript>
Oops! Make sure JavaScript is enabled in your browser.</noscript><style type=text/css>#hlrpsb a
{color:#000000;font-size:13px;
text-transform:capitalize;}.rctitles2 {padding-bottom:10px;margin-bottom:10px;
border-bottom: 1px dotted #cccccc;}</style>
Is Widget Ko Customize Kis Tarah Se Kar Sakte Hai ?
- numposts = 5 or 10 : Agar aapko five se adhik post ko show karna hai to 5 ko remove karke jitna post show karna hai wah number likhe.
- Showpostdate = true : Post ko kab publish kiya gaya , uske date ko show karna chahte hai to true likhe nahi to false.
- numchars = 100 : Post ke summary ka kitna character ko show karna chahte hai. Jitna character ko show karna chahte hai us number ko 100 ke place par likhe.
- http://blog-address.blogspot.com ke place par aap apne blog ka URL ko likhe.
- color: #000000 : Post ke titles ka color change kar sakte hai. Color ko change karne ke liye #000000 ke place par apne pasand ka color code likhe.
- font-size: 13px : Post title ke font ke size me change kar sakte hai.
- color: #999999 : Post ke summary ka color change kar skate hai.
- font-size: 12px : Post summary ke font ka size change kar sakte hai.
Bas ho gaya recent post widget aapke blog me add ho gaya. Aap apne blog ko check karke dekh sakte hai.
I hope ki aapko yah post pasand aaya hoga. Recent post widget ko blog me lagane me koi problem aati hai to mujhe comment kare.
Agar aapko yah post pasand aaya ho to is post ko social media par share kare. Isi tarah se new post ko padhte rahne ke liye mujhe subscribe kare.
blog post me html code ko kiase add kare taki post per html code apply na ho
jis post me html code add karna hai, usko post editor me open karke html mode ko ON kare aur phir post me jis place html code add karna hai add kare aur compose mode par click kare.
Lovely Post..
Very helpful Article