Add a Background Image to Gadgets in Blogger

Making your blog beautiful means adding some eye catching images on the layout and gadget is one of the place where you may want to use a background image to spice up the look.
Not every Blogger is a web designer and it could be difficult for a person not familiar with basic web designing to give styles to pages in coding level and that can be an obstacle for a blogger to design their blog on their own.

Coming to the topic, if you want a background image on your gadgets to make it look beautiful but can't find any option in the template designer provided by Blogger then you are at the right place.

Adding a background image to an element on a web page is a single line code for us but it can be fascinating to those who are new to it and it's you ! You can experiment how it works and play with it and learn some basic web designing too.

Background Image for Gadgets

The actual reason behind writing this post is not to explain how to use the background image CSS property but to make you familiar with CSS selectors. A selector in a rule is the most important thing to tell the browser to apply those styles to which element on the page. People can learn CSS easily but if you don't know about FireBug or Chrome Developer Tools then you can't practical play with the CSS.

I would suggest you to read these articles :

• CSS Selectors - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
• Using Chrome Developer Tools - http://www.stramaxon.com/2012/07/how-to-use-chrome-developer-tools.html
• Bonus - Writing efficient CSS (and more on selectors)

The CSS

To add a background image to a gadget in Blogger, we first need to know what selector we should use to apply the styles. You can do it by using the Chrome Developer Tools (Google Chrome only). But you can use this selector in most of the templates on Blogger.

.sidebar .widget {}

(This is just the selector). We have put .sidebar because we just want to apply the style only to the .widget element inside the sidebar, it's important because blog post area is also wrapped in a .widget class, and if we only use this class selector it will select every widgets including the blog post area.

The code we need to apply a simple good background image on a gadget is this :

.sidebar .widget {
background-image:url('http://image.com/background.png');
background-repeat:repeat;
}

Background Image : If you apply this code on your blog then it will point to a image that doesn't even exist (not yet) so it's simple that first step is to upload your background image in a supported format online and then replace http://image.com/background.png with your image's link.

Background Repeat : CSS is a human readable language and you may have already understand what this does. It controls whether your background image should be repeated to cover up the area or not. There are two more variant for this property that controls the background repeat for x and y axis.

It's better to repeat your background images unless you want it to be a single complete background picture, in that case you should change repeat to no-repeat.

If you don't know how to apply CSS on your Blog then check this old article
http://stramaxon.blogspot.com/2012/03/how-to-add-css-to-your-blogger-blog.html

Experiment it

Don't just stop with the instructions, you should experiment it yourself. Guys, CSS is not a programming language, it's a fun and simple language using which we can give colors and styles to our websites. If you use Google Chrome then it's great, use the Chrome developers tools to try out CSS onsite and do more other interesting stuffs. 

Removing Huge Space Between Posts in Blogger

It happens a lot, I have seen people suffering from the pain of having large and mysterious space between posts or sometimes in different areas like sidebars.
Lets put some light on it. Huge blank spaces appearing between posts but no one knows what it is, it can be a hard time for you as a blogger user as you don't find any documentation regarding the issue and that can be annoying.

That's a common but unknown problem to many peoples using Blogger platform. But what are those blank spaces and how to get rid of it ?  Everyone with this problem should read further to fix it and read what it is.

What is it, anyway?

Aah, good question. Let's put some light on the reason of this issue, the mysterious spaces between your blog posts may bring up different thoughts in your mind, hmm, that's a virus, a malware or what ? No, that's nothing like those things. But what is it ??

Ok enough questions, the answer is : It is the ad blocks you may have enabled unknowingly.

If it's an ad, then why it is blank?

Ooh, again a very good question. The answer is simple, it's because you don't still have a valid adsense account to show ads from. Even without having an AdSense account, you can display ad space on your blog. Don't know why, but it is how it work.

Bro, I need to remove it

That's great, no one wants a blank ad block on their blog, which can't even generate a single penny. Let's get a little serious on the topic. Follow the instruction to remove the unwanted ad spaces from your blog.

