Top Stylish Recent Posts Widget For Website

2
73 views

Hello Bloggers इस पोस्ट में हम Recent Posts Widget ब्लोग मे केसे लगाये इसके बारे में जानेगे. blog me Recent posts widget लगाना बहुत जरुरी है. क्योकि जी भी vistor सर्च इंजन से या कई से भी  blog website पर आते है. उनको हमारे  recents post read karne मे असानी होती हो जाती है. ब्लॉग के जितने भी आपकी  नई पोस्ट पब्लिश होते है. वो सारे पोस्ट recent post widget में add हो जाती  है ।

stylish recent post widget for website

इस widgets  का डिज़ाइन बहुत best है . जो आपके ब्लॉग के सारे reader को पोस्ट रीड करवाने में बहुत हेल्प करेगा. और आपके सारे previous पोस्ट visitor  रीड करंगे  ।

अगर आप रीसेंट पोस्ट विजेट को ब्लॉग में ऐड करना चाहते है. तो नीचे दिए गए सभी स्टेप को फॉलो करिये ।

Blog me Recent Posts Widget केसे लगाये.

Blog me recent posts widget को ब्लोग मे add करने के लिए नीचे दिए गए स्टेप को  carefully करें.

Step 1.

  1. Sabse पहले अपने blogger dashboard पर जाये  ।
  2. अब ब्लोग Layout पर click करिये  ।
  3. Ab अपने blog के Sidebar मे Add Getget पर click करे ।

Step 2.

  1. Ab एक popup window open होगी उसमे HTML/javascipt tab पर क्लिक करें.
  2. और नई विंडो में title में Recent posts टाइप करें
  3. और दूसरे बॉक्स में code paste  कर दें
  4. फाइनली अब widget को Save कर दे  ।

1. Slider Text and Image Recent Post widget .

Slider recent posts widet is widget me iamge are text automatix slide hoti rehti hai..

 

