The Blogger School: Technorati

Wednesday, 27 April 2011

How to add beautiful stylish Scrollbar Widget to blogger

Summary: This useful article teaches you that how you add Scrollbar to free blog blogger template side this is very useful to add links of labels etc and you can save space in blogger sidebar

By this useful article you teach that how you add scrollbar in blogger blog. I think this is very good practice to add scrollbar widget to free blog blogger. Scrollbar is very useful that any links, labels of blogger posts you want to show in blogger blog. Some time labels and links are consisting of too many lists and looking ugly on the Sidebar of blogger blog, so do not worry this is good solution to save your blogger sidebar unnecessary links and labels and it very simple to add Scroll bar widget in free blog blogger.

Now add crollbar to widgets and decrease height and width of your blogger sidebar, when a visitors comes to your blogger blog it is very easy to scroll down your links and labels and also scrollbar gives the facility to visitors and reader to adjust your post titles too small and setup of width/height limit, there will be a horizontal/vertical scrollbar enabling users to view all the content. This is very useful tutorial in point of view to display that boxes with scrollbars and when the contents in the widget exceeds and enable users to read the contents that overflow or exceed the box area. This scrolling element is especially useful for targeted links which may be very lengthy. Any time as you like you can short your links and labels . Now I will discuss about scrollbar step by step see the instructions has given below:

1. Login to www.blogger.com and then go to Dashboard and then Design and Page Elements.

2. After that click on “Add a Gadget” on the sidebar.

3. Now select "HTML/Javascript" and add the following code with carefully.

<div style="overflow:auto;width:180px;height:300px;padding:10px;">
<ul>

<li><a href="URL Link">Title of text</a></li>
<li><a href="URL Link">Title of text</a></li>
<li><a href="URL Link">Title of text</a></li>
<li><a href="URL Link">Title of text</a></li>
<li><a href="URL Link">Title of text</a></li>
<li><a href="URL Link">Title of text</a></li>
<li><a href="URL Link">Title of text</a></li>
<li><a href="URL Link">Title of text</a></li>
<li><a href="URL Link">Title of text</a></li>
<li><a href="URL Link">Title of text</a></li>
<li><a href="URL Link">Title of text</a></li>
<li><a href="URL Link">Title of text</a></li>
<li><a href="URL Link">Title of text</a></li>
<li><a href="URL Link">Title of text</a></li>
<li><a href="URL Link">Title of text</a></li>
<li><a href="URL Link">Title of text</a></li>
<li><a href="URL Link">Title of text</a></li>
</ul>
</div>

4. Look at the above useful code change the lines in green colors with your post link and title which you want to add in scrollbar and save your template, after that check the sidebar of your blogger blog that one beautiful scroll bar will be shown in your blogger sidebar and enjoy.

This useful article will be profitable for new bloggers and other visitors who want to add stylish scrollbar in blogger blog with easy way, if you like give me your suggestion and leave your comments.

Thursday, 21 April 2011

How to add beautiful author box widget to blogger

Summary: This useful article teaches you that how you add author box widget in free blog blogger really author box in post footer makes your blog more professional and you contents looks in beautiful style.

By this useful and important article you teach that how you add Author box widget in free blog blogger. One day my friend came to my home to meet me after long time he is also having lot of blogger blogs and he questioned me that we are using blogger blog there is no facility to add author box widget but Wordpress blog post looking very beautiful along with author introduction and picture in the footer of post. This time I have said to my friend that this is very easy and simple really he was in wonder and said that it is possible. I said yes so I have made article and think that I would share it with other friends and visitors. I have also looked that lot of blogs have an exacting page or text box in footer to show something about the blogger. I think an Author box in post footer make your blog more professional. You may be thinking of that why I do not inserting an author box in post footer. Anyway I powerfully supposed and once again force that a nice author box under the post footer make your blog more professional and also you add a twitter or facebook link that would be helpfully for increasing follower and fan. Now I will guide you step by step how you add Author box widget footer of the free blog blogger post really it is very popular.

1. Do not hurry up please first go to www.blogger.com and then open your blogger Dashboard after that go to Design and then Edit HTML. Now you have complete this procedure and now find the bellow code press Ctrl + F command in your blogger template and cut paste the following code with carefully. After doing this please keep backup of your blog in safe place of your Computer.

]]></b:skin>

2. Now see the code below copy and paste it before the above code.

.authbio{
color: #666;
font-weight: normal;
font-size:0.9em;
background: #fff;
border: 1px solid #ccc;
width: 540px;
padding: 15px;
margin-bottom:25px;
}
.authbio a{
text-decoration:underline;
}
img.alignleft {
float:left;
background-color: #c4e3e0;
border:1px solid #c4e3e0;
padding: 5px;
margin-left:2px;
margin-top:0px;
margin-bottom:25px;
margin-right:12px;
}

