Sajnani bharat

Blogging लेबलों वाले संदेश दिखाए जा रहे हैं. सभी संदेश दिखाएं

शनिवार, 25 अप्रैल 2020

Links must have discernible text

लिंक्स में एक नाम होना जरूरी है। इससे स्क्रीन रीडर को पता चलता है कि यह लिंक किस बारे में है। आइए जानते हैं लिंक में नाम कैसे लिखते हैं।

लिंक्स में नाम कैसे जोड़े?

Example ➡️

1) सिंपल लिंक

<a href="link.html">
लिंक के बारे में सटीक विवरण
</a>

आप जानते होंगे कि ब्लॉग थीम (टेंप्लेट)में
<a href='https://sajnanibharat.blogspot.com/'>Home page</a>लिंक इस तरह होता है इसमें
href='https://sajnanibharat.blogspot.com/

यह एक लिंक है और 'होम पेज' उसका नाम है। किसी भी लिंक में वर्णनात्मक पाठ होना जरूरी है यह हमारे सीओ के लिए जरूरी है कुछ और उदाहरण देखते हैं।

<li>
<a href='https://sajnanibharat.blogspot.com/search/label/internet'>Internet<span class='double-square'/></a>
</li>

इसमें आप देख सकते हो यह लेबल के बारे में लिंक है और उन्हें लेबल का नाम ' इंटरनेट ' है। यह सिंपल लिंक के उदाहरण है।

2) इमेज लिंक

इमेज लिंक या फोटो लिंक इस तरह से होती है।

<img class='post-thumb' expr:alt='data:post.title' expr:src='data:post.featuredImage resizeImage 100'/>

इमेज लिंक में हमेशा लिंक का नाम alt='about image' (इमेज के बारे में) होता है आप दोनों ही लिंक में
alt='इमेज का नाम'देख सकते हैं।

<img class='post-thumb' expr:alt='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWPCI-W2vmDwx3n9LlSE-2I-acwwt5E__pSXsVothBcBa8UHXIW1j_xIp5V-aySfOM4quk-QkttiiDvZ22DDNewvZTINQ8LiXY4zCqepojkvgoyw3F-m7jZYsoqP7Vxe8TWcw9NetozTU/w100/nth.png'/>

3) गिफ लिंक(gif)

gif लिंक का उदाहरण इस तरह से है

<a href="लिंक.html"> <img src=".gif" alt="gif के बारे में"/> </a>

gif लिंक भी एक इमेज लिंक ही हैं इसमें भी इमेज लिंक की तरह alt='इमेज का नाम' देना होता है।

<a href="feedback.htm">Feedback <img src=".gif" width="20" height="20" alt="received icon" /></a>

आप इस तरह से भी बना सकते हैं इसमें लिंग का नाम
Feedback दिया हुआ है।

याद रखें 👉 लिंक के दिए हुए नाम पेज पर शो(दिखते) होते हैं।

4)PDF format लिंक

<a href="यह पीडीएफ लिंक है.pdf">पीडीएफ लिंक के बारे में <img src="pdficon.gif" alt="PDF format"/> </a>

याद रखें 👉 इमेज लिंक में हमेशा alt='image name' होना जरूरी है अगर इमेज का कोई उद्देश्य या नाम ना हो और वह सिर्फ सजावट के लिए है तो उसे इस तरह से लिखें

alt=' '
एंकर <a>तत्व में <a href=" लिंक है"> लिंक का नाम </a>इस तरह लिखने से लिंक का नाम शो होता है।

5)pdf report लिंक

आप जानते हैं कि स्कूल और कंपनियों की रिपोर्ट पीडीएफ फाइल में होती है।

<a href=”लिंक report.pdf”>लिंक के बारे में पूरी जानकारी Report pdf</a>

6)Annual Budget Excel लिंक

सालाना बजट लिंक इस तरह बनाएं

<a href=”2019my budget.xls”>My 2019 Annual Budget Excel</a>

सोशल शेयर बटन लिंक में नाम कैसे लिखें?

   <li>
                        <a class='fa fa-facebook' href='https://Facebook.com/sajnanibharat'> Facebook</a>
                        <div class='square-1'/>
                        <div class='square-2'/>
                    </li>

यह फेसबुक पेज लिंक है इसमें नाम दिया है फेसबुक।
आपको कई बार देवटूल में चेक करने पर सोशल शेयर बटन में एरर आ रहा होगा कि इसके लिंक में वर्णनात्मक नाम नहीं है। जबकि आप बटन पर फेसबुक, टि्वटर, व्हाट्सएप लिखा हुआ पाओगे आप जानना चाहोगे कि ऐसा क्यों हो रहा है। अगर आप उस लिंक में इस तरह से वर्णनात्मक नाम लिख रहे हो तो वह बटन के ऊपर शो हो रहा होगा। आप यह बिल्कुल नहीं चाहेंगे कि इस बटन ऊपर लिंक का नाम दिखाई दे इसका भी एक आसान तरीका है जो मैं आपको बताने वाला हूं।

सोशल शेयर बटन ऊपर जो नाम दिखाई देते हैं वह एक्चुअल में social-icons.png है इसीलिए यह लिंक में वर्णनात्मक नाम नहीं दिखते क्योंकि वह तो सिर्फ इमेज है।
इसीलिए देवटूल में एरर आता है। और अगर आप लिंक में नाम लिखते हैं तो वह बटन के ऊपर शो होता है। अब आपको उस लिंक मे नाम भी लिखना है और उस नाम को हाइड भी करना है जिससे वह बटन के ऊपर शो ना हो।

सोशल शेयर बटन लिंक में नाम कैसे हाइड करें?

