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 सर्च कीजिए। आप इस फोटो में देख सकते हो।

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

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

मंगलवार, 18 जून 2019

structured data:value for the publisher field is required error setting

आज मैं आपको पब्लिशर फील्ड ऐरर सेटिंग्स के बारे में बताऊंगा। मेरे इस तरीके से आप आसानी से पब्लिशर फील्ड ऐरर सॉल्व कर पाओगे।

publisher structured data error setting

सबसे पहले आप यह जाने कि गूगल हमसे क्या मांगता है।
publisher - लेख (आर्टिकल) लिखने वाले की पहचान आप की वेबसाइट का नाम
publisher-name- लेख (आर्टिकल) लिखने वाले का नाम
publisher.logo- आपकी वेबसाइट का लोगों (फोटो)

publisher structured data error manual setting

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

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

अब expr:src='data:post.firstImageUrl'
की जगह पर
expr:src='mainEntityOfPage' लिखना है अब आप इसे टेंपलेट मैं सेव करें और इस टेंपलेट को अपने ब्लॉग में सेव करें।आप स्ट्रक्चर्ड डाटा टूल से चेक करें
आप देखेंगे ऐरर जा चुका होगा। आपको अगर फिर भी कोई परेशानी होती है तो आप मुझे कमेंट बॉक्स में बताइए मैं आपको इसके लिए सुझाव दूंगा।
More errors

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

शुक्रवार, 14 जून 2019

a value for the headline field is required.

आज हम आपको हेड लाइन फील्ड एरर के बारे में बताएंगे और आप इसे आसानी से सॉल्व कर पाओगे

Value is required for headline fields error settings करे

जब Structured Data Testing Tool इस्तेमाल करते हैं तब हमें Value is required for headline fields error का सामना करना पड़ता है। इसे सेट कैसे करें उसके उसके बारे में बताऊंगा
अगर ब्लॉक पोस्टिंग में आपको यह ऐरर आता है इसका मतलब यह है कि आपने पोस्ट में हैडर नहीं बनाया है हम कई बार नोटबुक में पोस्ट लिखकर ब्लॉग पोस्ट में पोस्ट करते हैं और हम हैडिंग को टैग नहीं करते। हमें हमेशा हैडर बनाना है एचटीएमएल टैग में h2 होना ही चाहिए अगर आपकी पोस्ट में ऐसा नहीं है तो आप उस सेटअप को कर लीजिए फिर स्ट्रक्चर्ड डेटा टूल को को इस्तेमाल करके चेक करें अगर फिर भी ऐरर आ रहा है तो आपको अपनी थीम में एचटीएमएल कोडिंग को सेट करना होगा या तो आप नई थीम के बारे में भी सोच सकते हैं यह ऐरर थीम में हुई गड़बड़ी की वजह से है।

ब्लॉगर थीम में एचटीएमएल कोडिंग से कैसे सेट करें?

सबसे पहले ब्लॉगर के डैशबोर्ड थीम चुनें और बैकअप ले कर एक कॉपी बना ले।अब यह कोड कॉपी कर लीजिए।

<h1 class='post-title entry-title' itemprop='headline'>

अब इस कोड को स्ट्रक्चर डेटा टूल में जहां ऐरर दिख रहा है वहां सेट करना है। स्ट्रक्चर्ड डाटा टूल ओपन कीजिए जहां ऐरर आ रहा है उसे क्लिक कीजिए लेफ्ट साइड में एचटीएमएल कोडिंग होगा।नीचे पिक्चर में दिखाएं हुई कोडिंग के नीचे इस कोड को पेस्ट कीजिए। जहां ऐरो लगाया हुआ है। अब अपडेट कर दीजिए आप देख सकते हो वह ऐरर गायब हो चुका होगा।
सूचना- स्ट्रक्चर टूल आपको एच 1या एच 3 में भी ऐरर दिखा सकता है। हमें थीम एडिटिंग करते वक्त
<!-- Commented code: <h2 class='post-title entry-title' itemprop='name'>
इस कोड को ढूंढना है और itemprop='name'> की जगह itemprop='headline'> ऐड करना है मतलब name की जगह headline आयेगा।
बस थीम को फिर से ब्लॉक में डाउनलोड करके स्ट्रक्चर टूल से चेक कर लीजिए।ऐरर नहीं आयेगा।

आपका काम हो जाने के बाद कमेंट जरुर कीजिए आप भी एक ब्लोगर है और कॉमेंट की अहमियत समझते हैं।
More errors

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

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

Value is required for the image field setting kaise karen

Value is required for the image field setting kare

अगर ब्लॉक पोस्ट में आपको इस तरह के ऐरर का सामना करना पड़ता है तो मैं इसके बारे बारे में आपको बताऊंगा

Value is required for the image field ऐरर सेट करें।

आपको अपने पोस्ट के लिए इमेज बनानी होगी जो आपके पोस्ट के बारे में हो आप अपनी पोस्ट में उसे ऐड करके अपडेट कर दीजिए।
याद रहे - इमेज कॉपीराइट नहीं होनी चाहिए कॉपीराइट के लिए आगे कॉपीराइट के लिए आगे गूगल पर सर्च करके पढ़िए

