Blogger layout, start to play with yours layout

To play with your layout :

1. Sign In to blogger.com
2. Choose layout at yours dashboard
   

Blogger Layout have four sections ( Page element, Fonts and colors, Edit HTML, and Pick New Template)

The page element section shown us the element that contained on your blog. There are three major part of page element structure. See picture below

• Header section (red area)
• Outer section (blue area), this section consist of “blog post” area and “Sidebar” area
• Footer section (green area)
  

Now go to “edit HTML” Section

Note : Before to play with your layout, please backup first (click “download Full template”)

Now give big attention to HTML code at “edit template” section

Header Section

At the HTML code find these codes below. These codes referred to Header Section.

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

The value above (660px) is refers to your header width, change it to 950 or whatever u like but it is wise do not more than 1000px (mostly user using 1024 x 768 screen resolution), save template and refresh your blog, happy… if not change it again until your happy. Like width value, u can change the value of margin and border too.

Outer Section

These codes referred to Outer Section

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Formula : Outer = Padding + Main/Post + Padding + Sidebar + Padding

Footer Section

These codes refers to Footer Section

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Review :

1. Always backup before editing your template.
2. The width value of Header, Outer, and footer, are always have same value. So… If you change outer’s width you must change Header and Footer too.
3. Outer = Padding + Main/Post + Padding + Sidebar + Padding

Meta Tag

What is Meta Tag

Meta elements are HTML or XHTML elements used to provide structured metadata about a Web page. Such elements must be placed as tags in the head section of an HTML or XHTML document. Meta elements can be used to specify page description, keywords and any other metadata not provided through the other head elements and attributes.
Meta elements provide information about a given webpage, most often to help search engines categorize them correctly. They are inserted into the HTML document, but are often not directly visible to a user visiting the site.(wikipedia)

Meta element used in search engine optimization

There are two points that's important in meta tag.

1. Title tag

is the most important thing you can add to your page. Make sure that you pick your title that match with your idea or content of your blog.

2. Description tags

are the second most important meta tag. These are what often show up on search engines under the title. This is the descriptive bit a person reads before clicking on a page. Be sure not to keyword stuff. For good, make your description not more than 300 characters.

The other thing that we can put in meta tag are :

Keywords

Keywords meta tag is under some scrutiny as to whether it is being used or not. At one time it was used widely by search engines. It is to easy to spam with unrelated words, so most search engines don't use this anymore. Please put your keywords that relevant with your post title. You should list them in order of importance with the most important ones first. Separate each word or phrase with commas and keep the length of the entire list under 255 characters.

Author

Author tag has very little SEO value, but hey let's give ourselves credit. Put your name in there. Don't be shy

Robots

Revisit tag is another one of those tags being debated. We don't know if search engines follow the command, but basically is saying hey come back in X number of days and check for new content and updates. I am not sure that the robots will following this instruction or not, but it's nothing to lose if we used it in meta tag.

Robots tag This will tell a search engine how to index your site from a given web page. Index means that search engine should index this page, Noindex means that they should not. Follow means that they should follow any other links to your other pages, Nofollow means they should not go any deeper into your site. Generally you select index and follow to instruct the search engines to index that page and the rest of your site.

Note : Before we get to the next step, we must fully understand that the meta tag is not a magic tag that make our blog have a highest rank at search engines, we must combined it with another SEO thing or another marketing strategy.

How to Put Meta Tag in a Blog

1. Sign in at blogger.com
2. At your dashboard choose "layout"
3. Choose "Edit HTML"
4. At the HTML code find this word <head>
5. Put this meta tag below the word <head>

<meta content='Replace with your blog description' name='description'/>
<meta content='your keywords, Your keywords2, Your keywords3, Your keywords4' name='keywords'/>
<meta content='Your name' name='author'/>
<meta content='1 Week' name='revisit-after'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>

6. Here is the example :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<meta content='Stay blogging, this blog content step by step tutorial that introduces you how to create a blog and how to manage it' name='description'/>
<meta content='URL Address, favicon, create a blog, make a blog, make blog, blogger, blogging, tutorial, step by step tutorial' name='keywords'/>
<meta content='wildan pribadi' name='author'/>
<meta content='1 Week' name='revisit-after'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>

