Full Sized Background Image on Blogger with Blur Effect

In this short tutorial you will learn how to add an image as the background of your blog that stretches to all edges thus fills your entire blog's background portion.


Looking to add a nice effect to your blog by using beautiful pictures as background images? It is a great way to personalize a blog, depending on the color scheme of your blog and the feel that you want the blog to have can all be improved by using an image as the full background.



This tutorial will be guiding you through the process of setting a custom full size image on your Blogger blog with a few lines of CSS as well as showing a way to give it a blurred glass effect.

Here's a quick demo of what you are going to have on your blog by following the steps to add the CSS to your blog: Full Page Background Image Blurred Effect using CSS

Uploading the image

Whatever image you are going to use you have to upload it somewhere in its full size first. The best place to upload it is Blogger itself, it gives unlimited photo storage as well as fast servers from Google wouldn't ever slow your blog down. 

1. Open a draft post in your Blogger dashboard
2. Upload the image
3. When the image appears in the post area, right click on it and "Copy image address" or "Copy link address", the option might be different on different browsers.
4. Paste the copied URL that is the image's address in a Notepad / Textedit app. We may get something like this
   
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrajfadQBUo8BooKtb2RHwsSG3DsiDCrVtBHEkAVqP6zcdTmtcmXJ3XQiBo1B0WO6AaeyLOljOpRaaaabRAbD4Y0jnfBmq6pY9TZrb9z0v7pIaWucvuvajBbg2KiWedjLR5pDoqAC9xy2/s1600/photo-1434394673726-e8232a5903b4.jpg
5. Keep it with yourself, we will need this in the next step. 

The CSS Snippet

CSS is what makes it possible for us to add designs to our websites and blog. This one does the job for adding a full screen background.

