Blogger Site में Lazy Load Embedded YouTube Videos कैसे करें?

Blogger Site में Lazy Load Embedded YouTube Videos कैसे करें?

 Blogger में Lazy Load Embedded Youtube Videos कैसे करें?


हैलो ब्लॉगर ! क्या आपका ब्लॉग Blogger पर बना हुआ है ? अगर हाँ तो ये पोस्ट आपके लिए बहुत ही Important होने वाली है अगर आप अपने Blogger Site में Youtube Videos Embedded करते है। क्योकि मैं इस पोस्ट में आपको बताने वाला हूँ की  Blogger Site में Lazy Load Embedded Youtube Videos कैसे करें? जिससे आपके Blog के Page या Post में Youtube Videos fast Load हो और आपके Blog का Loading Speed Increase भी हो । 

     तो दोस्तों चलिये जानते हैं  Blogger Site में Lazy Load Embedded Youtube Videos कैसे करें? 

Blogger Site में Lazy Load Embedded YouTube Videos कैसे करें?


How to Lazy Load Embedded YouTube Videos in Blogger?


Default Youtube Videos Embed करने में क्या कमी हैं ?

दोस्तों कितने ब्लॉगर जब कोई Article/Post लिखतें हैं और उन्हे उस Article/Post में कोई Youtube Videos Embed करना होता है तो वो Defaut जो Blogger में Option दिया रहता है वहीं से Add कर देते हैं और उनके Blog Post का Loading Speed Down हो जाता है क्योकि  Youtube Embedded Videos का Code 'iframe ' code  होता है जो Youtube Videos को आपके Post पर  load करने में ज्यादा टाइम लगा देता है अपनी Website की Loading Speed Check करने के लिए निचे दिए link पर Click करें -

PageSpeed Insights


अगर इसकी Size  की बात करे तो या लगभग 500KB - 700KB तक ले सकता है जिसकी वजह से आपकी Website की Loading Speed 30% से 40 % Down हो जाता है।  इसका कारण ये होता है की ये जो Code है ये आपकी Youtube Videos को आपके वेबसाइट के अनुसार Optimize नहीं कर पाता है। 


अगर आपने अपने website को PageSpeed Insights पर check  किया और निचे Image दिखाए गए जैसा Error आ रहा है तो आपको इस पोस्ट में बताये गए Trick को Follow जरूर करना चाहिए इससे आपकी Site की Loading Speed जरूर बढ़ेगा। 

Default Youtube Videos Embed करने में क्या कमी हैं ?

Lazy Load Embedded Youtube Videos Code कैसे काम करेगा?

Lazy Load Embedded Youtube Videos Code आपके पोस्ट में Embedded Youtube Videos को Aapke Website के Page या Post के अनुसार Optimize करेगा और ये आपके पोस्ट में Embedded Youtube Videos को तभी Load करेगा जब आपका Visiter उस Video पर Click करेगा।  


 Blogger Site में Lazy Load Embedded Youtube Videos Code कैसे Add करें?

अपने Blogger Website में Lazy Load Embedded Youtube Videos Code Add करना चाहतें हैं तो आपको ये steps Follow करना है -


  • पहले  Blogger Dashboard Open कीजिये । 
  • Theme Menu पर क्लिक कीजिये । 
  •  Edit HTML Button पर क्लिक कीजिये 
  •  </head> tag Search कीजिये 
  • अब नीचे दिये गए Code को Copy करके के </head> पहले paste कर दीजिये । 
  • अब  Theme को Save कर दीजिये । 

Copy the below Code: Lazy Load Embedded Youtube Videos Code

<style>
.youtube-player {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  margin: 0px;
}
.youtube-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: transparent;
}
.youtube-player img {
  object-fit: cover;
  display: block;
  left: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  height: auto;
  cursor: pointer;
  -webkit-transition: 0.4s all;
  -moz-transition: 0.4s all;
  transition: 0.4s all;
}
.youtube-player img:hover {
  -webkit-filter: brightness(75%);
  -moz-filter: brightness(75%);
  filter: brightness(75%);
}
.youtube-player .play {
  height: 72px;
  width: 72px;
  left: 50%;
  top: 50%;
  margin-left: -36px;
  margin-top: -36px;
  position: absolute;
   background: url("https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_play_button_icon_%282013%E2%80%932017%29.svg") no-repeat;
  cursor: pointer;
}
</style>

