Blogger Templates: Catteleya

No comments:
Catteleya Blogger Template

Just saw this really simple but elegant theme at one of my favorite sites Free CSS Templates. So, here it is for you guys in Blogger format.

Features: 2 columns, green, top menu, css, black, xml, blogspot, dark.



Blogspot How To: Create a Beautiful Header Using Patterns

8 comments:
Patterns are small images which can repeat in the background. They are small in size and create an awesome background. In this simple tutorial, I'll show you how you can add a pattern in your header background to make it more beautiful and eye-catching.

Blogger Templates: Glassical

2 comments:
Glassical Blogger Template

Glassical was released as a free Wordpress theme by Smashing Magazine & I've converted it to Blogger. It is an ideal theme for personal blogs.

Features: 2 columns, white, rss, top menu, xml, blogspot, blue, smashing magazine, premium quality.



Blogspot Comments Tutorial: Easily Change or Customize "Post a Comment" Text

20 comments:
I'm referring to the "POST A COMMENT" text which allows or prompts (in case of Embedded Comment Form) readers to make a comment on an article. So, if this tiny piece of text is attractive then it'll surely grab the attention of visitors.

Blogger Templates: Craftwork

179 comments:
Craftwork Blogger Template

Craftwork is one of the most popular themes ever ported to Blogger. This cute blogspot theme is ideal for any personal or family blogs.

Features: 2 columns, white, search box, rss, top menu, xml, blogspot, popular, personal, scrapbook, cute.

Blogger Templates: Florist

20 comments:
Florist Blogger Template


Florist is a beautiful & cute Blogger template with lots of flowers. The header has a beautiful background, search function, RSS icon and hanging menu.

Features: 2 columns, white, search box, rss, nature, top menu, welcome message, xml, blogspot, flowers, cute.



Blogger Templates: Celebrity HQ

23 comments:
Celebrity HQ Blogger Template


Celebrity HQ is a premium quality Blogger template with shining and glowing layout. Most of the people are using it for fashion related blogs.

Features: white, pink, blue, two columns, fixed width, search box, RSS feed, top menu.



Blogger Templates: Lollipop

5 comments:
Lollipop Blogger Template


Lollipop is a cute and adorable Blogger template with two columns layout. This template can be used on a shopping related blog.

Features: white, brown, two columns, fixed width, search box, RSS feed, top menu, left sidebar, welcome message.



Blogger Templates: Smash My Typo

30 comments:
Smash My Typo Blogger Template


Smash My Typo is a popular Blogger template with a focus on typography and simplicity. It has 2/3 columns layout and minimal design.

Features: white, minimal, blue, two columns, fixed width, Twitter, RSS feed, top menu, 3 columns footer.



Blogger Widget: Show Total Posts & Comments

8 comments:
How to Restore Pencil to Edit Posts

You might have noticed that some Blogger blogs have widget installed in the sidebar which displays total posts and comments of that blog. Well, you can also install such a widget in your blog as well. A simple script allows us to show off total posts and comments on our blog.

Blogger Widget: Show Upto 25 Recent Comments with Summaries

20 comments:
A simple recent comments widget allows us to display 5 latest comments in sidebar. Now you can display up to 25 comments with summaries of the comments.

Steps to Install the Widget


  1. Go to Design then Page Elements.
  2. Click on Add a Gadget link in your sidebar
  3. A new window will open with a list of widgets, chose HTML/JavaScript widget from there.
  4. Once that widget is opened, paste the following code in the Content area of the widget:
    <ul style="font-style: italic;"><script style="text/javascript">
    function showrecentcomments(json) {
    for (var i = 0; i < 20; i++) {
    var entry = json.feed.entry[i];
    var ctlink;

    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    ctlink = entry.link[k].href;
    break;
    }
    }
    ctlink = ctlink.replace("#", "#comment-");
    var ptlink = ctlink.split("#");
    ptlink = ptlink[0];
    var txtlink = ptlink.split("/");
    txtlink = txtlink[5];
    txtlink = txtlink.split(".html");
    txtlink = txtlink[0];
    var pttitle = txtlink.replace(/-/g," ");
    pttitle = pttitle.link(ptlink);
    if ("content" in entry) {
    var comment = entry.content.$t;}
    else
    if ("summary" in entry) {
    var comment = entry.summary.$t;}
    else var comment = "";
    var re = /<\S[^>]*>/g;
    comment = comment.replace(re, "");

    document.write('<li style="text-align:left">');
    document.write('<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>');
    document.write(' on ' + pttitle);
    document.write('<br>');
    if (comment.length < 150) {
    document.write(comment + '...<a href="' + ctlink + '"> (more)</a><br><br>');
    }
    else
    {
    comment = comment.substring(0, 150);
    var quoteEnd = comment.lastIndexOf(" ");
    comment = comment.substring(0, quoteEnd);
    document.write(comment + '...<a href="' + ctlink + '"> (more)</a><br><br>');
    }
    }
    document.write('</li>');
    }
    </script>
    <script src="http://bloggerfaqs.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
    </script></ul>
  5. Save the widget and see your blog for changes.

