Simple Blogger Tutorials

Today we will learn how to add floating social media connect/subscribe icons to Blogger. The icon buttons are said to be connect as it will only let your blog readers to connect or subscribe with your blog through social media sites. It's mainly found floating right or left and outside of your blog. In this tutorial, the social sites that I have included are Facebook, Twitter, RSS and Email icons and of-course, you can see them floating . So let's go through the tutorial.

Blogger introduced the new Popular Posts Widget . Everybody must have heard of Blogger stats. This Popular Posts widget collects the data from these stats from your blog posts which have been mostly viewed by your readers and transforms it into popular posts. To add this widget, go to Design > Page elements tab and click “ Add a Gadget ”.

Blogger is advancing day by day by enabling some cool new features that most of us do want to have for our blogs. Today after login in to Blogger’s dashboard I have found out that Blogger enabled automatic spam detection for the comments but astonishingly they didn’t enabled it to all of the blogs.

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.

The best way to gain exposure is by adding a StumbleUpon badge to Blogger which has real-time count that shows how many times your post has been viewed and stumbled. You can get the button codes from official badges page but here I will explain how to have these badges for Blogger from six different styles that StumbleUpon provides (updated on January 2013).

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.

Blogger is advancing day by day and now there are many new features that are now available to Blogger in Draft . Adding captions to Images in Blogger Now you can add captions to your images without any extra codes and scripts. Just click on the image that you have uploaded, and click “Add caption” . And write your caption just below your image. Simple Blogger Tutorials

Many readers take Facebook Fan Pages as an alternative to RSS readers, so it will be best to add a Like Box to your blog. It is a great way to show your readers that your blog is also available on Facebook and they can join your Page and become an active member by liking your page. Here is my page on Facebook. You can always join my Page by clicking the “Like” button.

Facebook share button is a perfect way to share blog posts and to show the number of shares that has been made for a particular blog post. There are two types with different styles, one with a big count button and the other one is inline button . To add it to Blogger select any one of the share buttons as mentioned below. Facebook Share Button with Counter <div style=" float: right; margin: 4px; "> <a name="fb_share" type="box_count" expr:share_url="data:post.canonicalUrl" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </div>

Google FeedBurner is one of the top most web feed management provider which is commonly used by all bloggers to manage their blog feeds. Blogger powered blogs has this setting too but first you need to configure and set it up properly. So today I will guide you through this. Adding and Claiming Your Blog’s Feed Step 1: Log in to FeedBurner and write your blog’s feed address in “Burn a feed right this instant”. This is where claiming process starts. Your feed address will be: http:// example .blogspot.com/feeds/posts/default If you are a podcaster then check the podcaster box and click “Next”.

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

Do you know that my blog uses some properties of CSS3? For example, look at my main-wrapper and sidebar, you will find that there are shadow effects. If you look at my footer, there you can find text-shadow effects. All the new versions of browsers mainly Firefox (3.5+), Opera (10.5+), Chrome (5+) and Webkit/Safari (3.1+) supports CSS3, while IE (9+) support very few (till date). What are the Styles that can be Done by CSS3 in Blogger?

Layout templates of Blogger, specially Minima, were/are still famous among the designers and developers as it can be highly customized. But Blogger don't have default three column layout Minima templates. So I have made two Minima Blogger templates with three sidebar columns for tutorial purpose and for those who want to make their own templates from the scratch. Sidebar to Left

Padding is used to clear the area around the content of an element within the border and is affected by the background color of the element. While, margin clear the area around an element which is outside the border and do not have a background color. See at an example of a box model:

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

New bloggers are always in confusion whether to apply dofollow or nofollow for the links on their blogs. Literally, "dofollow" does not exist. As we all know, it is said to be "Dofollow" when it does not contain the "Nofollow" attribution which tell the search engines not to give any authority to the outbound link. Both of these have their advantages and disadvantages. Nofollow attribution can be found in the comment area within our Blogger powered blogs (and to new SEO settings ). While nofollow helps a blog to get less spam, it also don’t give any credit to useful sites. Here’s where the confusion starts whether to use this rule or not. Let’s have a look at the advantages and disadvantages.

As we all know, Blogger is based on Cascading Style Sheets (CSS). Adding, styling and customizing the borders in Blogger are easy to implement as it uses the CSS Properties. With the help of borders, you can separate the different sectors of your blog, such as headers, sidebars or can be used to highlight the blockquotes and featured contents. A blog designer can easily make a beautiful template just using borders and background colors. Let us see how to style and customize the borders with some examples.

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.

Static pages are now finally made available in Blogger. Now you can create a static ' About ' page or ' Contact Me ' page for your blogs. So it became easy to hide your "Contact Me" page and other pages from appearing in blog's homepage. It is simple to add static pages and create a page similar to how you write a blog post. But the limitation is upto 10 posts. How to add static pages to Blogger