Note: There are two areas in the Blogger Dashboard for a blog from where you have to hide the ads.

Hiding the ads between posts

If the mysterious space or the ad space is between your post on the homepage and below your posts on your post pages then you must follow the instruction in this section. Step-by-step instruction with pretty images will make the procedure easier.

1. Go to your Blogger Dashboard
2. Then click on the Layout Tab for your blog
3. When you are in the Layout tab, click on the 'Edit' below 'Blog Post' gadget
4. Scroll down and you will see a checkbox that says 'Show Ads Between Posts'
5. If it's checked, uncheck it and save the gadget. But if it is already unchecked, then move to the next fix.
   
   

The above solution will stop ads from appearing between the post, but if you have ads on other areas of your blog then you may need to read some more instructions.

Remove ad spaces completely from the blog

If the ad spaces are appearing below your posts, on the sidebars and some other areas you will need to change the settings from the source, it's the earnings tab in your blogger dashboard. Follow the easy instruction to get it fixed.

1. Go to your Blogger Dashboard 
2. Click on the Earnings tab 
3. There will be a dropdown next to 'Display' and select "Don't display ads". But if you strictly don't want it to appear again, then check 'No' radio button that says 'Show ads on Blog'
   
   

It was easy, isn't it ? These options are easy available to you but when you don't know what the problem is caused by, you can't find a solution and it's okay, that is why we are running this blog, to help you and the whole blogosphere.

It didn't worked for me

If it didn't worked even after changing and saving the settings then it might be caused by the caches for your blog. To solve it, simply press CTRL+F5 to refresh the caches and load your new and updated blog.

Refreshing the caches didn't worked too? Then it's not the ad spaces, it's something else. If you have any doubt feel free to post a comment. 

Blogger Favicon not Updating - Fixed

Favicon is a small icon file attached optionally to a web page using a link element as the website's icon to appear in the tabs, bookmarks and on different areas in various browsers.
From the beginning we had default Blogger "B" icon as the favicon for our blogger hosted blogs but as more people wished to have their own different favicon on their blog, Blogger launched a new feature using which you could upload your own Favicon file from the Layout tab in your Blogger Dashboard.

This was a great upgrade for Blogger users, as we could now upload our own Favicon file on the the same domain. Favicon has different behaviors in different browsers. And most browser needs the icon to be on the same domain as the blog. It means if you add a link to include your own favicon from a different source, most of the browsers will ignore it and that's why it's important to have the favicon on your domain like this.
http://www.stramaxon.com/favicon.ico
If it is hosted on the the same domain as where it is going to be displayed the browser gives it more importance and  only loads that Favicon.

But it is just an introduction to the favicon in Blogger or websites, in Blogger Forums we see many people asking why their Favicon isn't appearing even after they uploaded it and that's a little difficult to explain in a forum, so I am writing this post. Read below for the fix.

Updating your Favicon

That's a common problem among people who tries to update their Favicon. Even being related to a small part of a website, most people become serious about a favicon.

Before you proceed for the fix, make sure you have successfully uploaded the Favicon in your Blogger Dashboard -> Layout.

1. Refresh your Blog

This is the first try for the fix, if it works then it's fine but if it doesn't move onto the next.

It often happens due to the caches stored in your PC and therefore even the blog has been updated on the server it just loads the cached files to make the loading faster and doesn't request the server for a new and updated content. It can be fixed by refreshing your blog using  CTRL+F5(Windows) or CMD+F5(MAC). It must fix the problem but it has a 50 percent chance, if it didn't worked, move onto next fix.

2. Refresh the Favicon itself

I noticed that the website and favicon on that domain are cached separately, I am not sure about the exact reason but maybe it's because favicon needs to be used in bookmarks so it's separately stored by the browser for use in bookmars and other areas in the browser where it might need to use the site's Favicon. We can play a small trick to refresh the Favicon cache too, here's the way.