<script type='text/javascript'>
//<![CDATA[
function labnolIframe(div) {
  var iframe = document.createElement("iframe");
  iframe.setAttribute(
    "src",
    "https://www.youtube.com/embed/" + div.dataset.id + "?autoplay=1&rel=0"
  );
  iframe.setAttribute("frameborder", "0");
  iframe.setAttribute("allowfullscreen", "1");
  iframe.setAttribute(
    "allow",
    "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  );
  div.parentNode.replaceChild(iframe, div);
}
function initYouTubeVideos() {
  var playerElements = document.getElementsByClassName("youtube-player");
  for (var n = 0; n < playerElements.length; n++) {
    var videoId = playerElements[n].dataset.id;
    var div = document.createElement("div");
    div.setAttribute("data-id", videoId);
    var thumbNode = document.createElement("img");
    thumbNode.src = "https://i.ytimg.com/vi/ID/hqdefault.jpg".replace(
      "ID",
      videoId
    );
    div.appendChild(thumbNode);
    var playButton = document.createElement("div");
    playButton.setAttribute("class", "play");
    div.appendChild(playButton);
    div.onclick = function () {
      labnolIframe(this);
    };
    playerElements[n].appendChild(div);
  }
}
document.addEventListener("DOMContentLoaded", initYouTubeVideos);
//]]>
</script></div> 



अब आपको अपने Blog के Post/Article लिखते समय  इसको HTML View मे Open करना है और Youtube Video को Show कराने के लिए नीचे दिये गए Code को Copy करना है 

<div class="youtube-player" data-id="VIDEO_ID"></div> 


इसमे VIDEO_ID की जगह आप जो Youtube  Videos Embed करना चाहते हैं उस Video का सिर्फ Id Copy करके Paste करना है । 

Example: https://youtu.be/G6BzrLhkDz8

ऊपर Link मे जिसे Colour किया गया है वो VIDEO_ID है

अब आप Preview कर के देख सकते है ।  


Conclusion:


तो दोस्तो आपको समझ मे आ गया होगा की  Blogger Site में Lazy Load Embedded YouTube Videos कैसे करें? ऊपर बताए ठीक से Follow करने पर भी कोई Problem आ रहा हो तो आप हमे comment कर सकते हैं ।

उम्मीद करता हूँ आप लोगों को ये पोस्ट पसंद आया होगा और अगर आपके मन में कोई सवाल है या सुझाव है तो हमे Comment मे जरूर बताइएगा और हमारे Youtube Channel को भी Join कर लीजिये । 

Independence Day 2021 Viral Whatsapp Script free Download for Blogger

Independence Day 2021 Viral Whatsapp Script free Download for Blogger

Independence Day 2021 Viral Whatsapp Script free Download for Blogger


हैलो ब्लॉगर, जय हिन्द ! स्वागत है akHelpPoint.in ब्लॉग में ।  ये पोस्ट इंडियन ब्लॉगर के लिए बहुत खास है। दोस्तों आप तो जानते हैं की कुछ दिन बाद "15 अगस्त 2021" का दिन आने वाला हैं और इस दिन भारत देश के सभी लोग स्वतंत्रता दिवस मनाते हैं और तिरंगा झण्डा को फहराते हैं । सभी भारतीय लोग एक दूसरे को स्वतंत्रता दिवस की खुशी मे बधाई देते हैं । तो  दोस्तों मैं आप लोगो के लिए इस 15 August 2021 Independence Day के दिन दोस्तों को नए तरीके से  Wish करने के लिए  Best Independence Day 2021 Viral Whatsapp Script free लेकर आया हूँ। 


इस 15 August 2021, Independence Day के अवसर पर आप अपने दोस्तो को Share करेंगे तो आपके दोस्त को बहुत अच्छा लगेगा और इस Independence Day 2021 Viral Whatsapp Site को वो भी अपने दोस्तो को Share करेगा इसी तरह Share करने से आपका Website Viral हो जाएगा और अगर आप इस Happy Independence Day Wishing Script में  किसी तरह के Ad लगा के रखा है तो आप बहुत सारे पैसे कमा सकतें हैं । तो दोस्तों चलिये जानते हैं की Independence Day Viral Whatsapp Script free Download कैसे करना है और Happy Independence Day Wishing Site Free में कैसे बनाना है ।

Independence Day 2021 Viral Whatsapp Script free Download for Blogger

Happy Independence Day 2021 Whatsapp Viral Site Free में कैसे बनाये?


Independence Day Wishing Website Free मे बनाने के लिए आपको नीचे दिये गए steps को Follow करना होगा । हम जो Independence Day wishing script जिस Pletform पर Install कर के बताने वालें है हैं वो है Blogger जो की Google का एक Free और  Popular Site है आप इस साइट पर Free Blog Banakar उससे पैसे भी Earn कर सकतें हैं ।  तो चलिये जनतें हैं की 15 August Independence Day 2021 viral Script Downlaod और Install कैसे करना है Step by Step... 

  1. Blogger.com पर जाएं और Sign Up कीजिए
  2. New Blog बनाए
  3. अब Blogger के Dashboard में Theme पर कीजिए।
  4. Swich to first generation classic theme पर Click कीजिए।
  5. अब Edit Html पर Click कीजिए।
  6. नीचे दिए गए Independence Day 2021 Viral Whatsapp Script Download कर लीजिए।
  7. इस Code को Notepad में Open कीजिए और Code Copy कर लीजिए।
  8. अब Blogger के इस Html Box में पहले वाले Code को Remove कर के इसे Paste कर दीजिए।
  9. अब इस Code में जहां आप Footer या Heder में  ad लगा सकते हैं । 
  10. Footer में WhatsApp Share और Facebook Share वाले Link में अपने Site का Link Add कर दिजिए।
  11. अब Save कर दीजिए।



Independence Day Viral Whatsapp Script free Download


Independence Day 2021 Viral Whatsapp Script
Independence Day 2021 Viral Whatsapp Script



How to Add Automatically Create Source Link in Blogger Post

How to Add Automatically Create Source Link in Blogger Post

How to Add Automatically Create Source Link in Blogger Post in Hindi


हैलो ब्लॉगर ! स्वागत है akHelpPoint ब्लॉग में।  यदि आपका वेबसाइट ब्लॉगर पर बना हुआ है तो आपके लिए ये पोस्ट खाश हो सकता है क्योंकि मैं इस पोस्ट में बताने वाला हूं How to Add Automatically Create Source Link in Blogger Post in Hindi. मैं इस पोस्ट में यह भी बताऊंगा की Automatic Source Link क्या है? Automatic Source Link को Blogger में कैसे Add करते हैं? तो चलिए जानतें हैं। 

How to Create Automatic Source Link in Blogger Post in Hindi
How to Create Automatic Source Link in Blogger Post in Hindi

How to Add Automatically Create Source Link in Blogger Post in Hindi



Automatic Source Link क्या है? (What is Automatic Source Link ?)


Auto Source Link वो link होता है जो आपके Blog ya Website में किसी प्रकार के Add किए Code के अनुसार Automaticaly Generate होता है और ये पोस्ट में में को बताने वाला हूं वो Blogger Site के लिए है।


Blogger Automatic Source Link कैसा होता है?


 अगर आपके मन में अभी भी ये सवाल उठ रहा है की Automatic Source Link होता कैसा है तो मैं आपको समझाने लिए मैं आपको कुछ याद दिलाने की कोशिश करता हूं । 

जब आप internet पर कुछ Search करते होंगे जैसे - Lyrics Song, Shayari, etc. तो उसे आपको कॉपी कर share करने का मन करता होगा और जब उस Text को Copy कर Paste करते होंगे तो उस Text के साथ उस पोस्ट का Source Link भी दिखाई देता होगा, ऐसा ज्यादातर WordPress पर बने कुछ Website पर होता है लेकिन आप चाहे तो इसे अपने Blogger Site में भी कर सकते हैं अपने Blogger Template में कुछ Code को Add कर के। 


यह  भी पढ़ें:

How to Add Automatic Related Post in the middle of an article on Blogger


यदि कोई भी आपके पोस्ट से किसी भी text को Copy करता है और उसे कहीं Paste करता है तो Automatic Source Link कुछ इस तरह के दिखेंगे:

Life is a song - sing it. Life is a game - play it. Life is a challenge - meet it. Life is a dream - realize it. Life is a sacrifice - offer it. Life is love - enjoy it.

Read more at https://shayarishare4u.blogspot.com/2020/05/good-morning-shayari-in-hindi-2020.html


How to add Auto Source Link to Blogger in Hindi


अपने Blogger Site में Auto Source Link Add करने के लिए आपको Blogger Template में Code Add करना होगा जो मैने नीचे दिया है ।

   यहां पर आपको दो Code मिलेंगे और दोनो Code अलग अलग तरीके से आपके Site के Post के Source Link को Show कराएगा । 

   तो आप अपने जरूरत के अनुसार किसी एक Code को Select करना है।

     इस Code को अपने Website में Add करने के लिए नीचे दिए गए steps ko Follow कीजिए:---


  1. Blogger Dashboard Open करें 
  2. Theme Menu पर Click करें 
  3.  Edit Html पर Click करें 
  4. </body> टैग को Search करें 
  5. निचे दिए गए Code में से किसी एक Code को Copy करें।  
  6. अब इस Code को </body> के ऊपर paste कर दें।  
  7. अब Theme को Save कर दें। 

Guide Video: How to Create Automatic Source Link in Blogger Post in Hindi




Create Automatic Source Link Code in Blogger Version 1.




<script type='text/javascript'>
//<![CDATA[
// Copy Text
function nocopas(){var e=window.getSelection();pagelink=" Read more : "+document.location.href,copytext=e+pagelink,newdiv=document.createElement("div"),newdiv.style.position="absolute",newdiv.style.left="-99999px",document.body.appendChild(newdiv),newdiv.innerHTML=copytext,e.selectAllChildren(newdiv),window.setTimeout(function(){document.body.removeChild(newdiv)},100)}document.addEventListener("copy",nocopas);
//]]>
</script> 


Create Automatic Source Link Code in Blogger Version 2




<script type='text/javascript'>
//<![CDATA[
!function(e,t){var n="getSelection",o="removeAllRanges",i="addRange",l="parentNode",a="firstChild",d="appendChild",r="removeChild",s="test",c="innerHTML";if(e[n]){var p,g,f,h,u,y;t.addEventListener("copy",function(C){for(g=C.target;3===g.nodeType;)g=g[l];if(h=t.createElement("div"),(p=e[n]())&&p.rangeCount&&(p=p.getRangeAt(0))&&(f=p.cloneRange(),p=p.cloneContents())){for(;u=p[a];)h[d](u);if(!/^(pre|code)$/i[s](g.nodeName||"")&&!/(^|\s)no-attribution(\s|$)/i[s](g.className||"")){var v=e.location.href;h[c]+="<br><br>&copy; "+t.title+'<br>Source: <a href="'+v+'">'+v+"</a>"}y=t.createRange(),t.body[d](h),y.selectNodeContents(h),p=e[n](),p[o](),p[i](y),setTimeout(function(){h[l][r](h),p[o](),p[i](f)})}},!1)}}(window,document);
//]]>
</script>  


Conclusion:

तो दोस्तो आपको समझ मे आ गया होगा की Automatic Source Link क्या है? Automatic Source Link को Blogger में कैसे Add करते हैं? ऊपर बताए गए जानकारी को ठीक से Follow करने पर भी कोई Problem आ रहा हो तो आप हमे comment कर सकते हैं ।

उम्मीद करता हूँ आप लोगों को ये पोस्ट पसंद आया होगा और अगर आपके मन में कोई सवाल है या सुझाव है तो हमे Comment मे जरूर बताइएगा और हमारे Youtube Channel को भी Join कर लीजिये । 

How to Add Automatic Related Post in the Middle of an article on Blogger

How to Add Automatic Related Post in the Middle of an article on Blogger

How to Add Automatic Related Post in the middle of an article on Blogger

How to Add Automatic Related Post in the Middle of an article on Blogger

How to Add Automatic Related Post in the middle of an article in Hindi



Add Automatic Related Post in the middle of an article: हैलो Bloggers स्वागत है akHelpPoint.in में । 


यदि आपका Blog, Blogger.com/Blogspot.com पर है तो आप जानते होंगे की Blogger पर के Website में कोई Designs, Widgets, Functions आदि को Add करने केन लिए Wordpress की तरह Plugins नहीं होते है हमे जो भी कुछ करना होता है सब Manually करना पड़ता है जिसके कारण समय ज्यादा लग जाते हैं और अगर आप कोई Article लिख रहे हैं और उस article मे Related Post को Add करना है तो आपको उस Article से Related Post, Search करना पड़ता होगा और फिर उसके Title और Link को Copy कर के बारी-बारी Add करना पड़ता होगा । 


 तो दोस्तो आज मैं इसी Problem का solution इस Post में लाया हूँ इस पोस्ट में बताऊंगा How to Add Automatic Related Post in the Middle of an article on Blogger. तो चलिये जानते हैं ।


यह भी पढ़ें:

How to Add Automatically Create Source Link in Blogger Post in Hindi

Automatic Related Post Article के Middle में Add करने से क्या फायदे हैं?


दोस्तों अगर Automatic Related Post Article के Middle में Add करते हैं तो इससे बहुत फायदे हैं, जो निम्नलिखित है -

  1. किसी भी Article/Post में बार बार Related links Add करने की जरूरत नहीं है।
  2. आपका समय कम लगेगा पोस्ट लिखने में।
  3. यह आपके New और Old सभी Post में Show होगा।
  4. आपके Post को एक Professional Look देता है।
  5. आपके Visiters को मालूम होता है कि आपने किन किन Topics पर पोस्ट लिखी है।
  6. Related Post पर भी click होने के Chances रहते है।
  7. Related Post पर Click होने से आपके Site का Bounce Rate नहीं बढ़ेगा।
  8. आपकी Earning बढ़ेगी।

How to Add Automatic Related Post in the middle of an article on Blogger


Automatic Related Post को Article के Middle में Add करने के लिए आपको अपने Blogger Template में कुछ Code को Add करना होगा।

   Code को Add करने के लिए नीचे दिए गए Steps को Follow कीजिए -

  1. Blogger के Dashboard Open करें।
  2. Theme पर Click करके Edit Html पर Click कीजिए।
  3. Html Box में कहीं पर Click कीजिए और </head> को Search कीजिए
  4. नीचे दिए गए CSS Code 1 या CSS Code 2 किसी एक को </head> के ऊपर paste kar दीजिए।

CSS Code 1


<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Related Post Inline */
.related-simplify{display:inline-block;position:relative;padding:0;border-radius:20px;margin:40px auto 30px auto;width:100%;box-shadow:0 0 8px -5px rgba(0,0,0,0.4)}.related-simplify h4{background:#f22830;padding:4px 15px;position:absolute;margin:0;font-size:13px;font-weight:500;color:#fff;top:-14px;left:6.8%;border-radius:99em;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17)}.related-simplify ul{margin:0;padding:0}.related-simplify ul li{position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .1s}.related-simplify a{display:block;color:#222;font-size:14px;font-weight:500;padding:5px 30px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .1s}.related-simplify ul li:nth-child(n+5) a{margin:0 auto 20px auto;}.related-simplify ul li:first-child a{margin:25px auto 0 auto;}.related-simplify ul li:nth-child(n+5) a:hover,.related-simplify ul li:first-child a:hover,.related-simplify a:hover{color:#aaa;padding-left:35px}.related-simplify ul li:nth-child(n+6){display:none}
</style>
</b:if><b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Related Post Inline */
.related-simplify{display:inline-block;position:relative;padding:0;border-radius:20px;margin:40px auto 30px auto;width:100%;box-shadow:0 0 8px -5px rgba(0,0,0,0.4)}.related-simplify h4{background:#f22830;padding:4px 15px;position:absolute;margin:0;font-size:13px;font-weight:500;color:#fff;top:-14px;left:6.8%;border-radius:99em;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17)}.related-simplify ul{margin:0;padding:0}.related-simplify ul li{position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .1s}.related-simplify a{display:block;color:#222;font-size:14px;font-weight:500;padding:5px 30px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .1s}.related-simplify ul li:nth-child(n+5) a{margin:0 auto 20px auto;}.related-simplify ul li:first-child a{margin:25px auto 0 auto;}.related-simplify ul li:nth-child(n+5) a:hover,.related-simplify ul li:first-child a:hover,.related-simplify a:hover{color:#aaa;padding-left:35px}.related-simplify ul li:nth-child(n+6){display:none}
</style>
</b:if> 

CSS Code 2


<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Related Post Inline */
.related-simplify{display:inline-block;background:#fff;position:relative;padding:0;margin:36px auto 26px auto;width:100%;box-shadow:0 0 20px -5px rgba(0,0,0,0.3);transition:all 0.3s cubic-bezier(.25,.8,.25,1);border-top:2px solid #f22830}.related-simplify:hover{box-shadow:0 0 15px -5px rgba(0,0,0,0.5)}.related-simplify h4{background:#f22830;padding:4px 15px;position:absolute;margin:0;font-size:13px;font-weight:500;color:#fff;top:-14px;left:2.8%;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17)}.related-simplify ul{margin:0;padding:0}.related-simplify ul li{position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .3s}.related-simplify a{color:#222;font-size:14px;font-weight:500}.related-simplify a{display:block;color:#222;font-size:14px;font-weight:500;padding:5px 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.related-simplify ul li:nth-child(n+5) a{margin:0 auto 10px auto;}.related-simplify ul li:first-child a{margin:15px auto 0 auto;}.related-simplify ul li:nth-child(n+5) a:hover,.related-simplify ul li:first-child a:hover,.related-simplify a:hover{color:#aaa;padding-left:18px}.related-simplify ul li:nth-child(n+6){display:none}
</style>
</b:if><b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Related Post Inline */
.related-simplify{display:inline-block;background:#fff;position:relative;padding:0;margin:36px auto 26px auto;width:100%;box-shadow:0 0 20px -5px rgba(0,0,0,0.3);transition:all 0.3s cubic-bezier(.25,.8,.25,1);border-top:2px solid #f22830}.related-simplify:hover{box-shadow:0 0 15px -5px rgba(0,0,0,0.5)}.related-simplify h4{background:#f22830;padding:4px 15px;position:absolute;margin:0;font-size:13px;font-weight:500;color:#fff;top:-14px;left:2.8%;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17)}.related-simplify ul{margin:0;padding:0}.related-simplify ul li{position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .3s}.related-simplify a{color:#222;font-size:14px;font-weight:500}.related-simplify a{display:block;color:#222;font-size:14px;font-weight:500;padding:5px 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.related-simplify ul li:nth-child(n+5) a{margin:0 auto 10px auto;}.related-simplify ul li:first-child a{margin:15px auto 0 auto;}.related-simplify ul li:nth-child(n+5) a:hover,.related-simplify ul li:first-child a:hover,.related-simplify a:hover{color:#aaa;padding-left:18px}.related-simplify ul li:nth-child(n+6){display:none}
</style>
</b:if> 


5.नीचे दिए गए javascript Code को भी </head> के ऊपर Paste कर दीजिए।

JavaScript Code

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Related Post Inline
var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if><b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Related Post Inline
var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if> 

6. अब <data:post.body/> को Search कीजिए और नीचे दिए गए Code से Replace कर दीजिए।

<!-- [Related post in the middle code by akhelppoint.in] -->
       
     <div expr:id='&quot;post1&quot; + data:post.id'/>
      <div class='related-simplify'>
         <b:if cond='data:post.labels'>
         <b:loop values='data:post.labels' var='label'>
         <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
               </b:if>
               </b:loop>
               </b:if>
               <h4>Also Read</h4>
               <script type='text/javascript'>
               removeRelatedDuplicates();
               printRelatedLabels();
            </script>
      </div>
	   <div class='ty-copy-container row' style='font-size:1px; opacity:0;'><a href='https://www.akhelppoint.in/' rel='dofollow' title='related post in the middle'>related post in the middle</a>
                    </div>
      <div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
      <script type='text/javascript'>
         var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
         var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
         var s=obj1.innerHTML;
         var t=s.substr(0,s.length/2);
         var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
         if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
<!-- [Related post in the middle code by akhelppoint.in] -->
       
     <div expr:id='&quot;post1&quot; + data:post.id'/>
      <div class='related-simplify'>
         <b:if cond='data:post.labels'>
         <b:loop values='data:post.labels' var='label'>
         <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
               </b:if>
               </b:loop>
               </b:if>
               <h4>Also Read</h4>
               <script type='text/javascript'>
               removeRelatedDuplicates();
               printRelatedLabels();
            </script>
      </div>
	   <div class='ty-copy-container row' style='font-size:1px; opacity:0;'><a href='https://www.akhelppoint.in/' rel='dofollow' title='related post in the middle'>related post in the middle</a>
                    </div>
      <div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
      <script type='text/javascript'>
         var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
         var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
         var s=obj1.innerHTML;
         var t=s.substr(0,s.length/2);
         var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
         if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

यदि आपके टेम्प्लेट में कुछ <data:post.body/> Code है, तो Warpped Code को सावधानी से बदलें।


7. अब Save Theme पर Click कर दीजिए।

अब आपके Blogger Template में Automatic Related Post को Article के Middle में Add हो चुका है। 

आप अपने Blog के किसी भी पोस्ट को Open कर के देख लीजिए।

Guide Video: How to Add Automatic Related Post in the Middle of an article on Blogger


 



Download Code Link here :

How to Add Countdown Timer on Download Button in Blogger or WordPress Post

How to Add Countdown Timer on Download Button in Blogger or WordPress Post

How to Add Countdown Timer on Download Button in Blogger or WordPress Post


हैलो दोस्तों! अगर यदि आप एक ब्लॉगर हैं और आपका ब्लॉग Blogger या Wordpress पर है जिसमे आप कुछ ऐसे Topic पर post लिखना चाहते हैं जिसमे आपको कोई Flie Download कराना हो तो आपको ये Post जरूर पढ़ना  चाहिए । 


How to Add Countdown Timer on Download Button in Blogger or WordPress Post


How to Add Countdown Timer Download Button in Blogger or WordPress Post


 इस पोस्ट मे मैं आपको बताऊंगा How to Add Countdown Timer on Download Button in Blogger or WordPress Post और ये भी बताऊंगा की आपको Countdown Timer on Download Button क्या है? File Downloading Post मे Download Timer Button क्यो Use करना चाहिए? और Countdown Timer on Download Button को अपने Blog के पोस्ट में Countdown Timer on Download Button कैसे Add कर करना है।  


 Countdown Timer on Download Button क्या है?


Countdown Timer on Download Button किसी Blog / Website मे किसी Code द्वारा Fix किए गए Time पर Show होने वाला Button है जो आपके blog पर आने वाले Visitor को उतने Time तक Wait कराता है जितना आप Timer Set कर के रखतें है । 


ये भी पढ़ें -


Countdown Timer on Download Button Add करने से क्या फायदा है?


अगर आप अपने ब्लॉग में कोई ऐसे टॉपिक पर Post लिख रहे हैं जिसमे आपको कोई File Downlaod करने का Link देना है तो आप वहाँ पर Countdown Timer on Download Button को Add करेंगे , इससे आपको ये फायदा होंगे की जब आपके Blog पर वैसे Visiter आते हैं जीने सिर्फ Flie Download करने से मतलब है तो उन्हे भी आपके द्वरा Set किए गए Timer तक Wait करना पड़ेगा तभी उसे File Download का Button Show होगा जिससे आपके Blog के Bounce Rate कम होगा और आपकी Site की Ranking बढ़ेगी और अगर आप Download Timer को किसी दूसरे Page पर Redirect कर के रखा है तो आपके Blog Ad की Inspression भी बढ़ेगा और आपका earning Increase होगी । 

    इसलिए Blog में Countdown Timer on Download Button add करना चाहिए , नहीं तो Bounce Rate Badhegi और आपका Blog के Ranking और Earning दोनों कम हो सकती है । 


Countdown Timer on Download Button Blogger or WordPress में कहाँ Add करें?


Countdown Timer on Download Button को अपने Blog के Post में Add करने से पहले ये Decide कर लीजिये की आपको Download Timer Button कहा पर Show कराना चाहते चाहते है आप चाहे तो उसी Post में Countdown Timer Download Button Show करा सकतें है या फिर किसी और Page/Website पर Redirect करा सकतें हैं अगर आप किसी और Page / Website पर Redirect करते हैं तो आपको उस Page/Website पर भी Ad के Inspression आएंगे जिससे आपका Earning बढ़ सकती है । इसलिए आपको किसी दूसरे Page में Countdown Timer on Download Button Add करना चाहिए । 


Countdown Timer on Download Button Blogger or WordPress में कैसे Add करें?


  1. Countdown Timer on Download Button Add करने के लिए आपको New Page Create करना है 
  2. Page को Html में Open करना है 
  3. अब नीचे दिये गए Code को Download कर लेना है और Notepad / Text View में Open करना है 
  4. Code को Copy कर लेना है और आपने जो Html में page Open किया है , उसमे Paste करना है 
  5. Adsense Code Here की जगह आप Adsense के Code Add करना है 
  6. Put Your sharable Link Here की जगह Download File का Url देना है, मतलब जहां पर File को Upload किया है उसका Download Url , (जैसे- Google Drive, Mediafire, Zippyshare इत्यादि । )
  7. ये Code में 15 Second का Timer Set है अगर आप इसे change करना चाहते है तो आप 15 की जगह अपने अनुसार change कर सकतें हैं ।
  8. अब इस Page का Title दे कर Save कर देना है 
  9. अब इस page के Url को Copy करना है और आपको वापस उस Post मे आना है और Download का एक Link बनाना है और उसमे इस Url को Link कर देना है 
  10. अब Save कर देना है 

अब आपके Blog के Post में Countdown Timer on Download Button Add हो चुका है । 


Countdown Timer on Download Button Code Download

  • Demo and Download


  • Conclusion:


    तो दोस्तो आपको समझ मे आ गया होगा की Countdown Timer on Download Button Blogger or WordPress में कैसे करते हैं ऊपर बताए ठीक से Follow करने पर भी कोई Problem आ रहा हो तो आप हमे comment कर सकते हैं ।

    उम्मीद करता हूँ आप लोगों को ये पोस्ट पसंद आया होगा और अगर आपके मन में कोई सवाल है या सुझाव है तो हमे Comment मे जरूर बताइएगा और हमारे Youtube Channel को भी Join कर लीजिये । 

Top 5 Awesome Design Blogger Label Widget Style

Top 5 Awesome Design Blogger Label Widget Style

Top 5 Awesome Design Blogger Label Widget Style for Blogspot

Blogger Label Widget Style: इस पोस्ट मे आपको Top 5 Awesome Design Blogger Label Widget Style मिलेगी और Blogger Label Widget Style को अपने Blogger Template मे कैसे Add करना है ये भी इस पोस्ट मे बताया गया है। अगर आपने Blogger पर Free में Blog बनाया है और अपने Blog के लिए कोई Blogger Template Install भी कर लिया है लेकिन उस Blogger Template ke Lebal Widget Style को Change करना चाहते हैं इस पोस्ट को ध्यान से पढ़ना होगा और समझना होगा तभी आप Blogger Label Widget Style Change कर सकते हैं अपने Blogger Site में , नहीं तो आपका Blogger Template खराब भी हो सकता है इसके लिए पहले आप अपने Blogger Template का Backup जरूर रख लें । 

Top 5 Awesome Design Blogger Label Widget Style
Top 5 Awesome Design Blogger Label Widget Style

Stylish Blogger Label Style Design Css Code

Blogger Lebal Widget क्या है ?

दोस्तों Blogger Lebal Widget ऐसा Widget है जो आपके ब्लॉग के Article/Post में Add किए गए सभी प्रकार के lebals को एक जगह पर Show कराता है जिससे आपके Blog पर आने वाले Visiters को मालूम होता है की आपने अपने blog पर किन-किन Topic/Category पर Article लिखा है । 


Blogger Template में Blogger Lebel Widget Style को Change कैसे करे?

अपने Blogger Site के Template में Blogger Label Widget Styles को Add करने से पहले ये सुनिश्चित कर ले की आपके blog में Label/Category Add है अगर नहीं है तो आप Design पहले Label Widget को Add कर लीजिये । 

Label Widget को Add करने के लिए ये step Follow कीजिये :-

  1. Open Blogger Dashboard
  2.   Layout Tab 
  3. Click on "Add a Gadget" then select "Label" Widget (Select Cloud/List Style)

Blogger Label Style Design


अगर आपने अपने Blog में Label Widget को Add कर लिया है तो उसे अच्छा सा Design देने के लिए नीचे 5 Awesome Design Blogger Label Widget Style दिया गया है इसमे से कोई भी Blogger Label Design को Select कीजिये । 

अब इसे अपने Blogger Template में Add करने के लिए आप ये Step को Follow कीजिये -

  1.  Blogger Dashboard को Open करें 
  2. Theme पर Click करके Edit Html पर Click करें 
  3. नीचे दिये हुये किसी भी Code को Copy करें और </head> के पहले paste कर दें । 
  4. अब Save कर दें । 

Blogger Label Floating Style Design 1


Blogger Label Style Design 1


Guide Video: How to Add Blogger Label Widget Style


Blogger Label Floating Style Design 1 CSS/JavaScript Code



<!-- [www.akhelppoint.in] -->
<style type='text/css'>
#sidebar-wrapper{margin:auto;max-width:400px;}
.widget-content.cloud-label-widget-content {display:inline-block;width:100%;}
.widget-content.cloud-label-widget-content {display:inline-block;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:10px;margin:10px 10px 5px 10px}
.label-count {white-space:nowrap;display:inline-block;}
#sidebar-wrapper .Label li{position:relative;background:#FFFEFC;color:#333;padding:0px;margin:5px;text-align:left;width:97%;transition:all .8s ease-out;text-transform:none;border:1px solid #fff;box-shadow:0px 0px 1px rgba(0,0,0,0.4);}
#sidebar-wrapper .Label li:hover {color:#0074D9;transition:all 0s ease-out;}
#sidebar-wrapper .Label li:before {content:&quot;&quot;;position:absolute;width:0;height:98%;background:#4fafe9;transition:all .8s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;transition:all 0s ease-out}
#sidebar-wrapper .Label li a{padding:0 0 0 10px;display:block;position:relative;line-height:35px;color:#787878;text-decoration:none;transition:all .8s ease-out}
#sidebar-wrapper .Label li a:before {font-family: fontawesome;content: &quot;\f07c&quot;;padding-right: 10px !important;}
#sidebar-wrapper .Label li a:hover {color:#fff;transition:all 0s ease-out}
#sidebar-wrapper .Label li span{float:right;height:98%;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#CF000F;}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#961126;}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}
#sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}
#sidebar-wrapper .label-size a{background:#fff;display:inline-block;color:#666;padding:5px 8px;font-weight:400;border:1px solid #ccc;transition:all .3s}
#sidebar-wrapper .label-count{backface-visibility:hidden;opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-5px;right:-10px!important;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:25px;height:22px;line-height:22px;border-radius:4px;text-align:center;z-index:1;transition:all .3s}
#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;right:-15px!important}
#sidebar-wrapper .label-size a:hover{color:#666;border-color:#4fafe9}
.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
.sidebar ul {
    list-style: none;
    margin: 0;
    padding: 5px 0;
}
</style>
<script type='text/javascript'>
 (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://use.fontawesome.com/e3eb25f65e.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script> 

Blogger Label Style Design 2


Blogger Label Style Design 1 CSS

Blogger Label Style Design 2 CSS Code

<!-- [www.akhelppoint.in] -->
<style type='text/css'>
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:1}.cloud-label-widget-content{text-align:left;padding:0}.label-count{white-space:nowrap;display:inline-block}#sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;border-radius:99em;transition:all .3s}#sidebar-wrapper .label-size a{position:relative;overflow:hidden;background:#e74c3c;color:#fff;display:inline-block;padding:4px 8px;font-weight:500;border-radius:3px}#sidebar-wrapper .label-count{display:inline-block;background:#f39c12;color:#fff;padding:2px 4px;border-radius:5px;font-size:11px;text-align:center;float:right;opacity:0;visibility:hidden;transition:all .3s}#Label1 ul li:hover .label-count{opacity:1;visibility:visible}#sidebar-wrapper .label-size a:hover{background:#f36253;color:#fff;box-shadow:0 2px 0.8rem -0.8rem rgba(0,0,0,0.8),0 0 0 1px rgba(0,0,0,0.05);transition-delay:0s;}.list-label-widget-content ul{column-count:2;column-gap:8px}.list-label-widget-content ul li{list-style:none;padding-bottom:5px;margin:0;padding-top:5px;border:0;font-weight:500}.list-label-widget-content ul li::before{content:&quot;\f292&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;margin-right:6px;color:#f39c12}.list-label-widget-content ul li:hover::before{content:&quot;\f0a4&quot;;color:#222;margin-right:6px}.list-label-widget-content ul li a{color:#222}.list-label-widget-content ul li a:hover{color:#222}.Night .list-label-widget-content ul li a:hover{color:#fff}
</style>  


Blogger Label Cloud Style Design 3 

Blogger Label Cloud Style Design 3 CSS Code


Blogger Label Cloud Style Design 3 CSS Code


<!-- [www.akhelppoint.in] -->
<style type='text/css'>
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
background:#0dd7b4;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#333333;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}</style>  

Blogger Label Cloud Style Design 4


Blogger Label Cloud Style Design 3


Blogger Label Cloud Style Design 3 CSS Code

<!-- [www.akhelppoint.in] -->
<style type='text/css'>
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border-radius:30px;
background:#FA0830;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
border-radius:30px;
background:#333333;
}
.label-count {
white-space:nowrap;
border-radius:30px;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}
</style>  

Blogger Label Cloud Style Design 5


Blogger Label Cloud Style Design 3 CSS Code


Blogger Label Cloud Style Design 5 CSS Code



<!-- [www.akhelppoint.in] -->
<style type='text/css'>
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border:5px dashed #000000;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
background:#FA0830;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
border:5px dashed #FA0830;
background:#000000;
}
.label-count {
white-space:nowrap;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}
</style> 

Where are Uploaded Images on Blogger Stored?

Where are Uploaded Images on Blogger Stored?

Where are Uploaded Images on Blogger Stored?


Hello Blogger Friends, Wherever you, I hope you are doing well. Do you want to know where the uploaded images are stored on your blogger site, so this time I am going to tell you all where are the uploaded images stored on the blogger site?

Where are Uploaded Images on Blogger Stored



Where are Uploaded Images on Blogger Stored?

To know where uploaded images are stored on your blogger First, make sure you are logged into your Google account in your browser.

Open the link below and use the same Gmail id as your blogger account to log in.


https://get.google.com/albumarchive/ 

Then a page like this will appear and select Photos from Blogger

Where are Uploaded Images on Blogger Stored?

Then it will bring up a row of Photo albums from Blogger from each blog that you create.

Where are Uploaded Images on Blogger Stored?


If you want to download photo albums from certain blogs, please click the button with the three-dot icon then click Download Album.

Where are Uploaded Images on Blogger Stored?


Please be careful, if you delete one of the photos that are in the photo album it will automatically delete the photos that are already in your blog post. Because the album serves as a place to store photo files that you previously uploaded on blogger.

 

Where are Uploaded Videos on Blogger Stored?


Then, what about where the uploaded video is stored? for videos here you can see through the Setting Menu >>  click the Videos from your blog Button.



Where are Uploaded Videos on Blogger Stored?




Conclusion:

Now you have learned Where are Uploaded Images on Blogger Stored, If you have any doubt regarding Blogger, you can ask me in the comment section or join our Telegram Channel


How to Add Progress Loading Bar in Blogger Website.

How to Add Progress Loading Bar in Blogger Website.

 How to Add Progress Loading Bar in Blogger Website.


Hey guys! Hope you are doing well. This topic actually not very important, but if your goal is to make the site look better and look beautiful, it's okay to use these tips. So let's know How to Add Progress Loading Scrollbar on Blogger.

How to Add Progress Loading Bar in Blogger Website.



How to Add Progress Scrollbar on Blogger Site
How to Add Progress Scrollbar on Blogger Site


What is a Progress Loading Bar?

As is the case with the progress bar when we copy and paste files on a computer or smartphone, during the copy-paste process it will usually display a progress bar of time it takes to copy the file from the copied folder to another folder. Similar to the Progress Scrollbar on Blogger, Which will Display a horizontal line on the blog page, When we scroll the page it will display a horizontal line and the length of the line will extend to where the page is scrolled.

How to Add Progress Loading Bar in Blogger Website.?

For those, of you who are interested in adding it, So you can follow these tips below.


  • Open Blogger dashboard
  • Click Theme Menu
  • Click on Edit HTML
  • Click in the Box and Search </body>
  • Add this code before </body>


<script type='text/javascript'>
//<![CDATA[
// Progress Scrollbar
$(document).ready(function(){var n=function(){return $(document).height()-$(window).height()},o=function(){return $(window).scrollTop()};if("max"in document.createElement("progress")){(r=$("progress")).attr({max:n()}),$(document).on("scroll",function(){r.attr({value:o()})}),$(window).resize(function(){r.attr({max:n(),value:o()})})}else{var e,t,r=$(".progress-bar"),i=n(),c=function(){r.css({width:(e=o(),t=e/i*100,t+="%")})};$(document).on("scroll",c),$(window).on("resize",function(){i=n(),c()})}});
//]]>
</script>

Next, add this code below the code <body>


<progress value='0' max='1'>
   <div class='progress-container'>
      <span class='progress-bar'></span>    
   </div>
</progress> 

Next add this code before </head>


<style type='text/css'>
/* Progress Scrollbar */
progress{position:fixed;left:0;top:0;width:100%;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#f39c12;z-index:1000}
progress::-webkit-progress-bar{background-color:transparent;z-index:10}
progress::-webkit-progress-value{background-color:#ff0065;z-index:10}
progress::-moz-progress-bar{background-color:#ff0065;z-index:10}
.progress-container{width:100%;background-color:transparent;position:fixed;top:0;left:0;height:3px;display:block;z-index:10}
.progress-bar{background-color:#ff0065;width:0%;display:block;height:inherit;z-index:10}
</style> 

Edit on the marked section to change the color, position, and height of the Progress Scrollbar.

Click the Save Theme button and you're done! To see the results can be checked on your blog.



Conclusion:

Now you have learned How to Add Progress Loading bar in Blogger. If you have any doubt regarding Blogger, you can ask me in the comment section or Join our Telegram Channel.