Seperated Box for Gadgets in Blogger

Blogging is about the content and it's most important thing you need on your blog but design matters too for your readers and visitors to be on the page for a longer time. This design tutorial will teach you to add designed borders around your gadgets to make it more beautiful on your blog.

Why is it important to give a more sleek look to your gadgets, they aren't that important for your visibility in search engines but if you want your users to find it easy to read your blog then you must give good looks and structure to your aside contents.

In many blogger templates, gadgets are in their own separated boxes and in other's they are not, but they won't look that good without a little more touch with CSS. It works the best when you don't want to have titles for your gadgets but yet want them to look as different gadgets on the page.

Add borders to gadgets

Giving clean and good looking borders to a gadget on Blogger don't takes more than 2 minutes. You just need the CSS for it, which i will provide in the tutorial and the instructions to add it. I have added two different effects, check it below.

Normal borders

If you don't want a simple but yet eye catching borders around your gadgets then the CSS below will give you what you want. - See the Demo

.sidebar .widget {
border:3px dashed black;
padding:10px; 
}

The CSS above will give a black dashed border of 3px width on all your gadgets/widget on the sidebar. Changes can be made in the CSS code.

1. There are three different parts in the border property.The first value which is 3px is the width of the border.In the middle it's the type of border we will use, currently it's dashed, they can be solid | dashed | dotted | double | groove | ridge | inset | outset .Last is the color, you can change the color with the help of our color picker.
2. Padding is the space between your gadget content and the borders. 

Funky hover border effects

This one is little different, little more funky and responsive. Can react on user movements over the gadgets, when you mouse over the gadget the borders will appear else it will remain without border. What i like the most in this is that it reacts on user interaction. CSS for this border design is below - See the demo

.sidebar .widget {
border:3px dashed transparent;
padding:10px; 
-webkit-transition:all 0.8s ease;
-moz-transition:all 0.8s; 
-ms-transition:all 0.8s;
-o-transition:all 0.8s;
}
.sidebar .widget:hover {
border:3px dashed black;
padding:10px; 
}

The first CSS style block is what the gadget should appear when it's not being hovered and the other block is for styles when it's being hovered.

Add CSS to Blogger

Check the link below to know how add CSS to a Blogger blog.
http://www.stramaxon.com/2012/03/how-to-add-css-to-your-blogger-blog.html

That's it, once you apply the CSS check your blog with the border designs, hope you like it and your readers will like it too. Please comment for feedback.

Change default styles of heading in Blogger template

This has been a minor disturbance for users using default templates from blogger or also on some premium or free third party templates. Blogger have some very odd styles for headings like <h1><h2>...<h6>. This post shows you an easy and effective way to make it as the way you want.

Heading tags are normally supposed to be larger font than the body content but in blogger it's not everything well with the heading tags, many of the heading tags are uppercase and others are even smaller than the text in the body, and that's not what we actually want.

You see the examples on blogs using Simple template and more other templates available for your blog by Blogge. The template i made this template from was 'Simple template' but you won't see the headings that looks odd or smaller than the body text, because it's not a rocket science to do such things on the web.

Fixing the sizes and styles

Sizes is one thing and styles are another. If you don't like it then don't keep it, it's your blog and you have the full control on it and so you can change it easily. All just you need is guides that can guide you through this. Before we change it you must understand how it's made like that, CSS. New to CSS ? No worry, you need basic knowledge of copy-pasting and you will get links to learn more about it. The CSS below can help you out of this weird problem of template.

h1 {
font-size:18px;
text-transform:normal;
}

1. Study each and every property, value and try to learn what does it mean. Simply seeing the h1 at the selector place tells that the stuffs between the curly brackets are going to be applied on an <h1> tag. You change the selectors as you desire. Don't worry, you can put different CSS for your different heading tags e.g : <h1> <h2> <h3> <h4> etc.

2. Next is the styles between the brackets, CSS is so easy to understand that you can start customizing your website with a little bit of knowledge about CSS. Here you can see the first property is font-size, i am sure you know what to do there, changing the 18px value will do the job. Make sure you give appropriate value so it looks better.

3. The most common reason people wants to however fix it is that some heading tags are all in uppercase by default, and no matter how did you format the text into the post editor, when it's published, it becomes what you don't even expect. The different values into text-transform property can be uppercase | lowercase | capitalize | normal | initial
If you are interested in knowing more about this property then you can do it here [click link]

