Simple Blogger Tutorials

I was hoping that Blogger will enable us to add our own favicon, also known as favorite icon or shortcut icon. Well, it has already been enabled for us to add custom favicon to Blogger powered blogs. My assumption was correct because while writing the post about adding +1 (plus one) button to Blogger , the image that was provided by Blogger Buzz was telling that something new is going to happen. For example see the image below:

I got many emails asking me how did I make a separate page for the labels and archive for my Blogger blog. Well, first get a live example of my explore tutorials page and then see the tutorial for it. The whole process is a complicated one as this includes the proper use of conditional tags to hide a gadget from appearing in other blog pages rather than a particular page. So here we have to create a page and hide the label or archive widget from appearing it in every other pages rather than the separate page that is specially created to show these widgets. At first you have to publish a page. You can just publish a simple post and hide the post or can create a static page . Now add the label widget or the archive widget or both the gadgets from Blogger’s Layout tab and drag them just below the “Blog Posts” gadget (as shown in the picture below) and Save ” it

Let’s go one step forward and add an extra gadget section within Blogger header in new template designers. Within this gadget section you can add anything that you may want, for example, subscribe buttons, search box or your AdSense ads within the Blogger header. Demo In previous tutorial I have told you how to resize Blogger header which is needed to be done first to give space for the extra gadget to fit in. If it is done then follow the below steps.

Blogger has finally rolled out the Jump Break feature which will add a “Read more” link to every posts if every step is done correctly. That is a great news but if style matters then you have to put some more effort to edit, customize and style it. There can be so many reasons for why you want to edit the Jump Break link. Within this post I will try to cover most of the reasons and solve most of the problems as far as possible, let us see those.

Today I will tell you how to add two extra widget sections / sidebar columns below Blogger post sections within main wrapper. Step 1: Go to Design > Edit HTML tab and find for: <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div>

You must have seen in many Wordpress blogs including Mashable that they use floating share buttons. Now it’s time for Blogger to add a floating share buttons widget. In this tutorial I will tell you the method that can be used to implement this widget to Blogger by using the features of jQuery. It will appear outside of your post sections and as you scroll the page, this widget will also scroll with some animation effects.

In this tutorial we will only use HTML and CSS to add fixed and floating share buttons widget to Blogger. It is best in its kind as it requires minimum effort to implement and is also very stable.

I have told you about creating three columns in Blogger template. Many of us try to avoid this as it may sometimes look clumsy but we need widget sections to add some gadgets. Now if you want to add two small sidebar columns below main sidebar in your Blogger template, then I will tell you how to do it. So let's start!

“The retweet button is for blog and website publishers who want to encourage their readers to tweet their content on Twitter.” This button also acts like a twitter counter. It not only allows your readers to tweet your blog posts to their twitter accounts but also shows the number of times your blog posts has been tweeted. You can easily get the source code from TweetMeme but here also need an explanation on how to add this to your blogger posts. Generally when you get the code for the full script, it will look like: <script type='text/javascript'> tweetmeme_url = ' http://yoururl.com '; tweetmeme_source = ' tweetmeme '; tweetmeme_service = ' bit.ly '; </script> <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/> Now for an explanation: ' http://yoururl.com ' is the blog post URL, change it to ' <data:post.url/> ' ' tweetmeme ' is the twitter account, change it...

If your blog post is just awesome then adding social bookmarking icons or buttons below Blogger posts will let your readers to bookmark and share your posts with their friends. People are becoming social, sharing things on Facebook, Twitter and other social networking sites. I have seen that there are many times when I get more readers for my blog from social networking sites whenever someone shares my posts with their friends. You may also like to get social by adding bookmarking and sharing buttons, so I made and have updated this tutorial with 14 best bookmarking sites including a feed icon of your blog's feed. Demo Advantages of Adding Custom Sharing Icons It is more flexible than official Blogger share icons due to: Use of custom images which can be of your choice with different styles and sizes. More social networking sites to share your posts. It is faster than other sharing scripts. And many more as it can be customized.

