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. 

'Dream blog' - 2nd version of best SEO template

This is the second version of our best SEO template called 'Dream Blog', we got positive feedback about 'Dream Blog' template and also got some suggestion regarding the Template. This new version is more better than the older one but both works great for SEO.
We decided to launch 'Dream blog' as a free template so that everyone can enjoy the benefit of a SEO friendly template.

Preview Template Download - Server 1 Download - Server 2

Downloading and installing

Extracting the files : You can find the .xml file inside the RAR file you can download in the above links, use WinRAR program to easily extract files from the zip file.
Installing the template : The first step to install 'Dream blog v2' template on your blog, you have to upload the xml file on your template section, check this tutorial.


Note : Always Backup your template when you try to make any changes to your blogs Template.

About the dreamblog-V2-CSS.css file

Once you extract the template, you will see two text file, one xml (the template) and a CSS file named dreamblog-V2-CSS.css, the CSS file contains overall CSS code to design the template and if it's not linked in the template then your blog will have no good style with 'Dream blog' template.


I am already hosting the CSS file on dropbox and it's where the CSS file is downloaded on your template, it means that i can make changes in design by applying CSS style on the CSS file hosted on dropbox anytime. You may host the CSS file on your own server or dropbox so that you have control on it or if it ever gets deleted on my dropbox then you will have the CSS file with you and you can use it yourself.


You can find the link in the template and replace it with your link to the hosted CSS file on your server of hosting service. Replace this link :
http://dl.dropbox.com/u/93278694/dreamblog-V2-CSS.css
Go to Blogger Dashboard > Template > Edit HTML > Use CTRL+F to find the link and then replace it with your own link.

Features

This template is second version of our 'Dream Blog' and many features are same as the previous one. Because this is a new version you will see lot more improvements and new features, just a quicklist of the features. 

1. Best SEO template for blogger cause we kept the template as simple as possible to make your blog load faster and that helps in improving SEO.
2. The structure of the template is well formed and that makes the template interface better and gives it more usability
3. CSS file is hosted externally and that's 
4. New CSS3 scroll bar in this template is what makes it a 2012 template, the scrollbar only works in Webkit browsers, other browsers don't support styles for scrollbars. 
5. Content on this template is easier to understand
6. Used small picture for the full page background to improve page load, you can get more background designs here. 
7. Compact header to give more room to the contents
8. SEO friendly page title i.e  Post Title | Blog title
9. Gadget separated in different boxes.
10. Search box at the top, visitors can search for the content they are looking for without scrolling throughout the page. 
11. Post Author info and post timestamp added under the post title
12. Customized Lightbox, giving the default blogger lightbox a brand new look.Customize it yourself using this tutorial. 
13. Previous post link below the post title 
14. Jump to comment button at bottom right corner of the page for quick reach to the comment section 

These were some specification of the template. 

Add more stuffs

Just as the previous template, this template also allows you to add new features in blog if they are well formed. We have just named our blog a blogger gadget resource, so here are some of our gadgets which will look good in the 'Dream blog v2' Template, some have been already added so check before you add.

1. Hover effect on images in posts - Blogger
2. Under line gadgets title in Blogger
3. Hover effect and Expandable Search box for Blogger
4. Advanced Feedburner Subscription gadget for Blogger
5. Show/Hide effect for Gadgets in Blogger with JQuery
6. Good looking search bar for your blog or website

Your feedback and suggestions

Now we want to know about our template by you. If you have any suggestion regarding the template then do comment in with your query or the message. We will love to hear from you.

Focus on SEO or the Content ?

To become a professional blogger you also need to have good numbers of readers on your blog which is only possible when you get traffic through search engines but do you only focus on optimizing your search engine rankings ? Let's learn why content is prior.
What i see in most of the case of unsuccesful blogging is that they don't care about the content but one thing that they have heard is SEO and start playing tricks to get good ranks in search engines. In 3 or 4 months when some starts their blogging career they start worrying about their search engine rankings and search internet for an easy and fast way to improve their rankings but is there an easy way to achieve a successful blogging career ? Improving search ranks is only what you have to do to become popular ?

