Text background appearing white when published post - Fix it

There are thousands of people out there using blogger templates with black post background and post editor we have got at blogger uses inline CSS style for applying styles to text or any elements, let's try to find why these makes the text background white sometimes which usually looks like a white bar.
That's a problem to many people, often to those who use post background color other than white. And it doesn't mean that having black or other color background causes this, but the problem list is multiple and solutions are also different.
So read through the whole post to get it fixed correctly, the reasons of this problem has been divided into different section with their solution, so far i have found only two reasons of this problem, but i am sure that there are not more.

Copying text from other sites or Word Processing software

This is one of the most common issue, many Blogger don't understand what it can cause when copying from other site or a word processing application like MS Word. The cause of the white background is usually because when you copy the text from other website page, the background format of that webpage will be also copied along with the text and will be applied when you paste it in Blogger Post editor or any WYSIWYG editor.It's the same when you copy text from a rich text editor like MS Word or Wordpad, but along with the display format it also copies the excessive coding of the MS Word text, which is not compatible with ideal web page.
Fixing it : There's only one way to stop this, suppose if you have some text on other site that you need to post it on your blog, when you copy the text, it also carries the customization with it. To prevent it from being carried you have to first copy the Text from the website or MS Word. Now open a plain text editor, Notepad is a common one, paste the text into it now copy the text from Notepad (plain text editor) and then paste the Text into Blogger post editor, that will prevent the system from carrying the customization.
It's like Copy from Website - Paste into Notepad - Copy from Notepad - Paste into Blogger Post Editor. Notepad here works like a filter, which turns the rich text into plain text.

Putting white background on text in Post Editor

This is much a confusion, when editing the post in the Post Editor you are distracted by the Post editor interface and you assume that the blog post background is white as in the post editor. When in the post editor you get lots of customization options in which 'text background color' is one. Imagine, you want to change the text color and instead of selecting the text color option from customization bar you select the text background option by mistake and then what you see is background color on your text, then to remove the background color you select white from the text background option. And that's where you make the mistake, you didn't remember that you had black background on post in your blog and the text are going to be white but you have set the text background in the post editor to white !
So, now you may have understand what's that causing it, i am also going to list the fixes for it so you can make it like the way it should be.


Fixing it : The text or any element in the post editor is styled with inline CSS styles, so you have to delete the inline CSS styles which has white background, you can easily detect which text is having white background. You can find it by switching to HTML mode and there you will see the HTML of your post body. For example this is the HTML
<span style="background-color: white;">I AM A BLOGGER</span>
You can clearly see the inline CSS (highlighted in yellow), removing it will fix the white background problem or so called white bar problem.
Preventing it : This usually happens when you mistakenly give select the text background color instead of the text color and to revert the text background color to it's previous state you select the white from the option, but that's not clean at all. You must use CTRL+Z or the Undo option on the customization bar in Blogger Post Editor.
Hope you will keep this mind and next time you have the solution. Best of luck with Blogging. 

Change the position of post area in Blogger Dynamic Views

Blogger Dynamic views is completely different than a custom Blog. It's named the Dynamic Views because it is Dynamic. The post area in Classic mode of Dynamic Views is in center by default, but if you want it to be on the right or left or just not in the center then you are at the right place. 

We can use the 'float' property of CSS to achieve it and it's very simple to make any other changes to the template. The post area in Dynamic views is in center, as you can see in the picture. 

Before

After

You can see in the picture that the post area is now aligned to left instead of center. You can also do it with the help of small CSS that can be applied on Dynamic Views template with ease.

ol.items
{float:left;}

This small CSS will do it. You may change the 'left' in value to 'right', if you want it to be on the right side.Easy isn't it ?

To know how to add css, check this tutorial.

How to create 'Next' 'Previous' buttons like DamnLOL in Blogger

If you have a photography blog, then you have always wanted to have Next and Older post buttons just like the buttons in DamnLOL. We are just going to teach you how to make buttons like that.
It can be done with CSS, copy and pasting it is easy, but writing it took about 30 mins and lot of hardwork. This tutorial will only work for Blogger, if you try this in Wordpress then it's possible that it will not work but you can make it work by putting the right selectors at the right place.

I thought of writing this tutorial because the design at DamnLOL next and previous post navigation is great and can increase your page views and also visitors time on page.

Demo

We have done it by styling the classic Next and Older post button, but to make this CSS work well, you have to remove any customization you made to the Next or Previous links, the navigation links should be classic as given by Blogger. It works best with the blog's having no extra customization to next and previous links.

Let's play with the CSS.

<style type='text/css'>
/* By Deepak Kamat 
   http://stramaxon.blogspot.com 
*/
.blog-pager-newer-link,.blog-pager-older-link
{
    position:absolute;
    top:1px;
    z-index:999;
    color:transparent !important;
    width:55px;
    height:66px;
    background-color:red;
}        
    
.blog-pager-newer-link {
    position:absolute;
    right:-27px; /* Change this value to change the position of newer post link */ 
    top:50px; /* Change the position from top */
    background:url('http://www.damnlol.com/img/buttons.png');
    background-position:55px 0px; 
    background-color:transparent !important;   
}
.blog-pager-newer-link:active {
    background:url('http://www.damnlol.com/img/buttons.png');
    background-position:55px 67px;     
}