Widget Customization


You need to replace http://bloggerfaqs.blogspot.com/ with your own blog address. You can further make customization by changing the value 20 to some higher or lower value. This value is for the number of comments and you can't have more than 25 comments. Last thing you can modify is font-style: italic; which you can change to font-style: bold; or font-style: normal; to change the font styling.

Blogspot How to: Add Social Bookmarking Icons in Blog Posts Footer

6 comments:

Social bookmarking services such as StumbleUpon, Digg & Reddit (->My love) are really popular these days & if a blog post makes it's way to the front page of these services then it's your lucky day. The concept is simple; people browsing web share their favorite bookmarks with others through these services. You can install these icons in your post footer so that your visitors can easily share a post.

Blogger Templates: Paper Wall

27 comments:
Paper Wall Blogger Template


Paper Wall is a beautiful Blogger template with 2 columns layout. It has a grungy look and awesome background design.

Features: grungy, premium, two columns, fixed width, search box, top menu, social networking icons, colorful.



How to Change Post Body Font Size, Color & Style

76 comments:
You can customize post body font in any expect like color, size, style or family. First, you should know what is the default CSS code for post body and then we'll customize it according to our own taste.

Blogspot News: Track Blog Visitors With Live Traffic Stats

3 comments:
Keeping track of blog visitors is a must for every blogger. The most used tracking service is Google Analytics which is free. Some people also use Site Meter which is also free. Anyways, I've written tutorials to install both Google Analytics or Site Meter on a blog and track website visitors. Now, you don't need to install any external code to monitor traffic because Blogger-Blogspot has introduced built-in traffic stats for all blogs.

Blogspot SEO: Submit Your Blog to Google, Yahoo and Bing Search Engines

8 comments:
Search engines might take some time to discover and index your blog so, you can manually submit your blog to 3 major search engines Google, Yahoo and Bing. Don't submit links to multiple pages, just submit the URL/address of your blog homepage.

Install Google Analytics to Track Blog Visitors

12 comments:
Google Analytics is a free product that tracks your website and gives detailed statistics about visitors to your website. For example, Analytics can show you how people found your site, how they explored it, and how you can enhance their visitor experience. With this information, you can improve your website return on investment, increase conversions, and make more money on the web. To install Google Analytics on Blogger, you need to follow these steps:

How to Add Image as Blog Background

68 comments:
We can easily add a background image in a Blogger/Blogspot blog. To add an image as your blog background, first of all you need to do 3 things:

1- Select an image.
2- Upload it.
3- Add it to your blog HTML.

How to Post Large High Quality Images

7 comments:

By default, Blogger decreases the size and quality of an image in the post. We can make some modifications in the uploaded image code to retain the quality.

Blogspot How to: Host Images on Blogger

41 comments:

Why Should I Upload Images on Blogger???


Image hosting sites like Photobucket & TinyPic have a bandwidth limit. Which means if your uploaded image is viewed too many times then a ridiculous notification will appear instead of your images. So, avoid using such services. Blogger provides 1Gb of free space to every user for images and that's more than enough.

How to Submit Your Blog to Google

2 comments:
Just a while ago, I wrote an article to get your site indexed by Google by using Google Webmaster Tools. If you quickly want to add your URL to Google then you'll need to follow these simple steps.

Blogspot How to: Submit Blog Sitemap to Google via Google Webmaster Tools

54 comments:
Google controls 85% of the global search and any blog is heavily dependent on traffic from search result. We must make sure that all the posts or pages of our blog are indexed by Google. We can submit a blog sitemap to Google through Google Webmaster Tools. Google can then use this sitemap to quickly index all the entries of a blog.

How to Backup or Download a Blogger Blogspot Template

2 comments:
It is very important that you regularly backup your template layout. You can easily download your exiting layout and restore it if anything goes wrong during experiment or when applying a tutorial.

Blogspot Hack: Leave Title Field Blank in Blogger Gadgets

12 comments:
Since the introduction of new Blogger Template Designer, many people have complained about a problem. Blogger no longer allows you to leave the Title field of blank. This is true for any widget/gadget. So, here is a very simple way to trick Blogger and leave the Title field blank.