<style scoped=”” type=”text/css”> ul.borecentpost *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.borecentpost{font-size:11px}ul.borecentpost,ul.borecentpost li{margin:0;padding:0;list-style:none;position:relative }ul.borecentpost{width:100%;height:500px }ul.borecentpost li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.borecentpost li:nth-child(1),ul.borecentpost li:nth-child(2),ul.borecentpost li:nth-child(3),ul.borecentpost li:nth-child(4){display:block }ul.borecentpost img{border:0;width:100%;height:auto}ul.borecentpost li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.borecentpost li:nth-child(2){left:0;top:50% }ul.borecentpost li:nth-child(3){left:50.5%;top:50% }ul.borecentpost li:nth-child(4){width:100%;left:0;top:75% }ul.borecentpost .overlayx,ul.borecentpost li{transition:all .4s ease-in-out }ul.borecentpost .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.borecentpost .overlayx,ul.borecentpost img{margin:3px}ul.borecentpost li:nth-child(1).overlayx{background-position:50% 25% }ul.borecentpost .overlayx:hover{opacity:.1 }ul.borecentpost h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.borecentpost li:hover h4{bottom:30px}ul.borecentpost li:nth-child(1)h4,ul.borecentpost li:nth-child(4)h4{font-size:150% }ul.borecentpost .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.borecentpost li:hover .label_text{bottom:20px;opacity:1}ul.borecentpost li:nth-child(2).autname,ul.borecentpost li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:””;width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px } </style> <div id=”featuredpostslider”></div> <script type=’text/javascript’> function FeaturedPostSlider(a){(function(e){var h={blogURL:””,MaxPost:4,idcontaint:””,ImageSize:100,interval:5000,autoplay:false,loadingClass:”loadingxx”,pBlank:”https://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif”,MonthNames:[“Jan”,”Feb”,”Mar”,”Apr”,”May”,”Jun”,”Jul”,”Aug”,”Sep”,”Oct”,”Nov”,”Dec”],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html(‘<div class=”sliderx”><ul class=”borecentpost”></ul></div><div class=”buttons”><a href=”#” class=”prevx”>prev</a><a href=”#” class=”nextx”>next</a></div>’);var f=function(w){var q,k,m,u,x,p,t,v,r,l=””,s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel==”alternate”){q=s[o].link[n].href;break}}if(“media$thumbnail” in s[o]){u=s[o].media$thumbnail.url.replace(//s[0-9]+-c/g,”/s”+h.ImageSize+”-c”)}else{u=h.pBlank.replace(//s[0-9]+(-c|/)/,”/s”+h.ImageSize+”$1″)}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target=”_blank” href=”‘+q+'”><div class=”overlayx”></div><img class=”random” src=”‘+u+'”/><h4>’+k+'</h4></a><div class=”label_text”><span class=”date”><span class=”dd”>’+t+'</span> <span class=”dm”>’+v+'</span> <span class=”dy”>’+x+'</span></span> <span class=”autname”>’+m+”</span></div></li>”}e(“ul”,g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+” .nextx”).click()};var b=function(){e.get((h.blogURL===””?window.location.protocol+”//”+window.location.host:h.blogURL)+”/feeds/posts/summary”+(h.tagName===false?””:”/-/”+h.tagName)+”?max-results=”+h.MaxPost+”&orderby=published&alt=json-in-script”,f,”jsonp”);setTimeout(function(){e(h.idcontaint+” .prevx”).click(function(){e(h.idcontaint+” .sliderx li:first”).before(e(h.idcontaint+” .sliderx li:last”));return false});e(h.idcontaint+” .nextx”).click(function(){e(h.idcontaint+” .sliderx li:last”).after(e(h.idcontaint+” .sliderx li:first”));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+” .sliderx li:first”).before(e(h.idcontaint+” .sliderx li:last”));e(h.idcontaint+” .sliderx”).hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e(“ul”,g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)}; //<![CDATA[ FeaturedPostSlider({ blogURL: “https://blogornate.blogspot.com/”, MaxPost: 8, idcontaint: “#featuredpostslider”, ImageSize: 300, interval: 5000, autoplay: true, tagName: false }); //]]> </script>

Customization

  1. code me diye “https://www.blognetbook.com” जगह अपने blog ke URL add kare.
  2. Recent Posts widget मे maximum post rakne ke liye maxpost: per change कर सकते है.

 

2. Recent Posts widget with thumbnail.

इस widget ka disign बहुत ही beautiful है. इसमे आपके post की main image thumbnail ke रुप मे काम करेगी.

 

<style scoped=” type=’text/css’> /* Recent Post Widget */ #recentpostnav{width:100%;border:1px solid #585858;margin:0 auto} #borpbox{margin:0} .recentposarea{display:block;background:#fff;height:79px;border:1px solid #ddd;margin:5px 0;padding:10px} .recentposarea img{float:left;background:#fff;border:1px solid #ddd;margin-right:8px;padding:4px;height:70px;width:70px} .recentposarea h6,.recentposarea h6 a{text-decoration:none;margin:0;color:#111;font-size:13px!important;font-weight:700!important;} .recentposarea:hover{background-color:#fefefe} .recentposarea p{text-align:left;font-size:12px;margin:5px 0;color:#555;line-height:normal} #loadrecentpost{font-family:Tahoma;color:#888;font-size:100px;letter-spacing:-10px;text-shadow:-5px 0 1px #444;text-align:center;background:url(https://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd} #rpnavigation{color:#bbb;border:1px solid #ddd;font-family:Verdana;text-align:center;font-size:12px;margin:0} #rpnavigation:hover{background-color:#fefefe} #rpnavigation a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px} #rpnavigation span{padding:5px 10px} #rpnavigation .next{float:right} #rpnavigation .previous{float:left} #rpnavigation .home{text-align:center} #rpnavigation a:hover,#rpnavigation span.noactived{color:transparant!important} </style> <script type=’text/javascript’> //<![CDATA[ var numfeed = 5; var startfeed = 0; var urlblog = “https://blogornate.blogspot.com/”; var charac = 40; var urlprevious, urlnext; function arlinafeed(e,t){for(var n=e.split(“<“),r=0;r<n.length;r++)-1!=n[r].indexOf(“>”)&&(n[r]=n[r].substring(n[r].indexOf(“>”)+1,n[r].length));return n=n.join(“”),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s=””;urlprevious=””,urlnext=””;for(var l=0;l<e.feed.link.length;l++)”previous”==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),”next”==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if(“alternate”==t.link[l].rel){r=t.link[l].href;break}i=”content”in t?t.content.$t:”summary”in t?t.summary.$t:””,a=”media$thumbnail”in t?t.media$thumbnail.url:”https://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s1600/no-image.png”,s+=”<div class=’recentposarea’>”,s+=”<a href='”+r+”‘ target=’_blank’><img src='”+a+”‘ /></a>”,s+=”<h6><a href='”+r+”‘>”+n+”</a></h6>”,s+=”<p>”+arlinafeed(i,charac)+”…</p>”,s+=”</div>”}document.getElementById(“borpbox”).innerHTML=s,s=””,s+=urlprevious?”<a href=’javascript:navigasifeed(-1);’ class=’previous’>Previous</a>”:”<span class=’noactived previous’>Previous</span>”,s+=urlnext?”<a href=’javascript:navigasifeed(1);’ class=’next’>Next</a>”:”<span class=’noactived next’>Next</span>”,s+=”<a href=’javascript:navigasifeed(0);’ class=’home’>Home</a>”,document.getElementById(“rpnavigation”).innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf(“?”),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf(“?”),n=urlnext.substring(t)):n=”?start-index=1&max-results=”+numfeed+”&orderby=published&alt=json-in-script”,n+=”&callback=showrecentpostsae”,incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById(“borpbox”).innerHTML=”<div id=’loadrecentpost’></div>”,document.getElementById(“rpnavigation”).innerHTML=””;var t=urlblog+”/feeds/posts/default”+e,n=document.createElement(“script”);n.setAttribute(“type”,”text/javascript”),n.setAttribute(“src”,t),n.setAttribute(“id”,”arlinalabel”),document.getElementsByTagName(“head”)[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById(“arlinalabel”),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)}; //]]> </script> <div id=”borpbox”></div> <div id=”rpnavigation”></div>

Coustomization
1. var numfeed = “5” के जगह पोस्ट  को अपने हिसाब से Arenge करे
2. code me diye “https://www.blognetbook.com” जगह अपने blog ke URL add kare.

 

इस तरह से हम आपने ब्लॉग वेबसाइट में Recent Posts Widget add कर सकते है. ये बहुत सिंपल प्रोसेस है. जिस तरह से हम ब्लॉग में html code add करते है same उसी तरह से Recent Posts Widget को add करना है ।

 

i hope आपको Recent Posts Widget के बारे में पोस्ट पसंद आयी होगी. तो इस पोस्ट को सोशल मीडिया और other  ब्लॉगर के साथ जरूर share करे ।

और कमेंट करके पोस्ट के बारे में आपने feedback जरूर दें  ।

Read Most.

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here