.blog-pager-older-link {
    position:absolute;
    left:-67px; /* Change this value to change the position of older post link */  
    top:50px; /* Change the position from top */
    background:url('http://www.damnlol.com/img/buttons.png');
    background-color:transparent !important;
    
} 
.blog-pager-older-link:active {
    background:url('http://www.damnlol.com/img/buttons.png');
    background-position:0px 67px;    
}
</style>

To add this CSS, you don't have to add it by going to Add CSS in the Template Designer. If you want to paste it there, then remove the <style type='text/css'> from top and remove </style> from bottom, then it will be compatible with the Add CSS option in template designer.
Or
You can paste the CSS with the <style> tag in Template directly by going to Blogger Dashboard | Template | Edit HTML | Find </head> in the template and paste the whole CSS with <style> tag above </head>
Note : Just Copying and pasting the CSS will not work on your blog correctly, you have to make changes to it's position. You need to define where it should be in the right or left, to fit with your blog.
See line 18 and 31, you have to change it's values to fit with your site.

Want those designs on Post Pages only?

If you don't want this design on home page then you have to use the HTML version of CSS, which you are supposed to paste it above </head> in your template.

For it to only render on Post page you have to put Blogger Conditional, it will look like this.

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/* By Deepak Kamat 
   http://stramaxon.blogspot.com 
*/
.blog-pager-newer-link,.blog-pager-older-link
{
    position:absolute;
    top:1px;
    z-index:999;
    color:transparent !important;
    width:55px;
    height:66px;
    background-color:red;
}        
    
.blog-pager-newer-link {
    position:absolute;
    right:-27px; /* Change this value to change the position of newer post link */ 
    top:50px; /* Change the position from top */
    background:url('http://www.damnlol.com/img/buttons.png');
    background-position:55px 0px; 
    background-color:transparent !important;   
}
.blog-pager-newer-link:active {
    background:url('http://www.damnlol.com/img/buttons.png');
    background-position:55px 67px;     
}

.blog-pager-older-link {
    position:absolute;
    left:-67px; /* Change this value to change the position of older post link */  
    top:50px; /* Change the position from top */
    background:url('http://www.damnlol.com/img/buttons.png');
    background-color:transparent !important;
    
} 
.blog-pager-older-link:active {
    background:url('http://www.damnlol.com/img/buttons.png');
    background-position:0px 67px;    
}
</style>
</b:if>

To add it go to your Blogger Dashboard > Template > Edit HTML > Proceed > Use CTRL+F to find </head> and paste this Code above </head> and Save Template. That's it, now you have the DamnLOL like navigation links on your blog too !!

If are not able to position the buttons at the right place, then leave comment with your blog address and i will check it and give you the correct position CSS.

Subscribe to our blog for more updates and do comment here if you found this helpful.

Earnings Tab Not Enabled for my Blogger Blog

There are numerous posts in the Blogger Help Forum about the disappearance of Earnings tab in the Blogger Dashboard. But it's not an error from the Blogger system, there's a reason behind it.
It's obvious to get worried when things are different from what it looks in general. The 'Earning' tab is basically in Blogger to help AdSense publisher connect or apply AdSense for their Blogspot blog. It just saves time and you can view your earnings up to date with the help of the Earnings tabs, it's for ease.

People new to blogs are unfamiliar with how Blogger and AdSense works, they can't usually differentiate between them and that is what creates the confusion. Blogger and AdSense are two different products of Google, AdSense has been integrated into Blogger for blogger users to apply for an AdSense account directly from their Blogger Dashboard and not only create an account but also check the earnings and stats.

Why it's showing

Now you know that AdSense(which is the main component of the Earnings tab) and Blogger is different and their policies and terms are different too. The main reason as told by the Blogger support is that, if your language is not supported by AdSense then the Earnings tab won't be enabled in your Blogger Blogs Dashboard.

You can check the Blogger Help guide 'Earnings tab' section to know more about it's terms and conditions
http://support.google.com/blogger/bin/answer.py?hl=en&answer=1269077
Or
Check the languages supported by AdSense currently
http://support.google.com/adsense/bin/answer.py?hl=en&answer=9727    

No one is reading my blog, should i stop posting ?

Blogging is not a game, it's competition not between two, hundred or thousand people, you have to compete with Millions of bloggers having the same topics around the world. People who are new to blogging don't know what's the key to form your own audience.

Every new bloggers have big expectation with their writings and the main reason most of the people start blogging is money via their posts. But they are not familiar with SEO, search engine is where you are supposed to get 99% of organic traffic.

Most of them blogs once or twice a week and then forget it. Think if you are a reader on a blog and after some weeks you see that the blog is not updated or the blogger has stopped posting, then would you like to stay on the blog ?

Even if you are getting 1 visitor in the whole day, then don't just give up because if you are getting 1 reader after posting one post, then if you keep posting you can make your audience larger and will get thousands of readers for your blog in a month or two.

It's like, if you are expecting visitors then visitors might also have expectations from you, they want to read post on topics they enjoy reading. If any blog have good resources of Web designing i spend hours reading it and that's how you can attract your users. Choose your topic, and once you started don't make gap between your posts. Keep consistency and that's what Google or any search engine sees when ranking the search results.

Never hesitate to share your views and ideas of your field with your readers. People come to your blog to read and if you keep your blog full of content then your visitors or readers might stay on your blog for hours.

This tells you the importance of consistency, even if you aren't getting visitors keep posting and don't worry about visitors, once you have genuine and useful content on your blog you will see the increasing number of your readers and visitors. 