Blogspot Tutorial: Add a Stylish Blog Search Engine

17 comments:

You can add a colorful search engine to your blog with ease. Many people prefer to have a simple search engine but you can customize it to suit your taste or your blog outlook. Lets have a look at a simple search engine and then we will customize it.

A simple blog search engine




The code for this search engine is:



<form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 200px;" value="Enter something here..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" value="Search!" type="submit"/></form>


You can change two things in this simple search engine. One is value="Search!" where you can replace Search! with some other word like Go!. You can also replace value="Enter something here..." with some other line which will appear in the search box.

Customize this simple search engine to make it stylish and cool


Now, we have seen a simple search engine lets customize it by changing its width, height, colors & font size.



I've used two colors (black & white) to customize the outlook of our simple search engine and it's looking cool, lets have a look at its code and then we'll further customize it.



<form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 150px; height: 15px; color: #FFFFFF; font-size: 14px; background-color: #000000;" value="Enter text to search..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" style="border-color: #000000; background-color: #FFFFFF; color: #000000;" value="Submit!" type="submit"/></form>


Now, I'll explain styling used in this search engine.

Width


width: 150px; is defining width of this search engine, you can change it to a higher value for more width. Like if I change it width: 150px; to width: 200px; this is the result...


Height


height: 15px; is defining height, you can change also change it to another number like when I changed height: 15px; to height: 20px; this happened...


Color


color: #FFFFFF; is for white color. You can certainly have another color by entering it's hex code and if you don't know about hex codes then simple download ColorPic which is a free color capturing utility.

I changed the color: #FFFFFF; to color: #FFD900; which is kinda orange color and this is the result...


Font Size


font-size: 14px; is for font size in px. I changed it to a lower value 10px just to show you the effect...


Background Color of Search Box


background-color: #000000; is for background color of the search box (not of button). Lets change it to background-color: #FF0000; which is for red color and see what happens.


Border Color


Next things is the styling of our search button. border-color: #000000; is the border color of our search button, change it to border-color: #FF0000; and see the result...


Background Color of Search Button


background-color: #FFFFFF; is the background color of the search button, change it to #FFFF00 (yellow) and see what happens...


Search Button Text Color


Last thing is color: #000000; which is the color of search button text, lets change it to #0000FF (blue) and the result is...


Installing this search engine in your blog


You can install this engine after all the customization in your sidebar by going to Layout | Page Elements and on your sidebar click Add a Gadget link. From the new opened window chose HTML/JavaSrcipt gadget and in the Title field write a title as you wish and in the Content area, add the code of your search engine. Click Save and enjoy.

Blogspot Tutorial: How to Write a Post in Blogger Compose Mode

8 comments:

When you're logged in to Blogger and you already have created a blog, you'll see a NEW POST icon under every blog, click on that icon and you'll be taken to an other page where you can create a post. This area is your Post Editor. and it has two modes i.e. Edit HTML and Compose. Our topic is all about Compose mode.

This is an overall look of the Blogger post editor (Compose mode).

A Dummies Guide to Compose Mode

What to do if you can't see a Compose mode option in the post editor!


If you're unable to see a Compose mode option in the post editor then you need to see a setting. Go to your Blogger Dashboard | Settings | Basic and scroll down to second last option which is Show Compose Mode for all your blogs?. Make sure this option is seleted Yes and then click on SAVE SETTINGS at the bottom of the page.

The Title field in Compose mode!


When you're creating a post, the first thing you'll work with is your post title. Please be careful and enter a relevant title in this field because this is a critical component to search engines. I'm writing this tutorial on Compose mode, so, my title is "A Dummies Guide to Compose Mode" which is pretty relevant.

A Dummies Guide to Compose Mode

The toolbar with a lot of icons!


Toolbar is really our biggest help in Blogger Compose mode. It contains a lot of tools that will make our life easier. Move your cursor on any of these icons to see what they do. Let's start discussing these tools one by one...

A Dummies Guide to Compose Mode

1- Font


Blogger offers 8 different fonts which can be added to beautify our post. You just need to select the text which font you want to change and then select the font from the drop down menu. This fonts are:

1- Arial
2- Courier
3- Georgia
4- Lucida Grande
5- Times
6- Trebuchet
7- Verdana
8- Webdings

2- Font size


Second tool in our toolbar is about font size. We can select a text to and select it's size from this tool.

1- Smallest
2- Small
3- Normal
4- Large
5- Largest

3- Bold & Italic


These tool will simply make your selected text bold or italic.