आपको शेयर बटन लिंक में title='लिंक का नाम '
इस तरह से लिखना है मैं आपको इसके लिए कुछ उदाहरण नीचे दिखा रहा हूं अगर आप इस तरीके से सोशल लिंक शेयर बटन में टाइटल =' लिंक का नाम ' लिखें।

याद रखें 👉 एंकर <a>तत्व में <a href=" लिंक है" title='link name'> </a>लिंक का नाम शो नहीं होता है।
एंकर तत्व में <a href=" लिंक है" title='link name'> इस तरह से लिंक का नाम रखने से नाम शो नहीं होता अगर आप a तत्वों में<a href=" लिंक है" > एंकर तत्वों के बाहर title='link name' लिखने से नाम शो होता है।
Example ➡️

<li class='facebook-f'><a class='facebook' expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=550, height=650, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' title='Facebook'/></li>

<li class='twitter'><a class='twitter' expr:href='"https://twitter.com/share?url=" + data:post.url + "&text=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=450, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' title='twitter'/></li>

<li class='pinterest-p'><a class='pinterest' expr:href='"https://www.pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.featuredImage + "&description=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=735, height=750, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' title='pinterest'/></li>

लिंक का नाम आपके वेबपेज पर दिखाई नहीं देगा।

सोशल शेयर बटन लिंक में नाम aria-label से हाइड करें।

यहां पर कुछ उदाहरण है।

<a aria-label='Facebook' class='fa fa-facebook' href='https://Facebook.com/sajnanibharat'/>

आप इस तरीके से लिंक में लिखे हुए नाम हाइड कर सकते हैं

<li class='facebook-f'><a aria-label='Facebook' class='facebook' expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=550, height=650, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'/></li>

<li class='twitter'><a aria-label='Twitter' class='twitter' expr:href='"https://twitter.com/share?url=" + data:post.url + "&text=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=450, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'/></li>

इस तरीके से भी आप लिंक में लिखे हुए नाम हाइड कर सकते हैं

अब आप समझ गए होंगे कि लिंक में नाम कैसे लिखें और उस नाम को हाइड कैसे करें।

सोमवार, 13 अप्रैल 2020

frame or iframe elements must have a title

<frame> or <iframe> elements must have a title

<frame> or <iframe> elements मैं टाइटल होना जरूरी है आइए जानते हैं टाइटल कैसे लगाते हैं

<frame> or <iframe> elements मैं टाइटल होना जरूरी है इससे ब्राउज़र को पता चलता है कि यह किस बारे में है मैं यहां पर कुछ टाइटल दिए हुए एग्जांपल बता रहा हूं

Example->
1) जब हम फेसबुक लाइक शेयर बटन बनाते हैं तो हमें
iframe में टाइटल लगा हुआ नहीं मिलता जैसे कि

This is incorrect iframe. 👎
<iframe src="https://www.facebook.com/plugins/like.php?href=httpsxxxxxxxxxx your IDxxxxxxxxxxxxxxxx&width=450&layout=standard&action=like&size=small&share=true&height=35&appId" width="450" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

आप देख सकते हैं इसमें टाइटल तत्व नहीं है। हम सिर्फ अपने एचटीएमएल जावास्क्रिप्ट में टाइटल लिखते हैं और हर कोई अपनी इच्छा मुजब कभी (लाइक बटन) कभी (फेसबुक लाइक बटन) इस तरह से लिखते हैं यही टाइटल हमें iframe में भी लिखना होता है।

iframe मैं टाइटल कैसे लिखते हैं।
आप इस तरह से iframe में टाइटल दीजिए।

This is correct iframe. 👍
<iframe title="Facebook like button" src="https://www.facebook.com/plugins/like.php?href=httpsxxxxxxxxxx your IDxxxxxxxxxxxxxxxx&width=450&layout=standard&action=like&size=small&share=true&height=35&appId" width="450" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

आपने एचटीएमएल जावास्क्रिप्ट बॉक्स में टाइटल जो लिखा है वही आईफ्रेम में लिखें जैसे कि फेसबुक लाइक, लाइक बटन, लाइक।

2) आपने अक्सर देखा होगा कि देवटूल में कॉमेंट एडिटर के आईफ्रेम में इस तरह का ऐरर आता है।

This is incorrect iframe. 👎
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>

इस तरह से आईफ्रेम बनाएं।

This is correct iframe. 👍
<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' title='comment' width='100%'/>

Important 👉 किसी भी लिंक का नाम (title) होना जरूरी है। इससे ब्राउज़र को पता चलता है कि लिंक किस बारे में है।

रविवार, 2 फ़रवरी 2020

image element must have an alt attribute

Image elements must have [alt] attributes, title attribute to an image,alt attribute to an image.

हमें इमेज में टाइटल और एलटी विशेषता जरूर जोड़ने चाहिए इससे हमारे ब्लॉक का सीईओ अच्छा रहता है
जब हम न्यूपेज बनाते हैं और उसमें इमेज डालते हैंतो हम उस में टाइटल और एलटी विशेषता जोड़ सकते हैं वह भी बड़ी आसानी से अगर हमें एचटीएमएल कोडिंग में यह विशेषता जोड़नी हो तो नीचे दिए गए इमेज में देखें

अगर आपको एचटीएमएल में लिखना नहीं आता और आप कंपोज करके पेज बना रहे हो तो आप नीचे दिए गए इमेज मैं देख सकते हो

कंपोज करके पेज बनाने के लिए आपके पोस्ट की इमेज को क्लिक करते जो ऑप्शन खुल रहा है जो ऊपर दिए गए इमेज में है आप propertize या गुण ऑप्शन को सिलेक्ट करके इमेज में टाइटल और एलटी बना सकते हैं।