This is what i notice in almost every new bloggers, there are yet some smart folks having good knowledge of how blogging works and have some strong strategies. But in many newbies some things are common which you can read below

Start blogging for Money ?

Everyday i see many peoples starting a blog because they heard somewhere that people can earn money with blogging. Blogging is surely a good way to earn money but it's not only about earning, it's about your writting skills, your knowledge and your consistency. And most of those who start a tech blog assume that tech blogging can give them some good amount of $$$ but do you think that someone will get money for doing nothing.

How they start blogging is that make a blog and title it something very attractive but when you open it you will see some stupid nonsense post either copied or written very poorly. So that concludes that starting a blog doesn't actually gives you a guaranteed license to earn money through it.If you are new then don't worry, everyone was new when they started blogging, but they are at a stage where you can also be, but put your hardwork and knowledge to write on your blog.

Tip for tech bloggers : Just don't post content which is common to everyone, for example 'How to lock your computer', 'How to extract RAR files' these post will never help you cause you will find thousands of result before you result posted back in 2006 or earlier. You have to find your own great idea and post on it so it's new to everyone and you get more readers.

Does only tech bloggers earn money ?

The internet itself is a tech stuff and you will see more blogs on topics like technology and computer but it's not true if you say that only tech bloggers earns money and have good number of readers. Blogging is not only about tech but it covers a vast list of category. There are bloggers in photography field earning more than a tech bloggers does, the reason is that most of the people on internet are not tech savvy and they just want to leave the back end of the internet uknown, they want to have fun seeing photographs, reading recipes, learning about baby sitting and etc. Although internet was developed to serve people information in any field without picking up a heavy book from libary. But when someone sits on internet whole day and with their little knowledge about computer they just think that they are good in computers and there knowledge and ideas are truly new but the knowledge is yet common. You can't learn anything just by using it practically, read books about it and also read articles and tutorials yourself.

If you ask me then i would say that i didn't learnt web designing just by having some little knowledge about HTML or CSS etc, before i started the blog I had put over 3 month to learn more about it, and every day i gave about 7 hours to read about web languages and that's how i am a web designer now and blogging on it.

What should i do ?

After reading both the sections you may have come to know that blogging is easy if you are actually interested in it, not only tech but the topic you are genius in. But whichever topic you choose one thing is common, hardwork and patience. Blogging is not like do it twice a week and then leave it, you may post as much as you can. There's no specific amount of post you have to make to get a better readership, the only thing here matters is your content and is it a quality content. Search engines is not the most prior thing, first priority is your content and when you have contents and quality contents on your blog then search engines is always happy to index your blog into their rankings and maybe you could get better ranks and when you keep doing it then you are going to become a star in this blogosphere. What i am saying to do you is give time to blogging and don't stop blogging cause you aren't getting good search rankings even after 3 or 4 months of your blogging, i think that even 1 year is not enough to become an established blogger and earn good reputation among other bloggers of your field.

Overall SEO doesn't even matter in he first three months of your blog, in the meantime create genuine content which is supposed to attract peoples and when you have plenty of genuine content on your blog then you can focus on SEO to optimize the rankings of your content in the search engines rankings. If you follow this strategy then successfully blogging becomes enjoyable and you will love your blog and your readers

Embed Slideshow in blog post from Picasa

Many Blogger users wanted to use a slideshow technique in Blogger, but they don't have the idea to do it. This tutorial will tell you an easy and working way to put slideshow into post.

Embedding this slideshow into your post don't require you to use some heavy codes. Or you don't have to insert each and every image url in the source HTML yourself. This slideshow gadget provided by Picasa uses flash embed to put the slideshow on a page, so it's only displayable if you have Flash Player installed in your browser or computer system.

Demo

Just follow these steps which is a 2 minute work.

