Recently more and more people are experiencing problems with poor social media plugin UI. Twitter Follow button despite being mobile responsive messes up the site design by adding a long Horizontal Scrollbar to the bottom of the page temporarily for a few seconds and then it disappears. The Follow button is forcing the entire webpage to scroll horizontally. You might have seen a long green scrollbar at the bottom of our blog too. Upon debugging the site I found that the scrollbar was actually caused by the Twitter hub.html frame that renders within our site.
According to its developer benward the positioning of the hub frame is purely vertical (negatively positioned above the top of the page) however for some reasons we found that the webpage is forced to change its width dimensions. I have a simple fix for this bug that will prevent the Hub Iframe from exceeding a specified Parent container width size.
Prevent Hub Iframe From Causing a Horizontal Scrollbar
I am sharing the steps for blogspot blogs. The method described below is a standard procedure that applies to all platforms.
1 Go To Blogger > Template > Backup your Template
2 Click Edit HTML
3 Paste the following Style just above ]]></b:skin>
Simple Enclose your twitter Follow button Code inside the following Parent container
.twitterButtonFixmbt {position:absolute; overflow:hidden; max-width:300px;}
4 Save your template
Now enclose your twitter button code inside these Div tags
<div class="twitterButtonFixmbt ">
ADD Twitter Follow button code or Tweet button code here
</div>
That's it!
How it works?
I have enforced a maximum width of 300px and you can surely change it as per your container width. The position absolute and overflow properties along with max-width will make sure the Iframe doesn't exceed the prescribed Parent Dimensions.
Let me know if you needed any help. Peace and blessings buddies :)
You are quite aware with HTML hr tag that defines a thematic break in a HTML page that can be a shift of topic or a section division. The hr element is used to separate content in an HTML page. While writing blog posts, it makes a lot of sense to format your content well and present long lengthy content in sections rather in a single plain text, in such case CSS3 Dividers help a lot and to make it even more effective, we have included a 
Most Blogger blogs are poorly optimized when it comes to Headline tags which includes H1, H2 and H3 either because newbie publishers are implementing wrong SEO techniques by reading unauthentic articles across the web or may be because they are using a custom template which may look quite attractive when it comes to User interface (UI) but they are the worst when it comes to Optimized XHTML Structure. In our previous tutorial we share how you can assign H1 Tag to Blog Title on homepage, search pages and Archives, in todays tutorial we will discuss how to correctly optimize Post titles and Static Page titles in blogspot by assigning H1 Tag to a title on Item Page and H2 tags on Index and Archive pages. We will also empower the title Structure with the correct Schema Markup.