अगर आप अपने ब्लॉगर थीम/टेंप्लेट में एएलटी विशेषता जोड़ना चाहते हैं तो यहां पर कुछ एग्जांपल है
Example
यह हैडर इमेज के लिए कोड है।
ब्लॉगर में एडिट थीम में जाकर एचटीएमएल ऑप्शन चुनें
हैडर विजेट में अगर ए एल टी नहीं लगा है तो आप इस तरह लगा सकते हैं।हैडर इमेज मैं एएलटी विशेषता इस तरह जोड़ें।हैडर इमेज का मतलब हमारी वेबसाइट की इमेज।
Header image
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

Thumbnail post image की स्क्रिप्ट है इसमें भी टाइटल और एएलटी जोड़ना होता है।
याद रहे
यदि छवि सजावट के रूप में कार्य करती है और कोई उपयोगी सामग्री प्रदान नहीं करती है, तो इसे alt=""एक्सेसिबिलिटी ट्री से निकालने के लिए एक खाली विशेषता दें:

//<![CDATA[
                          function bp_thumbnail_resize(image_url,post_title)
          {
            var image_width=317;
            var image_height=210;
            image_tag='<img width="'+image_width+'" height="'+image_height+'" src="'+image_url.replace('/s72-c/','/w'+image_width+'-h'+image_height+'-c/')+'" alt="'+post_title.replace(/"/g,"")+'" title="'+post_title.replace(/"/g,"")+'"/>';
            if(post_title!="") return image_tag; else return "";
          }
                          //]]>
Image icon मैं इस तरह जोड़ें
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
                      <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
                    </a>

'block-image'. हमारे ब्लॉक इमेज के बारे में

Photo URL इमेज लिंक

<b:if cond='data:photo.url != ""'>
        <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
      </b:if>
Post image के बारे में
<a expr:href='data:post.href'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

Post URL हमारे ब्लॉक की पोस्ट यूआरएल
<a expr:href='data:post.url'>
                                    <img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Ec8h3AVYVptm1-9KViup3aN-CYxnFZVB3TmAC210cOeT4NDzc2f8Sv-GblmQG428Cr_4Ggihi67IkJYBnAYaHE73x30utu9C2nvPU3xXNevUyW527AA-weSBHPqoWzAXoLKh_HjfayqI/s260/nothumb.jpg'/>
                                     </a>

रविवार, 26 जनवरी 2020

Defer offscreen images

Defer offscreen images and make lazy load images

lazyload images

हमें ऑफस्क्रीन की इमेज को हटाने के बजाय उससे लेजीलोड इमेजेस बना सकते हैं।लेजीलोड इमेज को कैसे सेट करें इसके बारे में बताने वाला हूं। देवटूल में आप जो भी ऑफस्क्रीन इमेज है उसे टेग करके रख दीजिए। उन सभी इमेज को हमें ठीक करना होगा।

आलसी चित्रों का उपयोग कैसे करें।

lazysizes आलसी लोडिंग छवियों के लिए सबसे लोकप्रिय लाइब्रेरी है। यहां पर एक स्क्रिप्ट है जो समझदारी से छवियों को लोड करता है क्योंकि उपयोगकर्ता पेज के माध्यम से आगे बढ़ता है और उन छवियों को प्राथमिकता देता है जो उपयोगकर्ता जल्द ही लोड कर पाए हमें इसके लिए एक स्क्रिप्ट जोड़नी पड़ेगी।

आप इसे कॉपी कर लीजिए।

<script async=' ' src='http://afarkas.github.io/lazysizes/lazysizes.min.js'>
//<![CDATA[
/*! lazysizes - v5.2.0 */ !function(a,b){var c=b(a,a.document,Date);a.lazySizes=c,"object"==typeof module&&module.exports&&(module.exports=c)}("undefined"!=typeof window?window:{},function(a,b,c){"use strict";var d,e;if(function(){var b,c={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:4 red0,customMedia:{},init:!0,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:!0,ricTimeout:0,throttleDelay:125};e=a.lazySizesConfig||a.lazysizesConfig||{};for(b in c)b in e||(e[b]=c[b])}(),!b||!b.getElementsByClassName)return{init:function(){},cfg:e,noSupport:!0};var f=b.documentElement,g=a.HTMLPictureElement,h="addEventListener",i="getAttribute",j=a[h].bind(a),k=a.setTimeout,l=a.requestAnimationFrame||k,m=a.requestIdleCallback,n=/^picture$/i,o=["load","error","lazyincluded","_lazyloaded"],p={},q=Array.prototype.forEach,r=function(a,b){return p[b]||(p[b]=new RegExp("(\\s|^)"+b+"(\\s|$)")),p[b].test(a[i]("class")||"")&&p[b]},s=function(a,b){r(a,b)||a.setAttribute("class",(a[i]("class")||"").trim()+" "+b)},t=function(a,b){var c;(c=r(a,b))&&a.setAttribute("class",(a[i]("class")||"").replace(c," "))},u=function(a,b,c){var d=c?h:"removeEventListener";c&&u(a,b),o.forEach(function(c){a[d](c,b)})},v=function(a,c,e,f,g){var h=b.createEvent("Event");return e||(e={}),e.instance=d,h.initEvent(c,!f,!g),h.detail=e,a.dispatchEvent(h),h},w=function(b,c){var d;!g&&(d=a.picturefill||e.pf)?(c&&c.src&&!b[i]("srcset")&&b.setAttribute("srcset",c.src),d({reevaluate:!0,elements:[b]})):c&&c.src&&(b.src=c.src)},x=function(a,b){return(getComputedStyle(a,null)||{})[b]},y=function(a,b,c){for(c=c||a.offsetWidth;c<e.minSize&&b&&!a._lazysizesWidth;)c=b.offsetWidth,b=b.parentNode;return c},z=function(){var a,c,d=[],e=[],f=d,g=function(){var b=f;for(f=d.length?e:d,a=!0,c=!1;b.length;)b.shift()();a=!1},h=function(d,e){a&&!e?d.apply(this,arguments):(f.push(d),c||(c=!0,(b.hidden?k:l)(g)))};return h._lsFlush=g,h}(),A=function(a,b){return b?function(){z(a)}:function(){var b=this,c=arguments;z(function(){a.apply(b,c)})}},B=function(a){var b,d=0,f=e.throttleDelay,g=e.ricTimeout,h=function(){b=!1,d=c.now(),a()},i=m&&g>49?function(){m(h,{timeout:g}),g!==e.ricTimeout&&(g=e.ricTimeout)}:A(function(){k(h)},!0);return function(a){var e;(a=!0===a)&&(g=33),b||(b=!0,e=f-(c.now()-d),e<0&&(e=0),a||e<9?i():k(i,e))}},C=function(a){var b,d,e=99,f=function(){b=null,a()},g=function(){var a=c.now()-d;a<e?k(g,e-a):(m||f)(f)};return function(){d=c.now(),b||(b=k(g,e))}},D=function(){var g,m,o,p,y,D,F,G,H,I,J,K,L=/^img$/i,M=/^iframe$/i,N="onscroll"in a&&!/(gle|ing)bot/.test(navigator.userAgent),O=0,P=0,Q=0,R=-1,S=function(a){Q--,(!a||Q<0||!a.target)&&(Q=0)},T=function(a){return null==K&&(K="hidden"==x(b.body,"visibility")),K||!("hidden"==x(a.parentNode,"visibility")&&"hidden"==x(a,"visibility"))},U=function(a,c){var d,e=a,g=T(a);for(G-=c,J+=c,H-=c,I+=c;g&&(e=e.offsetParent)&&e!=b.body&&e!=f;)(g=(x(e,"opacity")||1)>0)&&"visible"!=x(e,"overflow")&&(d=e.getBoundingClientRect(),g=I>d.left&&H<d.right&&J>d.top-1&&G<d.bottom+1);return g},V=function(){var a,c,h,j,k,l,n,o,q,r,s,t,u=d.elements;if((p=e.loadMode)&&Q<8&&(a=u.length)){for(c=0,R++;c<a;c++)if(u[c]&&!u[c]._lazyRace)if(!N||d.prematureUnveil&&d.prematureUnveil(u[c]))ba(u[c]);else if((o=u[c][i]("data-expand"))&&(l=1*o)||(l=P),r||(r=!e.expand||e.expand<1?f.clientHeight>500&&f.clientWidth>500?500:370:e.expand,d._defEx=r,s=r*e.expFactor,t=e.hFac,K=null,P<s&&Q<1&&R>2&&p>2&&!b.hidden?(P=s,R=0):P=p>1&&R>1&&Q<6?r:O),q!==l&&(D=innerWidth+l*t,F=innerHeight+l,n=-1*l,q=l),h=u[c].getBoundingClientRect(),(J=h.bottom)>=n&&(G=h.top)<=F&&(I=h.right)>=n*t&&(H=h.left)<=D&&(J||I||H||G)&&(e.loadHidden||T(u[c]))&&(m&&Q<3&&!o&&(p<3||R<4)||U(u[c],l))){if(ba(u[c]),k=!0,Q>9)break}else!k&&m&&!j&&Q<4&&R<4&&p>2&&(g[0]||e.preloadAfterLoad)&&(g[0]||!o&&(J||I||H||G||"auto"!=u[c][i](e.sizesAttr)))&&(j=g[0]||u[c]);j&&!k&&ba(j)}},W=B(V),X=function(a){var b=a.target;if(b._lazyCache)return void delete b._lazyCache;S(a),s(b,e.loadedClass),t(b,e.loadingClass),u(b,Z),v(b,"lazyloaded")},Y=A(X),Z=function(a){Y({target:a.target})},$=function(a,b){try{a.contentWindow.location.replace(b)}catch(c){a.src=b}},_=function(a){var b,c=a[i](e.srcsetAttr);(b=e.customMedia[a[i]("data-media")||a[i]("media")])&&a.setAttribute("media",b),c&&a.setAttribute("srcset",c)},aa=A(function(a,b,c,d,f){var g,h,j,l,m,p;(m=v(a,"lazybeforeunveil",b)).defaultPrevented||(d&&(c?s(a,e.autosizesClass):a.setAttribute("sizes",d)),h=a[i](e.srcsetAttr),g=a[i](e.srcAttr),f&&(j=a.parentNode,l=j&&n.test(j.nodeName||"")),p=b.firesLoad||"src"in a&&(h||g||l),m={target:a},s(a,e.loadingClass),p&&(clearTimeout(o),o=k(S,2500),u(a,Z,!0)),l&&q.call(j.getElementsByTagName("source"),_),h?a.setAttribute("srcset",h):g&&!l&&(M.test(a.nodeName)?$(a,g):a.src=g),f&&(h||l)&&w(a,{src:g})),a._lazyRace&&delete a._lazyRace,t(a,e.lazyClass),z(function(){var b=a.complete&&a.naturalWidth>1;p&&!b||(b&&s(a,"ls-is-cached"),X(m),a._lazyCache=!0,k(function(){"_lazyCache"in a&&delete a._lazyCache},9)),"lazy"==a.loading&&Q--},!0)}),ba=function(a){if(!a._lazyRace){var b,c=L.test(a.nodeName),d=c&&(a[i](e.sizesAttr)||a[i]("sizes")),f="auto"==d;(!f&&m||!c||!a[i]("src")&&!a.srcset||a.complete||r(a,e.errorClass)||!r(a,e.lazyClass))&&(b=v(a,"lazyunveilread").detail,f&&E.updateElem(a,!0,a.offsetWidth),a._lazyRace=!0,Q++,aa(a,b,f,d,c))}},ca=C(function(){e.loadMode=3,W()}),da=function(){3==e.loadMode&&(e.loadMode=2),ca()},ea=function(){if(!m){if(c.now()-y<999)return void k(ea,999);m=!0,e.loadMode=3,W(),j("scroll",da,!0)}};return{_:function(){y=c.now(),d.elements=b.getElementsByClassName(e.lazyClass),g=b.getElementsByClassName(e.lazyClass+" "+e.preloadClass),j("scroll",W,!0),j("resize",W,!0),j("pageshow",function(a){if(a.persisted){var c=b.querySelectorAll("."+e.loadingClass);c.length&&c.forEach&&l(function(){c.forEach(function(a){a.complete&&ba(a)})})}}),a.MutationObserver?new MutationObserver(W).observe(f,{childList:!0,subtree:!0,attributes:!0}):(f[h]("DOMNodeInserted",W,!0),f[h]("DOMAttrModified",W,!0),setInterval(W,999)),j("hashchange",W,!0),["focus","mouseover","click","load","transitionend","animationend"].forEach(function(a){b[h](a,W,!0)}),/d$|^c/.test(b.readyState)?ea():(j("load",ea),b[h]("DOMContentLoaded",W),k(ea,2e4)),d.elements.length?(V(),z._lsFlush()):W()},checkElems:W,unveil:ba,_aLSL:da}}(),E=function(){var a,c=A(function(a,b,c,d){var e,f,g;if(a._lazysizesWidth=d,d+="px",a.setAttribute("sizes",d),n.test(b.nodeName||""))for(e=b.getElementsByTagName("source"),f=0,g=e.length;f<g;f++)e[f].setAttribute("sizes",d);c.detail.dataAttr||w(a,c.detail)}),d=function(a,b,d){var e,f=a.parentNode;f&&(d=y(a,f,d),e=v(a,"lazybeforesizes",{width:d,dataAttr:!!b}),e.defaultPrevented||(d=e.detail.width)&&d!==a._lazysizesWidth&&c(a,f,e,d))},f=function(){var b,c=a.length;if(c)for(b=0;b<c;b++)d(a[b])},g=C(f);return{_:function(){a=b.getElementsByClassName(e.autosizesClass),j("resize",g)},checkElems:g,updateElem:d}}(),F=function(){!F.i&&b.getElementsByClassName&&(F.i=!0,E._(),D._())};return k(function(){e.init&&F()}),d={cfg:e,autoSizer:E,loader:D,init:F,uP:w,aC:s,rC:t,hC:r,fire:v,gW:y,rAF:z}});
//]]>
</script>

आप इसे कॉपी करके अपनी ब्लॉगर टेंप्लेट में
</body>
</html>के ठीक ऊपर लगानी है

आप इस वीडियो को भी देख सकते हैं।

ठीक इसी तरह स्क्रिप्ट को आप लगा ले। अब आप देवटूल में जो भी इमेज लेजी लोड हो रही है उन्हें ओपन करके देख ले। अब फोन इमेज या फिर इमेज लिंक को इस तरह कोडिंग करें।

जो रेस्पॉन्सिव इमेज नहीं है उसके लिए यह कोड है।

<img data-src="image.jpg" class="lazyload" />

जो रेस्पॉन्सिव इमेज है उसके लिए यह कोड है। इस कोड से इमेज को लेजी लोड की जाएगी। जिस इमेज को हम जल्द दिखाना चाहते हैं उसे। data-src="image link"(data-src="image2.jpg) इस तरह और जिस इमेज को हम देर से दिखाना चाहते हैं उन सारी इमेज को
data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w" class="lazyload"
इस तरीके से जोड़े।

<img data-sizes="auto" data-src="image2.jpg" data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w" class="lazyload" />

यह वह इमेज वीडियो है जो हमें आईफ्रेम में शो होता है इसे सेट करने के लिए यह कोड है।

<iframe frameborder="0" class="lazyload" allowfullscreen="" data-src="//वीडियो इमेज यूआरएल"> </iframe>

जानकारी-> टेंपलेट /थीम में इमेज यूआरएल अलग अलग तरीके से होता है। जैसे कि देव टूल में पोस्ट इमेज की लिंक दिखाते हैं उसे टेंपलेट में ब्लॉग पोस्ट इमेज यूआरएल ( 'data:blog.postImageThumbnaildata:blogUrl')इस तरह से लिखा हुआ होता है। और आपकी प्रोफाइल इमेज को टेंपलेट में ऑथर इमेज ( 'data:post.author.authorPhoto.image' ) लिखा होता है।

इमेज लिंक को इस तरह से बनाएं।
Example
<img src="images/1.png" alt="">
images/1.png (यह इमेज लिंक है)
इसे इस तरह से बदले
<img data-src="images/1.png" class="lazyload" alt="">

इस तरह से बनाई हुई इमेज लेजी लोड होगी।

इसमें हमें img src की जगह
img data-src जोड़ना होगा

srcविशेषता को बदलना क्यों आवश्यक है data-src। यदि यह विशेषता नहीं बदली जाती है, तो सभी छवियां आलसी-लोड होने के बजाय तुरंत लोड हो जाएंगी। data-srcवह विशेषता नहीं है जिसे ब्राउज़र पहचानता है, इसलिए जब वह इस विशेषता के साथ एक छवि टैग का सामना करता है, तो यह छवि को लोड नहीं करता है। इस तरह , यह एक अच्छी बात है, क्योंकि यह फिर लैजिस्साइज स्क्रिप्ट को यह तय करने की अनुमति देता है कि छवि को लोड किया जाना चाहिए, बजाय ब्राउज़र के।

शनिवार, 18 जनवरी 2020

html element does not have a lang attribute

<html> element does not have a [lang] attribute
The <html> element must have a lang attribute
<html lang='en'

हमें अपने ब्लॉग में एचटीएमएल लैंग्वेज विशेषता जोड़नी चाहिए इससे हमारी वेबसाइट सियो फ्रेंडली बन जाएगी। हमें यह बताना होता है कि एचटीएमएल किस भाषा में है।

HTML langविशेषता कैसे जोड़ें?

आप अपने ब्लॉग में जाकर थीम ऑप्शन चुनें और उसमें एडिट एचटीएमएल ऑप्शन चुनें अब
<html के नीचे lang='en' एडिट कीजिए। यहां पर हमें यह चुनना है की एचटीएमएल किस भाषा में है। हमें अक्सर ब्लॉगर थीम का एचटीएमएल किस भाषा में लिखा है यह हमें बताना होता है इससे सर्वर को हमारी वेबसाइट सर्च करने में आसानी होती है। कई बार थीम में

expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection'

इस तरीके से लिखा हुआ होता है फिर भी हमें एचटीएमएल में लैंग्वेज विशेषता जोड़नी पड़ती है आप इस तरीके से लैंग्वेज विशेषता जोड़ें
<html
expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection'
lang='en'

अगर आपका ब्लॉग हिंदी लैंग्वेज में लिखा हुआ है तो आप

lang='hi' इस तरीके से लिखें अगर आपका ब्लॉग इंग्लिश में लिखा है लेकिन उच्चारण हिंदी में है तो आप
lang='en' इस तरह से लिखें ।हमें <html के नीचे और
<head>के ऊपर लिखना है। HTML लैंग्वेज विशेषता का उपयोग करने से वेब पेज को सर्च इंजन आसानी से खोज पाता है। यह खोज इंजन और ब्राउज़रों की सहायता करने के लिए है। इससे सर्च इंजन हमारी वेबसाइट किस भाषा में है यह तय करता है और आसानी से उसे चुन सकता है।

शुक्रवार, 20 दिसंबर 2019

Using meta name="viewport"

Using meta name="viewport"

Contents
व्यूपोर्ट क्या है?
meta name="viewport" का उपयोग क्यों करना चाहिए?
व्यूपोर्ट सेट करना
meta name="viewport" ब्लॉक थीम में कैसे जोड़ें?
Responsive Web Design क्यों?

व्यूपोर्ट क्या है?

व्यूपोर्ट किसी वेब पेज का उपयोग करने वालो का दृश्य क्षेत्र है। जैसे कि कंप्यूटर मोबाइल लैपटॉप।व्यूपोर्ट डिवाइस के साथ बदलता रहता है, और कंप्यूटर स्क्रीन की तुलना में मोबाइल फोन पर छोटा हो जाता है।

meta name="viewport का उपयोग क्यों करना चाहिए?
meta name="viewport"इसका उपयोग ब्राउज़र की सामग्री को एक समान रूप में सेट करना होता है।आप जानते ही हैं कि कंप्यूटर लैपटॉप और मोबाइल डिवाइस की स्क्रीन का आकार अलग-अलग होता है इस सेटिंग को करने से यह हमारे वेब पेज को हरेक स्क्रीन के लिए अनुकूलित करता है जिसकी वजह से कंप्यूटर लैपटॉप और मोबाइल में वही पेज अच्छी तरह से दिखा सकेंगे।

व्यूपोर्ट सेट करना
HTML5 ने वेब डिजाइनरों को <meta>टैग के माध्यम से व्यूपोर्ट पर नियंत्रण करने के लीऐ एक तरीका बताया है।
आपको <meta> को अपने सभी वेब पेजों में निम्नलिखित व्यूपोर्ट तत्व के साथ शामिल करना चाहिए।

<meta content='width=device-width, initial-scale=1, maximum-scale=5' name='viewport'/>

<meta>व्यूपोर्ट पेज के आयाम और स्केलिंग(zoom) को नियंत्रित करने के लिए ब्राउज़र को निर्देश देता है।
width=device-widthभाग पेज की चौड़ाई को सेट करके डिवाइस की स्क्रीन-चौड़ाई के हीसाब से सेटिंग करता है।
initial-scale=1.0जब पेज ब्राउज़र द्वारा पहली बार लोड किया जाता है तो यह हिस्सा प्रारंभिक ज़ूम स्तर सेट करता है।

meta name="viewport" ब्लॉक थीम में कैसे जोड़ें?
नीचे दिए गए कोड को कॉपी करले

<meta content='width=device-width, initial-scale=1, maximum-scale=5' name='viewport'>

अपने ब्लॉग में थीम में ऐडीट HTML चुने उसके बाद हेड
<head>खोजे उसके नीचे यह कोड पेस्ट कीजिए।
<head>
<meta content='width=device-width, initial-scale=1, maximum-scale=5' name='viewport'/>

के नीचे यह कोड पेस्ट कीजिए।

अगर आपकी टेंप्लेट/थीम में पहले से ही <head>के नीचे इस तरीके से कुछ लिखा हुआ है।
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>

इस तरह बदले
<meta content='width=device-width, initial-scale=1, maximum-scale=5' name='viewport'/>

तो इसमें आपकोmaximum-scale=1' को बदलकर
maximum-scale=5' करना होगा।
इनशॉट maximum-scale=5 से अधिक होना चाहिए फिर चाहे 6-7-8 -9 यह हमारी जूम सिस्टम को ऑन करता है। इससे व्यूअर हमारे पेज को जूम करके देख सकते हैं।

इस तरीके से कोई एरर नहीं दिखेगा

<meta name="viewport" content="width=device-width, initial-scale=1.0">

इस कोड को पेस्ट करने से हम अपने व्यूअर को जूम करने की किसी भी सीमा से नहीं बांधते अगर आप

maximum-scale=5' सिलेक्ट करते हैं तो आप व्यूअर को 5 तक जूम करने की अनुमति देते हैं वह इससे ज्यादा अतिरिक्त जूम नहीं कर सकता। अगर आप ऊपरवाला कोड इस्तेमाल करते हैं तो व्यूअर आपके पेज को डिवाइस के हिसाब से अतिरिक्त ज्यादा जूम कर पाएगा।

Responsive Web Design क्यों?
रेस्पॉन्सिव वेब डिजाइन की हमें जरूरत क्यों है? अगर आप यह सोचते हो तो मैं आपको बताना चाहता हूं कि आजकल हर कोई मोबाइल कंप्यूटर और लैपटॉप से वेबसाइट व्यू कर रहा है।और अगर हम अपनी वेबसाइट की डिजाइन को रेस्पॉन्सिव वेब डिजाइन नहीं बनाएंगे तो हमें ज्यादा व्यू नहीं मिलेंगे।हमारी वेबसाइट मोबाइल में कंप्यूटर में और लैपटॉप में भी सही तरीके से दिखनी चाहिए।आमतौर पर वेबसाइट की डिजाइन कंप्यूटर के स्क्रीन के हिसाब से बनाई जाती है।इसीलिए हमें रेस्पॉन्सिव वेब डिजाइन बनानी होगी जो कि लैपटॉप कंप्यूटर और मोबाइल में सही तरीके से चले।

रविवार, 17 नवंबर 2019

Widgets kaise hataye

Blogger ke template /theme mein widget kaise hataye. Template mein locked widget kaise hataye. About widget settings.

दोस्तों आज मैं आपको ब्लॉगर में टेंपलेट के विजेट्स सेटिंग्स के बारे में बताऊंगा कई विजेट्स लोक होते हैं। उन्हें कैसे हटाए उसके बारे में भी बताऊंगा जब हम नई टेंप्लेट डाउनलोड करते हैं तो कुछ पुराने विजेट्स भी ऐड हो जाते हैं जिन्हें हम नहीं हटा पाते उन्हें लोक विजेट कहते हैं। आमतौर पर Sora /GooyaabiTemplates मैं ऐसे विजेट्स पाए जाते हैं।ऐसे विजेट्स को हटाने का आसान तरीका में बताऊंगा।

Blogger ke template /theme mein widget kaise hataye.

"सबसे पहले ब्लॉग की थीम या टेंप्लेट का बैकअप जरूर ले ले, अगर कोई गड़बड़ी हुई हो तो यह काम में आएगा"
ब्लॉगर टेंप्लेट में विजेट्स सेट करने के लिए ब्लॉगर के लेआउट जाइए वहां पर आपको फ्रेवीकौन हैडर ब्लॉग संदेश और फूटर जैसे विजेट्स मिलेंगे।
फ्रेवीकोन->इसमें ब्लॉग से रिलेटेड लोगो/logo या किसी अक्षर का फोटो लेना है जो कि 100KB से कम की वर्गाकार चित्र का उपयोग करना है।
हैडर
इसमें ब्लॉग शीर्षक/ब्लॉग किस नाम से बना है।
ब्लॉग वर्णन/ब्लॉग में कौन-कौन से सब्जेक्ट है या किस बारे में है
चित्र/ब्लॉक का लोगो या चित्र ऐड करके सेव करना होता है।
फूटर
इसमें शेयर ब्लॉग, फॉलोअर्स,ब्लॉग आइकॉन, फॉलो बाय ईमेल, लेबल जैसे विजिट लगाते हैं
यहां पर हमें ऑप्शन मिलता है कि हम अनचाहे विजेट्स को ऐडिट करके या हटा सकते हैं लेकिन कुछ विजेट्स ऐसे होते हैं जो यहां पर हमें दिखाई नहीं देते और वह टेंप्लेट में दिखाई देते हैं। इन विजेट को लोक विजेट कहते हैं जिन्हें हम टेंपलेट में से एचटीएमएल कोड से हटा सकते हैं मैं आपको आसान तरीका सिखाऊंगा जिससे हमें एचटीएमएल कोड का उपयोग करना नहीं पडे।

Blog ki theme ko Mobile se edit kaise kare ->theme ko Mobile se edit kaise karena sikhe

विजेट्स कैसे हटाए?

विजेट्स हटाने के लिऐ ब्लॉगर में लेआउट चुने। अब जीस विजेट को हटाना है उसे एडिट कीजिए जैसे कि example "फॉलो बाय ईमेल" इस ऑप्शन को चुनने के बाद आप देख सकते हैं कि उसे हटाने का ऑप्शन दिखेगा अब आप इसे हटा सकते हैं आगे हम उन विजेट्स की बात करेंगे जिसमें यह ऑप्शन नहीं होता।

Template mein locked widget kaise hataye

हम जब भी कोई नई टेंपलेट यूज़ करते हैं तब हमें कई अनचाहे विजेट्स का सामना करना पड़ता है और हमें कुछ ऐसे विजेट्स मिलते हैं जिन्हें हम हटा नहीं सकते। हम ब्लॉग के लेआउट में जाकर देखते हैं तो वह हमें वहां पर दिखाई नहीं देते यह विजेट टेंपलेट में इनबिल्ट होते हैं।
1) ऐसे अनचाहे विजेट्स को हटाने के लिए आप अपने ब्लॉगर में जाकर
थीम ऑप्शन को चुने
एडिट एचटीएमएल ऑप्शन चुनें
थी् डॉट चुने
थर्ड ऑप्शन-> विजेट्स को बदलकर वापस डिफॉल्ट करें चुनें
थीम > विजेट थीम को डिफ़ॉल्ट पर वापस लाएं