html, body {
    background: url('IMAGE-URL-HERE') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Copy the CSS code and paste it in another Notepad / Textedit window.

In this code, replace IMAGE-URL-HERE with the image URL we got in the last step.

html, body {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrajfadQBUo8BooKtb2RHwsSG3DsiDCrVtBHEkAVqP6zcdTmtcmXJ3XQiBo1B0WO6AaeyLOljOpRaaaabRAbD4Y0jnfBmq6pY9TZrb9z0v7pIaWucvuvajBbg2KiWedjLR5pDoqAC9xy2/s1600/photo-1434394673726-e8232a5903b4.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

I've done it, what now? Now that you have placed your image's URL in the code we are ready to make it appear on the blog. but before that please do take a backup of your existing blog theme.

1. Log-into your Blogger Dashboard
2. Go to the Theme   section
3. Click on "Customize" 
4. In the Theme Designer go to Advanced > Add CSS
5. Paste the CSS snippet into the text area on the theme designer page and click on Apply to Blog on the top right

Open your blog to see the updated background image. Right now you wouldn't see the blur effect, we will see how to do that in the next step.

Let's give it a blurred effect

We assume you are still in the Advanced > Add CSS page in the Theme designer from the last step. A small change in the URL of the image is required to get the blurred effect - that is to reduce the size of the image. Yes, the smaller the image the more blurry it will be. So that's our general idea, instead of using a photo editor app to make the original image blurry we use a small version of the original image.

Let's suppose your code is this, the URL of your image is of course different than the one in the following one.

html, body {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrajfadQBUo8BooKtb2RHwsSG3DsiDCrVtBHEkAVqP6zcdTmtcmXJ3XQiBo1B0WO6AaeyLOljOpRaaaabRAbD4Y0jnfBmq6pY9TZrb9z0v7pIaWucvuvajBbg2KiWedjLR5pDoqAC9xy2/s1600/photo-1434394673726-e8232a5903b4.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

In the URL of your image, which may look something similar to this:

https://3.bp.blogspot.com/..............ynOTNfQCKgB/s1600/photo-1434394673726-e8232a5903b4.jpg

Change the number with the s prefixed to it to something smaller.

https://3.bp.blogspot.com/..............ynOTNfQCKgB/s32/photo-1434394673726-e8232a5903b4.jpg

s32 means the CSS code will load a version of the image that is only 32 pixels wide, so when a small image stretches from edge to edge on a screen it becomes blurry and gives the perfect effect we want.

You can change the value to whatever you like to adjust the level of blurriness of your background image. Change that small part in the code and again click on Apply to Blog to update the CSS code and make it go live on your blog.

Help Needed?

On some third-party themes and even the original themes provided by Blogger the code may not work properly due to some other CSS setting that may be overriding it. If you are unable to get it working then please share your blog URL in the comments down below along with the code that you are using as it is. We would be glad to jump in to help.

Making Images Fit in Post Body on Blogger

If you are working on a responsive design for your Blogger blog, or you are just tired of resizing your images in post editor to fit in the post container then this tutorial will show you an easy way to make images fit with it's surrounding.

This problem occurs often when you try to post images of the dimension larger than your content area or you are just using a responsive layout and when it down-sizes, the images overflows the content area.

Before you continue with the tutorial, check the demo:
Demo: Without the CSS Demo: With the CSS

In the first demo, the image in the container overflows because the width of the image is larger than that of the image, but in the second demo, if the image width is greater than the container's, it will fit itself to the container.

The Code!

All this can be achieved with a small block of CSS code. Before I start giving you lectures on how this works, here's the code for you to use (can be used in most Blogger Templates, but you might need to change the selectors if you are using a custom designed template):

.post-body img {
    max-width:100%;
    max-height:auto;
}

Now you just need to apply this code to your blog, check this tutorial to learn how add CSS in Blogger.

How does it work?

If you are not a web designer or coder, then this might all seem like a magical charm to you, but it's just code, code that's made to make your life easier. Well, so if you are ready to get bored then I am starting my chapter on CSS.

What actually does the magic is the max-width CSS property which gives any element a maximum width limit. So if you specify an element the the maximum width of 200px, it wouldn't exceed it. The 100% value tells the browser that the element(s) must not exceed the full content width of the container.

The max-height property helps in keeping the original proportion of the image intact. To know more about what would happen if you specify a value in percentage then try and check the results ;)

Creativeness with Box-Shadow CSS Property

Web technologies like HTML and CSS have come a long way and now it is now used more than just creating simple web pages.
Almost every site you see on the web is writing in HTML and styled with CSS and those languages are way very simple than complex languages like ActionScript or C++, but despite of its simplicity it can be used to create masterpiece.

Following two examples shows what todays web technologies can be used for. What we really showcase here is the use of box-shadow CSS property which is usually used to create shadows on HTML elements <-- Just like on this.

The people who wrote the property's specification may have never thought what it can be used to create. Let's take a look at the amazing.

Mona Lisa in Pure CSS

One of the most discussed and popular portrait now re-created in CSS. CSS as you know is the styling language of the web, the thing using which you  make your website fancy :)
See it in action!

Mona Lisa Painting Recreated in CSS3's Box-Shadow

Now one may think why this is so special, a little experienced Photoshop guy can make that in minutes but note that this is done using a CSS property called box-shadow , the designer who created this wrote each and every pixel of the complete photo to produce this.
Da Vinci would have loved this..

Unicode Person Pixel Art in Box-Shadow

How about something simple ? As being a 90's gamer I always had a love for pixel arts and this caught my example:

Unicode Person Example

This simple image of a cute face raising hands is also created with the same technology that was used to create the 'Mona Lisa' example. And do I need to repeat it ? It's created in box shadow!


Now if you are wondering why this guy is so excited about images created in box-shadow then read about it here and you will understand why : https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow 

Why Get A Flash Free Website

Some years back, flash-based websites were a trend as web technologies were not capable of creating interactive designs so it was the only choice. But should you design your business site in Flash ?


When the web was relatively new and HTML was just used to create simple text documents then site owners had no other option to create an interactive web page so they used Flash but today when HTML5 is even capable of creating games site owners yet get Flash based sites for their business or hobby even after paying hundreds of Dollars.

But today there are many disadvantages of a flash based website especially if it's a business site. So when you hire a web designer the first thing you must make sure is if he's not doing it in Flash, and if his plans go for Flash-based site, say no to him and find a better web designer, often web design companies provide poor designs and services (not always) so make sure to check their portfolio and check if they use the new standards, you can do that by comparing some professional sites like CSS-tricks, SmashingMagazine etc. they uses some of the latest web technologies to design and develop their site.

It's often good if you hire a freelance web designer but check their portfolio too before giving them the work and money.

We were talking about disadvantages of Flash, yup, it can be really harmful to your sites in terms of search rankings and page performance. Following are some of the reason you must never get your business site created in Flash.

Not Search Engine Friendly

Flash content is not text and a search engine can just read text. So if you have your important text content in flash search engines won't be able to read it and rank your pages according to it. It's a total loss to get your website in Flash when you are trying to make it popular.

Not User Friendly too!

Flash player is not inbuilt in browser, an additional plugin is required to view flash content and when you have your complete site made in flash, an user without the plugin won't be able to see the website at all. And even if you prompt the visitor to install Flash plugin, 90% won't do it.

It does make beautiful animation but also makes the user's PC slow and sometimes lags which is not too beautiful. But today with HTML5, jQuery and CSS3 cool animations are possible without any extra plugin but with small lines of codes which is user friendly too.

Now People are used to Flash free sites

Yup, that's true, even when I am searching for something online and click on a link that leads me to a flash-based website I just feel it's better to leave the site. Not only me but most of the online traffic are a victim of Flash-phobia and that can affect your business.

Waste of Money

If you pay even $10 for a Flash website it's too much for that! One can create a flash based site with little knowledge of web languages as Flash objects are created with a tool called Adobe Flash Maker and the designer don't even have to write a single line of code to design the site body whereas designers who design sites in new web technologies writes 10s of thousands codes to make a site effective.

The Decision is Yours

We tried our best to explain your why you shouldn't pay for a Flash-based site for your business and also tried to mention their disadvantages here. Because when you are paying you must get the best, not just anything.

But the final decision depends on you and what you want. Anyways, thanks for reading, 

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. 

Infographic About Responsive Web Design

Responsive Design is getting very important with time and almost every website has a responsive design and that's important because 30% of people visits your site with a hand device like an iPad or a Mobile Phone.
If you are just a web surfer and likes to find new sites on your iPad or phone then there might be times when you see websites not compatible with your device because of the small display of your device and the website looks very dull with it, just imagine if you were the website owner you don't wanted to miss the 30% of traffic and Responsive Web Design is gonna fulfill your needs.

Before Responsive Web Design came into existence, people used different designs for different devices and that was really a time wasting job, but Responsive Web Design technique has really reduced the hard work needed to design different looks for different devices.

Dot Come Infoway has published an interesting and informative Infographic which covers almost everthing about it, from it's birth to how it gain such popularity.

This infographic have every detail an Infographic can have to show the importance of responsive web design on a website.

Dot Com Infoway's previous Infographic was about HTML5 and I shared it with my readers, if you haven't checked it yet, then here's the link. 

Create Google like Scroll bar in blogger blog

If you look back at Google web pages back in mid 2011, they were simple just like a classic web page like other pages but 2012 seems to be a design year and that's why each and every big company painted their web pages with dynamic looks and features. One of the extraordinary thing about Google is it's scroll bars, they are just awesome and anyone wants to implement it, this tutorial will show you how to do that.

Many websites used the same design for scrollbar with different techniques, some with JQuery or etc. Many blogger users also wanted to use the same design for their blog but they were helpless as most of the blogger users just have basic knowledge of web languages so it was difficult for them to make such design on their own.

Before

After

This tutorial will teach you how to design the scrollbars like that in blogger.
Actually the trick is very simple, the scrollbars are design with new CSS3 scrollbar selectors which only works in webkit, unfortunately their's currently no way to make it work in non webkit browsers such as Firefox, Opera etc.

I have recently published 'Dream Blog V2' template in which i have implemented the scrollbar design. So here's the demo


Demo

The CSS

It is all CSS which do the designing on the scrollbar and you don't need to worry about heavy javascript codes, a simple CSS code block can do it. This is the CSS, you don't need to make any changes in this code but if you know what to do then you can change color and some values to fit your needs.

/* Webkit Scrollbar */
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: #FFFFFF;
-webkit-box-shadow: inset 1px 1px 2px #E0E0E0;   
border: 1px solid #D8D8D8;
}
::-webkit-scrollbar-thumb {
background: #646464;
-webkit-box-shadow: inset 1px 1px 2px rgba(155, 155, 155, 0.4);  
}
::-webkit-scrollbar-thumb:hover {
background: #AAA;
}
::-webkit-scrollbar-thumb:active {
background: #888;
-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}