अगर फिर भी ऐरर आता है तो आपको आपकी थीम में कोड सेट करना होगा अपनी थीम की एक कॉपी बनाकर रखें स्ट्रक्चर्ड डाटा टूल ओपन कीजिए ऐरर को क्लिक कीजिए। post.firstImageUrl (पोस्ट फर्स्ट इमेज यूआरएल) के इस कोड को ढूंढें

कोड:

<b:if cond='data:post.firstImageUrl'> <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/> </b:if>

उसके बदले यह कोड लगाएं
कोड:

अब अपडेट कर लीजिए आप देख सकते हैं ऐरर गायब हो चुका होगा। अगर ट्रिक काम करती है

तो आप थीम को भी ऐडिट करके फिर से सेव करके चेक कर सकते हो।ऐरर गायब हो चुका होगा।

More error

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

Blogger: datePublished structured data error setting

आज हम आपको datePublished error के बारे में बताएंगे। जब Structured Data Testing Tool इस्तेमाल करते हैं तब हमें data published error का सामना करना पड़ता है। और यह गड़बिड़ी हमारी हर पोस्ट में दिखती है।

date Published error को ठीक (solve) कैसे करें?

मैं इसका आसान तरीका बताने वाला हूं घबराने की कोई जरूरत नहीं है हम कई बार न्यू थीम इस्तेमाल करते हैं कई बार उसकी वजह से भी हमें यह प्रॉब्लम फेस करनी पड़ती है

date Published error को ठीक (solve)करने का मैनुअल गाइड

नीचे पिक्चर मुजब सेट करो

सबसे पहले अपने ब्लॉगर डैशबोर्ड में जाइए

सेटिंग्स चुने
लैंग्वेज एंड फॉर्मेटिंग चुने
भाषा में हिंदी चुने
इनेबल ट्रांसलेशन में इनेबल चुने
इन हिंदी चुने
टाइम जोन सेट करें. (GMT +5: 30) भारत का मानक समय
डेटा हैडर फॉरमैट सेट करें- बुधवार, 12 जून 2019
टाइम स्टेम फॉरमैट सेट करें-6/12/2019 04:10:54 pm
कॉमेंट टाइम स्टेम फॉरमैट सेट करें।12 जून 2019को04:10:54 pm
सेटिंग्स को सेव करे।

सूचना--> जब आप टाइमस्टैंप फॉरमैट सेट करते हो तब आपको समय लाइव दिखाई देगा यानी घड़ी में जो समय होता है वही अंदर दिखेगा जैसे आप रात को 8:30 बजे सेट कर रहे हो तो अंदर 8:30 बजे का समय दिखाई देगा।
अब आप Structured Data Testing Tool इस्तेमाल करके चेक करें । इसमें इंडियन टाइम जोन सेट किया हुआ है आपका काम हो जाने के बाद कमेंट जरुर कीजिए आप भी एक ब्लोगर है और कॉमेंट की अहमियत समझते हैं।
More errors

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

गुरुवार, 30 मई 2019

Blog ki theme ko Mobile se edit kaise kare

मैं आपको बताऊंगा ब्लॉग की थीम को मोबाइल से एडिट करने का आसान तरीका। मैं अच्छी तरीके से जानता हूं की मोबाइल से ब्लॉग की थीम को एडिट करना काफी मुश्किल है। मैं आपको आसान तरीका सिखाऊंगा।

ब्लॉग की थीम को मोबाइल से एडिट करने का आसान तरीका।
ब्लॉग की थीम को मोबाइल से एडिट करने के लिए आप को एक ऐप डाउनलोड करना होगा।
ES file explorer डाउनलोड करे।
अब आप अपने ब्लॉग मे जाकर थीम चूनें।
अब राइट साईड मे थीम डाउनलोड लीखा होगा उसे चूने। अब थीम डाउनलोड कर लीजिये।अब थीम Xml के रूप मे मोबाइल में डाउनलोड होगी।
अब आप ES file explorer ऐप खोलें।
अब आप (left side)से इनटरनल स्टोरेज चूने।
अब आप डाउनलोड फाइल मे से थीम फाईल चूने।
अब राइट साईड मैं थ्री डॉट चूने।
अब find /replace ओपसन चूने।
इसमे आप जो भी वर्ड खोजना चाहते हैं वह टाइप कीजिए।

Example---> ]]></b:skin>
इसे आप कमप्यूटर की तरह इसतेमाल कर सकते है।

सूचना-->आप थीम का एक और बैकअप लेके रखे क्योंकि एडिटिंग करते वक्त कोई गड़बड़ी या ऐरर आये तो आप फिर से एडिटिंग कर सकते है।

ध्यान से---> जहां जरूर हो वहां पर ऐडिट कीजिए और याद रहे थीम में किसी भी और जगह कोई स्पेस या कोई अल्फाबेट टाइप ना हो इससे थीम में गड़बड़ी हो सकती है और ऐरर आ आ सकता है।