चुनें कि किन विजेट को उनके डिफ़ॉल्ट मानों पर वापस लाना है. किसी विजेट को उसके डिफ़ॉल्ट मान पर वापस लाने से <b:विजेट> टैग के अंदर किए गए सभी मनमुताबिक बदलाव मिट जाएंगे.
अपना अनचाहा विजेट चुने
डिफॉल्ट करें
अब लेआउट में उसे हटाने का ऑप्शन आ चुका होगा अगर आप। Sora /GooyaabiTemplates यूज करते हैं तो आप अपने पेज पर क्विक ऐडिट का ऑप्शन देख सकते हो वहां से भी आप उसे हटा सकते हैं।

न्यू थीम लगाने के लिए अपने एक्सएमएल फाइल को कॉपी करके ब्लॉगर अकाउंट खोल कर एडीटर html खोलकर उसमें पेस्ट कर ले। अगर मोबाइल से कर रहे हो तो desktop site मोड में ओन करें। इससे आप सिलेक्ट ऑल करके अपने पुरानी थीम डिलीट कर सकते हो और कॉपी की हुई थीम पेस्ट कर सकते हो।

Example ->नवबार विजेट हटाना।

नवबार विजेट ओर ब्लॉक सर्च विजेट।

2) HTML मैं बदलाव करके विजेट हटाएं।
हमें ब्लॉगर में थीम, एडिट एचटीएमएल चुनना है फिर विजेट चुनकर नवबार विजेट चूने
एचटीएमएल कोड इस तरीके से होगा