Tip : Sometimes adding CSS doesn't override the existing styles on an element, so we need to use !important at the end of value before the semi-colon to force it be applied on it. For example :

h1 {
font-size:18px !important;
text-transform:normal !important;
}

Adding CSS

When you have your CSS ready then it's time for you to add that CSS to make it take effect on your blog and the heading tags. For a quick guide check this tutorial about adding CSS into Blogger.  

Need further help ? We are always ready with proper answers of your questions, if you don't understand something from this post then feel free to comment and if you are helped then comment can be useful to say thanks !

Creating more than 20 pages on Blogger

Blogger already has amazing features for bloggers but there are some limitation which are not acceptable sometimes. And one of the limitation is that you can only create 20 Static pages and in this article i will be telling how can you create more than 20 pages.
You heard it right, you are going to learn how to add more than 20 Pages. Sometimes you may need more pages on the tabs, it's where your blog page's link are situated normally. All the static pages that you want to display are there but the limit is 20 static pages per blog.

Let's get to the point and learn how to get more than 20 pages on your blog.

The idea

The simple but effective idea is to create a blog post, backdate it so it doesn't appear on the home page of your blog. And then use the link of the post to create new page, not static but choose the Web Address option and put the link to post in it's URL field and Save it. If you don't get it, then the tutorial is below.

Creating a post

This will not be a normal blog post on your blog. Edit the post and put whatever you want (this is going to be work as the page). Now when you are finished writing the post you have to backdate it so it doesn't appear on the homepage as a new page.

Backdate the post

To backdate the post, click on Schedule under Post Settings. Select the 'Set Date and Time' and choose a past date and click Done. The post will be now archived but remember, do not copy the link before change the post date. Because the middle of the URL depends on it's date for example :
http://stramaxon.com/2012/05/...
2012 in URL is the year and 05 is the month, but when you change the date, the date in the URL also get's changed. Be sure to get the link which points to the date which you have set the date of the post.

Using the post as page

The ability to put a web address as a tab gives the birth to this trick. You maybe thinking how could we use a post as a page ? That's very easy. Follow the steps below :

1. Go to your Blogger Dashboard -> Pages
2. Click on the New Page drop down button 
3. Select Web Address from the option
4. Write the Title you want it to appear on pages tab and the URL to the Post
5. That's it, now you can Save it.
   
   
   

When everything is okay you can check the new extra page on your blog and with this method you can create as many pages as you want.

Removing the date

Using this trick gives a complete effect of a static page on the blog but the date you will see on the post page doesn't make it look completely like a static page. But we have a clear solution for that, adding CSS that will hide the date will work great.

<style>
.date-header {display:none;}
</style>

If you add this CSS in your template code then date on all post will hide and just because that you have to place it at an unusual place, into the HTML of the post. Open the Post in Post Editor, switch to HTML view, scroll to the bottom and Paste the HTML/CSS code at the end. 

Helpful ?

Were we helpful to you in helping you create more than 20 pages on Blogger blogs ? If you have any suggestions regarding this post then do drop comments below and join the discussion.

Infolinks is giving a chance to win iPhone 5

Infolinks have just launched their new mobile application, that not just giving you more control on your Infolinks account but also giving it's user (like me) a chance to win iPhone 5

If you are also a user and regular reader of their blog then you may have seen many competitions going on, the last time, it was for $100. I have never won a competition there but always took part in the lucky games, who knows, you could be the next winner.

Honestly speaking, i don't have any Apple gadget but i always have a dream to own a brand new shinny Apple product. What can be better than that to become a hero in your friends ? But my blogging career is just at the start and still needs to give more to this blog to get established and start earning big money.

Enough about me and my story but Infolinks is surely encouraging their users and that's what i like about Infolinks.

I have took part in many competition from Infolinks, never won but never gave up and this time the competition is very special for me, it's about my one and only dream. The iPhone. And the most amazing thing about it ? They are giving out iPhone 5 ! Which is yet to launch.

My tweet

@infolinksinc Tweeting for an iPhone 5 is too easy,So wrote a small blog post about the competition and #InfolinksAppgoo.gl/ksfov
— Deepak Kamat (@xxxdepy) August 8, 2012

Join the Competition

Wanna take part ? Here's the link and we will enjoy the competition together
http://blog.infolinks.com/2012/08/07/new-infolinks-mobile-app/
Tweet as much louder as you can, make sure to add a hash tag #InfolinksApp
The winner will be announced next month on 12th and you know a special thing about that ? It's just 6 days before my B'day. So, best of luck for the competition and give me luck to.