Website/Blog Being redirect to fileave(dot)com or pagesintxt(dot)com - Fix it

This is a very annoying problem, but this happened to lots of users, when they tried to open their blog, they were redirected to a weird and unexpected site, in some cases it was either a domain which consist a name 'Fileave' or 'Pageintxt'.
This is not a referring spam, but the problem caused by JavaScript tags you added from other sources, in most cases i have seen that people who added custom cursors were effected, it's not because that cursor was corrupted, but people were using JavaScript hosted on fileave (a file sharing service) by some user named 'carnine9', as i can see in the JavaScripts.


Maybe they offered you to add cursors and the files were hosted on fileave for example this is one of the file hosted on Fileave by the user carnine9

http://carnine9.fileave.com/CursorRed.js
At end you can see CursorRed.js, the full url is the link to JavaScript file that was hosted on Fileave, but after it was deleted, there was no CursorRed.js on Fileave and that's why it's redirecting you to Fileave.com.

There are more other JavaScript files which were hosted on Fileave and it got delete somehow. Not only cursor, but if you are hosting JavaScript files on a file sharing service it will end up with like this. JavaScripts file should only be hosted on Paid Hosting services offering CPanel or if they don't find the file on their file sharing site (Fileave) they will just redirect the blog to the site.

Overall you may have understood what's the main problem, i have taken one case as an example to show you how it happens so you better understand what should you do when this happens.

How do i fix it ?

Here i will list the steps to fix it on Blogger, but if you are on other platform such as WodPress etc. you may also have to delete the script tag from your template, the only thing that will be different is the procedure edit your main HTML. 

If you are on Blogger, follow these steps to access your Template HTML, we can't edit the HTML by going to Blogger Dashboard | Template, because it will even redirect you to the unexpected site, because in the new interface, your blog is shown in a small box when you get into Dashboard | Template you can see it and then the site is loaded in the box it redirects you to the site.

So, how will we get into editing the Template ? Because the JavaScript code is in the template and the only way to remove it is editing the Template.

Don't worry, we have the solution. Please follow these steps to get into the Edit Template HTML :

1. First you need you blogID, which you can get by going to your Blogger Dashboard | Overview tab, you can select any tab other than Template
2. Once you are in the Overview tab, check the URL in your browser's address bar, for me it's
   http://www.blogger.com/blogger.g?blogID=7325178131968982824#overview
3. Here you can see the blogID=7325178131968982824, the number is your blogID, which you will need in the next procedure. So the blogID is 7325178131968982824

Now when you got your blog id, follow these steps :

1. Replace the blogID in this URL with your's and hit enter in the address bar
   http://www.blogger.com/html?blogID=7325178131968982824#template
2. Now you will see your Template code in Old Blogger Interface
3. Use CTRL+F or F3 and search for the domain you are redirected as keyword, for instance my blog is being redirect to fileave(dot)com, the i am supposed to enter 'Fileave' in the search.
4. Once you find the <script> tag containing the domain address where the blog is being redirect, delete it and Save Template. The script tag might look like this
   

   <script src="http://carnine9.fileave.com/CursorRed.js" type="text/javascript"></script>

Now open your blog and see if it's fixed or not. Doing this correctly will stop the redirection but if it don't seem to be fixed then do comment with your blog address and explain the issue with detail. Also try posting on Blogger Help Forum.

Keep gadgets visible or opened in Dynamic Views

Don't you think visitors don't like gadgets being hidden in the side, how they would ever know that there's something on right side of page. Dynamic Views hover effects are great but some people don't like hidden stuffs at all. I will show you how to keep the gadget's in view even if it's not being hovered.  

Before

After

You can see the effect in the above picture, the gadgets block will always be visible to any visitors. There's no need to hover over them to see all the gadgets. This increases the number of people using your gadgets, as seen on Dynamic Views, people don't make use of the gadgets.

We will make the gadget static with a single line of CSS. Follow these steps.
Go to Blogger Dashboard -> Template -> Customize -> Advanced -> Add CSS -> Paste the CSS in the custom CSS box and press enter after the last line. Preview it once, if you are okay with it then Apply to Blog.

#gadget-dock
{right:0px !important;}

Hope that will work well for your Dynamic views template. Do subscribe for more updates.

Advanced Feedburner Subscription gadget for Blogger

Previously i posted a tutorial on adding a shiny Feedburner subscription widget. This widget is the 2nd version of that subscription gadget. This time it's very classic and looks clean. 

This subscription widget is one of the best Blogger Gadget i have designed, the work of this gadget is simple but the looks it has got with CSS3 makes it professional.

Demo

Activate Email Subscription for your Feed

First of all you have to enable Email subscription for your Feed profile by going on  http://feedburner.google.com/, now click on your Feed name. You will see Publicize tab, click on it and one left there will be 'Email Subscriptions' and if you don't have it active you will see 'Activate' button. Just click on it.

But be there, you will need the code you get after you 'Activate' actually you only need the name for your Feed. Your code would look like this.

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Stramaxon', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>Enter your email address:</p>
<p><input type="text" style="width:140px" name="email"/>
</p>
<input type="hidden" value="Stramaxon" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" />
<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a>
</p>
</form>

On first line you can see this http://feedburner.google.com/fb/a/mailverify?uri=Stramaxon , you can see i have highlighted the word after = in the address, 'Stramaxon' it's the name of my feed. You will also need your feedname. So copy it on a text editor for quick use.