3. I think you have done well the above code and now search for the following text code in your blogger template through Ctr+F command.

<data:post.body/>

4. This is very important that look at the following code with carefully and insert after the above text

<div class="authbio">
<div style="float: left;">
<img alt="" src=" http://i.imgur.com/zAEgds.jpg " />
</div>
<h1>
GM Qazi</h1>
Hardware and Software Engineer and also you like facebook, twitter or linkdin profile anything you want </div>

5. Now go to http://imgur.com/ and make your picture link and replace the red color link with your image link and amend your profile detail in the above code. Finally save it and see that how it look like.

This article will be very useful for new blogger owners and others, if you like it or suggest me please leave your comments.

Wednesday, 13 April 2011

How to add wonderful Marque Scrolling for blogger

This useful article teaches you that how you add wonderful Marques Scrolling code in blogger blog, this is great way to attract visitors to your blogger blog and also make your own slide shows by Scrolling Marque

By this useful article you teach that this is good way to attract visitors to your Free Blog Blogger or some of its pages decoration to like scrolling Marques text, etc. You can add scroll bars to tell your visitors what will be your next updates, popular posts, advertisements, etc. Scrolling text works especially good for headlines and also scrolling or marquee text is very attractive way to tell and write your Free Blog Blogger news and adding it to your blog makes it more attractive.

The nice thing here is that “Scrolling or marquee text for Free Blogger Blog” can be re edited by you to suitable your blog needs and your needs every time. Now I will show you a lot of “Scrolling or marquee text for free Blogger Blog” and after this, I will explain to you how to use it and how to add it to your free Blog Blogger in the way you like. The Scrolling or marquee text code contain 2 tags, opening tag, and closing tag and between the 2 tags and the real code for scrolling or marquee text looks like the next and if you added this for your free Blogger Blog generate you a normal scrolling or marquee text box with default text font and size and with White back ground.

But what you do if you need to change the direction, adding background color, change the text speed ( scrollamount ) or change its height and width. That is very easy but it needs your complete attention. I can control direction, background color, scrollamount or any thing by adding values to the opening codes. And now let us talk about surprise about colors codes and numbers. I made amazing box that gives you the colors codes and number once you click any color, no need now to try to get the colors codes you want in a hard way, now I made a very easy way for you, please check it out. If you want to put this on your header, then login in to your blogger account go to Layout, Edit html,click add a page element select html/javascript and paste the code in html/javascript and save the changes. Now look at the following html marque codes for your guidance you can add in free blog blogger easily.

1. Now check the result of above code in the following Marques scrolling if you want to change color and direction of Marque go to www. google.com and type HTML color codes and select color code according you choice and change it in above code and if you want to change direction in above code change right to left, up, down as you like.

Blog Blogger Training/marquee>

Blog Blogger Training/marquee>

Blog Blogger Training/marquee>

Blog Blogger Training/marquee>

It is very useful when the reader wants to read the text and the scrollamount is big, so that he will put the mouse over the text to pause the text and read the matter see the code below:

Blog Blogger Training

Another Marque code is the important and most useful one, adding hyperlinks in the scrolling text . Hyperlink means a link when clicked go to another location(site). Now see how to add hyperlinks to the scrolling text:

After that it is very necessary that replace the Link#1, Link#2, Link#3 with the text and url#1,url#2 and url#3 with the desired url addresses as you like. Now see the result below of the above code.

Free Music Blogging Tips Blogger Training

In view of the above Marques Scrolling are very useful for new Blog owners really Marques are very important to setup Slide show for your blogger blog and attractive to new visitors. If you like above Marque HTML codes give me suggestions or leave your comments.

Tuesday, 12 April 2011

How to add breadcrumbs for blogger with best SEO tips

Summary : This useful tutorial teaches you that how you add Breadcrumbs to blogger blog easily and also it gives users a way to keep track of their location within programs or documents and main benefit is that breadcrumb displays visitors location accordingly

By this useful article you teach that how you add breadcrumbs to blogger blog like Wordpress blogs and also you are feeling that it should be in blogger blog. If you cannot understand what I mean or what a breadcrumb is meant see the definition below I have found it from Wikipedia.

Definition of Breadcrumbs
Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It gives users a way to keep track of their location within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale. The trails like Home >> Label >> Post Name are the breadcrumbs. You should find this guide pretty easy and very simple.

Benefits of Breadcrumbs