Add a Paypal donate button in Blogspot blog 2012

Paypal has now become the biggest way of receiving and sending money online, Paypal provides a wide variety of tools to help you earn more and one is the donation button, you will get to know how to easily add a Paypal donate gadget in Blogger.
If you are running a non profit organization or just a blog then you might want to add a donation button to increase your income and get donations from people without messaging each and every single person. Paypal donation buttons can be very helpful as i said that you can just put up it on your blog and website and any person that likes your blog or work can donate you for your work to keep on.
Demo : You can see on the right sidebar.
The reason i have put 2012 in the title is that there are many tutorials online about adding a Paypal button but they don't work now and many people don't get a proper answer about adding the feature on their blog or website.

Adding the donation feature

The adding process is as easy as copying and pasting, no need of any coding language. Please follow and read each and every step carefully to avoid any misunderstanding.

Setting up your Paypal

Note : If you haven't yet signed up for Paypal then do it here http://paypal.com
We were having difficulties receiving Payments in Personal Paypal account, so you have to make your Paypal account Premier in order to receive donations. Upgrading your account to Premier is absolutely free.
Login to your Paypal account -> On your account dashboard you will see the account type you have, if Personal is mention there, click on it and upgrade to Premier. That's it.

Generate the donation button

In many old tutorials you may have seen that you need to log into your account to get to a page where you can create the buttons, but Paypal interface and system has changed since the way to get a button is also different.
Paypal provides a free tool with which you can create a button, you just need to enter your details, that's not more than your Paypal email id and the organization name you want your donation received as.
Note : I suggest you to log out from Paypal while creating the button.