The HTML 

For the subscription gadget, HTML is the most important part. The HTML code which you will need is as follows.

<div class='subscribe-stx'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='frm-stx-btm' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Stramaxon&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<p id='email-ui'>Subscribe with Email for updates</p>
<div class='inl-9005'>
<p>
<input class='nam-subeml' name='email' style='width:140px' type='text'/>
</p>
<input id='ui015424' name='uri' type='hidden' value='Stramaxon'/>
<input id='ui03994' name='loc' type='hidden' value='en_US'/>
<input id='ui63494' type='submit' value='Subscribe'/>
</div>
<p id='ui43524'>Get updates from <a href='http://feeds.feedburner.com/Stramaxon' target='_blank'>YOUR_BLOG_NAME</a></p>
<div class='attr-stx'>
<a href='http://stramaxon.blogspot.com/2012/06/advanced-feedburner-subscription-gadget.html' target='blank'>Get this Gadget</a>
</div> 
</form>
</div>

See these edits you have to make

Line 3 : Line 2 is little lengthy, so you have to scroll to side. In the last section, remember we took a the feed name, in my case it was 'Stramaxon'. You can see this URL in line 2  http://feedburner.google.com/fb/a/mailverify?uri=Stramaxon   You just need to replace the uri with your feed name, check the 'Activate Email Subscription for your Feed' section to know what's your feed name. 

Line 8 : You need to do the same changes, in the Value field just put your feed name.
<input id='ui015424' name='uri' type='hidden' value='Stramaxon'/>  

Line 12 : Again the same, just have to replace 'Stramaxon' with your feed name and replace YOUR_BLOG_NAME with your Blog name, you can write any thing there.
<p id='ui43524'>Get updates from <a href='http://feeds.feedburner.com/Stramaxon' target='_blank'>YOUR_BLOG_NAME</a></p>

You just need to make these three changes and the HTML is ready to be applied on your Template.

Where to add the HTML : After you have your HTML ready, put it on a plain text editor such as Notepad.

1. Go to your Blogger Dashboard | Template
2. Click on Edit HTML | Proceed (not available if you are using Dynamic Views)
3. Check mark on 'Expand Widget Template' 
4. Use CTRL+F or F3 to open default on-page search in your Browser
5. You need to find the following code <div class="post-footer"> 
6. And paste the subscription box HTML code above <div class="post-footer">, after you place the code hit Save.     

That's the part with HTML, check any of your Post page and see if the subscription box is appearing or not.

Don't worry if it's not styled, we still have to play with the CSS

Show only on Post Page

You may only want this subscribe box to be shown on the index page i.e the Post page. The HTML above will render the subscribe buttons on all types of page but wrapping the subscribe box HTML around Blogger conditional tag you can tell the server to load it only while the page is a Post Page.

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
//HTML CODE HERE
</b:if>

The CSS 

The CSS is the main stuff that makes the gadget looks so professional and makes it an eye candy. But writing this CSS took me about 2 minutes.
To add this CSS go to Blogger Dashboard -> Template -> Customize -> Advanced -> Add CSS -> Paste the CSS in the custom CSS box, press enter after the last line and hit Apply to Blog.

Here's the Full CSS we will use to design the subscription box.

.frm-stx-btm 
{
    
    border:1px solid gainsboro ;
    padding-left:10px;
    border-left:25px solid #62C7FF;
    background:linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 720px 70px;
    background:-webkit-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 720px 70px;
    background:-ms-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 720px 70px;
    background:-moz-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 720px 70px;
    background:-o-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 720px 70px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;    
}


.frm-stx-btm:hover
{
    background:-webkit-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 520px 20px;
    background:-moz-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 520px 20px;
    background:-ms-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 520px 20px;
    background:-o-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 520px 20px;
}   

.frm-stx-btm ::selection
{
    background:#3F6083;
    color:white;
} 

.nam-subeml
{
    display:inline;
    border:1px solid lightgrey;
    width:300px !important;
    height:30px;
    padding-left:10px !important;
    font-size:25px;
    color:grey;
    font-family:Arial, Helvetica, sans-serif;
    padding-bottom:5px;
    padding-top:2px;
    
}

.nam-subeml:focus
{
color:black;
}

.inl-9005 p 
{display:inline !important;}