There are lot of benefits of Breadcrumbs and also better SEO tips and benefits. Whether you are using a custom template or a default Blogger template breadcrumb navigation can be added. Adding a breadcrumb to your blogger blog, it provides a form of text-based navigation. A breadcrumb displays the visitor's location within a your blogger blog. The advantage of a breadcrumb is that it provides shortcuts to enable visitors to quickly get around your blog by jumping from one part of your blog to another.

How to install Breadcrumbs

It is not difficult by this useful blogger tutorial I guide you step by step how to add breadcrumb navigation to blogger blog so do not long wait now lets get started.

1. Login to your blogger dashboard

2. Go to Layouts and then Edit HTML

3. Then I would suggest you download the whole template first then continue editing.

4. Then tick the Expand widget Template.

5. Now find this code in your blogger template

<b:include data='top' name='status-message'/>

6. Now replace it with the below code

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

7. Now find another code has given below.

<b:includable id='main' var='top'>

8. Now replace the above code with below large code immediately

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> Â»
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
Â»Unlabelled
</b:if>
Â» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> Â» Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> Â» All posts
<b:else/><a expr:href='data:blog.homepageUrl'>Home</a> Â» Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

9. Now find this ]]></b:skin> and replace it with the below code.

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
]]></b:skin>

I hope this useful article will be profitable for you and other blogger owner, if you like it , or want to suggest me, please leave your comments.

Thursday, 7 April 2011

How to add stylish table to free blog blogger post

Summary: This useful article teaches you that how you add table in Blogger Blog Post and how you change Rows, Columns, Colors, in the table because table is very important in Blogger Blog and you have never seen like this article

By this article you will teach that how you add Table in Blogger Post. This Blogger tutorial give details how to place a table into a Blogger post. You will learn how to make tables in Blogger sorting from a simple table to a more complex table with irregular colors. Now you will begin with a necessary table and slowly add CSS styling to the table to get better the look and functionality awaiting we have build the table pictured directly below. No knowledge of CSS and HTML is unspecified so this Blogger tutorial is suitable for complete blogging basic knowledge.

I think tables are very useful method to show information mostly tabulated information. Tables are very nice when you wish to line up information so that it is simple to read and be grateful for. You can insert text, hyperlinks and even images to a table which create them very useful for there information. No easy way as yet to insert tables in Blogger Blog because table button is not provided. Now I give you step by step suggestions and tips how you insert table in Blogger Blog post easily. If you want to insert table with 4columns and 4 rows alongwith header and how to insert additional rows, columns a and changing of colors to the header, a border, a caption, change the size of the table, center align the table and more other useful options.

1. First go to www. blogger.com open dashboard and open a new post and then click on the Edit HTML tab on your Blogger editor and where you want to insert table copy and paste it the following code on that place. For more information please look at the picture has given below:

Now see the above picture insert table code after </div> and when you close the below code enter </div> in the end of table code for more information look at the follow table and code with carefully.

Table Header	Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell	Table Cell

<table border="2" bordercolor="#FAAC58" style="background-color: #FAAC58" width="100%" cellpadding="3" cellspacing="3">
          <tr>
          <th>Table Header</th>
          <th>Table Header</th>
          <th>Table Header</th>
          <th>Table Header</th>

          </tr>
          <tr>
          <td>Table Cell</td>
          <td>Table Cell</td>
          <td>Table Cell</td>
          <td>Table Cell</td>
          </tr>
          <tr>
          <td>Table Cell</td>
          <td>Table Cell</td>
          <td>Table Cell</td>
         <td>Table Cell</td>
          </tr>
          <tr">
          <td>Table Cell</td>
          <td>Table Cell</td>
          <td>Table Cell</td>
          <td>Table Cell</td>
          </tr>
          </table>

2. Insert some further styling to our table header to improve the look of our table as denoted in orange according Blogger template. Change the background color and color attributes to suit your own color scheme if you wish and as you like.

3. In this procedure I am going to center the contents of Blogger Blog table. This can be done in several methods but going to take a short cut here by assigning a style to every table row of the table with good style and also going to ballet up our Blogger table by inserting alternating colored rows to improve readability and appearance. By far the easiest way to do this is to assign a class. For more information see the picture has given below:

<th>Table Header</th>

</tr>

<td>Table Cell</td>

</tr>

<tr>

<td>Table Cell</td>

</tr>

<td>Table Cell</td>

</tr>

</table>

4. Look at the above code change color of header and rows according your desire as you like. I have already discussed that change the colors and styles according your template design and you can change rows and color of headers and rows columns any time look at the table related with above code.

Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell

5. Now you want to add caption in Blogger table It is also simple to insert a caption. For a caption in the table simply add the caption line as shown below the table according your Blogger template format. For a caption look at the following code and table how I have add caption in the Blogger table.

A Blog Blogger Training Table Caption
Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell

6. Now see the above table and go to ahead and insert your your data to your new Blogger table. Filling in each instance of "Table Header" and "Table Cell" with your own data. The information you insert to the Blogger table can be text, hyperlinks or even an image as you like according your choice and then save your changes to the Blogger table by saving and publishing your post finally.

Troubleshooting and Solving Problems in the Tables

Now you have seen the above codes and tables how you solve the problems in codes and tables.

1. Go to www.google.com and search "HTML color Codes" and then select the color and get its code and go to the table and change the codes with carefully for example I want to change color code #FAAC58 to another code it must be select the code from HTML Color codes and change it with your choice of Color.

2. Change the Headings and Table cell according your data and save it properly and also maintain your Blogger post table according your templates settings.

I hope this useful article will be more profitable for new blogger owners and if you like it give me more suggestions and leave your comments.

Thursday, 24 March 2011

How to add blogger blog in Technoarti Search

By this useful article you teach that how you add blogger blog in Technorati search. In my experience Technorati is very popular Blog Directory it is good source to increase traffic to Free Blog Blogger. In 2008 Technorati had indexed 112.8 million blogs and, according to Wikipedia, over 250 million pieces of tagged social media. When you join Technorati, they attach your profile to your blog and that helps promote your Free Blog quickly. When you complete your "description" and list your "tags", this makes it easier for people to find your blog through Google and other search engines. Now I describe step by step tips and suggestions how you submit your Blogger Blog in Technorati. You can also search more about Technorati like: blog search,technorati search, technorati ping,technorati rank,technorati ads,blog reactions on technorati.

1. Go to www.technorati.com and join it is free and then you need to “Claim” your Blogger Blog. You start the process by entering the URL of your Free Blog Blogger. This is the Blog you want to “claim”. You do this in the box at the bottom of the page where you are filling out your Profile. The box is under the heading "My claimed blogs". Then click ‘Claim’.

2. You will go to a new page with the heading “Claim a new Blog”. Here you fill in the required information in "Details". Fill in the relevant and interesting details that describe your Blogger Blog and help Technorati to know what it is about. Please see following picture for more guidance.

3. Fill in the relevant tags related to your Free Blog Blogger in the box. You will also be required to fill in your RSS Feed URL. You should be searched everywhere in your WP Dashboard for this and all you needed to do was click on “Subscribe” next to the RSS logo at the top right-hand corner of your Free Blog Blogger and your RSS Feed URL was in the browser. You must have an RSS Feed for your Blogger Blog in order for this process to work. Follow the picture given below a message will be appeared like this.

4. Thank you for submitting your claim. You will be contacted with instructions on how to complete your claim. We have changed our claim process to introduce better quality and it may take us some additional time to turn around claims initially. Thank you for your patience. Read more: http://technorati.com/account/claim/#ixzz1HVlmJTCn.

5. That is it for now your application is off to be reviewed. The next very important step to know is that you will get an email saying the following:

“Thank you for submitting your Blog claim on Technorati. Technorati will need to verify that you are an author of the site your site URL will be here by looking for a unique code. We have just assigned the claim token your number will be here to this claim. Please visit http://technorati.com/account/ for more details, including how to use the claim token”.

"The long number at the beginning of this post is my Claim Token. It has to be in a post to prove that I am the author of said post with access to the Blogger blog I am claiming. Rather strange, but that’s the way they do it".

"I have chosen to write a post about this process and include my Claim Token. However, you could choose to create a simple post with a title such as “Temporary Post, Please ignore” and then copy & paste in your claim token number".

6. After your post is live, you need to visit http://teachnorati.com/account/ and click on the Check Claim button at the bottom of your account page.

7. You will then be asked if you have already made a temporary post and you have so confirm by clicking the button at the bottom of the page.

8. You will then receive an email confirming that Technorati has successfully crawled your blog and found your Claim Token. Now all you have to do is waiting for the review. If you had a temporary post, you can now delete it. If you want to verify your blogger claim token from technorati click here.

I hope this useful article will be most profitable for new blogger owners and others to increase traffic, if you like it or suggest me please leave your comments.

The Blogger School

Important Links

Followers

Wednesday, 27 April 2011

How to add beautiful stylish Scrollbar Widget to blogger

Thursday, 21 April 2011

How to add beautiful author box widget to blogger

Wednesday, 13 April 2011

How to add wonderful Marque Scrolling for blogger

Tuesday, 12 April 2011

How to add breadcrumbs for blogger with best SEO tips

Thursday, 7 April 2011

How to add stylish table to free blog blogger post

Thursday, 24 March 2011

How to add blogger blog in Technoarti Search

Search This Blog

About Me

Popular Posts