7. Save your template
8. Finish


References :
1. http://en.wikipedia.org/wiki/Main_Page
2. http://www.howrank.com/
3. http://www.freewebsubmission.com/

Favicon

A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is an icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's URL bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title. The Microsoft Windows Shell uses favicons to represent "Internet shortcuts" to web pages.(Wikipedia)

Internet Explorer originally only used favicons for bookmarks (for instance MSIE 6.0), which created a minor privacy concern in that a site owner could tell how many people had bookmarked their site by checking the access logs to see how many people downloaded the favicon.ico file. This is becoming less of an issue since newer versions of Internet Explorer (e.g. 7.0) and most other browsers also display the favicon in the address bar on every visit.(Wikipedia)

If a picture is worth a thousand words, why don't u put your picture as a Favicon.

In this tutorial you will learn how to :

1. Make a favicon image
2. Make HTML code for a Favicon
3. Put HTML code in your blog

1. Make a favicon image

• Create an image 16X16 pixels in size
• Save the image as an ICO file (named "favicon.ico", of course). to make ICO file easily, you can use online favicon generator. So many web host provide favicon generator, to find that web host just put "favicon generator" as keyword in search engines, or u can use this one favicongenerator
  
• If u use firefox browser u can save image as PNG or animated GIF too.
• Upload image to get URL
  

2. Make HTML code for a Favicon

• <link rel="shortcut icon" href="http://sample.com/hotcoffee/favicon.ico"/> For ICO File
• <link href='http://sample.com/hotcoffee.gif' rel='icon' type='image/gif'/> For GIF File
• <link href='http://sample.com/hotcoffee.png' rel='icon' type='image/png'/> For PNG File

Note : Replace the red word with your URL Image

3. Put HTML code in your blog

• Sign in at blogger with your ID
• at dashboard click "layout"
• Choose "Edit HTML"
• Find <head> tag in HTML code
• Put the Favicon HTML code below <head> tag
• Here the example

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<link rel="shortcut icon" href="http://sample.com/hotcoffee/favicon.ico"/>

• Save your template
  

That's it... se you at next post c yaa

Get Address ( URL ) Image with Flickr Service

This tutorial introduce how to get an URL image for blogging using flickr service. In order to use filckr service we must already have Yahoo Account. If you don't have any yahoo account, I suggest u to sign up first at www.yahoo.com

In this tutorial u will learn how to :

1. Creating Account at Flickr


2. Upload image to Flickr


3. Get Url an Image From Flickr

1. Creating Account at Flickr

• Go to this address www.flickr.com


• Click "Create your account" button


• Use your yahoo ID


• Fill up your flickr screen name and then Click "Create new account" button

      

• First step finish

2. Upload Image to Flickr

• Prepare an image that u want to upload


• Click "Upload your first photo (or video)" link

     

• Click "choose photos" link

     

• Click "add more" link if u want upload more than one image/photo, set privacy to public, and than click "Upload Photos" button to start uploading

     

• wait the process until finished


• Step 2 Finish

3. Get URL an Image from Flickr

• Select an image from your photostream


• Click "All Size" button upper your image

     

• After u click "All Size" button, the URL will shown immediately

     

• Copy that URL at Notepad or where ever u like


• Step 3 Finish

Good luck to everyblogger, see u @ next post

Get Address ( URL ) Image with Picasa Service

This tutorial introduce how to get image URL using service of Picasa.
In this tutorial you wil learn how to :

1. Sign In to picasa


2. Upload Image to Picasa


3. Get Image URL

1. Sign in to Picasa

• To sign in Picasa, you can go to http://picasaweb.google.com


• Use your Google Account and password to sign in

2. Upload Image to Picasa

• Prepare image that want to upload


• Click Upload Button at Picasa toolbar

         

• Create new album for yours photos

         

• After u finished create an album, and then select it (click "Select Album" Button)


• Browse your images or photos and then click "Start Upload" Button.( u can upload more than one photo at one upload processing time)

         

• Wait the process finished

3. Get Image URL