<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar' visible='true'>

यहां पर locked='true'की जगह
            locked='false'. करे
अब ब्लॉक के लेआउट में उसे एडिटिंग या हटाने का ऑप्शन आ चुका होगा अगर नहीं आता है तो यह दूसरा तरीका अजमाये
एचटीएमएल में यह कोड ढूंढें
          ]]></b:skin>

अब इसके ऊपर यह कोड पेस्ट कीजिए।

#navbar { height: 0px; visibility: hidden; display: none;} #navbar-iframe { height: 0px; visibility: hidden; display: none;}

]]></b:skin>

इस तरह से फिर सेव कर लीजिए।

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

एचटीएमएल मैं जाकर सीधे विजेट में जाने का ऑप्शन चुनें। वहां जाकर नीचे दिए हुए कोड को डिलीट कीजिए

     <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
      <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar' version='1'>
        <b:includable id='main'><script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener('load',
          function(){ object[attribute] = val; }, false);
      } else {
(कुछ हिस्सा काट दिया गया है यह सिर्फ एग्जांपल है) document.getElementById("navbar-iframe-container"),
    </script><script type="text/javascript">
(function() {
var script = document.createElement('script')
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</b:includable>
      </b:widget>
    </b:section>
    इस विजेट कोड को ढूंढ के डिलीट कर लीजिए

अगर अब भी नवबार विजेट्स डिलीट नहीं होता और वह शो हो रहा है तो आप सर्च ब्लॉक विजेट्स को हटाना चाह रहे हो उसे कैसे हटाए उसका तरीका मैं नीचे दिखा रहा हूं

सर्च ब्लॉक विजेट्स को हटाना?

जी हां आप सर्च ब्लॉक विजेट्स को हटाना चाहते हो जो नवबार जैसा ही दिखता है उसे हटाने के लिए नीचे दिए गए विजेट कोड को हटाए इस तरह से आप इस विजेट से भी छुटकारा पा सकते हैं।

      <div class='search-block'>
          <form action='/search' id='searchform' method='get'>
            <input class='search-button' type='submit' value='GO'/>
            <input id='s' name='q' onblur='if (this.value == '') {this.value = 'Search...';}' onfocus='if (this.value == 'Search...') {this.value = '';}' type='text' value='Search...'/>
          </form>
        </div>

इस तरह से आप किसी भी अनचाहे विजेट्स को हटा सकते हैं यह एक एग्जांपल था अगर आपको और कोई विजिट हटाना हो तो आप इसी तरीके से हटा सकते हैं।

गुरुवार, 20 जून 2019

Data Structure all error solution हिंदी में.

दोस्तों डेटा स्ट्रक्चर के सारे ऐरर को हटाने का तरीका बताऊंगा जैसे image URL, blog ID, post ID, author, date published, headline, image, publisher। इस तरीके से आप करीबन सारे ऐरर हटा पाओगे।

इसे मैंने 4 से 5 टेंप्लेट पर चेक करके देखा है। सबसे पहले अपनी टेंप्लेट की एक कॉपी बना ले। आप जानते ही होगे यह ऐरर थीम की सेटिंग की वजह से है इसीलिए हमे थीम में एडिटिंग की जरूरत पड़ेगी।
http://schema.org/BlogPosting' मैं ऐरर आ रहा है। मतलब की ब्लॉक पोस्टिंग में गड़बड़ी आ रही हैं
अब थीम को ओपन कीजिए http://schema.org/BlogPosting सर्च कीजिए। आप इस फोटो में देख सकते हो।