Simple Blogger Tutorials

There are quite few good Syntax Highlighters out there, one of them is “ Prettify ” which is simple and lightweight. Prettify states that it can automatically guess and highlight code snippets for many languages (best on C-like and HTML-like ) and also has many language extensions, if you need one. So I setup a simple demo to test it and the result was quite good.

If you are looking for free open-source fonts to design your blog’s texts then nothing is better than Google web fonts. Blogger has been using Google web fonts for quite a long time, you can find it by clicking the Customize button found under Blogger Template tab of your blog. But there aren’t many web fonts available to choose from as many as the font directory has, isn’t it? Or you have a custom Blogger template where you want to add web fonts. Let’s start with Merienda as our example font and see how we can add this to Blogger.

Previously I had written about animated floating widget for Blogger which was or still is popular. But many didn’t liked it for the animated effect and wanted it to be fixed while scrolling. Many requested for this and after giving a thought I am writing this for you. So let’s get started with it and add a fixed sharing buttons widget that will float to the left (or to right) of the Blogger post section.

It came to my notice that even though you have enabled the proper settings , still many of you have failed to install/see/have the threaded comments and it’s not working on your Blogger template. This is mainly happening to those who have customized their templates or have downloaded it from other sites. Well, I think I have got what it needs to get it back.

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

Today I will tell you how to show different Blogger gadgets or widgets on different or specific posts or pages. Previously we learned about conditional tags and how to use it. In this tutorial we need these tags to hide the gadgets. So first go to Blogger’s Layout tab and add a “HTML/JavaScript” gadget. I prefer it because it will be easy for everyone to understand. Give it a unique tile so that it does not match with any of the titles of other widgets added (if any).

In many Blogger blogs you may have found that the default comment form’s width is much smaller than the post body width. When you are customizing the design of your blog then you must be also thinking to increase the width of the Blogger’s comment form. In this simple tutorial I will tell how to expand it. Normally, the default width for the comment form of Blogger is fixed at 425 pixels . So we just need to override this with a CSS definition.

Today we will learn to highlight author or admin comments in Blogger so that your comment as administrator stands out from comments posted by others. Blogger has advanced and many new codes are added. So to highlight the author or the admin comment in Blogger you have to just apply some simple trick to activate it. But however, this tutorial is not meant for those who have enabled threaded comments . Here’s an advance method to do it. You will find that not the comment body but the whole section of your comment as admin or other comments as author will change. So first just follow the steps:

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.

One of the drawbacks of Blogger is its header. When you are using text as your blog title, you will find that there is no problem but when you add an image or logo to the header portion instead of title and description or having description placed after the image from Layout tab, you will find that it’s not the logo but the whole header becomes clickable. So in this tutorial we will find out how to resize the Blogger header in new templates.

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.

Today we will learn how to add background images to Blogger. Instead of just having background color to your blog, you can add images to it. You can use any image formats and any size to make your blog look beautiful and also can achieve a style with the same layout that others are using too. Before we start, we need to know some extra styling properties that will come handy. So let’s start with the tutorial.

In this tutorial I will tell you how to customize and add image or icons to Blogger sidebar titles. First we need an image that you want to add. It can be a small vertical image that can be repeated throughout the width of the sidebar title or just a fixed icon. If you are good at drawing, then you can create an image with specific height and width. The width of the image should be same with the width of the sidebar, so find for #sidebar or #sidebar-wrapper and see the width given in pixels (px) .

Email subscription box let your blog readers to get latest post updates directly to their mailbox. This simple tutorial will tell you how to add it to Blogger. Step 1: So first, you need to set up Blogger feeds with Google FeedBurner. If you already added your blog feeds then move on to step 2.

The RSS subscribe button let your visitors to subscribe and easily add your blog to their favorite RSS services. When visitors like your content and want to read your blog thorough RSS news readers then they will click on the feed button on your blog. So to add a subscribe button to Blogger, you need to find a big, beautiful RSS icon. Download it and upload it to your image hosting service (Google Picasa is a good option) and get the URL. Now go to Layout tab and add a "HTML/JavaScript" gadget. Add the following code into it and save it. You can also write something into the gadget to tell your readers to subscribe. <a href="http:// example .blogspot.com/ Feed-Address " title="Subscribe to RSS"><img alt="Subscribe to RSS" src=" http://lh3.ggpht.com/_dzq0x75P67s/S-eNuEhHhAI/AAAAAAAABfo/pxusYgKjxu4/s800/feed-icon-orange-48.png " /></a> Explanation Change Feed-Address with your feed URL. Generally your post feed URL ...

Previously it were the days of CSS 2.1 when designing web templates were limited and had to use JavaScript to add some special effects. But as days passed, technology improved and CSS3 was introduced. Working with CSS3 is fun as it can do much more and can handle many new effects without any use of JavaScript. Today I am going to tell you how to change opacity (transparency) of an image and add hover effect using CSS3. See the example below, you will find that whenever you place your mouse pointer over the image, it will hover form transparent to full opaque and with some transition effect.

You may like to add a “ Follow me ” button or icon to Blogger to increase the number of followers for your Twitter account. I will give you two types of tutorials. First tutorial is for a normal one and the second is for the fixed and floating button.