• select an image, right click picture and then choose "copy image location"

         

• Open Notepad, paste it


• The End

Add a video to your post

To add a video to your blog post, click the film strip icon in the post
editor toolbar above where you compose your blog text.

A window appears prompting you to 'Add a video to your blog post.'

Click Browse to select the video file from your computer that you'd like to upload. Note that Blogger accepts AVI, MPEG, QuickTime, Real and Windows Media files and that your video must be less than 100MB in size.

Before uploading your video, add a title in the 'Video Title' box and agree to the Terms and Conditions (you'll only have to do this the first time that you upload a video with Blogger). Then click UPLOAD VIDEO.

While your video uploads, you'll see a placeholder in the post editor showing where your video will appear. You'll also see a status message below the post editor letting you know that your upload is in progress. Depending on the size of your video, this usually takes about five minutes. When it is complete, your video will appear in the post editor.

Literature : Blogger Help

Add an image to your post

You can add an image from your computer or the Web to your blog.

1. Click the image icon in the post editor toolbar.

2. A window appears prompting you to browse for an image file on your computer, or enter the URL of an image on the Web.

3. Once you've selected your image, you can then choose a layout to determine how your image will appear in your post:

• The 'Left', 'Center', and 'Right' options allow you to customize the way your blog text will flow around your image.


• The 'Image size' options will determine how large the image will appear within your post.

4. Click UPLOAD IMAGES to add your image, and then click DONE when the notification window appears telling you that 'Your image has been added.' Blogger will then return you to the post editor, where you'll see your image ready to be published to your blog.

You can also publish images to your blog using your mobile device, Google's free photo software Picasa, or a third-party service like flickr



Literature : Blogger Help

Write Your Post

Once you've signed in to Blogger, you'll see your dashboard with your list of blogs. Here's what you need to do:

1. Click the NEW POST button and enter anything you want to share with the world.



2. Next, you'll see the Create New Post page. Start by giving your post a title (optional), then enter the post itself:

   
   
   




3. When you're done, click the Preview link to make sure it's ready to go:

   
   


4. Once you're satisfied with your post, click the Publish button. This will publish your new post.

Literature : Blogger Help

Create a Blog

• To start using Blogger, simply sign in with your Google Account. (If you use Gmail, Google Groups, or orkut, you already have an account.) If you don't have a Google Account yet, you can create one now
  

• To get started with Blogger, visit the Blogger homepage, enter your username and password, and click Sign in.
  

• Enter a display name and accept Blogger's Terms of Service. Then click the Create a Blog or Continue link and get started!
  

• Pick a name and address (URL) for your blog. After you put blog address click“Check Availability” to ensure that the address is available, after that u can continue to the next step.

• Then, choose your favorite template (this is how your blog will look when you publish it).

• Congratulation….. Now you are a blogger….can’t help to start blogging… From now on It’s all yours, u can add information to your personal profile, and customize how your blog looks, if you feel up to it. Happy blogging now!... c u @ next post
  

What is a blog ?

A blog is a website in which items are posted on a regular basis and displayed in reverse chronological order. The term blog is a shortened form of weblog or web log. Authoring a blog, maintaining a blog or adding an article to an existing blog is called “blogging”. Individual articles on a blog are called “blog posts,” “posts” or “entries”. A person who posts these entries is called a “blogger”. A blog comprises text, hypertext, images, and links (to other web pages and to video, audio and other files). Blogs use a conversational style of documentation. Often blogs focus on a particular “area of interest”, such as Washington, D.C.’s political goings-on. Some blogs discuss personal experiences.’(wikipedia)

Who can have a blog ?

Everyone can have a blog, don't worry eventhough you don't have any knowledge about web design or Html code you can have a blog and manage it easily. There are free blog
services that almost anyone could set up in a matter of minutes.

Why should I have a blog ?

If you become blogger, you can share your knowledge with other, u can share your photos, u can promoting your bussines, u can join network blogger and have more friend, and so much other fun thing u can take in this wonderfull world.


That's all that I can write in this first post at this blog. If you confuse it's good I hope it can trigger you to become a blogger.

Good Luck to everyblogger

Powered by ScribeFire.