You can tell you readers to go to the top of the page by adding a floating “ back to top ” icon image. It is simple and very easy to add to Blogger powered blogs. For those who don't know, it is an up icon which indicates to directly go back to the top of page the reader is reading. This can be found floating mainly in bottom right-hand corner and in some blogs at bottom left-hand. A simple but effective way.

If you are looking for a hack to add Read more to Blogger to hide full posts, then stop searching because Blogger has now officially announced this option for us which is also known as Jump Break . Now you don't have to add any separate hack in your template. What you have to do is enable some options in your Blogger settings and you are ready to use this feature. Thinking what are the options you have to enable! Well, let us find out. While posting a new post, write a paragraph, use the "jump break" option and continue writing again. This is the option which will add the read more link to your posts on your homepage.

Blogger introduced a new feature. It’s called Labels Cloud . Now you don't need to find for hack and JavaScript to add labels cloud to blogger. All you have to do is go to Design > Page elements and add a Labels gadget and check the Cloud option. Now while adding it, select the “ cloud ” option. A label will appear bigger if it has more posts tagged under that label and will appear smaller if it has less posts, more like a cloud of labels. Try it in Blogger.

Keeping you sidebars clean makes your blog look good. This is where the role of the columns in footer section comes in. Also it will give your blog a new style. For example, see at the bottom of my blog. This simple tutorial will explain how to do create and add three sidebar columns to footer section in Blogger templates.

Have you faced any difficulties to show some particular codes or snippets within Blogger Post Editor or within the comment section? I hope, most of you did and still do. Well, I have the perfect solution to this. While writing you will notice that every time you use "less than" sign ( < ) or "greater than" sign ( > ) to show JavaScript or HTML codes and snippets, either in Blogger Post Editor (in HTML mode) or within comments, it does not get published or better say, not visible. This happens because Blogger recognizes it as codes that should be used for formatting purpose only. The only solution is to encode them. So to show JavaScript or HTML codes within Blogger posts or comments, use &lt; instead of < and &gt; instead of > . Now if there are big codes then search for online tools to encode your codes. This is the simplest method to show JavaScript and HTML codes within Blogger comments or posts

Today we will learn how to add favicon to blogger . "Favicon" is the short name for favorites icon, also known as a website icon and is a recognition tool for your readers to identify your blog. Browsers displays it within address bar and/or next to the blog and pages' name or in the list of saved bookmarks. For blogs on blogger platform, you will see blogger's default orange favicon. This can be overridden with your own favicon. To add favicon in blogger, make yourself a blog logo image in "16x16" or "32x32" pixels in ".png", ".gif", or ".ico" format. Upload it in any image hosting site and get it's direct URL. Go to Design > Edit HTML and add the below code after <head> : <link rel="shortcut icon" type="image/x-icon" href=" http://image URL "/> Replace the image URL with your hosted image and save your template. Now view your blog, you will find out that the default f...

Add a new widget section by creating sidebar within the header section in your Blogger template and see how a simple looking header goes up to the next level and turns into something new and stylish. It is really a simple tutorial and adjusting it according to your style, you can add search box, subscription buttons or anything you want to be viewable beside your blog's tile, within blogger header. Now let's have a tutorial.

When I started blogging I found out that full posts are visible on first page. Now that does not looked good on my first page. How am I gonna hide full posts, create posts summaries and add a "Read more..." option in my blog? Well by default, blogger doesn't provide one. So you have to make it yourself. So lets have a tutorial on it.

Let’s remove the Navbar to give your blog a more professional look. At the top of Blogger blogs, you'll see a bar in blue or transparent colors which enables you to sign in, search, go to next blog, customize, etc. It is known as Navbar . This can also be found under the Layout tab (on top-right corner) under Blogger’s Dashboard. I have removed it due to some reasons. Neither did I find it to be much useful nor it was not going with my template design. If you think that these reasons are enough for you too to remove Blogger Navbar then follow anyone of the tutorials as told below.