Header AD

Common Blogspot Design Problems And Possible Fixes


Picture this,  you wake up one morning, the weather's cool and you're sipping a hot cup of coffee or tea. You think to yourself , "Nothing could possibly go wrong". 

It suddenly occurs to you that you have to make a post on your blog. After making the post you discover lots of errors on your blog.

The blog posts you set to display 20 posts on your homepage are now displaying just 3, your blog link is messed up in social media and blog post images don't display on your posts on Facebook.

You're already imagining if your village people remembered you that morning while your direct blog competitors are like :


Well don't worry I've been there too. I'll teach you how to walk through the problems like a boss.. Literally


How You'll Be Feeling After This Post


So here are the most common Blogspot design issues and possible fixes.

#1. Number Of Blog Posts Suddenly Showing Less Than What You Set

This is the most common problem bloggers on Blogspot encounter and it's very frustrating and embarrassing. Visitors to your blog now see 2 or 3 posts on your homepage meanwhile the initial setting was about 15 or higher. Sometimes you may try changing the template but it doesn't still work. I think this error is probably caused when blogger has an issue interpreting some of your posts. Especially when you copy a post from other sites

There are 2 ways to fix this issue :

A. Find The Post That Caused The Error :

If you can remember the last posts you made before the template got disorganized carefully check through all of them by reverting them to drafts and republishing one after the other and refreshing your web page after you publish each one. You'll definitely find out the offending post.

B. Add A Jump Break Immediately After The Top Image

You can do this by editing your post from the blogger dashboard. Scan through the top menu you should see an icon that looks like a torn piece of paper -  that's the jump break.

Place your cursor below your image then tap on the icon. Repeat this for about 15 posts then refresh your blog page and see the results




#2.Blog Links Not Displaying Well On Social Media

This part is very technical, please if you aren't good in HTML avoid doing this without consulting an experienced  webmaster. I'm also available to help at an affordable cost.

Most social media pages make use of the Open Graph protocol which help them to retrieve data from a web page. Without the Open Graph protocol in place or if there are errors , social networks may not be able to access your posts properly.

By Default, Most Blogger Templates come With Open Graph Tags but some templates have faulty open graph tags. To know if your site has issues, use the Facebook URL Debug Tool to analyze it. If you see more than 2 errors after the analysis then you certainly need to work on your Blog's Open Graph Tags.

To access the URL debugger simply google  up - Facebook URL Debug Tool. You'll need to sign in to your Facebook account to use this. To get the best results, open your blog on one tab and the URL Debug Tool on another tab. After editing your Open Graph Tags, save your template, wait for about 5 minutes then tap on scrape on the debug tool page to see the results.

Here's the format of open graph tags -

Replace with yours - the things you should edit are highlighted in red. The OG tags are highlighted in green. Make sure you modify everything in red to yours excluding the symbols (apostrophe).. Once you do that you're good to go.

Note : Here's why I said you need an expert to do this if you're not too good in HTML. See the screenshot of My blog after I messed up an Open Graph Tag. Luckily I keep backups so I restored it back immediately. You might not be so lucky.


Code For Open Graph Tags

<!-- [ Social Media Meta Tag ] -->
<!-- BEGIN Open Graph tags -->
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta content='NaijaTechGuy is one of the Top Tech Blogs In West Africa ,Providing Information on The latest tech trends around the world and solutions to ICT problems' property='og:description'/>
</b:if>
<meta content='999748960046625' property='fb:app_id'/>
<meta content='100004969388978' property='fb:admins'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta content='http://www.naijatechguy.com/p/about-me.html' property='article:author'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://newsmsme.com/wp-content/uploads/2016/03/smartphones-2015-480px.png' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalHomepageUrl' property='og:url'/>
<meta content='blog' property='og:type'/>
<meta content='http://newsmsme.com/wp-content/uploads/2016/03/smartphones-2015-480px.png' property='og:image'/>
</b:if>
<meta content='Nigeria' name='geo.placename'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='@naijatechguy' name='twitter:site'/>
    <meta content='@naijatechguy' name='twitter:creator'/>  
<!-- END Open Graph Tags -->


#3 Images Showing Too Large On Home Page

This is usually caused when you copy an image from another site and place it as the first image of your blog post  The solution to this is simple, just edit the post,  save the image from the page you copied the image from then re-upload the image to your post. You could just simply reduce the size of the image to medium.


#4 Blog Loading Slowly

There are a couple of things that could slow down your blog load time. Even Google understands that, so that's why Adsense ads are shown in the Async format so it won't affect load time on your blog.

Remove unnecessary widgets and Javascript codes, then test your site speed with tools like Pingdom or Google Site Speed.


Summary

There are a whole lot of issues with blog design on Blogspot but I think I've highlighted the most common ones.  If you have questions kindly use the comment box. I'd also like to know other problems you're facing so I can posts a possible solution.

Happy Blogging



You Can Also Visit The Forum or Listen To Podcasts


Common Blogspot Design Problems And Possible Fixes Common Blogspot Design Problems And Possible Fixes Reviewed by Michael Ajah on Monday, January 16, 2017 Rating: 5

Post AD