We know that Favicon for Blogger blogs are stored on the domain and it's name favicon.ico, it's simple that we can find our Favicon here.
http://[yourblog].blogspot.com/favicon.ico (Replace the blog name in the URL)
If you have recently uploaded your Favicon but you are seeing the old default Blogger Favicon then your problem is now almost solved. On the Favicon page just press CTRL+F5(Windows) or CMD+F5(MAC) and you will see your own Favicon on that URL, it means we are successful in getting the new content on that URL from the server. 

Now when you will open your blog you will see the new Favicon.

Solution could have been easier

The fix could have been shorter and faster, by deleting the complete caches from your browser it would have been updated without trying the above fixes, but it's not always wiser to use easier solution. The reason we didn't clear the complete cache was that it would have removed caches of every webpage and you don't want to lose all important information from your browser.

Drop your comments if you have any further questions and we will be there for your rescue :)

How Stramaxon got PR 4 in this PageRank Update

I won't call myself a pro but newbies bloggers in the field of tech always have one aim, to get a higher Google Toolbar pagerank but most of the times they don't succeed in getting a higher rank. In this month's (November) page rank update I got PR 4 and I wanted to share how I got such high rank.

Many people starts a blog everyday in hope that they might get famous and popular someday but there are few people who starts a blog not for money, fame or popularity, they do it only for their passion and to help others with their blog and work.

In India we have a very different blogosphere, here newbie's have assumed that blogging is only for tech and doing it will help them become popular immediately but most of the times they fail and it's normal, because they didn't blogged something they are passionate about they chosen because they assumed that they will get famous with that topic. Why we don't have much professional bloggers in India is because many people start a blog just to earn money, no matter if they are really dedicated to it or not, all they want is people to read whatever they write and earn some money with the advertising banners and things. That's the biggest problem of all the problems with a newbie "tech" blogger.

And then comes the word SEO, sounds like a magic charm to webmasters, mostly the amateurs. Search Engine Optimization is a good practice but fully relying on it is not a good thing. When I started this blog, I remember that even I was a person who didn't cared about the content but just to learn SEO and ways to get help with it but with time my interest grew in blogging and I studied more about blogging than playing with  search engine visibility of my blog.

I receive a lots of emails everyday and most of them are from new bloggers asking me about increasing traffic and "tricks" for SEO. But I usually try to avoid answering any of these questions but I always tell them that with these SEO trick you can only get traffic not real and loyal readers that can give a serious popularity to your blog.

Coming to how I got Page Rank 4 for my blog. There's a very simple and easy method behind achieving it, anyone can try it and also get succeed in the first try, if they really do it with their heart. The secret method for achieving such high page rank is hard work and no worries for SEO. It's true, I  never ever worried about my page rank or SEO status and never even expected to get the page rank value for my blog but it all happened and it's what Google wants. Genuineness is what Google gives a page rank value to websites, many so called "SEO experts" charge money to get a website top on the search results, sometimes it works but it's temporary, once Google understands that it's all done by applying techniques to fool the system your page rank and search ranks are reduced and you can't do anything. Just read this article by Matt Cutts, head of Google Webspam team.
http://www.mattcutts.com/blog/why-did-my-pagerank-go-down/

In the comments he wrote a very straight to the point note, it is :

the drop in Toolbar PageRank is an indicator of the decrease in our trust of the site.

The page rank value for your site is not just a value, it's the trust of Google for the site. It's just like you trust a person but when you see them doing something wrong to you, the trust of you for them decreases and that's similar to Google and your site. When Google will realize about all your bad SEO techniques and link exchange they will never up your PR values.  

Nobody in my contacts ever thought that I would get such PR values, even I didn't expected this because I don't believe in writing in a manner that a bot (search engines) will understand and thus rank the search results of my page higher, I believe in originality and whatever style I wrote it I continued writing despite of people's advice about using weird SEO tools to check the density of keywords in my article and other such things that could possibly help with my site ranking in Google or other search engines. And now my genuineness have proved that search engines were made for websites, not websites were made for search engines. So believe in yourself not those black techniques to become popular.

