How to install Twitter widget into your blog?

Twitter, is becoming very popular day-by-day and a free social messaging utility for staying connected in real-time with your friends. You can add a twitter widget easily, to your blogger blog or any type of blog or any web page. If you scroll down to my blog and you will see a Twitter widget is installed in the bottom-right corner of this blog. You can easily, connect to me via Twitter. My Twitter link is http://twitter.com/meRancidTaste. Just follow the following steps, to install Twitter widget to your blog. It's very simple. Just like 1-2-3.

Step 1:
Sign in to Twitter by user name or email address and password.

Step 2:
After logging, you will find the following page and click on Settings on that page.

Step 3:
A new page will be opened and here you will find a option mentioning You can also add Twitter to your site. Click on it.

Step 4:
Now, display updates on your web page will be opened. Click on Blogger and then click on Continue to go to the next step.

Step 5:
This is the page where you can set all of the Twitter settings. Select the No of updates to display, title of your Twitter widget and finally click on Blogger icon.

Step 6:
Log in, to your blogger account and then select your blog and Title. At last, click on Add Widget.

Now, you will see that the widget (Twitter Widget) is automatically added to your blogger blog. And that's all to add or install Twitter widget into your blog. I think, you have done successfully.

From now, you will see that all of your message will be displayed on your Twitter widget.

© Written by meRancidTaste

How to add "Top of the page" icon to your blog?

"Top of the page" icon link is an important thing if your blog post is long. If you look carefully in my blog, just notice the bottom right corner of the browser window. There you will find a text "Top" which is floating and it's color is blue. Go through the page and you will see that the word "Top" is not changing it's position. It remains the same position. Now click on it and you will be moved to the starting portion of the current window. So, it helps to reach the top of the page form any portion of the window. It's very helpful if your blog post is much longer and people will move to the top of the page by just clicking only on it.

To create such type of "Top of the page" icon is very easy and simple to install. Only some couple of lines are needed. Moreover, you can customize it by replacing an image with the text part. This post will describe the tips and techniques to do so.

Index of this page:

• General Code of "top of the page" icon
• Description of the code
• How to add "top of the page" icon
• Example
  

General Code of "top of the page" icon:

The general code for "top of the page" icon is looks like the similar:

1. < a href="#" >
   
2. < img src="url_of_the_image"
   
3. alt="alternative_text"
   
4. title="Top of the page"
   
5. style="display: scroll; position: fixed; bottom: 5px; right: 5px;" / >
   
6. < /a >
   

Description of the code:

• url_of_the_image: At line 2, this is used between the inverted comma. This is the url of the image which you want to use as top of the page icon. Always remember, it's the url of your desired icon. So, before using any image, you must have to upload the image to any site such as, tinypic.com etc. To learn about image uploading, click here to learn more.
• alternative_text: At line 3, this option is used between the inverted commas. This is the alternative text of your image. If anybody put the cursor on the icon, he or she will see that text. This is used to give a border understanding of the new user about the usefulness of the icon by reading the text.
• style="display: scroll; position: fixed; bottom: 5px; right: 5px;" : This line is used for styling the top of the page icon. It has several fields. The fields are described below:
  
• display: scroll : This option allows the image to scroll.
• position:fixed: This option is used for fixing the image location.
• bottom:5px : This option is used to locate the position of the image. Here 5px means that the image will be appeared 5px up from the bottom of your page.
• right:5px : This option is used to locate the position of the image. Here 5px means that the image will be appeared 5px from the right of your page.

How to add "top of the page" icon:

It's very easy and very simple. Just follow the steps:

1. Log in to www.blogger.com.
2. Go to Dashboard and then select the Layout of the blog that you want to add top of the page icon.
3. Now click on the Add a Gadget.
4. Select HTML/JavaScript and click on it.
5. Now copy and paste the following code:

< a href="#" > < img alt="Top of the page" style="display: scroll; position: fixed; bottom: 5px; right: 5px;" src="http://i42.tinypic.com/33ogqxi.jpg" title="Top of the page"/ > < /a > < !-- developed by itis123.blogspot.com -->

6. Click on the Save button to save.

In following the steps, you can easily add "top of the page" icon to your blog and navigate to the top of your blog posts.

Example:
By using the codes, one blog is made as an example. To view, click http://top-of-the-page-icon.blogspot.com/. You may be used this code for your blog also. It's free to use.

If you are enjoyed this post, please consider to leave a comment at the comment section of this page or Subscribe to the feed of itis123.blogspot.com to get new articles which will be delivered to your feed reader.

How to find out and change the size of your blog's header image?

Blogger header image gives the uniqueness of your blog among the millions of blogs. So, it's good to use the header image. But you can't use the image as too big or too small. If you do that it looks odd. So, before doing it, you need to know the size of the image that fit for your blog. In this post, I will try to give you the way for finding the image size that fits for your blog.

No technical knowledge is required. Just follow the instructions.

Steps to find out blog's header image size and customizing image layout:

1. Log in to your blogger account from www.blogger.com
   
2. After successful logged in, go to Dashboard > Layout.
   
3. When you clicked Layout, you will see your blogger layout. Now, select Edit HTML option and you will see a new window appeared with some code.
   
4. Click on the Expand Widget Templates.
   
5. Find out the following code segment and look the red colored line. This line represents the width of the header to use the image. For example, "width: 600px;" means that the header could contain a picture which has at most 660px. If your template has margin, padding then the image width should be decreased. Better, to use a image which has smaller width that it mentions. So, always try to subtract 10px to 30px value than the width value provides. In this case, width is 600px. So, if you use a picture (600px - 10px)=590px, the image will be fitted for your blog.

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

6. Now find out the following code and give attention to the colored portion:

   expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width'

   Replace the colored part with the following code segment:

   height='590' width='100'

   Put your desired image value according to the value of step 5.
7. At last, click on Save Template.

That's all. By following the above steps you can easily find out your blog's header image size. You can also set up the size of your blog's header image by changing the value of height and width.

If you are enjoyed this post, please consider to leave a comment at the comment section of this page or Subscribe to the feed to get new articles which will be delivered to your feed reader.