How to Create Numbered lists Using Blogger And Html Codes

In this post we are going  to learn how to create a numbered list in blogger and how to customize it with HTMl codes. Creating a numbered list is very easy. If you are familiar with Microsoft word and other text editing softwares, it is the same way to create lists in blogger too. There are few options you can use if you are using HTML mode. in addition to these options you can specify at which number the list should start and the number format also.

Now on we are posting our tutorials on new blogger interface. If you are not familiar with it, then click here to read the main content on the new blogger interface. 


Open a new post and hit Numbered list on the tool bar.


Now you will see the first number as 1. Type the first value and press enter then blogger will automatically add the second number. enter the text and press enter again. keep doing it until you finish your list. When you finished creating your numbered list press Enter button twice to stop adding numbers and start typing normal paragraph again. 


Now lets see how we can customize our number list using the Edit Html section. You can see the html and compose mode buttons on the left side of the new post tool bar in new blogger view. In html we call numbered lists as Ordinary lists. we use <OL> tag to create a numbered list and <li> tag ( List Items ) to add the numbered list. look at the following code and the result of that code. you can create that list using only the html code.



<ol>
<li>This</li>
<li>Is a</li>
<li>Numbered list</li>
</ol>

1. This 
2. Is a 
3. Numbered list

Think if you want to break the numbered list on the 3rd item and add a little information under it and start the list after the paragraph with number 4. then you can use this code when starting the list again. 


<ol start="4">


Now your second numbered list will start from number four. Try numbered lists with changing options like colors fonts with html and compose mode

View full article here

Search Place of a Code in Html or a Place of a Specific Word in a Web page

This trick is very important to all internet users. This is useful to find a special word in a web page. you can find any word in your browser using this trick. When you editing your blogger template or blog post this search tool becomes very handy. 


This trick works with all internet browsers. All you have to do for activate this little search gadget is to press F key while holding control key  CTRL + F . now your browser will open a little search box from a side. type exact word or phase to search it on active web page or tab.


This is useful when you are editing links on a web page or Editing a blogger template.

View full article here

New Blogger Dashboard Window Look

Last time we talked about the new blogger interface.Now lets see how we can work with the new blogger dash board. First im going to introduce the main parts of the new blogger dashboard. look at this screenshot. you can see your blogger profile name on top left corner. at right side you can see the language change button and other options. If you want to zoom this picture just click on the image. Read description after the image to see that are those sections

1. This is the new blog button. If you don't have a blog yet, blogger will automatically load the new blog page. if you have already have a blog and want to create a new blog, then click on this button to open the new blog dialog box
2. This is the name of your blog. if you have multiple blogs you can see all names as a list. once you clicked on the blog name blogger will open the blog options window. you can see a summery of your blog on that window.
3. Blog options and tasks list. If you have worked with the old blogger dashboard, you know that all blogger options were placed below the blog name. but in the new interface they have added those options and a little drop down menu.
4. View Blog. This is the same button used in old blogger. once you have changed your blog settings and after you posted new articles to your blog, you can check them as a normal user see it on the browser by using this View blog button.

• 
  

View full article here

Work with New Blogger Interface

Recently blogger has changed their interface a little bit. Now lets see how to work with those changes. Posting and Settings are very similar to the old interface but blogger Dashboard is different than the Old Blogger Dashboard. My personal opinion is Old Blogger Dashboard is very easy to work with. But it's very easy to get familiar with this new interface if you know how to use the old interface. Unlike the old look now blogger dashboard looks perfect to me. new orange color look gives a beautiful look to the dashboard. New post windowis more simple now. Its more like Microsoft word. Easy to use. Now lets see those changes

When you sign in to blogger you will be automatically redirected to blogger dashboard. Blogger now supports for lots of languages. you can select your language if you want using the drop down menu at the top tight corner. 

You can see all your blogs on this page. Also you can create new blogs on this window. You can see a little drop down menu on the right side of the blog name to access blogger options like Adding and editing posts, Add\Edit Gadgets and blog settings. if you are new to those options read my previous article about blogger dashboard. all options are same. just the view and places of the links are changed.

Our all tutorials will be posted using this new interface now on. If you are still using the old view, you can change your view to new interface or you can keep your old look. It doesn't matter. All procedures will be same. Still i didn't find a better reason to switch to the new interface if you familiar with the old interface. Comment section is open for your ideas.

View full article here

How to Create links on blogs and web sites | Link Images | Open Links in new tab and new window

Create links to other web sites and blog posts is also a very important thing in web site developing and blogging. Hyperlinks are useful to get higher Search engine rank. If you can create good related links inside your blog posts to another posts you can keep your readers reading more content on your blog or web site. In this post lets see how we can create hyper links in compose mode or using the Html code on Edit Html mode. After reading this psot you will learn how to create links, how to use an image as a link, How to open your link targets in new windows and new tabs on your browser.

Create Hyperlinks on compose mode.

Creating a hyper link is very easy on blogger compose mode. type your URL address on your post and click "Link" Button on blogger tool bar. It will automatically create the required code to make a link to that URL. If you want to use a text link like "Read more" "Click here" then highlight the text you want to act like a link and click on "Link" button on your new post tool bar. ( Read this article to learn more about link button and blogger tool bar )

It will open the create link dialog box. you can add the URL on that box to complete your link.

Create Hyperlinks on Edit Html mode.

Now lets see how we can create a Hyper link on Edit Html mode using Html codes. This is the basic code we use to create a hyper link

<A href="http://www.yoursite.com">your text</a>

If you want to load that link on a new tab you can add target="_blank" code after your URL. For a sample lets male a link to load google.com by clicking a "Go to google.com" button on a new tab

<A href="http://www.google.com" target="_blank">Go to google.com</a>

It will appear on your blog like this Go to google.com


If you want to add an image instead of text you can replace blue color your text with the image code. Read more about Adding images to blogger in Html mode and How to create hyperlinks with images.

View full article here

Customize Blogger Read more Button

Change Read more button, Change text, Add images or animations. How to customize Blogger read more button. There are the topics we are going to learn on this post. If you don't know about blogger Jump breaks, You can readHow to add Jump Breaks to Blogger posts article. Blogger will add " Read more >> " Text as default Jump Break text. we can easily change this text and its attributes like font, size align using basic Html and Css codes. We also can link an image file for it. Have you seen animating read more buttons? It's very easy to do. Just make animating button and save it as .Gif image. now you can link that image to your Jump break as we learn on this post.

First you have to check if your blogger template already supporting Jump Links or you must add Jump break support manually. If you are using a basic blogger template or your own template, you have to add Jump break support manually. Read How to add Jump break support widget to blogger template

Change Jump Break Text

First you have to open the Edit Html mode in design tab. Go to Blogger Dash board then open Edit Html on Design Tab like the following Screen shot

Now find this code on your Template code


<data:post.jumpText/> 


Now replace it using this code


<P> Your Text </P>

You can enter any character, Number or a symbol in blue color "Your text" part. 

Change alignment and other text properties of a Jump Break text 

You can align your Read more button using "left" , "right" or "center" properties of Paragraph tag. For a sample lets use "Continue reading..." as our jump text button in center of the article page.. then that code will be like this.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'

    expr:title='data:post.title'>

<p align='center' >Continue reading...</p></a>
</div>
</b:if>

Add an image for the Jump Break

Adding an image to the read more button is very easy. Just upload your read more button and get the direct image link. you can upload it to blogger or your picasa web album. easy way to get the direct link to a new image is create a new post and upload your image. then publish it and go to the published page, right click the image , click copy image location, now you can delete that post. once you have the direct link to the uploaded image you can use <img> tag to link the image to Read more button.

Now find this code on your Template code


<data:post.jumpText/> 


Now replace it using this code


<P> <img src="image direct link"/></P>


You can use your image url in the blue color text.  you can directly resize your image using width and height properties like this  


<P> <img src="image direct link" Width="change" height="change" /></P>


View full article here

How to Add Read more button to Blogger Template

This post is for the people who use their own custom templates and who doesn't have blogger jump break support in their blog template. If your blog template doesn't show Read more button after you added Jump break manually you have to add the Blogger Jump break support widget to your blogger template code. If you want to learn about blogger Jump breaks and how to add them manually Read this post about Blogger Jump breaks. To add jump break support you have to edit your template and add little code. Now lets see how we can add Jump Break support to our blog.

First you have to open the Edit Html mode in design tab. Go to Blogger Dash board then open Edit Html on Design Tab like the following Screen shot

Now find this code on your Template code

<data:post.body/>

You can easily search it by pressing Ctrl + F  it will open the search box on your browser. type the code in the search box and it will show you the place.


Now Add following code below it

    <b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;' 
    expr:title='data:post.title'>
    <data:post.jumpText/></a>
    </div>
    </b:if>

Now save your template and manually add Jump break to your posts. Read how to Add Jump breaks manually

 View full article here