"Hard work is the key to success". And that's true, but if you think you hard work but haven't succeeded then you need some more hard work to keep patience and work till and even after you succeed.

I got PR4 and that's nothing for me, I didn't even expected it. In a few days it will be a normal thing for me and maybe I will a higher rank but do you think I will stop writing just because I got higher ranks to show good in the search results ? No, if I do that, I will get traffic but no serious readers, as I already told.

Keep blogging and try to think big to achieve something bigger. 

Reiulanus Responsive Blogger Template

Reiulanus Blogger Template is the newest and the most advanced Blogger template with a Responsive design  and fluid layout. Responsive Design is what every site owners would like to have for their blog and especially for Blogger users, I have put my knowledge about responsive design in making this template.



You will see responsive site layout mostly in WordPress themes, because the authors of those themes are the real professional and they earn thousands of dollars selling those themes to hundreds of people each for $100.Getting responsive design on your site can be expensive if you want to hire a web designer to make that only for your site but if you are on Wordpress you can buy a responsive theme for as less as $100 but what about the guys on Blogger, no matter if you are using WP or Blogger, responsive design and fluid layout is same everywhere and required too. And that's why it was too important to develop such Blogger Template. Following are the price and information about the template.

Preview Template Buy Template for $49 Download for Free

The template is a premium one but due to heavy user request we've made it available for everyone for free. SBTemplates is now hosting the template on their website, you can find more free blogger templates on SBT.

If you want to see how this blogger template appears in different devices, you may check this
http://mattkersley.com/responsive/?reiulanus-template.blogspot.com

Features of this Template

The template includes all the features the features from my previous templates. Like we used correct markups for important elements of a page for good rankings in search engines and that makes the template a SEO friendly template plus the template is using minimal but beautiful design that can keep a visitor onsite for a longer time. Some of the notable features of this template are below.

1. Light Design

We have used simple design but good looking design which is in trend now. We rarely used images in making the template's design and that's why the template is light and very clear, it's not too fancy and that makes it easier for the users to navigate through the blog.

2. No "Auto Summarize" technique used

These techniques gives you a good result but it also reduces the performance of your blog and is very messy in the back-end. Using it is just a foolishness if you want a SEO friendly blog, it's better to use the Blogger's Page Break option given in the post editor. 

3. Better Search Widgets

Often people don't use search function on a blog just because of their dull looks not intentionally but it usually happens, making it more interactive will attract the visitor to use the search function. We have included not one but two different search forms in the template, one at the top and one at the bottom, it's for the ease of the user as they don't need to scroll much to find content on your site, especially for mobile users where scrolling is the most difficult job in browsing a page. 

4. Content is given more importance

We believe that content is the most important element on your blog and people comes on the blog to read that content so we keeping it in mind we made sure there's nothing in the template that can distract a user from the content or even make them leave the page. Do you know, 3 seconds is enough for a user to visit a site through a search engine and decide if it is what they needed and again we made sure the main content (article) is visible on the page as soon as the page is opened in a browser.

5. Used no Fancy Elements

No Fancy Pop-up or anything like that! People may like it but not everyone, it can be annoying for some people who is serious about the content and that doesn't makes a blog look professional, so if you are serious about your blog then you might don't want your visitors to go away from your site.

6. Used Popular Post and Related Post Widget

Design is not only about filling colors, it's also about managing things and placing it at correct place. I have done everything that will keep a reader engaged with your website. Popular Post widget is place in the bottom and related post is below the posts and both of them are designed beautifully so people will love to try the links in those widgets and that will increase your pageviews and visitor's time on site.  

7. Easily Customizable 

Despite of being an advanced template with responsive design you can always customize it just like any other default templates in Blogger. You can add more remove gadgets, change the backgrounds or even add your own CSS to modify it, we have used simple layout so you won't have any difficulties in understanding the markup and modifying a style. 

Fresh New Responsive Design

