.png "How to Fix Image Thumbnail Not Appearing Bug in Blogger (Blogger Thumbnail Fix)") |
| How to Fix Image Thumbnail Not Appearing Bug in Blogger (Blogger Thumbnail Fix) |
Hello everyone, on this occasion I will share how to deal with blogger / blogspot thumbnail images that do not appear due to blocks from certain providers.
Blogger image urls with the prefix 1.bp.blogspot.com are blocked by certain providers, especially the 3 / 3 provider which I have experienced, causing the thumbnail image on our blog to be blank or not appear.
for newly created blogs it will have no effect because for hosting of current blogger images like this blogger.googleusercontent.com so it only affects blogs that have been created a long time ago which still use image hosting like 1.bp.blogspot.com only.
because my blog has been created since 2020 so some of the pictures on this blog still use 1.bp.blogspot.com actually if our posts don't have much, just change them manually to 2.bp.blogspot.com but if our posts do exist many times we can replace it with javascript to change 1.bp.blogspot.com to 2.bp.blogspot.com automatically.
How to Overcome Thumbnail Images Not Appearing
copy the javascript below and place it above the code </body> or <!--</body>--></body> If so, don't forget to click Save.
<script>
/*<![CDATA[*/
setInterval(function() {
var imgBp = document.getElementsByTagName('img');
for (var i = 0; i < imgBp.length; i++) {
imgBp[i].src = imgBp[i].src.replace('1.bp.blogspot.com', '2.bp.blogspot.com');
}
}, 1000);
/*]]>*/</script>the code above I use setInterval to keep repeating the code in 1 second so if your blog uses lazyload it will still work too, so I suggest not to remove setInterval in the code above.
for users of the Blogger Store template on the related post thumbnail as well so that it can appear, please follow the instructions below.
<!-- look for code like this -->
<script>/*<![CDATA[*/ /*! Related Posts by Irfan shah dte.web.id */ var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h3 class='title'>Related Posts</h3>",widgetStyle:1,homePage:"http://www.Blogger-store.com",numPosts:7,summaryLength:320,titleLength:"auto",thumbnailSize:200,noImage:"data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",containerId:"related-posts",newTabLink:false,moreText:"Read more",callBack:function(){}}; for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.async="async";b.rel="preload";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="s-'+A+' scrlH">',b=d.newTabLink?' target="_blank"':"",y=d.moreText,v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t; r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+(\-c)?/, "/s"+d.thumbnailSize).replace(/\=s[0-9]+(\-c)?/, "=s"+d.thumbnailSize):d.noImage; month=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];date=x[q].published.$t.substring(0,10); Y=date.substring(0, 4); m=date.substring(5, 7); D=date.substring(8, 10); M=month[parseInt(m-1)]; u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"} if(A==2){c+='<li><div class="i"><div class="pThmb"><a class="thmb" aria-label="'+w+'" href="'+v+'" title="'+t+'"><div class="lazy" data-style="background-image: url('+r+')"></div></a></div><div class="iTtl aTtl"><a href="'+v+'" '+b+'>'+w+'</a></div></div></li>'} else{if(A==3){c+='<li><div class="i"><div class="pThmb"><a class="thmb" aria-label="'+w+'" href="'+v+'" title="'+t+'"><div class="lazy" data-style="background-image: url('+r+')"></div></a></div><div class="iTtl aTtl"><a href="'+v+'" '+b+' data-date="'+M+' '+D+', '+Y+'" data-text="'+y+'">'+w+'</a></div></div></li>'} else{if(A==4){c+='<li><div class="i"><div class="pThmb"><a class="thmb" aria-label="'+w+'" href="'+v+'" title="'+t+'"><div class="lazy" data-style="background-image: url('+r+')"></div></a></div><div class="iTtl aTtl"><a href="'+v+'" '+b+'>'+w+'</a></div><div class="pSnpt">'+u+'</div><div class="pInf pSml" data-date="'+M+' '+D+', '+Y+'"></div></div></li>'} else{c+='<li><div class="iF"><div class="pThmb"><a class="thmb" aria-label="'+w+'" href="'+v+'" title="'+t+'"><div class="lazy" data-style="background-image: url('+r+')"></div></a></div><div class="pCtnt"><div class="pInr"><div class="iTtl aTtl"><a href="'+v+'" '+b+'>'+w+'</a></div><div class="pSnpt">'+u+'</div><div class="pInf pSml" data-date="'+M+' '+D+', '+Y+'"></div></div></div></div></li>'} }}}s.innerHTML=c+="</ul>";d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]); /*]]>*/</script>
<!-- change to -->
<script>/*<![CDATA[*/ /*! Related Posts by Irfan shah dte.web.id */ var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h3 class='title'>Related Posts</h3>",widgetStyle:1,homePage:"https://www.miusm-tech.com",numPosts:7,summaryLength:320,titleLength:"auto",thumbnailSize:200,noImage:"data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",containerId:"related-posts",newTabLink:false,moreText:"Read more",callBack:function(){}}; for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.async="async";b.rel="preload";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="s-'+A+' scrlH">',b=d.newTabLink?' target="_blank"':"",y=d.moreText,v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t; r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+(\-c)?/, "/s"+d.thumbnailSize).replace(/\=s[0-9]+(\-c)?/, "=s"+d.thumbnailSize).replace('1.bp.blogspot.com' , '2.bp.blogspot.com'):d.noImage; month=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];date=x[q].published.$t.substring(0,10); Y=date.substring(0, 4); m=date.substring(5, 7); D=date.substring(8, 10); M=month[parseInt(m-1)]; u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"} if(A==2){c+='<li><div class="i"><div class="pThmb"><a class="thmb" aria-label="'+w+'" href="'+v+'" title="'+t+'"><div class="lazy" data-style="background-image: url('+r+')"></div></a></div><div class="iTtl aTtl"><a href="'+v+'" '+b+'>'+w+'</a></div></div></li>'} else{if(A==3){c+='<li><div class="i"><div class="pThmb"><a class="thmb" aria-label="'+w+'" href="'+v+'" title="'+t+'"><div class="lazy" data-style="background-image: url('+r+')"></div></a></div><div class="iTtl aTtl"><a href="'+v+'" '+b+' data-date="'+M+' '+D+', '+Y+'" data-text="'+y+'">'+w+'</a></div></div></li>'} else{if(A==4){c+='<li><div class="i"><div class="pThmb"><a class="thmb" aria-label="'+w+'" href="'+v+'" title="'+t+'"><div class="lazy" data-style="background-image: url('+r+')"></div></a></div><div class="iTtl aTtl"><a href="'+v+'" '+b+'>'+w+'</a></div><div class="pSnpt">'+u+'</div><div class="pInf pSml" data-date="'+M+' '+D+', '+Y+'"></div></div></li>'} else{c+='<li><div class="iF"><div class="pThmb"><a class="thmb" aria-label="'+w+'" href="'+v+'" title="'+t+'"><div class="lazy" data-style="background-image: url('+r+')"></div></a></div><div class="pCtnt"><div class="pInr"><div class="iTtl aTtl"><a href="'+v+'" '+b+'>'+w+'</a></div><div class="pSnpt">'+u+'</div><div class="pInf pSml" data-date="'+M+' '+D+', '+Y+'"></div></div></div></div></li>'} }}}s.innerHTML=c+="</ul>";d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]); /*]]>*/</script>ok, so that 's how to deal with the blogger thumbnail image not appearing , which I can share this time, hopefully this is useful and thank you for visiting.
Thanks for reading: How to Fix Image Thumbnail Not Appearing Bug in Blogger (Blogger Thumbnail Fix), Sorry, my English is bad:)