एडिटिंग करने के बाद आप अपने ब्लॉग मे थीम ओपसन चूने ओर फीर से स्थापित करना चूने।
इस तरह से आप थीम मे एडिटिंग कर पाएंगे।

Can't find substitution for tag [blog.ieCssRetrofitLinks]

" "full guide

दोस्तों आपको कई बार इस तरह के (  )ऐरर का सामना करना पड़ता होगा आप जानना चाहेंगे कि यह क्या है? और ऐसा क्यों होता है? मैं आपको इसके बारे में पूरी जानकारी दूंगा।

full guidance
दोस्तों आप जानना चाहेंगे कि आपके ब्लॉक के html view में यह क्या आ रहा है?
<!--Can't find substitution for tag का मतलब होता है "टैग के लिए प्रतिस्थापन नहीं मिल सकता है"

[blog.ieCssRetrofitLinks]-->
इसके बारे में कहूं तो हम अक्सर ब्लॉग के लिए फ्री में थीम डाउनलोड करते हैं। हम जो थीम डाउनलोड करते हैं उसके फूटर में हमेशा लिंक बनाने वाले का नाम ओर कंपनी का नाम होता है। आप मेरे ब्लॉक के फुटर में देख सकते हैं। हम लोग अकसर चाहते हैं कि हमारे ब्लॉक के फुटर में में सिर्फ हमारे बारे में लिंक हो ना कि किसी और वेबसाइट की।जबकि हमे यह थीम उनसे फ्री मिली हुई है। इन वेबसाइटों की यह शर्त होती है की थीम के फूटर में सिर्फ उनके बारे में लिंक हो।
[blog.ieCssRetrofitLinks]-->
यह एक ब्लॉगर का डेटा प्रकार है, जिसमें आधिकारिक तोर से ब्लॉगर लेआउट संस्करण 2 थीम के लिए सीएसएस (CSS) हैक लिंक शामिल है ।
जी हां आप बिल्कुल सही समझ रहे हैं यह एक हैकिंग लिंक है। हम जीस वेबसाइट से फ्री में थीम लेते हैं उन वेबसाइट की शर्ते होती है की थीम के फूटर में उन्हीं के दिए हुए लिंक होने चाहिए।अगर हम उनकी शर्तों का पालन नहीं करते तो वह हमारी वेबसाइट हैक कर लेते हैं।या यु कहें कि वह हमारी वेबसाइट को रीडायरेक्ट कर लेते हैं उनकी वेबसाइट पर।अब आप जान चुके हैं कि यह आधिकारिक तोर से ब्लॉगर लेआउट संस्करण 2 थीम के लिए सीएसएस (CSS) हैकिंग लिंक है।गूगल तब तक इस लिंक को अनदेखा करेगा जब तक आप फूटर की लिंक में फेरबदल नहीं करते। इसीलिए हमें फूटर के लिंक का फेरबदल नहीं करना चाहिए यह वेबसाइटें हमें इतनी मेहनत करके फ्री में थीम देते हैं और हम उन्हीं का नाम और प्रचार करने की जगह उनकी थीम में से उनके नाम को काटकर अपने लिंक लगा लेते हैं।वह इसे रोकने के लिए इस तरह की हैकिंग लिंक बनाते है। वैसे तो इस तरह की लिंक को भी हटाया जा सकता है लेकिन मैं नहीं मानता कि हमें ऐसा करना चाहिए।ऐसी लिंग को हटाने के लिए आपको कोडिंग लैंग्वेज पूरी तरीके से आनी चाहिए। लेकिन ऐसा करना गलत है।

सदस्यता लें संदेश ( Atom )

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

Links must have discernible text

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

1) सिंपल लिंक

2) इमेज लिंक

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

4)PDF format लिंक

5)pdf report लिंक

6)Annual Budget Excel लिंक

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

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

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

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

frame or iframe elements must have a title

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

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

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

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

Defer offscreen images and make lazy load images

lazyload images

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

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

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

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

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

Using meta name="viewport"

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

meta name="viewport का उपयोग क्यों करना चाहिए?

व्यूपोर्ट सेट करना

meta name="viewport" ब्लॉक थीम में कैसे जोड़ें?

Responsive Web Design क्यों?

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

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

Blogger ke template /theme mein widget kaise hataye.

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

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

Template mein locked widget kaise hataye

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

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

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

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

मंगलवार, 18 जून 2019

structured data:value for the publisher field is required error setting

publisher structured data error setting

publisher structured data error manual setting

शुक्रवार, 14 जून 2019

a value for the headline field is required.

Value is required for headline fields error settings करे

ब्लॉगर थीम में एचटीएमएल कोडिंग से कैसे सेट करें?

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

Value is required for the image field setting kare

Value is required for the image field ऐरर सेट करें।

More error

Blogger: datePublished structured data error setting

date Published error को ठीक (solve) कैसे करें?

date Published error को ठीक (solve)करने का मैनुअल गाइड

गुरुवार, 30 मई 2019

Blog ki theme ko Mobile se edit kaise kare

" "full guide

What's Hot

Popular Posts

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