4- Text Color


You can change your text to any color through this tool, it's really amazing and easy. Make sure you don't do any stupid things with this tool like your post background color is black and you're making your post text dark.

5- Link


This is maybe the most important tool and is used extensively. You might want to link to someone else' blog or some other site in your post then you can simple type in the name of that blog or site and click this tool, it will prompt you to enter a URL and you need to enter the URL (address) of that blog or site which you want to link.

For example, I want to link "Blogger" to "http://www.blogger.com/", so I'll type Blogger and press the Link tool and enter the URL (http://www.blogger.com/) and this is the result, click to see: Blogger

I would recommend you to read "Creating and Using Links in Blogger" for further information.

6- Align Left, Align Center, Align Right & Justify Full


When writing poems, these tools are really helpful to align your text like I'm writing some lines of a poem here with different alignments.

Be glad your nose is on your face,
not pasted on some other place,
for if it were where it is not,
you might dislike your nose a lot.
(Align Left)


Be glad your nose is on your face,
not pasted on some other place,
for if it were where it is not,
you might dislike your nose a lot.
(Align Center)


Be glad your nose is on your face,
not pasted on some other place,
for if it were where it is not,
you might dislike your nose a lot.
(Align Right)


Be glad your nose is on your face,
not pasted on some other place,
for if it were where it is not,
you might dislike your nose a lot.
(Justify Full)

7- Numbered List, Bulleted List & Blockquote


These tools are helpful to create lists. Numbered List will, of course, create lists with numbers like 1, 2, 3, 4 and so on. Bulleted List will not create numbers and it will only use some bullets to create lists.

Blockquote is a very rarely used tool. Select some text and click on Blockquote tool, your text alignment will change and it will be more distinguishable (easily recognizable) than the remaining text. This tool inserts a space before and after the selected text and also creates margin between selected and unselected text.

8- Check Spelling


It will check spelling mistakes in your post.

9- Add Image


This tool will help you to add images in your post from your computer or from the internet. Clicking this tool will cause a pop-up window to appear like this..

A Dummies Guide to Compose Mode


You can click Browse button to upload an image from your computer or you can directly enter an image URL (http://www.sample.com/sample.jpg) from the internet to include images in post. You can also select alignment of your image (None, Left, Center, Right) and upload size (Small, Medium, Large). If you check the Use this layout every time? option then you don't need to adjust the size and alignment of your images again and again.

I would recommend you to always chose Large as your image upload size and don't use image URLs from the internet to upload instead you can always upload image from your own computer. Blogger gives every one 1 GB free space for images, use it. See these articles on images:

How to Use Blogger for Uploading or Hosting Images

and

How to Post Large Images

10- Add Video


This tool will upload a video from your computer with maximum upload size of 100 MB.

A Dummies Guide to Compose Mode

11- Remove Formatting from selection


This is an awesome tool, it's like Undo tool we found in many many applications. Imagine you've selected a text and changed it's color but after some time you want to remove that color then simply selected the color text and click Remove Formatting from selection tool and see what happens.

Preview link


This link will show you a preview of your post i.e. how it will look like when you'll publish it online.

Post body


Post body is the central part of our discussion. Whatever we do, appears here, in a big white box under our toolbar. In the picture, the post body is highlighted in orange color.

A Dummies Guide to Compose Mode

Post Options Link


You need to click this link at the bottom to see what it contains. You can manage Reader Comments, Backlinks and Post date and time of every post through this link.

A Dummies Guide to Compose Mode

Labels for this post: & Show all link


You can also set categories for each post, in terms of Blogger categories are labels. For example I'm writing about this article about Blogger basics, so, my labels could be "Blogger Basics", "Basics", "Blogger Compose Mode" and so on.

PUBLISH POST & SAVE NOW buttons


The PUBLISH POST button will simple publish your post to the world of internet and SAVE NOW can save your post progress specially when you're writing long posts. However, Blogger automatically saves the post after regular intervals.

How to Create a Blogger Blog

No comments:

Considering you're a Blogger beginner, I'll tell you how to create your first blog on Blogger.

Steps


1- Go to this link http://www.blogger.com/ and click on CREATE A BLOG button.


How to Create Your First Blogger Blog



2- As Blogger is owned by Google, so, you need to create a Google Account. Type in all the fields but make sure that you already have an email address of any web service like Yahoo, Hotmail or Gmail. This Email will be your username in the future. After filling all the fields in this page, click CONTINUE button at the bottom of the page.


How to Create Your First Blogger Blog



3- Your Google Account has now been created so you can create a blog on this page. Enter a Blog title (can be changed later) and a Blog address (can be changed later but not recommended). Please chose your Blog address wisely, it will be something like http://YOURNAME.blogspot.com/. After that click CONTINUE button to move on.


How to Create Your First Blogger Blog



4- Now, you've also created your first Blogger blog. Chose a template from this page (can be changed later) and click CONTINUE.


How to Create Your First Blogger Blog



5- Hurray, your blog is alive now online. You can share the address of your blog with friends, family or colleagues. Make sure to see other tutorials on this blog.

Important Tips


See backup related articles here.

http://bloggerfaqs.blogspot.com/search/label/Backup

http://help.blogger.com/bin/answer.py?hl=en&answer=112498

10 Reasons to Chose Blogger For Blogging

4 comments:

Blogger was founded by a small company Pyra Labs and later bought by Google in 2003. Since then it has grown into a huge platform for blogging. You can easily start your online life just by going to the Blogger homepage and starting a blog. Here are some of my favorite reasons to chose Blogger for blogging.

1- Ownership


Blogger is owned by one of the biggest companies on web "Google". With billions of dollars in the pocket, Google can really keep the things going happy.

2- Free


Like most of the Google services, Blogger is also free for everyone. You can start and host a blog on Blogger absolutely free. You're also given a free domain.

3- Resources


Currently, hundreds of templates, tutorials and hacks are available to get you going with Blogger. Some people have also started to offer premium templates and services exclusively for Blogger.

4- Community


A lot of coders and experts are getting involved in helping fellow Blogger users. People (like me) provide free help, consultation and tutorials on Blogger.

5- SEO


Blogger blogs are automatically indexed by Google after some time of their creation. However, it is always better to submit your site manually (?) or submit the site map of site through Google Webmaster Tools (?).

6- Personalization


Once you create a blog, it will never be deleted or the name will never be given to anyone, it will always remain yours. By default, you get a free domain like yourname.blogspot.com but you can purchase and use a custom domain anytime. Of course, users of old domain would be automatically redirected to the new custom domain.

7- Advertisements


Blogger allows any kind of advertisements on Blogger powered blogs. Like many other free hosts, it doesn't add any kind of banner on your blog.

8- Customization


You can totally customize the look and feel of your blog. There's absolutely no restriction on doing that and by the way, Blogger has just introduced a custom template designer through which you can create your very own designs.

9- Security


Blogger is very secure and I've not heard anyone losing his/her account through hacking. Of course, if you'll give your password to someone then... what can I say.

10- Simple


Blogger is really simple and easy to get started. It is designed to target the people who aren't familiar with HTML or CSS stuff. You just have to follow the simple instructions to do something.

Final Words


Well, I've already said a lot in favor of Blogger but of course, there are also some very popular blogging platforms like Wordpress but if you're new to the blogging or you've not yet tried Blogger, try it because you won't regret it.

I'm Unable to Upload Pictures on Blogger

18 comments:
I'm Unable to Upload Pictures on Blogger

How to fix "Can't Create New Post Error"

12 comments:
A lot of people are reporting in official Blogger forums about this problem. Most of them, when try to create a new post, receive notorious bx errors (bX-xovb7t). Thanks to the rapid feedback, a Blogger employee Gatsby has finally given the solution in the forums but you can see it here.

Create a Sticky Post Which Remains Always at Top

8 comments:

Many people want a particular post to stay always at the top position on your homepage. Actually, Blogger arranges the posts order according to their date & time. So, you can also change your post time to keep it at the top as long as you wish. There are two scenarios explained below.

If you're writing a post and haven't published yet


Just click the Post Options link at the bottom of the post editor and change the date of the post to some future date like 2020. The format of the date is Month/Day/Year like when I'm writing this post, the date is 7/15/09, so I can change 09 to some future year.

If you've already written and published the post


Then go to Edit Posts and then find that post. Once found, click Edit link and post will again open in the Post Editor where you can change it's date.

It's a pretty simple tutorial, stay in touch for more tips and tricks, see ya!

Recover a Deleted Blogger/Blogspot Blog Within 90 Days

7 comments:
Blogger never deletes your blog and there's always a chance to recover it. However, if you've deleted your account, then you can't recover your blog back.

I always do experiments on test blogs so, I created a lot of mess with these test blogs and one day I decided to delete them and I did that. After some days, I noticed that there's a link on my Dashboard like this:

Install Site Meter on Blogger to Track Visitors

18 comments:
Install Site Meter on Blogger to Track Visitors

Site Meter is a free service which can track your visitors. You'll have a clear picture of who is visiting your site, how they found you, where they came from, what interests them and much more.

Add More Widgets Under Header

3 comments:

In default Blogger templates, you can't add another widget under Header widget. A lot of people would like to add Adsense, a search box, a translator or a horizontal menu under header, so you need to change some default code to do that.

This is a typical view of Layout | Page Elements section.


How to Add More Widgets Under Header

Steps


To create Add a Gadget option under Header widget, follow these steps:

1- Go to Layout | Edit HTML.

2- Find the following code:



<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Copy Mafia Template (Header)' type='Header'/>
</b:section>
</div>


Tip: You can find this code some lines after <body> tag.



3- Now make two changes in the above code, change maxwidgets='1' to maxwidgets='3' and showaddelement='no' to showaddelement='yes'. Now, the code should look like this:



<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Copy Mafia Template (Header)' type='Header'/>
</b:section>
</div>


Info: I've changed maxwidgets='1' to maxwidgets='3' which means you can add 3 widgets in Header section. A Header widget is there by default so actually 3 means 2 more widgets.

4- Save your template and go to Page Elements tab to see the changes.

Blogspot How to: Add Image as Sidebar Background

25 comments:
Some time ago I posted an article How to Add Image as Sidebar Background Heading Similarly you can also add an image in the whole sidebar. Just follow these simple steps and if you feel any difficulty at any step, feel free to ask:

How to Add Image as Sidebar Heading Background

2 comments:
To add an image as background of your sidebar heading, follow the simple steps.

1- Go to "Layout" and then "Edit HTML" section.

Remember: In "Edit HTML" section, always click "Download Full Template" before making any changes to your template, this is your backup.

2- Find the following code...

Blogspot Trick: How to Change Width of Body, Posts and Sidebar

25 comments:

Why to increase the width


1- You can have bigger images in your blogs.

2- Good result in old browsers like Internet Explorer 6.

3- Sidebar in perfect position.

4- It gives your blog an overall clean look.

Beginner's Guide to Customize Blogger Header

24 comments:

What We'll Do?


Our objective is to change the outlook of our header as well as play with the header widget itself.

The Default Code


In your Blogger CSS, the header is defined by the following piece of code:

Ways to Fix/Remove bX Errors in Blogger

4 comments:

How to Fix or Remove Blogger bX Errors


Some days ago, I tried to install a widget in one of my custom templates and then I got this error (bX-xxxxxx). I tried to solve the issue by myself by doing some random things and I was finally able to solve the problem. Some people also face this problem when trying to upload a custom Blogger template. Here are the techniques you can try.

Blogger Help: How to Delete My Blog

3 comments:
How to Delete a Blogger Blog

Alright, if you are really tired of blogging or just want to delete a test blog then here is the simplest way to do that. Before moving further, let me tell you that you can recover a deleted blog within 90 days with all posts.

The Right Way to Copy from Microsoft Word to Blogger

No comments:
When you want to post some data compiled in Microsoft Word to your Blogger post editor, you might get an error i.e. Your HTML cannot be accepted: Tag is not allowed:

Actually Microsoft Word automatically apply some meta tags to the documents which are illegal (not allowed) in Blogger posts. These tags are like these:

A Recent Comments Widget to Display Last 5 Comments in Sidebar

3 comments:
Recent comments widget will display last 5 comments on your blog. To setup this widget follow these simple steps:

1- Go to Layout and on the sidebar, click on Add a Gadget.

How to Change Sidebar Title Font, Size & Color

26 comments:
Blogger sidebar title fonts are very easily customizable like any other section. You just need to find the default CSS definitions of these titles and then we can easily implement our own styles in it.

How to Add Image in Header Background

2 comments:


Introduction!

Blogger default templates don't have images in the header background. You can add one that suits your taste by changing some style sheet elements in your "Edit HTML" tab between <b:skin> and </b:skin>.

Remove Firefox Dotted Border Links

1 comment:
Introduction!

you might have noticed that Firefox automatically creates dotted border around links. You can prevent this by telling Firefox what you want to do.

How to Post Links in Comments

11 comments:
How to Post Links in Blogger Comments


Let's get started

Ever wondered how to post links in Blogger comments??? Let me tell you a very simple way to do that. A basic HTML link is like this:

How to Change Header Title Font, Size & Color

26 comments:
Intro!

This is a simple Blogger tut to tell you how to change the header title font. First of all, you should know which CSS code is responsible for your header title appearance:

Blogspot How to: Change Post Title Font, Size & Color

122 comments:
The default Blogger-Blogspot layouts (like Minima) don't allow you to change or customize the look of post title font through Fonts & Colors tab. An HTML/CSS expert can easily change the post title font from the Edit HTML tab but that's not easy for a non-technical person. In this tutorial, I'll tell you how to fully customize the post title font by going to Design -> Template Designer -> Advanced.

Blogger/Blogspot SEO (Search Engine Optimization) For Dummies

25 comments:
Make Blogger-Blogspot SEO Friendly

My experiences to make Blogger-Blogspot Search Engine friendly. Get more traffic by using these simple techniques. A lot of people think that Blogger-Blogspot is owned by Google so they would have an advantage in search results. That's not true at all. If you have a personal blog then SEO (Search Engine Optimization) might not be appealing to you but a professional blog must be search engine friendly.

Blogspot How To: Remove "Subscribe to: Posts (Atom)" Text

14 comments:

Where does this text appear?


This text appears by default on all Blogger templates under the posts. It is normally annoying for most of the users but you can easily remove it.

Translate Blog in Other Languages with Google Translate Widget

No comments:
Translate Blog in Other Languages with Google Translation Widget


Google translation widget allows your blog readers to translate your blog in their language without leaving the page. This widget is powered by Google Translate technology and can be easily installed to any blog.

Blogspot Tutorial: How to Change Default Blogger Favicon

3 comments:

A good favicon means good brand
In this tutorial, I'll tell you how to change the default favicon present in every Blogspot/Blogger blog. A favicon is usually a 16x16 .ico file and it is displayed with the title of a blog in a browser. So, we can add our own favicon to make our blog more personal.

Ready? Lets Add a Custom Favicon


1- Search for a free custom favicon on Google and you'll find a lot of them.

2- Blogger doesn't allow to upload .ico files so you need to upload your favicon on Google Sites. Just log in there with your Blogger account, create a site and upload your favicon there.

3- Go to Design then Edit HTML tab.

4- Find this code in your template:

]]></b:skin>

4- Paste the following code right below above line like this:

]]></b:skin>
<link rel="shortcut icon" href="YOUR FAVICON URL" />
<link rel="icon" href="YOUR FAVICON URL" />


4- Just change the YOUR FAVICON URL with the URL or address of your favicon uploaded in step 2.

5- Save your template and enjoy.

Blogspot Tutorial: Add StumbleUpon Button in Posts

34 comments:
Add StumbleUpon Button in Blogger for Traffic

StumbleUpon is a popular social bookmarking site where users share their favorite web pages. You can add StumbleUpon button in the footer of each post. This button would make it easy for readers to share your blog content with the rest of the world. This can drive more traffic to your blog.

Blogspot Tutorial: Add a Twitter Retweet Button in Posts

3 comments:
How to Add a Twitter Retweet Button in Blogger-Blogspot Posts
You can easily add retweet buttons on your Blogger-Blogspot blog. Such buttons allow blog readers to share content on Twitter with others. When people will tweet about your blog, you'll get free marketing and traffic for your blog.

How to Add Your Own Image as Blog Background in the Template Designer

80 comments:
Add Your Own Image As Background in the Template Designer

The most special thing about Blogger-Blogspot is personalization and ease of use. People love to have a personal image as their blog background. You can see my previous tutorial which makes it fairly easy to add an image as blog background in the older Blogger-Blogspot templates (also called layouts). Now, you can design your very own templates with the new Template Designer. But you can't add your own image as background without knowing HTML and CSS. So, in this tutorial, I'll try to make it very simple to add your own image as blog background.