Now there's no need of side scrolling on mobile device in your blog just because the the screen size is smaller than the blog's width, it's not a problem anymore with the responsive design in this template. You can see how the responsive design works by clicking on the "Preview Template" link above. If you don't have a mobile with you to check how your blog will look with the template on a handheld device you can simply resize the browser window to see it working live and that's how it will work on mobile phones or tables or device with any screen size and not even need to turn on the mobile template on Blogger for your blog, when you buy this template just turn it off because you won't need it anymore to display a better version of your blog on handheld devices with different screen sizes.

When you are getting a template with responsive design then why spend hundreds of dollars to hire a web designer to make your blog responsive ? Buying this template means you are saving money for the future, as responsive design is now very popular and everybody will be using Responsive Site Templates so why not buy now with a low price.

I decided to make such template because templates you find online for Blogger are coded very poorly and that's what you will see on most of the Blogger blogs and that's bad for Blogger's reputation, but with this template your readers will be amazed to see such technology on Blogger templates for the first time, it's going to be a though competitor for WordPress responsive themes.

It's in trend! Responsive Web Design is listed #2 in top web design  trend for 2012. So what are you waiting for ? Don't you feel that your blog should be following the trend and should really look new and fresh.

Learn more Responsive Design

If you are gonna use a responsive design then you would want to learn about Responsive Web Design, there many more things you can learn about in Responsive Web Design (RWD). Here are some links which will take you to the world of responsive web design.

1. What the Heck is Responsive Web Design : A fun but informative web project on GitHub by some web geeks tells you all about responsive web design in an interesting manner. Even the site is responsive, just try resizing the browser/
2. Smashing Magazine's Post about RWD : This post on Smashing Magazine is all you need to know about responsive web design and how to use it, that's a little serious but informative post. As a client you must always expect a web designer to provide you a design which is coded according to the standard.

I think those two links are enough to learn the concept and uses of responsive web design but you may always check new articles online or even buy some books to learn more about it.

No fees for Newer Versions

We will make more improvements in the template in the future to keep up with the standard and there's a good news, you won't have to pay for newer version if you are already a customer, you will get it for free. We care about you and always want you to use the best thing for your blog, so we won't charge even a single penny for upgrades.

Note: You will be charged if you want an upgrade on demand. That includes change of design, adding functionality etc. 

Lifetime Support

We will provide lifetime support for the template. Whenever and whatever help you need we will be there to help you. Just mail us on depy45631@gmail.com for any help regarding the template and we will get it done.

Buy the Template

You can buy the template for $49 and to buy it please send an email on depy45631@gmail.com. You can pay via PayPal on this account deepakblogger45631@gmail.com.
Paypal is the most secure method of payment by credit card, if you don't have an account on Paypal then there's no need to sign-up for a new account, you can simply pay with your credit card and they have a very secure system so you don't need to show your credit card number to anybody.

Note: Don't trust any other person offering you this template. Distribution of this template without the owner's permission is prohibited and we can take legal action in such situation. Buy from the original and respect the hardwork of this template's author (Deepak Kamat). 

Drive Interest to Your Blog

Nowadays, almost everyone has their own blog whether for personal or business purposes. They can just post about anything from what they are doing in their career to what they do in their personal life. There are just too many blogs out there and people cannot possibly keep up with each and every one of them. It is similar to having a hundred conversations at once and this is not possible to do.

If you are the owner of a blog and you want people to read it, you want to make it interesting first. So how do you make your own blog interesting in a way that the traffic that it generates will keep coming back for more?

Avoid Writing About Yourself

Most of the B2B blogs by companies have dominant information regarding their products and services, updates, upgrades and benefits. Almost all of us bloggers have made this kind of content, and while some of do belong in a blog, it should just be sprinkled as a topping lightly and nothing more. There is no one outside of your business that is going to make it a point to have your self-focused content read all the time.

That is why if you are blogging not based primarily on your products or services, then start going for your target prospects instead and what they want to see. Identify the topics in this area that you know something of and provide information that you think will benefit your customers and help better understand what your company does.

Commit to a Schedule

