Thursday, August 3, 2017

2 Stylish Recent Posts Widgets or Blog Me Kaise Add kare.

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

Stylish Recent Posts Widget - ब्लोग मे recent posts widget केसे  add करे



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

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


 🔵 Top 5 best blog website scorllbar.
 🔵 Stylish floating social share button for blog website

    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..
    sliding stylish recent post wedget

    <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(http://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:"http://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: "http://blogornate.blogspot.com/", MaxPost: 8, idcontaint: "#featuredpostslider", ImageSize: 300, interval: 5000, autoplay: true, tagName: false }); //]]> </script>

    Customization
    1. code me diye "http://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 रुप मे काम करेगी.

    with thambnail stylish recent post wedget

    <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(http://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 = "http://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:"http://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 "http://www.blognetbook.com" जगह अपने blog ke URL add kare.
       🔵 Get site control ke widget blog me kasie add kare
       🔵 Top 5 Aweome recent post widget

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

       🔵 Facebook Messenger widget blog me kasie add karen
       🔵 Blog me recent Comment widget kaise add karen.

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



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

      Read Most.
      Share This Post On Soical Media:-

      About Author :- My name is Sultan From dehradun india. Iam a passinate and full Time blogger. If you like his articles then share with your friend and Social media sites facebook twitter more Etc and Keep Visting on Blog net Book.

      Let's Get Connected:- Facebook | Twitter | Google Plus

      Related Posts

      0 comments: