How To Upload and Use Custom Fonts in Blogger

Just about anyone can write and publish his or her own blog. In fact, there are about 152 million blogs out there on the internet. But, if you want your blog to stand out you need to impress visitors with the little things. You need to be able to catch there attention and keep it so that they want to come back.

Complementing your blog post with images, links, and catchy titled is a great way to start and should be something you practice on just about everything you post; however, don't just stop there. If you really want to impress people and draw attention toward your blog, you want to start where the content all begins. You need to make use of custom fonts in Blogger. This guide will help you learn a little bit about font styles and how to upload new fonts onto your Blogger site.

The Different Types of Font

Before you can upload any font files, you need to find the right font and typeface that will fit your style. Typeface is the design and symbols used for the letters; font is the actual characters. Some of the most common typeface terms that you should probably be familiar with before starting are:

• Serif - distinguished by small decorative lines that are attached to the end of letter strokes; best used for the paragraph or body content.
• Sans-serif - modern looking letter strokes that lack the decorate lines at the end; instead the letter end abruptly.
• Script - a handwriting typeface that looks like cursive letters or custom strokes.
• Display - typeface that is designed to stand out from the rest of the page; characterized by a broad and unique use of informal letter designs and transparency. Display typeface is best used on titles and headers.

Within each web browser there are also certain types of font files that are used. Most of the browsers, except Internet Explorer and the iOS browser, will use TTF font file. Internet Explorer is the only web browser service that uses EOS files, and Apple has opted for using an SVG for their mobile and tablet based products. Some custom fonts in Blogger have to be in an @Font-Face kit, but this will be discussed later on.

Where to Find Font

You can find custom font all over the internet when you're ready to get started. Some custom fonts in Blogger are free to use and can be downloaded to your computer, others you are considered 'premium' and you have to pay to use them, so please check twice whether they are having Commercial or Personal licenses. Google offers its own font service known as Google Web Fonts which can be a good place to start looking around for custom fonts in Blogger.

Using the Google Web Fonts service, you run a filter to find select fonts based on width, thickness, and slant. Better yet, you can test out how using the custom fonts in Blogger would appear by modifying the size, and viewing it in a small display window. If you like a couple different fonts, you can save them to your collection to come back to later.

Adding a Custom Font to Blogger from Google Web Font

Step 1. To browse the Google Fonts library, access www.google.com/webfonts. There are 650 font families in the collection right now, and they keep adding more, so you may want to sort them.

To organize the fonts by style, you can use the menu on the left side. The top menu lets you to add and preview your own text using the 'Preview Text' field. From the same menu, you can pick the 'Size' and sort the fonts in 'Alphabetical order', by 'Date added', 'Number of styles' and 'Popularity':

Step 2. Once you decided what font you want to use, click on the 'Add to Collection' button and then hit the 'Use' tab. This will take you to the 'Almost done!' page that will give you a link to the style sheet found in the 'Standard' tab (point 3) and the CSS style (point 4).

The link to style sheet would look like this:

<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css'>

And the CSS style would look like this:

font-family: 'FONTNAME', cursive;

Step 3. Now that you have selected the fonts and have a general understanding of the different types of fonts available, you can head over to your Blogger blog. Open up the Dashboard and make sure that the first thing you do is to create a backup of your template: go to Template and press the "Backup/Restore" button on the upper right side. That way, you can revert the changes back to the original in case something goes wrong.

Step 4. From the same "Template" location, press the "Edit HTML" button:

Step 5. Click anywhere inside the code area and press CTRL + F at the same time (PC) or Command + F (Mac) to open the Blogger' search box and type <b:skin> inside the search box. Press Enter and it will take you to the <b:skin> tag, which will be highlighted in yellow:

Step 6. Directly above the <b:skin> tag, copy & paste the link to the style sheet provided by Google Web Fonts (step 2). To prevent any errors, add a forward slash (/) right before the closing angle bracket (>), like this:

<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css' />

Step 7. To apply the font on a specific part of our blog, we'll need to find the CSS selector and add the CSS style (point 4) just AFTER the curly bracket. If you don't know how to find the id/class selector, please read this tutorial: Add CSS rules to Design a Blogger blog using Firebug

For example, if I would want to add the "Rancho" font to the posts and comments titles, I will paste the CSS style like this:

h3.post-title, .comments h4 {
  font-family: 'Rancho', cursive;
  font-size: 28px;
}

Where "h3.post-title, .comments h4 {" is the class selector for the post and comments titles. Note: to change the size of your font, add the "font-size: 28px;" part as well, and change the "28px" value to make the font bigger/smaller.

You can also add the same CSS to "Template" > press the "Customize" button the right side, navigate to "Advanced" > "Add CSS" tab and paste the CSS code in the empty box.

Step 8. Finally, press the "Save Template" button and you're all set!

Using a Custom Font that isn't on Google Web Fonts

Some of the good places to find free fonts are DaFont, FontSquirrel and UrbanFonts. Click to download the kit (unzip it if necessary), and save the TFF or OFT file on your desktop.

Step 1: Convert the Font File

The font file that you've downloaded is most likely in a TFF or OFT file since this is the most popular type. You need to convert this file into a @Font-Face kit. Many online services can help you do this, but here are two recommended sites:

• Fontsquirrels
• Font2web

If you are using the Font Squirrel Webfont Generator: press the "Add Fonts" button, choose the font file that you saved on your desktop and check the "Yes, the fonts I'm uploading are legally eligible for web embedding." checkbox. After the font has been successfully uploaded, click the "Download your kit" button.

This should open the kit containing 4 formats of fonts (inside the fonts folder), a CSS stylesheet & the html file for the demo page. The only files that you need to extract are the ones with the .woff, .tff, .svg, .eot extension and the stylesheet.css file.

Step 2: Upload The Font Files To Blogger

Custom fonts in Blogger have to be uploaded before you can use them. For this, we are going to use Dropbox and upload them to Public folder (upload only the files with the .woff, .tff, .svg and .eot extension).

Once you've uploaded them, copy the Public URL's of all 4 fonts: right click on each file, choose "Copy public link..." and press the "Copy to clipboard" button. Paste each link separately in a Notepad, so that you can link to that location later.

Next, open up the stylesheet.css file that came with the kit and it will show you a similar code:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 2, 2014 */

@font-face {
    font-family: 'fontname';
    src: url('font-name.eot');
    src: url('font-name.eot?#iefix') format('embedded-opentype'),
         url('font-name.woff') format('woff'),
         url('font-name.ttf') format('truetype'),
         url('font-name.svg#fontname') format('svg');
    font-weight: normal;
    font-style: normal;
}

Edit the link location to point toward the font file that you just uploaded to the Dropbox Public folder and pay attention to each extension which should correspond with that found in the stylesheet.css file.

For example, if you uploaded the font .tff file with this name:

https://dl.dropboxusercontent.com/u/62316253/amatic-bold-webfont.ttf

...change the CSS link in blue in this line:

url('font-name.ttf') format('truetype'),  

to point to:

url('https://dl.dropboxusercontent.com/u/62316253/amatic-bold-webfont.ttf') format('truetype'),

After you've added all the links, copy the stylesheet.css code that you modified to your clipboard.

Step 3: Editing Blogger's CSS

Open up the CSS on your Blogger site. This can be found by navigating to Template > Edit HTML. Next, click inside the code area and press the CTRL + F keys to open the search box, then type the tag below and hit Enter to find it:

]]></b:skin>

Just ABOVE this tag, add the code that you copied in the stylesheet.css file.

Finally, we need to declare the custom font using CSS. For example, if I want to change the font of the post title, I will add the line in red from above, just below the "h3.post-title, .comments h4 {" CSS selector:

h3.post-title, .comments h4 {
font-family: 'fontname';
font-size: 28;
}

Obviously, the fontname will be the actual name of the font. This will make sure that your blog can use the custom fonts in Blogger. After we've made these changes, press the "Save Template" button and exit.

Step 4: Test Out the Site

Navigate back to your sites homepage and you should now see the custom fonts in Blogger that you uploaded during the last few steps. Every time you go to make a new post, the site will now be able to use your font.

In Conclusion:

Website design is an important part to maintain a successful blog. As a blog owner, you are responsible for providing content that isn't just fun to read, but looks good. Modifying the font is just one easy way that you can help your blog stand out without making any major changes to your blog itself.

Do you have any other methods for adding custom fonts? Let us know by leaving a comment below!

How Firebug Helps You Design Your Blogger Blog

For most bloggers, the idea of adjusting the coding of their blog to improve the user experience is daunting at best and often quite frightening. HTML5, CSS, and other coding elements are their own virtual language and for the average Blogger user looking to update a personal blog, the automatic settings are about as good as it gets. What if there was a better way to code a blog, whether a beginner or a pro, that could be done within the browser itself?

If you're using Firefox or Chrome, then you should also be using Firebug. It allows you to code your website in real time, so you can maximize the UX of your blog in no time at all.

You No Longer Need To Edit Through Blogger!

If you've ever tried to update a Blogger theme through the editing functions of the website, then you know how difficult it can be. You can preview your designs, but you can't save any changes to officially see what is going to happen with your site until you publish the edits. If you've missed just one line of code or forgotten one small element, you're going to have to go back into the editing matrix, find the error, update it again, and repeat until you have a responsive blog once again.

What Firebug allows you to do is see all of those elements that make up a website in real time. Instead of editing and then publishing, you can edit in real time and see updates happen, all without affecting the user experiences of visitors that are coming to your site while you're editing. You can change the fonts, colors, or virtually anything else within the design of the site quickly and see the results of your work as it happens. Don't like it? Just undo your changes.

It's really that easy.

Using Firebug to Customize CSS in Blogger

This guide will show you how to modify the CSS code of a Blogger template. Usually, the Blogger Template CSS style declarations are editable through the style.css file, found between the <b:skin> and </b:skin> tags.

To download Firebug and get more details regarding its powerful features, visit: Firebug for Firefox, or if you are using Chrome, get the Firebug Lite app. I would recommend to use Firefox, which is more complete and quick, but, nevertheless, both work the same.

Once Firebug is installed, a small bug icon will be available in the upper right of your Web browser's address bar. Clicking it, a horizontally split screen will be shown at the bottom of the browser's window. The page will continue to show in the upper half, while the lower half will show the HTML of the current web page.

To customize any web element from a Blogger template, just click either on the Firebug icon in the toolbar, or the "Inspect Element with Firebug" item in the context menu. Next, click the blue cursor button to Inspect and place the cursor right over the element to customize.

For example, let's say that we want to change the title of the "Blog Archive" gadget. After we clicked the inspect button, mouse over the "Blog Archive" title which will be highlighted as shown in the screenshot below. To change this element, click on it:

Now that we decided which element we want to change, right click on the "Style" panel and select the "Add rule" option:

This will give the class or the id of the highlighted element - in our case, the heading of the Blog Archive (#BlogArchive1 > h2). To edit this rule that we just added, click anywhere near the left curly bracket that will open a text box, so that we can type a new CSS declaration:

And here comes the fun part. Let's say that we want to make the title red. We will type color and hit Enter, then we will type the color value or the red text and hit Enter. We will also set the set the font size to 20px, text alignment to center (text-align: center) and make the text underlined (text-decoration: underline):

The cool thing about Firebug is that when modifying any CSS property, you can see the results directly applied on the page. So, after adding these declarations, we'll see a big red underlined title for our Blog Archive gadget (see in the screenshot above).

To apply this CSS rule on a Blogger template, just select it beginning from the right curly bracket and to the #(id) or .(class) symbol, then right click it and Copy the CSS code.

Before making any change, it's highly recommended to make a backup of your current template. Go to "Template" and click the "Backup/Restore" button on the upper right side. On the same "Template" location, click on the "Customize" button and navigate to "Advanced" > "Add CSS". Paste the CSS rule that you just copied into the CSS box:

Click the "Apply to blog" button on the upper right corner to save the changes and view your blog.

Firebug Also Gives You One Distinct Advantage...

One of the best reasons to install Firebug into Chrome or Firefox is that it allows you to emulate some of your favorite website designs quickly and easily. Instead of hiring a web designer to do the work, which could cost you thousands, you can simply start Firebug and see what the CSS styles are for your favorite site. This allows you to create a similar widget.

From there, all you've got to do is change the coding to make the design elements work under the rules of your own custom.css. This means you can make easy design changes to your Blogger blog without having to go through all of the menus and editing functions so that your template can truly be your own. Do you have some work to do? Sure - but Firebug does all of the primary work for you.

All you've got to do is have a creative mind and a few minutes to make changes to the coding design. Whether you've been coding for years or are just starting your first blog, this is definitely the best way to make sure that your visitors have the best experience possible!

Add a Pinterest Pin It Mouseover Button on Blogger Images

Images have always played a prominent role in attracting new visitors through search engines like Google and Bing. But when Pinterest decided to enter the social media mix, it upped the ante in a big way.

Pinterest lets blog owners use their service to add a 'pin' to photos or content images on the site. When visitors of that site see a photo they like, they can choose to click on the red Pinterest button for Blogger, and add it to their Pinterest account.

The person who pressed your Pinterest button for Blogger can now see your photo on their dashboard, and share it with friends or followers on the service. They can also come across this photo when users add keywords or category tags to the image. More importantly, that photo links to your site when clicked on and will contain a description title of your blog name or post.

Therefore, adding the Pinterest button for Blogger will help you to benefit from tons of new traffic coming from Pinterest and people who had found your photos and post links using the service. Here are some steps to add your very own Pinterest button.

1. Access your Blogger Template

The first thing to do is to edit the code of your template so that it knows when to display this Pinterest Button for Blogger with the content. You can do this by logging into your Blogger Dashboard and finding your way to "Template" > "Edit HTML".

When the editor opens up, it may look a bit foreign to you if you don't have much experience using HTML. Click anywhere inside the code area and search by pressing the CTRL + F keys for the </body> tag - hit Enter to find it:

</body>

The body tags makes up the general content in your webpage. Think of it like the settings panel of a website. If you were to delete everything in this section your site would turn into a blank white page.

2. Add The Pinterest Pin it Script

Once you found the </body> tag, insert the following script just above it:

<script>
//<![CDATA[
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjg-OPR0cFlQTQUPS7Fz0iykBBG_5YNk36c1oKWUQTOpSzrxyCGTrh_g7bKgQEnaN0OAbA3M7BI9J1aG2fz5IB5O3Eeq670Lk6wvjiGS48BArDkTUDCU6pJJmiijE4rhYBz1CKK_v8x2rl/s1600/pinit-button.png";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='pinit-img-button' type='text/javascript'>
// Visit helplogger.blogspot.com for more widgets and tricks.
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('1i(1j).1k(r($){$(\'M\').1l(\'<6 p="4:D;" N="A" O="\'+13+\'" >\');$(\'#7-6-P\').1m();3 l;3 m;3 n;$(\'.A\').1n(r(){m=$(\'.A\').E(F);n=$(\'.A\').G(F);$(\'.A\').1o()});3 o=$(\'#7-6-P\').1p().1q("1r.1s.14");o!=-1&&15();r 15(){$(\'.s-16 6,.H-M 6,.s-17 6\').1t(\'.18,.18 6\').1u(r(){$(\'.7-4\').t("4","D");19(l);3 a=$(q);3 b=1a(a.t("Q-u"));3 c=1a(a.t("Q-v"));3 d;3 e;1v(1w){B\'1x\':d=a.9().u+a.G(F)/2-n/2;e=a.9().v+a.E(F)/2-m/2;C;B\'1y\':d=a.9().u+b+5;e=a.9().v+c+a.E()-m-5;C;B\'1z\':d=a.9().u+b+5;e=a.9().v+c+5;C;B\'1A\':d=a.9().u+b+a.G()-n-5;e=a.9().v+c+a.E()-m-5;C;B\'1B\':d=a.9().u+b+a.G()-n-5;e=a.9().v+c+5;C}3 f=a.1C(\'O\');3 g=a.1D(\'.H,.1E,.s\').R(\'.H-S,.s-S,.s-1F\');3 h=g.1G();w(T U===\'V\'){U=\'\'}w(T W===\'V\'){W=\'\'}w(g.R(\'a\').1H){X=g.R(\'a\').I(\'Y\').1b(/\\#.+\\b/1c,"")}Z{X=$(1I).I(\'Y\').1b(/\\#.+\\b/1c,"")}3 i=\'<1d N="7-4" p="1e:x;9: 1J;z-1K: 1L;" ><a Y="1M://1N.14/1O/1P/P/?1Q=\'+X+\'&1R=\'+f+\'&1S=\'+U+h+W+\'" p="1e:1T;1U:x;" 1V="1W"><6 N="1X" p="-1Y-J-K:x;-1Z-J-K:x;-o-J-K:x;J-K:x;10: 0.8;20:21;Q: 0;22: 0;23:0;" O="\'+13+\'" S="24 1f 25" ></a></1d>\';3 j=a.11().26(\'a\')?a.11():a;w(!j.y().27(\'7-4\')){j.28(i);w(T l===\'V\'){j.y(\'.7-4\').I("1g","q.p.10=1;q.p.4=\'12\'")}Z{j.y(\'.7-4\').I("1g","q.p.10=1;q.p.4=\'12\';19(29)")}}3 k=j.y(".7-4");k.t({"u":d,"v":e});k.t("4","12");k.L().1h(2a,1.0,r(){$(q).2b()})});$(\'.s-16 6,.H-M 6,.s-17 6\').1f(\'2c\',r(){w($.2d.2e){3 a=$(q).y(\'.7-4\');3 b=$(q).11(\'a\').y(\'.7-4\');l=2f(r(){a.L().t("4","D");b.L().t("4","D")},2g)}Z{$(\'.7-4\').L().1h(0,0.0)}})}});',62,141,'|||var|visibility||img|pinit||position||||||||||||||||style|this|function|entry|css|top|left|if|none|next||loadpinitbutton|case|break|hidden|outerWidth|true|outerHeight|post|attr|box|shadow|stop|body|class|src|button|margin|find|title|typeof|pinit_button_before|undefined|pinit_button_after|pinitURL|href|else|opacity|parent|visible|custom_pinit_button|com|hoverCheck|content|summary|nopin|clearTimeout|parseInt|replace|gi|div|display|on|onmouseover|fadeTo|jQuery|document|ready|append|hide|load|remove|html|indexOf|helplogger|blogspot|not|mouseenter|switch|pinit_button_position|center|topright|topleft|bottomright|bottomleft|prop|closest|hentry|header|text|length|location|absolute|index|9999|http|pinterest|pin|create|url|media|description|block|outline|target|_blank|pinimg|moz|webkit|background|transparent|padding|border|Pin|Pinterest|is|hasClass|after|pinitOnHover|300|show|mouseleave|browser|msie|setTimeout|3000'.split('|'),0,{}))
//]]>
</script>

3. Changing the Position of the Pin it! button

The cool thing about this code is that you have some freedom over where the Pinterest button for Blogger will go over the image. Take a look at the code that you just copied and pasted into the HTML for the word 'center'.

var pinit_button_position = "center";

To move the pin to a different area of the photo, replace center with one of these settings:

topleft
topright
bottomleft
bottomright

And to change the Pin it! button that appears on mouse over, replace the address in blue from above with your own:

var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjg-OPR0cFlQTQUPS7Fz0iykBBG_5YNk36c1oKWUQTOpSzrxyCGTrh_g7bKgQEnaN0OAbA3M7BI9J1aG2fz5IB5O3Eeq670Lk6wvjiGS48BArDkTUDCU6pJJmiijE4rhYBz1CKK_v8x2rl/s1600/pinit-button.png";

4. Save The Template

Make sure that you added everything correctly, then save the template and navigate to a recent post that you made that contain images. Hover your mouse over the image and you should now see a red Pinterest button for Blogger displayed on the image. Test it out and see it how it works.

If you want to hide the pinit button from a specific image, when you create a post, switch to the HTML tab of your post editor and type class="nopin" right before the closing slash and angle bracket of your image element, like this:

The only downside of this button is that it doesn't take the information from your custom image titles. It's automatically set to take the title of the blog post where the image is located. So, you'll need to pay closer attention to the title of the posts so that it fits closely with the images being shown.

Remember that when you have this code activated, you have to label your titles so that they are relevant to the photos you are posting. This might sound obvious, but sometimes you create a post with an image as a joke that won't make sense in the context of viewing it on Pinterest.

If you use Google Analytics, you can start to see traffic flooding into your site from Pinterest. You should also create your own Pinterest account so that you can manage the content and track how it's being shared. That's it. Enjoy and happy blogging!

How to Center the Blogger Header Image

The header of a website is what distinguishes your blog; it's your identity or digital fingerprint. Whenever a visitor accesses your blog for the first time, the header is one major aspect that is used to determine who you are and the type of content that they can expect to read. Therefore, it's important to develop a header that is both prominently placed and telling of your brand name.

What would seem to be counterintuitive to that idea is the default Blogger settings for header positioning. Whenever you upload a header to the site, it will automatically be aligned to the left of the page. Some Blogger users may be okay with this setting, especially if they are using a header design that doesn't contain a background. Others may find that their background headers appear cut off, incomplete, or indistinguishable from the rest of their content.

If you find yourself in the second category of users, there is a way to adjust the positioning of your header so that it is displayed as a center Blogger header. By centering your site header, you have greater flexibility over the overall design, and it allows you to really shine light on this content. It's hard to miss a header that is placed smack dab in the middle of the screen on every page that someone navigates to.

Center Header Image with Blogger Template Designer

Making the change is relatively easy. You'll be able to make these adjustments on every page of your Blogger blog without having to change them individually. All you need to do is to modify the CSS of your blog that can be found directly through your Blogger dashboard. Even if you have little to no experience in web design or coding, you can center Blogger header by following these next few steps.

Step 1. Log in your blogger account and select your blog, then go to "Template" and click the "Customize" button on the right side.

Step 2. Navigate to "Advanced" > "Add CSS" tab and paste the code in the empty box:

#header-inner {
background-position: center !important;
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}

If you have a small image and you want it to become full width, add this CSS instead:

#header-inner {
 background-size: cover;
 width: 100% !important;
 text-align: center;
 }
 #header-inner img {
 width: 100%;
 height: 100%;
 }

Step 3. Hit the ENTER key after you paste the code snippet, then click the "Apply to Blog" button.

Here are some other aligning options for your headers:

Align Blogger Header Banner and Text Side by Side

Image on the right and title on the left

#header-inner {
background-position: right !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}

Image on the left and title on the right

#header-inner {
background-position: left !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}

Note: for larger images, you may need to resize them in order to make them appear side by side with the text.

That's it!

After making the changes to the CSS and saving your modifications, you may navigate back to your homepage. Refresh the page and you'll notice that the header is now centered, instead of on the left. Click on a few of your page links and make sure that this modification has been made to every page or post on the blog.

If by chance you don't see the changes to the header, go back through the code that you modified and make sure that you have copied and pasted the information into the file exactly as instructed. Even minor modifications in the code, or a missing semicolon may fail to make the changes you are trying to achieve, or come away with different results than what's expected.

The great thing about CSS is that it is your site's central hub for all things design. From the CSS file, you can modify just about any appearance on your site to give the blog a custom look and feel. Once you're comfortable performing minor adjustments to the appearance of your site, you can start to get creative and come up with your very own modifications.

Make Blogger Header, Navigation and Footer Full Width

Blogger is a user-friendly service that provides a lot of really attractive looking default templates for those just starting out. Default templates come in handy, but the nice things about owning your own blog is that you have the chance to add your own personal touch. As a matter of fact, templates aren't made to restrict your freedom of design, but instead they're there to provide you a foundation to build from. With every default template available on Blogger, you can make changes to fit your style.

One of the most common requests out of the Blogger community when making alterations is how to change the look of some of the key sections like header, navigation, and footer. Initially, these items are designed to fit within just 1/3 of the page, surrounded by padding and margins on either side. These margins are used to give the page a slim fitting appearance, but could also cause your content to look compressed.

Important: Backup your Template

Making the changes to a full screen Blogger navigation, footer, or header can be done and won't take you much time. Before you can make any changes, you should save extra copies of the template .xml file in case anything goes wrong. That way, if you don't like it or it doesn't come out looking like it should, you can reuse the contents of the original file to restore your blog to working condition.

Demo

Hover your mouse over the image to see a before and after example:

How to Make Header, Navigation and Footer Full Width in Blogger

Step #1: Access Your CSS File

If you've never opened up your CSS file before, log in to your Blogger account, select your blog and navigate to Template > Edit HTML. This will bring up the code of your template containing all your blog's internal files in one place.

Step #2: Modify the Background

Click anywhere inside the code area > press CTRL + F keys and type the following line > hit Enter to find it (stop at the first occurrence of it):

body {

Just below body { you should see some lines that will look like this:

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

Where you see the highlighted line above in the code, remove the line and replace it with:

padding: 0px;

Different templates will have minor variations, but you should still be able to find these lines within every template.

Step #3: Change the Content Section

Next, search using the CTRL+F keys for this part:

.content-inner {

Just below it, you will see this line:

.content-inner {
padding: $(content.padding) $(content.padding.horizontal); 
}

Remove the line in red and replace it with:

padding: 0px;

This will remove any of the padding around the inner content, so it won't leave any room on both sides.

Now find this part:

$(content.background.color.selector){

Just below it you will see this line:

$(content.background.color.selector){
background-color: $(content.background.color);
}

Replace the line in red with:

background-color: $(body.background);

Finally, search for this tag:

]]></b:skin>

And just above it, add this CSS:

.main-outer {
background: $(content.background.color);
}

Step #4: Make the Content Outer Full Width

Content is displayed differently between browsers, so you'll next want to fix this so that it alters the width across the board. This code can be found searching for:

.content-outer, .content-fauxcolumn-outer, .region-inner {

And just below it you will see the following lines:

.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}

Delete the line in red and replace that line with:

max-width: 100%;

Step #5: Finish It Up

Now you have just two more lines you need to change. Look for:

</b:template-skin>

And click on the right arrow to expand the styles. Note: you will need to search for </b:template-skin> tag again, and just before it you'll see these symbols highlighted in yellow:

]]>
</b:template-skin>

Above this ]]></b:template-skin> section of code, add the following:

.main-outer {
max-width: $(content.width);
margin: 0 auto;
}

Then run a search for:

]]></b:skin>

Add these lines of code just before/above it:

.tabs-inner {
padding: 0px;
}
.section {
margin: 0px;
}
.header-inner .widget {
margin: 0px;
}

Save the template and exit out of the editor.

Finished!

Following along with this tutorial won't affect or alter the pictures you are using on the blog, just the design of the content area. If you have a logo that stretches across the screen and fits perfectly for 1/3 page header, you will need to resize and re-upload this content so that it is able to work with the new adjustments.

Automatically Resize Blogger Images to Fit Blog Post Area

Blogger offers most of the tools you would need to add and resize Blogger images quick and easy. You can upload photos directly on the platform and even change the dimensions based on the type of content that you are attempting to produce.

In order to do this, create a post and click on the small photo icon on the top toolbar next to the font style settings. A pop-up will show up on your screen asking you where you'd like to upload the image source. You have a choice between adding pictures from:

• Your local computer
• Previously uploaded images on the blog
• Picasa Web Albums
• An image URL

Once you select the image that you want to use, you'll see four image sizes to choose from - small, medium, large, and x-large; it also gives you the option to determine the alignment. If you find that the four preset dimensions aren't providing the outcome you desire, there are easy ways to resize Blogger images to custom dimensions in order to fit your blog post area.

Step #1: Retain the Image Quality

If you know that you are going to need to resize Blogger images once you post them to your blog, make sure that you start with a photo larger than the 640px dimensions of the x-large option. It's easy to bring an image down in size, but if you try to make a small image bigger, you'll lose some of the quality. Just make sure that you watch out for the file size containing the image; the larger the file, the slower it will load on your website.

Photoshop is a powerful image editor that can help you to resize Blogger images or modify your images before you post, but it is also an expensive investment. There are also many other freeware image editors that can perform the simple task of resizing the photo. Determine what size you'd like the photo to display on the page and manually resize Blogger images to those dimensions; other users have found that 700px is a pretty flexible width size that works well on posts.

Once you've got your photo resized and added to your post, click on it and choose the 'Original size' option. If your photos are going to exceed the post editor, it probably means that they are larger than the body of your post, so let's fix that and make them fit exactly.

Step #2: Modify The Site's CSS

Next, you'll want to modify the CSS of your Blogger template to accommodate the adjustments. Don't worry; you won't need much coding experience to complete this task.

Open up the Blogger dashboard and go to 'Template' > 'Customize'. You'll see the option for 'Advanced', click on it and find your way to the 'Add CSS' tab... paste the following CSS code inside the empty box:

.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}

Adding the code to this section, automatically adds it between the <b:skin>....<b:skin> tags of your Template (Template > Edit HTML, above the ]]></b:skin> tag). So, no matter whether you add it above ]]></b:skin> or within the Add CSS box, the effect should be the same.

Remember that when you make changes to the CSS of the blog's Template, these changes will affect every post previously added, using the "Original size" dimension option.

To spruce up the post even more, add the last three lines shown in green below:

.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
box-shadow: none;
border: none;
padding: 0px;
}

This code will get rid of any borders and padding around the image and give it a much more natural look within the post. Hit the "Apply to Blog" button once you've finished adding it.

Note: This will only change the images set to Original size. To resize images with different sizes and apply this change on ALL the pictures added to your posts, add this CSS instead:

.post-body img {
width:100%;
height:100%;
display: block;
}

Please consider that, if you have posts with photos floating either on the right or left side of the content, they will automatically go full width.

Step #3: Create A Post

After making the adjustments to both file size and CSS, you may go back to the post editor and repeat the Step 1 to add an image. When you return to the screen that asks for size, click on the "Original size" option and confirm your choice. Your newly added image will then be displayed with the adjustments that you created, so that it fits nicely the width of the post area.

How to Turn Off Auto Enhance for Blogger Photos

When you go to upload photos on Blogger, look closely for changes between the picture you uploaded on your computer and how it looks on Blogger. If you notice any darkening of the pictures themselves, especially in light-colored areas of the photo, you are seeing the results of a Blogger auto-enhancing feature.

This Blogger auto-enhancing feature is packaged within the service and is intended to give your photos a more professional feel. It works by smoothing out fuzzy photos and removing any imperfections in personal photos, so that you see your best looking you. However, you may realize that not every picture that you upload needs to undergo this enhancement. In fact, it may even cause your site to look dull or outdated as it can turn white photos gray.

The first picture was auto-enhanced, while the second one was not

Turning Off Picture Auto-Enhancement on Google Plus

Fortunately, there is a way to adjust these settings so that you're able to turn them on and off at will. You may be surprised to know that the root cause of these changes actually lies with the Google uploader and your decision to link your Google+ and Blogger accounts together.

Step 1: Access Your Google Account

Blogger is just one of the many services that make up the Google network. When the company released Google+, this Blogger auto-enhancing feature came with it because adjustments were made to the Google uploading service. These same changes take place when you're adding pictures from your library in Picasa. The good thing about Google is that they allow you to make adjustments to your settings from one central location by navigating over to your Google account.

In order to turn the "Auto Enhance" feature off, go to your Blogger dashboard, and click your icon in the top right corner, then the blue "View Profile" button (if you are not using Google+, click the "Account settings" link). Now you'll be taken over to your Google+ profile or settings.

Step 2: Find The Enhancement Settings

Once opening your Google account, look for the tab on the top left corner of the page that says Profile > navigate to Settings - or if you are using a Blogger profile, click the "Edit settings" link under "Google+ settings". This will bring up a list with "Photos and Videos" options including "Show geo location…" and "Allow viewers to download my photos...". Look toward the bottom of the list for the 'Auto Enhance' heading and check the "Off" option to turn this feature off.

Step 3: Auto Enhance on Photos You've Already Uploaded

Any picture that you upload from here on out will no longer be subject to this Blogger auto-enhancement feature; however, this will not revert any pictures that have already been uploaded. If you want to make any changes to photos that were uploaded during this period, do the following: from the same panel, click on the 'Photos' tab which it will take you to the albums for each blog > click on the blog where you wish to disable the auto enhance effect and press the down arrow > go to the "Apply Auto Enhance" option and choose 'Off'.

Notice The Results?

Now that the auto-enhancement feature is turned off, you may start to see different results when uploading. Remember that this change will affect all of your Google services across the board such as Google+ and YouTube. You may turn this feature back on, at any time, by repeating the steps list above and re-checking the account settings box. When you're done, just turn it back off. Understanding these changes gives you the power to decide for yourself which pictures you'd like enhanced, and which you don't.

How to Optimize Images for Better Search Engine Rankings

When search engines start indexing the pages on your site, they don't just focus on the writing. Web crawlers employed by services like Google and Bing shuffle through your site's structural code looking for any relevant information that they might offer to their customers. Some of the information includes things like backlinks, tags and even images.

Images make up a big part of any website. They help to excite the visual senses of readers and offer a little extra entertainment value. What most blog owners don't realize is that all of the photos that they upload to their site aren't confined to their site alone. Crawlers make sure that these images also show up within their respective search engines sites.

Image searches can have the effect of drawing in large numbers of new readers that were just looking through content in Google images. You can benefit from this traffic and increase your average subscriber by practicing image optimization.

Image Optimization Tip #1: Alt Tags & File Names

Visitors may love images, but computers don't. Computers are designed to do what you tell them without violating any of the parameters. When web crawlers come across images on a website, they really don't know what to do with it because they are made to collect information, not interpret it. The solution to this problem is to optimize images and appropriately label your alt tags so that they display the correct content when someone goes to look for it.

For example, let's say you upload a picture of your dog, and label the "alt" tag by the dog's name, 'Frank'. The web crawler is going to read the alt tag without ever realizing it's a picture of a dog; therefore, the crawler will come to the conclusion that it needs to display the image when someone run a search for 'Frank'.

The minor word choice mistakes may not affect the operations of your website, or how your image is displayed, but it will affect the search results of others and the traffic that comes into your website. Whereas you may have been able to attract the dog lovers in the world using image optimization of your dog tagged 'dog', you are now drawing in crowds searching for their uncle "Frank".

To include the alt tag, simply add alt="this is your alt text" to your image tag. Here's an example:

<img src="pug-dog.jpg" alt="frank dog" />

But you don't have to touch the html code of the image. Once the picture is uploaded, click on it and you will see the "Properties" setting. Add the alt text inside the box and hit OK:

This goes the same for file names on a website. You need to optimize images and file names on everything that you decide to save to your website directory so that this information can be appropriately indexed and be used as a search term. You could name the file of your dog Frank, "pug-dog.jpg", which would encourage the search engine to add Frank into searches being performed with the phrase 'pug dog'. Alt tags and file names play an important interpretation role between you and the machine that makes your blog possible.

Image Optimization Tip #2: Add A Caption

After uploading your images, you should always add a caption to the image, so that average browser understands what they're looking at. This gives your website a more professional appearance and will help to keep people on your page.

Not everyone that comes across your picture using a Google Image search is looking for your blog. Maybe they just want to download the image, and that's all you'll ever get from them. The important thing is that they found your photo relevant to their search, and decided to navigate to your site in order to save it for their own use.

The longer those users stay on the site, the better it looks for you because it plays a role in the "bounce rate". Bounce rate refers to when someone clicks on a link, realizes it's not what they're looking for, and then immediately goes back to the search engine. If you can reduce the number of times that this happens by providing captions and intriguing content that will make people want to stick around, your SEO ranking will improve.

Image caption and SEO

Image Optimization Tip #3: File Size

Improving your bounce rate can be tough because the attention span of the everyday Internet user is incredibly short. It may be as short as 8 seconds. High bounce back rates and slow loading sites can be the death of most blogs because no one wants to wait for the content to load. By the time your website finally loads with the content that you need, they could have easily visited two or more sites and found what they need from someone who was better prepared to handle their traffic.

Optimize images so that you are able to keep the file size as small as possible while retaining the quality of the photo. Images taken from DSLR camera - although they may look great - can be up to 1.4 MB in size if you take them directly off your camera and upload them on your blog. This type of space is massive for any everyday blog, and will hurt your SEO ratings.

Use Photoshop or one of the many online services like Google Picasa to rescale your images or reduce the file size. One service that can perform this ability for free and do a great job is Kraken. When you access Kraken site, it will allow you to upload the picture and download the new image optimization versions to use on your Blogger site.

Putting It All Together

At the end of the day, the quality of your site and overall SEO ranking isn't just about what you have to say. It's the entire package of what you have to offer. Optimize images every chance you get and use the strategies discussed above. Now that you know that you might have been neglecting images all along, you can make necessary adjustments and start to see even better results from all your hard work.

How To Set Up a Custom Domain in Blogger

Our web today is a wonderful place. It's increasingly become a knowledge hub for strollers around the globe. And you know what the best part is? It does not have a religion, race or color, that's where perhaps its strength lies in. Point being, no matter what you are after, from details of products to how to use them, from fruit varieties to language origins, from how to hack Facebook account to how to set up a custom domain name in Blogger. Each and everything is there, in abundance and easily available. Now I know you are here to understand how you can setup/host your custom domain on your Blogger account. So let's get on with it, without further delay.

Before we start

It's important that you realize, it isn't difficult to add a custom domain into your blogger account. If you are a blogger, it's perfect if you already own your own blog, it shows your passion and love for blogging and provides you with freedom to move from one platform to another, when and if you need. Also from users perspective, it's much easier for them to remember and visit your blog at customized address like myblog.com than myblog.blogspot.com.

One of the best things about Blogger is that it does not push you to host your site with blogger. It is entirely your own choice to choose from either of two hosting plans 'hosting on BlogSpot' with address myblog.blogspot.com, or going with a custom domain with address myblog.com.

Some Popular Web Hosting Sites:

If you don't already have purchased yourself a custom domain, these are the places that you should be looking for to get one:

• EasyDNS
• 1and1
• GoDaddy.com
• Yahoo! Small Business
• No-IP
• ix web hosting

So now if you have bought yourself a domain, from either of these you would have an IP address and a name. Let's assume our is 'mynewdomain'.com.

Well, it's time to start adding a custom domain to your blogger account.

Remember:

Here we are using setup for GoDaddy.com, the most popular domain name provider. For custom domains from other sites, the steps are almost same, so don't vanish.

Setting Up Blogger Custom Domain

Step 1. Login to your Blogger account at www.blogger.com.

Step 2. Click on your blog and then go to "Settings", choose "Basic".

Step 3. Under "Publishing" section, click "+ Setup a 3rd party URL for your blog".

Step 4. Under "Third-party domain settings" next to "http://" type your domain that you just purchased and make sure that you don't forget to add the "www" prefix to the domain name.

Step 5. Click "View settings instructions" to get the blogger's official instructions. On the Blogger instruction page, choose the "On a top-level domain (www.example.com)" option.

Step 6. Under the point 9 of instructions, 4 IP addresses will be given, copy and save all 4 of them.

Step 7. Go back to your Blogger Settings and press Save. It won't get saved and an error will appear saying 'We have not been able to verify your authority to this domain. Error 32.'

Step 8. Under the error, you will see two fields "Name, Label or Host Field" and "Destination, target, or Points To" field. Copy data of both rows from these fields.

Step 9. Now log in to your GoDaddy.com account and click on "My account" on the upper right corner > select "Manage my Domains".

Step 10. Here you should see your purchased domain name > just click on your domain name.

Step 11. Click on the "DNS Zone File" tab next to Settings and choose "Use Classic DNS Manager".

Step 12. Next, click the "Edit" button to edit your DNS Zone File.

Step 13. Under the "CNAME (Alias)" menu, click "Quick Add" button at the bottom of the screen (see image 1 in the below screnshoot).

Step 14. In the Edit box that now appeared, enter "www" in the first box and "ghs.google.com" in the second.

Step 15. Click "Quick Add" again and enter details from second row of the data we saved in step 8.

Step 16. Under the "A (Host)" menu, again choose Quick Add (see the below image).

Step 17. Host will be @ and the "Points to" value should be the one provided by Google IPs, saved in step 6 above. These are the Google IPs that you should get:

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

Step 18. Add all 4 of them one by one and delete old host as you won't need it anymore.

Step 19. At the top of the page, click on the "Save Zone File" button to save your setings.

Step 20. Now go back to Blogger and try to save settings again. The registration process takes 24-48 hours, so don't worry if you get an error again. Come again later to Blogger after 24-48 hours, repeat step 2 to 4, press Save and the error should be gone.

Step 21. After your URL starts working, click on the "Edit" link next to domain name on setting page.

Step 22. Check the "Redirect... to..." checkbox below your site address to ensure that even if the visitors will miss out the www part, they will still be able to reach your site.

Step 23. And that's it. Enjoy your new URL!

So this was easy, right? Only a handful of steps and we have successfully completed our mission of adding our custom domain in our blogger account. In case you haven't yet, stay patient wait for 2 days and try again. Or repeat steps 1-22, and make sure you don't miss any. Otherwise your new URL is ready and all set to roam around the wonderful world of web.