Being consistent in posting regularly and having a schedule will keep your blog up to date. Even if you are just publishing short posts, make it a habit that you need to accomplish and stick to this. If you are more concentrated on the usual topics that you are blogging about, you can just save these interesting topics that you find over time.

Have Your Own Point of View

Being opinionated even if it is going to turn some people off is important when blogging. Try to critique something if you have an expertise in an area. Have your own strong point of view even if the topic is controversial. It is important that you define your own company’s voice in the community and this is going to prove essential when you are creating content that you want people to discuss and share with each other.

Center Your Content in Factual Data

It is the backbone of a lot of popular blogs to have solid information that can be placed in visual form. One of the best sources for interesting data that you can center on in your blog posts is through surveys and polls. If you do not have the time to spare in collecting data for your own needs, there are a lot of public sources that you can utilize in order to obtain the data for you to draw from. Although the data that you present may not be original, placing this in a chart will add value that readers are going to appreciate.

The Author

Norris Lasay is a writer on business, the high speed Internet and broadband at Broadband Expert. Norris spends his free time contributing ideas for other blogs related to these niches.

Understanding Responsive Design And Using It

Responsive Design, it is what you will hear all around in a forum of web designers/developers. Some people don't even have any idea about it and most of them are business owners who just want their website's work to be done.
If you are a business owner or just a pro blogger in any field you may want a better look for your blog/website and that's when you will search for a local web design company but have you ever tried to know if they are building up your site with the latest and advanced technologies available ?

The problem is both with the client and the company, the client isn't a web geek so he probably doesn't know what's right or wrong to be used to build their website, so the client is innocent here but the web design companies that promises to offer good website is the problem, they have some certified web designs (took a 6 month course, got a job and now building dull sites) who don't even have the idea about the newest technologies. You probably don't want a site thathave lots of table elements in it to build the layout and which looks like websites used to in the 90's.

That was a huge argument about those so called web designing companies, coming to the point, we were talking about the new technologies for designing website and those are HTML5 and CSS3 for sure. Many option in these new standards are amazing, and if you use it in the right way you can take your website design to a next level. Especially the responsive design, but what is it ?

Responsive Design can make your site responsive !

Here, the meaning of responsive is little different. What it's exact work is to make your site layout fit on different layouts but don't you wonder how it was possible even when these technologies weren't available ? Yup, it was possible but was very impossible and needed a lot of work on the server side. First the web developer needed to create different files for different devices and then to instruct the server to load different files for different devices and that's how it worked before but now on a single HTML file you can set layouts for different screen sizes, here it depends on the screen size, not the device and that has many advantages as you don't have to create new designs for all new devices launched, that would be time wasting.

Making Your Site Responsive

If you are a blogger or business owner then you shouldn't get into it, what I suggest you is to hire a good web designer who have good knowledge about it (I have some) and $1000 is worth the work, anyway you can talk to the design about it, but don't contact a local web design company about it or they will just make a huge flash homescreen and that's what they will want thousand of dollars. Always be careful before you hire a web designer, it's the question about your website and business.

Responsive Design is normally achieved with CSS3's Media Queries but sometimes weird guys use JavaScript too for some more dynamic responsive design. It's a little logic thing, like you first have to decide what to do when the screen size is this and then give suitable styles for the surrounding elements too else it will be all messed up. The whole game is about the metrics of elements and you have to do some maths too and as I already said, applying some logic will give you better results.

Fluid layout is not exactly similar to responsive design but it's another advance technology, as the name suggests, it can make a layout act like a fluid, means it can fit in any size or shape and that's it work.

If you are a young or passionate web developer willing to learn these new techniques then there's a one trusted source of information, the MDN website, see this page to learn about Media Queries https://developer.mozilla.org/en-US/docs/CSS/Media_queries

Good News for Blogger Users : I have created many websites with responsive and fluid layout but never for Blogger template but in a few days I am going to launch the Blogger's first responsive Template, so sign-up for our newsletter to keep yourself updated.