Procedure to add the slideshow

If you are using blogger then the photo you upload into your posts are actually stored on your Picasa Web Albums. The half of the work in done inside Picasa Web Albums, follow the steps

1. Log into your Picasa Web Albums with your current Google account. 
2. When logged in you will see a upload button on top of the page,click it to upload your picture
   
   
   
   
3. A new page will be opened, name your Album and selection the files you want to upload by either clicking 'Select photos from your Computer' or dragging and dropping the pictures in the box. Just a quick example of it here.
   
   
   
4. When the photos are successfully uploaded you now have to make the album Public, because photos uploaded directly through Picasa site are turned to private. You will see the privacy settings on right side (if it's already public then you can leave this step)
   Click on the Edit > And when a new box appears, you will see a dropdown menu under 'Visibility', select 'Public on the web' and Save changes.
   
   
   
   
5. Now you will see some extra options on your right sidebar after turning the album public (by following above step), you will see 'Link to this Album' > Now click on 'Embed Slideshow'.
   
   
   
6. A pop-up will appear after you click on 'Embed slideshow', choose your settings. I recommend you to use the Large one, that's ideal for a blog. You will be given the code, click on the Yellow text area and copy the embed code.
   
    

We have now completed the 80% distance.

Implementing the code in blog post

To implement the code into a blog post, create a new post. You have to switch to the HTML mode and then paste the copied embed code from Picasa into the HTML of the post. Switch to compose mode to see how it is looking.

Tip - If also want to have texts in your blog post (obviously) then first put the embed code in HTML mode and then enter a character after the embed code of slideshow. When you switcht to compose mode you will have the character in the Compose mode to get a text writing point in the post.
Tip - Not only in post but you can also embed this gadget anywhere into your blog or website by placing it in the right place.

Yay ! That's great you have your own slideshow in your post. If you are a photography blogger then this tutorial will help. Drop your comments on how was this tutorial helpful to you.  

Infolinks getting into the HTML5 mode

Since the start of 2012, HTML5 and CSS3 took over the internet and the two most popular website Google  and Facebook painted them with HTML5 and the CSS3 and that was not the end many small sites also began to redesign. Interface in any website with HTML5 support is more easier and that's what Blogger, Google, Facebook and many other sites. Now Infolinks the most famous intext advertisement program is also added in this list.
Infolinks says the new publisher interface is currently in beta. The design overall looks elegant and more like Google's interface but the only thing i am missing is the light blue trademark color of Infolinks.

Infolinks doesn't look really Infolinks without it's light blue color on the user interface. But the Infolinks new user interface doesn't seem to be fully HTML5, i mean to say that the dynamic feature a user interface must have isn't in the new user interface.

At the start of this post i said with HTML5 and CSS3, but there could have been more improvements made with the latest standards of these languages.

Apart from the looks, quick loading of pages in a user interface is important to keep the user engaged, using AJAX will give them loading without refreshing the page again. They have used background images with pictures instead of using simple gradient property.

The conclusion is that whoever was appointed to design the interface knows coding well but don't have creativity and they don't know how can a website look good.

If you want me to design your site then visit my contact page.

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.

Center gadgets tittle in Blogger

The gadgets title in blogger are aligned to left by default, read this tutorial to know how to align it to center or a different direction.
See the screenshot of how it will look

Before

After

It looks good, isn't it ?

The CSS code

Align it center : A simple CSS has been used to achieve this. The CSS is this

aside .widget .title
{text-align:center !important;}

A two line CSS code, what can be easy than that ! To know how to apply this CSS, check this link.


Align it right :  But what if you want the gadget title to be on the right side ? Then use this CSS

aside .widget .title
{text-align:right !important;}

That was easy too. Check the link to know how to add CSS in blogger blog.

Chances are that your HTML can be different so you have to use different selectors on the first line of CSS, use chrome developer tools to make that task easy.

Thanks for visiting our site, subscribe to the blog for more amazing blogger tricks and updates.