#ui63494
{
    width:100px;
    height:38px;
    top:-2px;
    position:relative;
    border:1px solid darkblue;
    font-family:verdana;
    color:white;
    background:-webkit-linear-gradient(45deg,#5FA3FA,#5494E6);
    background:-moz-linear-gradient(45deg,#5FA3FA,#5494E6);
    background:-ms-linear-gradient(45deg,#5FA3FA,#5494E6);
    background:-o-linear-gradient(45deg,#5FA3FA,#5494E6);
    font-weight:bold;
    font-size:14px;
}

#email-ui
{
    font-size:20px;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    margin-bottom:10px;
    word-spacing:2px;
    letter-spacing:1px;
}
.attr-stx
{
    display:block !important;
    visibility:visible !important;
    text-align:right;
    padding:10px;
    font-family:'tahoma';
    font-size:14px;
}    
.attr-stx a
{ 
    display:inline-block !important;
    visibility:visible !important;
    text-decoration:none;
    border-bottom:1px dotted grey;
} 
.attr-stx a:hover
{
    display:inline-block !important;
    visibility:visible !important;
    text-decoration:none;
    border-bottom:1px dotted grey;
    background-color:aliceblue;
} 

Copy and add this CSS to your Blog. Now check your blog page (should be a post page). If you did it all correct then you will see the subscription box clear and shiny.

This can be used on websites or other blogging platform also, just remember that you have to place the HTML and CSS at the right place for it to display correctly.  

Sidebar shifted to bottom of Blog in Blogger - Fix it

Sometimes errors in Bloggers are frustrating, especially when it's with the look of the blog. No one wants their blog to look cluttered. Sidebar shifting to bottom of the page is one of the most common error in Blogger. This post will tell you the reason and solution of it.   

The reason behind it is bad HTML in one or more posts and whenever the post is being displayed on the page, the sidebar shifts to the bottom. The bad HTML can be heavy HTML codes or ill-formed HTML codes.

If you view the post with errors the sidebar will shift to the bottom of the page, which makes it look ugly. You anyhow want to to fix it, so here's the way to fix it.

How to fix it ?

Let's come to the point, it can be fixed by correcting the errors in HTML code of the post. If you see the sidebar shifting bottom on the homepage, then you can distinguish that one of the post in Homepage contains bad HTML.

To make it easier you can open each post on Homepage in a new tab and then analyze if the sidebar shifts to the bottom in that post page. If you open the post which consist the Bad HTML, you will see the sidebar shifted to bottom.

Steps to fix it : The method is easy and working. You don't need to be an HTML expert to fix bad HTML in Blogger, you can easily fix it by following these steps. 

1. Go to Blogger Dashboard | Post List
2. Now open the post which contains the bad HTML (read the text above), or if you can figure out which post contains errors than you can open each post which you can see on homepage one by one in Post Editor.  
3. Once you have the post opened in Post Editor you will see Compose and HTML modes in the Post Editor on top left of page.
4. All you have to do is switch between Compose and HTML, few times, maybe 4 or 5  
5. At end leave it on Compose mode and Save or Update.

Once you do it with the post which contains errors, you will see the sidebar on it's right place again.

Remember, you have to do it with post which contains bad HTML and to find out which is that post, you open each and every post in new tab and check if the sidebar is in bottom when opened that post, if you opened a post and the sidebar is at bottom then open that post in Post Editor and do what i listed above.

If it doesn't seem to work for you, please leave comments with your blog address and specify your problem. Also, you may seek help on Blogger Help Forum.

Change position or remove 'Send Feedback' in Blogger's Dynamic views

Dynamic views, the latest blogger templates by Blogger is series of Blogger designs, that's not much editable for general users. But with CSS we can redesign our blog even using Dynamic views. In this post you are going to learn how to remove or change the position of 'Send Feedback' button from your Blog using Dynamic Views.

You usually see the 'Send Feedback' feature in the Blogger interface and it's fine till that but why on your Blog also ? Question is valid and needs to be answered. Although Blogger have integrated it into Dynamic Views for help of Blogger immediately at the spot.

But some Blogger user don't seem to be happy with that, there has been numerous questions from my readers regarding Dynamic Views, but i have always told them, just co-operate, as Blogger will always think the best for you.

 

But i feel that if i was in their place, i would have done what i have liked and would have done something for that. So why not for my readers. This post will focus on the topic on how to remove or re-position the Send Feedback feature on your Dynamic Views template which normally appears at bottom right corner of any blog using DV template.

How do i remove it

It's not that difficult to remove the button from your Template, the only thing require to make this removal is a small line of CSS. The CSS is very simple but it's a charm for users who are new to the Blogging world or the Web.

.feedback
{display:none !important;}

Go to Blogger Dashboard -> Template -> Customize -> Advanced -> Add CSS -> Paste the CSS in the custom CSS box and press enter after the last line. Preview it once, if you are okay with it then Apply to Blog. 

Change it's position

If you think removing it isn't necessary then you can give it a new position to look good with your blog. It will also be done with CSS.  I will show you how to place it on different sides and places on your Blog layout, but you can also adjust the values in CSS to place it on a place where you like.

 What about putting it on the bottom left corner of your blog page ? This small CSS will do it.

.feedback
{
right:initial !important;
left:1px;
}

You can adjust the value of left to define how much space do you want to keep from left.
For the whole post if you feel that you need help with adding CSS to your blog then check this tutorial on How to Add CSS to Blogger.

How to get rid of these BX error codes

Bx-error codes are mysterious but annoying error which has become every blogger users nightmare and that puts them from using Blogger. Writing this post to help you get rid of these BX-error codes.

Update : Here's an explained reason and the source of the bX-1io90b and bX-7ubjdv errors from the Blogger Team http://knownissues.blogspot.com/2012/06/bx-1io90b-bx-7ubjdv.html

Bx-error codes are issued everywhere at anytime on Blogger, edit Template or Post, people are getting these errors in every section of their Blogger Interface.If you head to the Something is Broken category of Blogger Help Forum you will see 90% of posts with issues regarding these mysterious Bx-codes.

Many users even can't get into the Dashboard, rather they are issued Bx-error codes, now what they can do to resolve this. The most Common Bx-error code which users are issued when logging on is this bX-74br4.

There are many other Bx-error codes which have taken in many users in tension and keep them away from Blogger. Only because of the bx-error many bloggers have migrated to WordPress or other Blogging Platform.

Here's a list of Bx-error that has been issued newly and posted on the Something is Broken   category in the BHF (Blogger Help Forum). 

• bX-1io90b (posted on BFH two or more times)
• bX-iio90b
• bX-2f02sn
• bX-45bok 
• bX-wyhxrb  (posted on BFH two or more times)
• bX-74br4  (posted on BFH two or more times)
• bX-7ubjdv  (posted on BFH two or more times)
• bX-qx5epp
• bX-hzwrm3
• bX-j8un7q
• bX-urojig
• bX-z4kpa4
• bX-a9cw3d
• bX-tmzlss

I will mention some ways to keep these Bx-errors way from your blogger interface. Even if you use methods mentioned here don't forget to report the bx-error code by using the 'Send Feedback' button on bottom right corner in your Blogger. Also try posting in Blogger Help Forum and also post your Bx-error code with your full details on this thread.

Use updated browsers : Sometimes bx-error codes are generated when you use an outdated and not to advanced browser such as Internet Explorer, many users have seen to resolve some bx-error codes when they operated Blogger on an Advanced browser such as Google Chrome

Edit your Template code carefully : One of the most common section in Blogger where Bx-error codes are generated is where you Edit HTML, when you makes changes to your Template and click on Save, you will sometimes see the bx-errors, even if you know that the code is correct they issue Bx-error codes, sometimes when you make unnecessary deletion of a code in XML then it's obvious that you will get an error. It is seen that if you don't nest your XML codes properly then also you see the bx-codes because the Blogger Template is XML and proper nesting is required in order to save changes in the Template.
Know more about nesting properly in XML http://www.w3schools.com/xmL/xml_syntax.asp
Old Interface for using Blogger : The commonly issued Bx-error code bX-74br4 when logging in to dashboard is caused by the New Blogger Interface, the new Interface isn't ready yet, actually it can be used but you need an updated browser, as mentioned above.

Using the old Blogger interface is seen to be a good way to completely keep away the bx-error codes. You can revert back to the old interface by logging in to your Blogger Dashboard > Click on the 'Gear' icon on top right corner of the page > Select 'Old Blogger Interface' from the drop down list.
If you aren't getting the option in drop down list then try this
http://stramaxon.blogspot.in/2012/06/how-to-get-into-old-blogger-interface.html 


These methods have worked most of the times and if you try you can also keep bx-error codes away from your Blogger interface. If the problem don't seem to be solved by these ways then post your question on Blogger Help Forum https://productforums.google.com/forum/#!categories/blogger/something-is-broken

My username in BHF (Blogger Help Forum) is xxxdepy. We will try our best to help you there.

Do comment if you have any further questions about topic related to this post, we will be happy to help you.

Remove LinkWithin Attribution under 'You might like this' Gadget in Blogger

A short tutorial for people who want to remove the attribution 'LinkWithin' under the LinkWithin gadget, actually LinkWithin has added it to popularize themselves but if you don't want it there then we are ready to help your remove it.

If you think that the attribution below 'You might like Gadget' doesn't look perfect then what are you waiting for remove it. 

Many users have asked me how to remove this attribution but i feel that it's not a big deal if you are linking back to them in return of using their service or gadget, but some Blogger's don't want to keep it at all. 

 


It can be done easily with a small line of CSS. Just add this small line of CSS to your Blogger Blog.

#linkwithin_logolink_0
{display:none;}

Go to Blogger Dashboard > Template > Customize > Advanced > Add CSS > Paste the CSS in the custom CSS box and hit Apply to Blog.  Or just check our Tutorial on how to add CSS in Blogger

Hide every attribution link

The CSS rule above will just hide the attribution link on the first LinkWithin widget but if you have multiple posts with Linkwithin widget for example on Index or Archive pages you may use the following CSS rule.  

.linkwithin_outer div[id^='linkwithin_logo'] 
{display:none;}  

The instruction to apply the CSS code is given above. 

How to implement Analytics when using Dynamic Views on Blogger ?

Google Analytics, the best service for your site's stats. It's used by millions and most Blogger users use Analytics, but the question comes "how do you add analytics code when you are using Dynamic Views".

Google Analytics provide JavaScript code which you have to put in your <head> tag to start tracking the stats for your site.
But what if you are using Dynamic Views template and then how would your track your stats with Google Analytics ? That's just annoying when you don't find any way, because in DV templates user aren't allowed to edit HTML, so that's nearly impossible to implement the JavaScript into your template.

But yet there's an way to implement Analytics on your Blogger having Dynamic Views, the option is in Blogger' Settings, hidden some where. Let's take a look at what we will do to achieve it. 


Follow Step by Step 

1. After adding your site to Analytics , you will get the tracking Id on the Screen.
   
   
   
   
2. Now you have the Tracking id, here my Tracking id is UA-23690704-6
3. Once you have copied your tracking id, head back to Blogger Dashboard
4. Go the Settings > Other > Scroll down and you will see 'Google Analytics' section, under it there will be an Input area.
5. You just need to paste the Tracking ID into it and Save.
   
   
   

That's it. You are finished with verifying your Analytics profile.

Remember, that it will take some time to show up your stats on Analytics, it's normal, no matter how you verify your site.

How to get into Old Blogger Interface even the option is not available ?

Blogger have announced to discontinue the old Interface in Blogger, but in some countries the interface already has been removed or the option to revert back to old Interface is no longer available. In this tutorial i will show you how to get into the old Blogger GUI even the option isn't available.

Important: This tweak doesn't work any longer. The Old Interface has been completely removed from the Blogger servers, so you can't restore it any way. Please read this about for more info. 

Blogger is going to spoil it's own fun in coming months but in some countries it already did it. It's been a quiet long time after the launch of the New Blogger GUI (Graphical user Interface), but the Old Interface was also available on a click on a button. The option is available for Blogger users, but i have seen several cases where the user don't have the option to revert back to the old Blogger GUI.

Does that mean, Old Blogger interface is slowing being removed, this change has been experienced by some Bloggers only but many Bloggers need to revert back to old Blogger GUI because you know the BX-error codes that the new Interface issues us.

The New Interface is yet buggy and need many things need to be fixed but the Blogger support team don't seem to be interested or worried about these BX-error codes, these are mysterious codes which is a nightmare to every blogger. But if you don't get the option to remove it, then imagine how annoying it would be.

Users are issued BX-error codes at anytime and there's no specific activity for it to appear, whatever you do from editing post to changing your settings, people are being issued these Bx-errors in every section.


The only solution - The only solution that we have to avoid these Bx-error is to revert back to the old Template. But because some users are not even getting the option to revert back which was in the 'Gear' icon on top right corner of the Blogger Dashboard.

How to get into the Old Interface ?

Coming to the point of the post, how to get back into the old Blogger Interface. Actually normal users will find it difficult but that was an easy task. It's all about tweaking the URL that will take you back to the Old Interface, URL was one of the different between new and old Interface and that's how they are differentiated . 

Follow these steps to get in the Old Interface. 

1. We will take an URL that's will help you go back to old GUI, so this is the URL

http://www.blogger.com/posts.g?blogID=7684209674460696977

So this the URL, but wait don't try to load this URL now.

2. Now you need to get your blogID to replace the number highlighted in Yellow

http://www.blogger.com/posts.g?blogID=7684209674460696977

So to find your Blogger address you can take help of the New Interface, go to your Blogger Dashboard | Click on Any tab, let's click on 'Template' tab. Have a look at your address bar and you will see a number followed by 'blogID=' you just need that number.

3. Replace my blogID with your blogId

http://www.blogger.com/posts.g?blogID=7684209674460696977

Here, i replace the blogID with my test blog's blogID and then the URL is this. 

http://www.blogger.com/posts.g?blogID=8150410838963189456

Once you replace the BlogID with your own BlogID, you can load the URL and it will take you to the Old Blogger Interface.


I am sure that it will work if you aren't getting the option to revert back to the old blogger Interface, you can see that it worked with this guy who were not be given the option for old blogger Interface.  https://productforums.google.com/forum/#!topic/blogger/ioWe_4ADcHI/discussion 

How to customize backgrounds colors of Lightbox in blogger

Are you bored of the basic black color background when pictures are shown in the Lightbox ? Yaa, who wouldn't be, think how fun it would be to have a different design lightbox. In this tutorial i will show you how to customize the lightbox.

Overview

There's no other customization for the lightbox other than turning it on or off, but believe me as a web designer it's not impossible for me to customize it. With small CSS codes we can give the lightbox a brand new look as never before. I am sure other Bloggers will ask you 'how you did this' and you will refer them to this tutorial. At last who don't want to customize the classic lightbox.

A lightbox in Blogger is a box that displays image when clicked in Picture viewer mode. The only option we have for it is to turn it on or off and that's not fair for general bloggers who don't know CSS to style it on their own. So we are writing this tutorial.


Here's a style applied,so that you can understand what we are talking about.

Before

After

The tutorial

>Before starting with the tutorial read the 'Overview' section for extra information on this post. 
-> We are going to work with Template's CSS, so you need to Backup your Template

First i will explain what we will have to do, then we will start creating new designs.

The light box is a div element and classed so it's easy to customize with CSS, but here we will simply change colors of backgrounds, and not only we will change the background but also add some cool looking gradient background with the help of CSS3


This CSS is for changing the background of lightbox.

.CSS_LIGHTBOX_BG_MASK
{
background-color:gainsboro !important;
}

In the CSS above there's no much customization, as you can see i have just changed the background color to a grey-white color  but you will get to know how to make gradient background in next section. 

Use the CSS :
So now come to the point, how to make changes on the light box ? We need to add CSS to customize the lightbox and for that you need to know how to add CSS to blogger blogs[click to know]

Here's the CSS

.CSS_LIGHTBOX_BG_MASK
{
background-color:gainsboro !important;
background-image:-webkit-radial-gradient(center,rgba(255, 255, 255, 0.83),rgba(63, 65, 63, 0.76),rgba(0, 0, 0, 0.87)) !important;
}
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #F0F8FF !important; /* The bottom bar */
}

Line 3,4 and 7 change the color values to the values you want. Here you get a list of CSS colors http://w3schools.com/cssref/css_colorsfull.asp 

If you aren't sure what to do then just leave it, we have a couples of readymade design for your Lightbox.

DESIGN #1
1. Dark Light, it's dark but polished with a gradient effect from the middle and the filmstrip at bottom is customized. First take a look at the design before applying the CSS.

 
So here's it's CSS - How to Add CSS in Blogger ?

.CSS_LIGHTBOX_BG_MASK
{
background-color:gainsboro !important;
background-image:-webkit-radial-gradient(center,rgba(255, 255, 255, 0.83),rgba(63, 65, 63, 0.76),rgba(0, 0, 0, 0.87)) !important;
background-image:-moz-radial-gradient(center,rgba(255, 255, 255, 0.83),rgba(63, 65, 63, 0.76),rgba(0, 0, 0, 0.87)) !important;
}
.CSS_LIGHTBOX_FILMSTRIP {
background-color: rgba(0, 0, 0, 0.411) !important; /* The bottom bar */
}

DESIGN #2

2. Greenery, reminds you of our mother earth, the green refreshing looks with a shiny top represents the sun and light the source of life. A refreshing design if you ask me, i would choose this for my blog.

Here's a screenshot of what you are going to see


So here's it's CSS - How to Add CSS in Blogger ?

.CSS_LIGHTBOX_BG_MASK {
background-color: rgba(31, 124, 35, 0.28) !important;
background-image: -webkit-radial-gradient(top,rgba(255, 255, 255, 0.77),rgba(203, 255, 234, 0.6) ,rgba(34, 146, 83, 0.42)) !important;
background-image: -moz-radial-gradient(top,rgba(255, 255, 255, 0.77),rgba(203, 255, 234, 0.6) ,rgba(34, 146, 83, 0.42)) !important;
background-image: -ms-radial-gradient(top,rgba(255, 255, 255, 0.77),rgba(203, 255, 234, 0.6) ,rgba(34, 146, 83, 0.42)) !important;
}
.CSS_LIGHTBOX_FILMSTRIP {
background-color: rgba(81, 151, 95, 0.79) !important;
background-image: -webkit-linear-gradient(rgba(86, 139, 86, 0.36),rgba(21, 128, 21, 0),rgba(18, 102, 38, 0));
background-image: -moz-linear-gradient(rgba(86, 139, 86, 0.36),rgba(21, 128, 21, 0),rgba(18, 102, 38, 0));
background-image: -ms-linear-gradient(rgba(86, 139, 86, 0.36),rgba(21, 128, 21, 0),rgba(18, 102, 38, 0));
}

A pretty long CSS, but the results it will give is outstanding and attractive.  

DESIGN #3
3. Glass pane, this design is looks beautiful with the light blue color and looks much like a glass pane.

This is the CSS

.CSS_LIGHTBOX_BG_MASK {
background-color: rgba(14, 97, 143, 0.28) !important;
background-image: -webkit-radial-gradient(top,rgba(221, 235, 255, 0.77),rgba(207, 230, 255, 0.6) ,rgba(83, 83, 83, 0.42)) !important;
background-image: -moz-radial-gradient(top,rgba(255, 255, 255, 0.77),rgba(203, 255, 234, 0.6) ,rgba(34, 146, 83, 0.42)) !important;
background-image: -ms-radial-gradient(top,rgba(255, 255, 255, 0.77),rgba(203, 255, 234, 0.6) ,rgba(34, 146, 83, 0.42)) !important;
}
.CSS_LIGHTBOX_FILMSTRIP {
background-color: rgba(101, 122, 231, 0.43) !important;
background-position: 10px 0px;
background-size: 115px 60px;
background-image: -webkit-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -moz-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -ms-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
-webkit-transition:all 0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out;
-o-transition:all 0.6s ease-in-out;
-ms-transition:all 0.6s ease-in-out;
transition:all 0.6s ease-in-out;
}
.CSS_LIGHTBOX_FILMSTRIP:hover {
background-color: #7081DA !important;
}
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #A04343; /* The bottom bar */
}

This is the best of all.. !

Now apply your favorite design on your blog lightbox and see how your users react with the extraordinary designs, I am sure they will ask you 'How did you do that ?' and will be surprised.

Don't forget to Subscribe to us, check the right sidebar you will Email Newsletter gadget, just enter your email address and subscribe.

If you want more designs you can contact me on my email or Google+.

Remove Blogger/Google+ icon following your Blogger Profile name

Blogger recently made changes to the templates or i may say the Profile gadget, it's not such a big change, they have only added a small Blogger icon following the Blogger Profile name. In this tutorial i will be showing how to remove the Blogger Icon.

Update : Also works if you have Google+ logo following your name in the profile gadget.

I think the Blogger Icon looks great before the profile name, it proudly represents that you are a Blogger user, here's what it is.

If you don't really liked this new change then remove it ! Don't worry we will guide you how to remove the logo.
This will be done using CSS and it's very easy, so you don't need to be a tech savvy person. 

How to Add CSS - Go to Blogger Dashboard > Template > Customize (Template Designer) > Advanced > Add CSS > Paste the CSS in the custom CSS box and preview, if you find it okay, then hit Apply to Blog.

The CSS :

.profile-name-link
{
    background-image:none !important;
    padding-left:0px;
}

The second CSS property is for removing the space left after hiding the blogger logo.

Hope that helps you :)

Upload .xml template file on blogger

This short is tutorial is on how to upload an .xml template file in Blogger. Note that only .xml files can be uploaded as template in Blogger.

The first obvious thing you have to do is log into your Blogger profile. Now when you are successfully into your Blogger Dashboard click on the 'Template' tab.



Now, when you are in the Template tab you will see Backup/Restore button on top right corner of the page, click on it.

After you hit the Backup/Restore button, a box will appear on the scree. First of all Backup your template by downloading a copy of your current Template.

Now click on the 'Choose file' button and locate for the .xml template file you want to upload, when selected the template file click on the Upload.



Uploaded and you are done ! That's it.