Adding the CSS

Adding this CSS is easy, check this tutorial or follow these steps.

• Go to Blogger Dashboard 
• Select the Template tab
• Click on Customize button
• When you are in template designer, select Advanced
• And from the Advanced menu select Add CSS 
• Paste the CSS there and hit Apply to Blog. 

That's it, now clear and caches and reload your blog by hitting CTRL+F5 and you will see the Google like scrollbars on your blog, now when your readers ask you how you did it you can tell them about us :)

If you are facing any problems implementing the code then you can send us your message by dropping comments. 

Hover effect on images in posts - Blogger

This is an easy trick but an amazing one too, bring the photos in your post to life with this hover effect trick.
You may have seen this on many big websites, these types of hover effects keeps the reader engaged with your blog and if they are getting bored they can simply play with it. If you haven't seen it before then check the demo below

Demo

So, how's it ? You can also do it vice-versa
Don't it look great with this elegant hover effect. The code implementation is easy and you after reading the code specification you can make your own effect out of it. The whole thing we have to add is CSS. So read further to achieve this.

The CSS for this hover effect

This effect looks like that it must be created with heavy codes but with CSS3 generating this effect is easier than ever. The CSS below is actually for Blogger, but with little edits WordPress users can also use it on their website or blog

.post-body img {
opacity:1.0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

.post-body img:hover {
opacity:0.7;
}

To add this CSS into your blogger blog : Log into your Blogger Dashboard -> Template -> Customize -> Advanced -> Add CSS  -> Add the CSS into the custom CSS box and hit Apply to Blog.

Now refresh your blog with CTRL+F5 and check the effect on your images !
But what if you want it in opposite order ?

Vice-Versa
Then try this CSS, this keeps the image untouched faded and when you hover it you will see it in normal state.

.post-body img {
opacity:0.7;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

.post-body img:hover {
opacity:1.0;
}

The adding procedure is same as above one. Here opacity is the main property creating this effect, so changing it's value may bring some versatility into the effect. You can change it's value from 0.0 to 1.0

Your views and opinions

How is the effect working on your blog ? I guess its great but if you are having any difficulties in applying this effect at any point contact us via email or drop your comments.

Show/Hide effect for Gadgets in Blogger with JQuery

Don't you sometime feel like adding more dynamics to your blog and make it more user friendly, like giving them their own control like toggling show/hide of a gadget. You will learn how to do that in Blogger.
A little instruction to JQuery: It's a powerful and small JavaScript library to add dynamic features and sometimes also used for transferring data.

For a demo of this JQuery effect, click on the Title of About me gadget on right sidebar and see it toggling between hide and show. Ain't it great, you let your users decide whether they want to choose to display the gadget or not.

Adding the JQuery lib.

In classic blogger template, JQuery library isn't added in the document already. So to make the JQuery codes work you first have to implement the JQuery library.
To do that in blogger, Go to Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F and find </head> and paste this HTML script tag just above </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

This is just the first step, now read further for the real trick.

The JQuery to make the effect 

The main think we have to focus on this is the correct selector so it should work for your blog too. Although there i know the basic selector for classic blogger templates and can be applied on any template unmodified.


This is the magical code doing it all, study it well and read what ever line is about

<script type="text/javascript"> 
$(document).ready(function(){
$('.sidebar .title').one("click",function(){
    $(".sidebar .widget-content").slideToggle("slow");
  });
});
</script>

Note : The first and last line is just to wrap it into script tag to be placed in the document.

• Line 2 : It tells the browser to load the Jquery after the document is fully loaded and read for performing JQuery effects
• Line 3 : The whole line describes that when .title in the .sidebar gets clicked then perform the function (which is in the next line)
• Line 4 : Continuing from the above line, it plays the function that was declared in the 3rd line, it makes the .widget-content inside .sidebar to hide when it's visible on a click event and when it's already hidden it's comes back in view. 
• Line 5 and 6 : Ending for the above lines

Where to add this Script ? Go to Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F and find </head> and paste this HTML script tag just above </head>

You can use this on other areas of your blog just by making some changes in selectors, selectors can be identified easily with chrome developer tools.

Result : So when you are done placing the codes at right place, Save the template and refresh your blog using CTRL+F5 to ensure that all files are loaded freshly. Now try clicking on title of any of your gadget and see the amazing toggle effect. That will just make you blog to a new level.

Your feedback ?

This tutorial is designed to make implementation of JQuery in blogger easy and make you understand jquery, so if you find anything difficult and don't understand it then drop your comments and we may just look to it.

This JQuery will not work on some blogs having different templates, so if you don't have any idea what to do then post your blog links in the comment and we will guide you through the process. 

Hover effect and Expandable Search box for Blogger

Search box is now a compulsory gadget in every blog for ease of access to the contents on any blog or website. I had already posted a tutorial on creating a classic but good looking search bar for blogger.
This tutorial is also about creating a search box but with an advanced design and concept.You can see a similar design on apple.com, i saw it long ago, when i don't had any idea on how to make it. But today writing the tutorial for people seeking help to make a search box like that or we can say expandable search box.

See the demo to make sure this what you want.

Demo

The HTML

The HTML is same as in previous tutorial but the main thing we focused in this search bar is it's design and the effect of expanding when it's on focus state. This HTML can be applied on any website if you have access to edit it's HTML. But special guidance for Blogger users :

1. Go to Blogger Dashboard
2. Select hte Layout tab
3. Now click on 'Add a Gadget' 
4. Select HTML/JavaScript gadget from the list. 
5. Now Add this HTML into it's content area but remember to make required changes.

<div class='srch-cnt'>
<form action="http://www.stramaxon.blogspot.com/search" class="formupsearch" method="get">
<input class="searchinputarea" placeholder='Search for..' maxlength="255" name="q" size="25" type="text" value="" x-webkit-speech="true" />
<input class="boxsearch123" type="submit" value="search" />
<input class="checkbutton23" name="sitesearch" type="radio" value="" />
<input checked="checked" class="checkbutton23" name="sitesearch" type="radio" value="stramaxon.blogspot.com" />
</form>
<a class='attrbl' target=blank' href='http://stramaxon.com/2012/07/hover-effect-and-expandable-search-box.html' title='Get this Gadget'>Get this!</a>       
</div>

The changes you have to make into this HTML code block :

• Line 2 : Change the URL is action attribute with your's url with /search at end. e.g
  action='http://www.mysite.blogspot.com/search' 
• Line 3 : This is optional change, just change the placeholder value. It is the group of words that appears when you haven't enter anything into the search box. 
• Line 6 : This is the last edit, just replace the URL in 'value' attribute with your blog's or website URL without. 

So, once these changes are made on your HTML you can save the gadget. Now place the gadget block at upper side so your visitors can easily find the search box.

The CSS styling

The overall role in this search box is of CSS which gives it a look. Search box are classic by default but applying CSS on it to make them look good is a trend.

Applying CSS is very easy, check this guide on how to add CSS to Blogger blog.
This is the CSS code we will use to style the search box and it will do it's job like a charm.

.checkbutton23
{display:none;}

.srch-cnt
{text-align:right;}

.searchinputarea
{
    width:150px;
    border:1px solid lightgrey;
    height:26px;
    padding-left:6px;
    padding-top:2px;
    background-image:-webkit-linear-gradient(top,#F8F8F8,rgba(228, 228, 228, 0.93)) !important;
    font-weight:normal;
    font-size:14px;
    font-family:'verdana';
    box-shadow:inset 0px 0px 0px gainsboro;
    color:#505050;
    background-color:gainsboro;
    font-style:italic;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s;
    
}
.searchinputarea:hover
{box-shadow:inset 0px 0px 7px lightgrey;}
.searchinputarea:focus
{
    box-shadow:inset 0px 0px 8px gainsboro;
    background:white !important;
    font-style:normal;
    color:black;
    outline:1px solid lightgrey;
    border:1px solid transparent;
    width:200px; /* Width it should be when in focus */    
}
.boxsearch123
{
    text-indent:-9999px;
    vertical-align:top;
    height:31px;
    width:40px;
    border:1px solid grey;
    background-image:url("http://cdn4.iconfinder.com/data/icons/iconsweets/50/search.png");
    background-size: 30px 30px;
    background-position: 6px -0px !important;
    background-color:#EBEBEB;
    cursor:pointer;
    box-shadow:inset 0px 0px 0px #D8D8D8;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s;
}
.boxsearch123:hover
{box-shadow:inset 0px 0px 10px #D8D8D8;}
.boxsearch123:active
{box-shadow:inset 0px 0px 10px #B4B4B4;}
.srch-cnt .attrbl
{
    color:grey !important;
    border-bottom:1px dotted black;
    font-size:10px;
    visibility:visible !important;
    display:inline-block !important;
}
.srch-cnt .attrbl:hover
{
    text-decoration:none;
    color:grey !important;
    border-bottom:1px dotted black;
}

Just apply this CSS into your blog.


Note : Edit the width property in .searchinputarea:focus selector to change the size of it's width when focused. It is the width it should expand to.


Note : There's an image (search icon) which is hosted on another server, if you don't want sudden deletion of images from their server than download the image which is here  http://cdn4.iconfinder.com/data/icons/iconsweets/50/search.png Upload it to your own server or a photo hosting service such as Picasa and find the URL in the CSS code and replace it your's hosted image link.

Now when you are done doing this then check your blog for the amazing looking search bar. I have put the attribution in the search bar so that your readers can also enjoy this search bar on their blog with a click.

Hope you loved this tutorial and i am sure you will subscribe to email newsletter for more Blogger gadgets and tips. Do come back and leave your comments on this post to let us know how you were helped with this search widget for Blogger.  

Buy a blogger template or use a free one ?

Apart from the content, template design is also important. Search engines don't see your template design so design doesn't matter in SEO but the people seeing your blog needs a good user interface for navigating through your blog. Nobody wants to read a blog with no design or an outdated design blogs.
Remember the days of 1990s when internet was only used for transferring data on a plain page with black text and nothing much. Internet was not utilized the way it is used today. Design has become one of the important element in an online web page. Especially in blogs where presentation is important.


It was about the needs of design but the main topic this post is about buying a template for blogger or using a free theme. Considering a free template is easy, as you start blogging you are not aware of SEO which is the main and very important source of your readers. But is free template good for your blog ? If you don't know the how internet and search engines work you would think, they look great but there's a dark side of it. Read it below.

What's bad in using Free templates

You will find many sites on internet providing you free templates for Blogger and you will just download one for you blog and apply it. If you have a look at Wordpress theme store you will find professional paid themes and each of them are professional looking, they will look good on your blogs whichever topic it's on and that's the specialty of paid themes. But for free templates they aren't well formed or ever given a professional touch, they are just made to increase the numbers of templates in a free blogger templates sites. Free blogger templates also sometimes contains links to other sites just for backlink and you will never know about it because the author of the template hides it. Backlink to random sites from your blog will affect your blog's reputation for search engines. Even sometimes they contain iframes in which other web pages are embedded, it's the worst, they are integrated in a site template to increase pageviews of other's site just to get money from their customers for increasing traffic, it means your pageviews will also add the pageviews to the site in iframe.


Even after reading this you want to use free templates, i won't stop you. But check if they have implemented any iframe or hidden links, if you found those in the template then keep from using that template.         

The benefit of using paid blogger templates

The best thing with paid templates is that you get a unique design for your blog. In paid templates you can ask the designer to make changes on your needs, so you have your own unique template. As these templates are not free, they are created with hardwork because designers are going to be paid for that.
Also, it's on you to have the attribution or not. I would say that attribution is okay as it will encourage your blog viewers to know more about the template designer or author.


I don't think it's a big deal to pay $20 for a premium template, if we talk about WordPress themes i have seen the lowest template @ $45.

Where can i get my template designed and for what amount ?

I am not sure what other designers expect but if you want me to design your template i will do it for less than $20, you will tell us what you want and we will convert it into a professional blogger template to fit your niche of your blog. I have couples of premium templates in my directory, so if you want then contact me on my email depy45631@gmail.com 

Blogger Comment design like on 'Spice up your blog'

Big blogs like SpiceUpYourBlog is inspiration source to many people. Spice up your blog or SYB is a blog on blog designs, SEO tips and etc. Paul Crowe the owner of SYB is very knowledgeable about blogging and web design. In this tutorial you will learn how to make your blogger comment system design like on Spiceup your blog. 
SYB is well designed by Paul Crowe. But the comment system design is one of the best thing we find in SYB, the design and it's look makes the comments easier to understand.

Now you don't have to keep that boring comment design by Blogger. We can easily change the overall design of comment and make it look and like the comment system on SYB.

Before you Apply this design, don't forget to check the

Demo


It can be done easily with CSS. You can make changes to the CSS if you understand what you are doing or you may just ignore making any changes. Follow these Instruction to add this long CSS

1. Go to Blogger Dashboard 
2. Now click on the Template tab
3. Click on the Customize button
4. Select the Advance tab > scroll down and Add CSS 
5. Now you will see a textarea on right side, this is where you have to paste the HTML

@font-face {
  font-family: 'Philosopher';
  font-style: normal;
  font-weight: 400;
  src: local('Philosopher'), url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
.comment .avatar-image-container {
border: 1px solid #B6B6B6;
max-height: 70px !important;
margin-top: -5px;
width: 70px !important;
position: relative;
z-index: 50;
}
.comment .comment-block {
margin-left: 75px !important;
}
.comment .comment-header {
background: none repeat scroll 0 0 #A9F5D0;
color: #333;
font-size: 15px;
font-weight: bold;
margin-left: 60px;
}
.comment .comment-header a {
color: white !important;
text-decoration: none;
}
.comment .comment-content {
background: none repeat scroll 0 0 #FEFFF9;
border-bottom: 2px solid #E6E6E6;
font-size: 14px;
margin: 0 0 30px;
padding: 5px 5px 10px 10px;
}
.comment .comment-actions a {
background: none repeat scroll 0 0 #DDD;
color: #333;
display: inline-block;
line-height: 1;
margin: 0 3px;
padding: 3px 6px !important;
text-decoration: none;
}
.comment .comment-actions a {
background: none repeat scroll 0 0 #DDD;
color: #333;
display: inline-block;
line-height: 1;
margin: 0 3px;
padding: 3px 6px !important;
text-decoration: none;
}
.comment-header cite {
background: none repeat scroll 0 0 #DF7401;
border: 1px solid white;
color: white;
padding: 2px 20px;
position: relative;
z-index: 99;
margin-left: -20px;
}
cite.blog-author {
background: none repeat scroll 0 0 #8181F7 !important;
}
.icon.blog-author {
display: none !important;
background: url("") no-repeat scroll 0 0;
margin-left: 90px;
width: 60px !important;
height: 60px !important;
position: absolute;
right: 5px;
bottom: 5px;
top: 10px;
}
.comment .comment-header {
color: #333;
font-size: 15px;
font-weight: bold;
}

.comment .avatar-image-container img {
border: medium none !important;
height: 70px !important;
width: 70px !important;
max-height: 70px !important;
max-width: 70px !important;
}
.comment .comment-actions a {
background: none repeat scroll 0 0 #DDD !important;
color: #333 !important;
display: inline-block !important;
line-height: 1 !important;
margin: 0 3px !important;
padding: 3px 6px !important;
text-decoration: none !important;
font-size:16px;
}
.comment .comment-actions a:hover {
background: #CCC !important;
text-decoration: none !important;
}

.comments {
font-family: 'Philosopher', arial, serif !important;
font-size: 1em;
color: black;
}
.comments .continue a {  
display: block !important;
font-weight: bold !important;
padding: .5em !important;
color:#E34600;
font-size:16px;
}
.comments .continue a:hover {color:#4D3123;text-decoration:none;}
.item-control {
display: none !important;
}
.comments .continue {
border-top: 2px solid transparent !important;
}

This is a pretty long CSS but it works very well. After you apply this CSS to your blog, check your blog for the brand new SYB like Comment System which your readers will like.It also attracts your readers to comment which is good for your blog. 

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.

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+.

How to make an Animated header without Flash in Blogger

My blog's header is something that most of my readers asks 'how to make a header like that', this post is especially for them. You can use Flash to make a header animate but the problem is that flash makes website slower but with CSS it's too easy and comfortable, it's friendly with the page. Let's see how to make header like mines

This tutorial is for Blogger user, other's might use the CSS but remember to set the class at the right place.


The header on my has a good popularity and many readers wanted to know the key, how to make their header like this too, i said them wait for a post and now here it is. We will mainly work with CSS, as we have to only design the Header, HTML is already in the template.

The CSS we will use

To form an animation effect on hover, we have used the new CSS3 properties for better experience, CSS3 is a new version of CSS, with CSS3 it's not easy to create more attractive pages and designs and so as the header.


Actually there's two mode, one is that you can only set the effect for pages other than home-page. I will provide CSS for both the modes. You may only apply one CSS code block, adding all modes will cause errors.

No header Effect on Home Page - This CSS will make your header animated and designed only on post pages,pages, index pages etc. Your header will be default on Home Page.

.Header h1 a 
{ 
border-color:black !important;    
text-decoration: none; 
font-size: 70px;
font-family: consolas;
background-color: aliceblue ;
border-style: solid;
border-top-style: none;
border-bottom-style: none;
padding: 20px 25px 20px 25px;
border-radius: 15px;
border-width: 16px;
border-bottom-right-radius: 76px;
border-top-left-radius: 76px;
color: black !important;
transition:background-color 1s,border-style 1s,border-top-style 1s,border-radius 1s,border-width 1s,border-bottom-right-radius 1s,border-top-left-radius 1s;
-webkit-transition:all 1s,border-color 1s ease-in-out;
-ms-transition:all 1s,border-color 1s ease-in-out;
-moz-transition:all 1s,border-color 1s ease-in-out;
-o-transition:all 1s,border-color 1s ease-in-out;
} 
 
.Header h1 a:hover
{ 
color: white !important;
border-style: solid; 
border-top-style: none;
border-bottom-style: none;
border-width: 16px;
padding: 20px 25px 20px 25px;
border-radius: 15px; 
border-bottom-left-radius: 76px;
border-top-right-radius: 76px;
background-color: Gainsboro !important;
border-color: Grey !important;
}

The CSS is long, but works great when applied to blog. Don't know where to add this CSS ? Click here to know how to add CSS in Blogger. 


If you are feeling to lazy to paste such big CSS, then you might use the hosted CSS file to get the CSS styles. To do that you have to paste an HTML tag inside your <head> tag, for blogger user Go to Blogger Dashboard > Template > Edit HTML > Proceed > Using CTRL+F search for </head> in the template and paste this link tag just above it.
 

<link rel='stylsheet' href='http://dl.dropbox.com/u/80435960/header-linkeffect.css' type='text/css'/>

And Save. It should look like this. 


 

Effect on header on all pages and home page - If you have tried the last CSS, then you have seen that it only works on post-pages and other pages other than homepage, this CSS is universal and applies the effect on homepage also. Let's overview the CSS.

/************************************************
Design taken from http://stramaxon.blogspot.com
Designed by : Deepak Kamat
************************************************/
.Header h1 a 
{ 
border-color:black !important;    
text-decoration: none; 
font-size: 70px;
font-family: consolas;
background-color: aliceblue ;
border-style: solid;
border-top-style: none;
border-bottom-style: none;
padding: 20px 25px 20px 25px;
border-radius: 15px;
border-width: 16px;
border-bottom-right-radius: 76px;
border-top-left-radius: 76px;
color: black !important;
transition:background-color 1s,border-style 1s,border-top-style 1s,border-radius 1s,border-width 1s,border-bottom-right-radius 1s,border-top-left-radius 1s;
-webkit-transition:all 1s,border-color 1s ease-in-out;
-ms-transition:all 1s,border-color 1s ease-in-out;
-moz-transition:all 1s,border-color 1s ease-in-out;
-o-transition:all 1s,border-color 1s ease-in-out;
} 
 
.Header h1 a:hover
{ 
color: white !important;
border-style: solid; 
border-top-style: none;
border-bottom-style: none;
border-width: 16px;
padding: 20px 25px 20px 25px;
border-radius: 15px; 
border-bottom-left-radius: 76px;
border-top-right-radius: 76px;
background-color: Gainsboro !important;
border-color: Grey !important;
} 


/***********************************
Both Link and Non-link
***********************************/

.Header h1 
{ 
cursor:default;    
border-color:black !important;    
text-decoration: none; 
font-size: 70px;
font-family: consolas;
background-color: aliceblue ;
border-style: solid;
border-top-style: none;
border-bottom-style: none;
padding: 20px 25px 20px 25px;
border-radius: 15px;
border-width: 16px;
border-bottom-right-radius: 76px;
border-top-left-radius: 76px;
color: black !important;
transition:background-color 1s,border-style 1s,border-top-style 1s,border-radius 1s,border-width 1s,border-bottom-right-radius 1s,border-top-left-radius 1s;
-webkit-transition:all 1s,border-color 1s ease-in-out;
-ms-transition:all 1s,border-color 1s ease-in-out;
-moz-transition:all 1s,border-color 1s ease-in-out;
-o-transition:all 1s,border-color 1s ease-in-out;
} 
 
.Header h1:hover 
{ 
color: white !important;
border-style: solid; 
border-top-style: none;
border-bottom-style: none;
border-width: 16px;
padding: 20px 25px 20px 25px;
border-radius: 15px; 
border-bottom-left-radius: 76px;
border-top-right-radius: 76px;
background-color: Gainsboro !important;
border-color: Grey !important;
} 

How do i add this CSS in Blogger ?

If you think the CSS is very complicated and you don't just want to mess things up then you may try this. Adding this link tag inside your template's <head> then it will load the given CSS. This is an one line link tag.
For blogger user Go to Blogger Dashboard > Template > Edit HTML > Proceed > Using CTRL+F search for </head> in the template and paste this link tag just above it.

<link rel='stylsheet' href='http://dl.dropbox.com/u/80435960/header-effect.css' type='text/css'/> 

So now you know how to make a cool looking header like mine, hope you will share the post. 


Related Posts -

• Add Cool looking search bar on your blog
• Attractive Subscription box designed with CSS, add to get more readers
• Place an Admin tag next to your disqus comments

Create loading bar design like Gmails loading bar

The famous and eye pleasing design of Google has took over and the designs of Google is getting better and better, recently Google made changes to it's Gmails homepage and the loading page and the most amazing design was of the loading bar, the blue loading bar with moving image in it makes it look more professional, now let's see how to make it. 

Remember that i am only going to show how to make such design with CSS, the rest of the JavaScript coding should be done by you or someone else, i am just showing how to design it.

There's two parts to make this design, the first is a </div> element and the other is CSS style which is required to make the design. The CSS codes can be customized but only play with it of you have knowledge about it. 

First of all create a div element, class attribute's value should be same on both HTML div element and CSS styles. 

<div class='loading-bar'></div>

So this is the HTML for the loading bar, if you are sure how to use it dynamically to sync with a loading event then you might just add the CSS by classing it. Your HTML may differ as on your needs but CSS should match the class name.     


Now the most important part of the tutorial to make it really work, you are allowed to modify the CSS if you are sure about what you are doing or might just leave it. But to create a bar like exactly you want, you have to make changes, so i will tell what changes can you make in the CSS.

.myname
{
color: white;
border: 1px solid gainsboro;
border: 1px solid rgba(0, 0, 0, 0.1);
text-transform:uppercase;
padding:10px;
width:600px;
text-align:center;
text-shadow:1px 1px white;
font-size:18px;
cursor:pointer;
-webkit-transition:all 0.8s;
-ms-transition:all 0.8s;
-moz-transition:all 0.8s;
-o-transition:all 0.8s;
transition:all 0.8s;
height: 100%;
background-color: #6188F5;
background-repeat: repeat-x;
background-position: 8px 0px;
background-size: 40px 20px;
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: -o-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: linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
-webkit-animation: pb 0.8s linear 0 infinite;
-ms-animation: pb 0.8s linear 0 infinite;
-o-animation: pb 0.8s linear 0 infinite;
-moz-animation: pb 0.8s linear 0 infinite;
}

@-webkit-keyframes pb { 0% { background-position:8px 0px; } 100% { background-position:120px 0; } }
@-ms-keyframes pb { 0% { background-position:10px 0px; } 100% { background-position:-100px 0; } }
@-moz-keyframes pb { 0% { background-position:10px 0px; } 100% { background-position:-100px 0; } }
@-o-keyframes pb { 0% { background-position:10px 0px; } 100% { background-position:-100px 0; } }

This is the CSS that will be needed to design the Bar like this from a basic div element, but it's important to change background-position property if you are going to change the width and height of the element. 

So for your ease we have updated this on JSFiddle , just find it on the Demo Link, play with the CSS code there and if you find something better then please comment. 

DemoPlay with it