1. Go to this page and click on 'Create button' link https://www.paypal.com/us/cgi-bin/?cmd=_donate-intro-outside
2. Now when you are on the page with Paypal button creating tool you will see a drop down menu with different options (button type) choose Donations from the drop down.
3. Put your organization name and donation id (it's optional)
4. If you want a more customized button then you can use the customization options, you can put your own image instead of the normal donate button (optional)
5. Choose the currency. If you want a fixed amount to get donated from the donors then you can choose the 'Donors contribute a fixed amount.' and enter the amount.
6. The last and the most important step is to enter the email id for your Paypal
7. Skip Step 2 and 3 there and click on 'Create Button' and you will get the HTML code for your donate button. Copy that code.

Next is to add the code for Paypal donate button into your blog's sidebar.

Add the code in your blog

We are going to simply add the code into the blog by an HTML/JavaScript gadget. To do that go to your Blogger Dashboard -> Layout -> Add a gadget -> Select HTML/JavaScript from the list -> Title the gadget and in contents paste the HTML code you got from the Paypal donation button generator.
Save the gadget and that's it.
Tip : You can add the donation button HTML anywhere applicable, for example inside the posts.
Tip : If you want to add the gadget below your posts then this tutorial[click to open] will help you.

Yeah ! That's it

Wasn't it so simple ? Adding a Paypal donation button could be so easy with a latest tutorial. I will be publishing another tutorial on custom Paypal donate button, subscribe to our feed to get the updates.

Drop your awesome comments to give us a feedback of this post/tutorial, we will be glad to hear from you.

Choosing keywords that will drive more traffic to your blog

Your blog is not doing too well? Or can't decide what to write about on your blog ? Then this SEO tip will surely increase the visibility of your blog in search engine.
It's not easy to get a better position in search results, when writing a post you should always think of the keywords used in the search engines. Although just using the keywords in your blog won't work but calculating the position of your blog in particular search keywords can get you large organic traffic. That simply means you are increasing your revenue either by getting more customer for your products or by the advertising banners you have put on your blog or website.


You will find dozens of SEO tips on the web and most of them don't work now but finding a new and better SEO technique is awesome, just like i did. As a blogger you just don't have to write but also learn how search engine can help you get readers, once you have a good number of loyal readers you can just continue writing but as a beginner it is like writing in the dark and no body sees you, just to put some light you have to take help of the SEO tips you will find online. But always remember to use SEO tricks which is working and done in a legal way, using black hat SEO techniques can harm your stats on the Search engines and you can be removed.


Everything above was an introduction to the SEO and using it, for the SEO tip which i have mention is below.  

Decide what to write on

You can write anything you like on your blog but do you wonder what others on the web are looking for ? You don't need to think about everybody on the web but the people who are searching for a article or post that you can give them. Am not even talking about your current readers or contacts, there's still a large audience on the web to whom you can serve something that they would like to read, but the question is that how you can get to know what others are wanting from you ?

Discover what keywords are best for you

The idea is to first know that for what search keywords your blog is appearing at good positions on the search results pages. You will normally see search keywords related to the content you have on your blog but along with that you will also get position in the search results without having contents related to that keyword.

Use Google webmaster tools for keywords reasearch

I believe Google Webmaster is good tool for keywords research, usually people use it to see what keywords are working for their contents but we will use it to know which keywords will work for our future contents.
Note : If you haven't used Google Webmaster tools then get hands on it now and submit your sitemaps to get your blog indexed into search engine.

If you are already using the webmaster tools then you can see position of your blog for particular keywords. Log into Google Webmaster tools -> Select the site from the list (add a site) -> Traffic -> And click on the Search queries, you will see all the hit search requests for your blog and might also get good positions for search queries for which you don't have any post and that's where you can get better traffic. Analyze the Keywords and see what can help to create contents that can give you some handsome traffic.

You can get traffic for keywords that matches your blog but if you want regular readers try to make a post with complete information and most importantly make it genuine. And follow some more SEO tips for a complete optimization of your blog site.       

Support your country for London 2012 Olympic by your Blog

London 2012 Olympic is obviously trending up on the web and that's the magic of the Olympic games. As a blogger don't you feel like supporting your country by putting up a badge on your website or blog ?

If you are an ultimate lover of the Olympics and support you country to perform well in the games then you can do more to support them, if you are crazy about the London Olympics 2012 then you can run waving your country's flag  but that's just too tiring so if you are on Blogger and want to show love to the sports person of your country then why not put a badge in your blog ?

Badge for your blog

Adding the badge is easy, the badge is a logo of your country and it will link to anything you want, can be a blog post you made to support your country in the London 2012. We actually need just two things, HTML and CSS

Here is a demo for the badge

Demo

The HTML

The first step is to the add the HTML in your blogger template. This is the HTML we will use for the badge

<a class='sprt-country' href='#' target='_blank'>
<h4 class='hsupport'>I Support</h4>
<img src='http://www.printableworldflags.com/icon-flags/48/India.png' title='I am supporting my country for the Olympics'/>
<h4 class='hsupport2'>For the London 2012</h4>
</a>   

You need to make changes on couple of things in this HTML, main change is the flag image url in the <img> tag.

1. Line 1 : If you posted something related to the Olympics games on your blog or just a blog post to support you country then you can put the link in href='' just replace the hash (#) with your blog post URL
2. The <h4> tags contains some text, by default i have put it 'I support' for the first h4 and for the last it is 'For the london 2012', you can change it if you want it in your own language or just want to put your own words. 
3. Line 3 : This is the most important one, as it's your country's logo that will appear in the badge. To change the picture URL, go to this link, find your country name and click on it. You will be taken to a page with different sizes for your country flag picture. Choose the 48*48 and copy the image url by right clicking on it and replace the link in src='' in the line 3 which is an <img> tag 

You have to place your HTML in the template. Go to your Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Find </body> tag in your template and paste the HTML just above/before the </body> tag, that's it. Save the template.

CSS for the badge

To make the badge beautiful and attracting we will use CSS. Here is the style codes for the badge.

.sprt-country {
    position: fixed;
    top: -10px;
    text-decoration:none;
    right: 15px;
    background-color: rgba(255, 255, 255, 0.87);
    text-align: center;
    padding: 12px;
    border: 2px solid #888888;
    width: 100px;
    border-radius: 0px 0px 20px 20px;
    font-family:'georgia';
    color:grey !important;
    text-shadow:1px 1px 1px white;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
.sprt-country:hover {
    background-color: white;
    text-decoration:none;
    color:black !important;
}

You can add the CSS in via the template designer to do that go to the Blogger Dashboard -> Template -> Click on the Customize button -> Advanced -> Add CSS -> Now paste the CSS in the custom CSS box and hit Apply to Blog. [Click here to know how to add CSS]

Once the CSS is applied on your template you can see the badge in action on the top right corner of your blog. Now your readers will see you as a true lover of your country. 

Liked this tutorial

Did you find this badge useful and a good way to let your readers know about how you support your country in the London 2012 ? Then please share about this post. Drop your valuable comments below and enjoy discussing this post.