10 Most Popular Blogger (Blogspot) Templates

3 comments:
10 Most Popular Blogger-Blogspot Templates

People are doing amazing thing with Blogger-Blogspot these days. One of them is to convert Wordpress themes to Blogger-Blogspot with full compatibility. I've compiled a list of most popular Blogger-Blogspot templates. Check it out and feel free to add your suggestion as well.

Blogger Template Designer For Beginners

1 comment:
Blogger Template Designer for Dummies
Some days ago, Blogger announced a new feature Template Designer through which users can easily design and customize layouts. The Template Designer was only available as a beta feature to Blogger in Draft users. From today, this awesome feature is available to everyone. Just log in to your Blogger account and you'll see a new option Design on your dashboard. In this guide, I'll try to explain everything you need to know about the Blogger Template Designer.

How to Remove Header Borders in Minima Blogger Template

5 comments:
How to Remove Header Borders in Blogspot/Blogger

This is a really quick and easy trick. Whenever, someone creates a new blog, Blogger automatically chooses Minima Blogger Template by default. I really love this minimal template but the border lines around header doesn't make any sense. So, in this tutorial, Ill tell you how you can very easily remove the border lines around header.

What Are Custom Fonts & How to Use Google Custom Fonts in Your Blog

30 comments:
Add Beautiful Fonts in Blogger Blogs Using Google Fonts

Google has recently launched a new service which lets you easily use amazing fonts in any blog. These fonts are powered by JavaScript code which is hosted by Google so you don't have to worry about it. Currently, only 18 fonts are available but we can expect that number to grow. For example, this text is written in Lobster font. These fonts are search engine friendly and work in all browsers.

How to Add Facebook Share or Like Button in Blogger Templates

70 comments:

Social media sites like Facebook & Twitter could be great source of quality traffic for any blog. You can also add a Facebook Share or Like button in each of your posts. This button will allow users to quickly share a post on Facebook.

What are Meta Tags & How to Add Meta Tags in Blogger/Blogspot

3 comments:
What are Meta Tags & How to Add Meta Tags in Blogger

Meta tags have vital importance because they can bring traffic from search. By default, Blogger blogs don't contain such tags but you can easily add them. However, when you add a meta tag in Blogger, it is applied to all the pages/posts of the blog. So, search engines consider this an illegal act and your blog can be punished. In this tutorial, I'll tell you what are meta tags and how to add them in Blogger without duplicate problem.

How to Customize 'Older Posts' & 'Newer Posts' Links

1 comment:
How to Customize 'Older Posts' & 'Newer Posts' Links

In this tutorial, I'll explain how you can customize or change "Older Posts" and "Newer Posts" links which are present at the bottom of your blog posts. By default, these links are just simple text and most of the users won't even notice that these are actually navigation links. However, we can simply add some spicy CSS (?) or replace these links with beautiful icons.

Blogspot Tip: How to Control Comments in Asian Languages

2 comments:
Block Spam or Unwanted Comments in Blogger

Many of you might have experienced unwanted comments (aka spam) comments on your blogs. Most of times these comments are linked to some other sites which might include porn sites as well. Sometimes such comments also contain hatred and use of offensive language against someone which could really upset your visitors. Fortunately, Blogger offers a powerful way to control and block spam or unwanted comments on your blog. Our goal is to block the bad guys, but at the same time, we must make sure that regular visitors don't get annoyed by our settings.

Blogger Templates: Gotham Nights

13 comments:
Gotham Nights Premium Quality Dark Blogger XML Template


Gotham Nights is a gorgeous dark Blogger template. It was originally designed as free Wordpress theme by Evan Eckard and I've converted it to Blogger.

Features: dark, two columns, fixed width, top menu, black, search.



Blogspot Tutorial: How to Add Adsense Ads Below Header

3 comments:
How to Add Adsense Ads Below Header in Blogger-Blogspot Blogs
Inserting Adsense code in your Blogger-Blogspot header can be really beneficial. When a visitor comes to your site, he or she will definitely look at your header and then it's your turn to cash that first look. Just follow the steps below.

Blogspot Tutorial: How to Remove Labels Post Count

5 comments:

This is a really simple tutorial. I've seen a lot of people wanted to know how they can remove the "Labels Post Count". Just follow these simple steps.

How to Hide or Remove the Blogger Navbar

11 comments:

There is a navbar present at the top of every Blogger-Blogspot blog. By default, there is no option to remove it. But if you want to do so then here is a simple tutorial.

Blogspot Tutorial: Add Comment Posting Guidelines in Blogger

2 comments:
This tutorial will explain how you can add some guidelines right above the comment form. These guidelines could be helpful to encourage users to post constructive comments and also stop spamming.

Some Simple Tricks to Reduce Blog Size

2 comments:
Improve Site Performance by Reducing Load Time

Google has officially stated that website speed will soon be considered as a ranking factor so make sure your blog loads fast. Slow loading websites or blogs are very annoying to the user. I've seen a lot of sites which have great content but they take awfully long time to load. In this article, I'll give you some very simple tips to reduce your blog loading time.

Blogger Templates: Violet Rays

13 comments:
Violet Rays Fast Loading Dark Blogger XML Template

Violet Rays is another dark Blogger template. It has a shiny violet-colored background and a glossy top menu which makes this template stand out of crowd.

Features: dark, two columns, fixed width, top menu, violet, search, CSS, light-weight, left sidebar.



Blogger Templates: Excess

2 comments:
Excess Simple Minimal Green 2 Column Blogger XML Template


Excess is a really simple and minimal Blogger template. It has a very light color scheme with only green and white colors.

Features: white, green, two columns, fixed width, top menu, minimal, CSS, light-weight.