MyBlogLog Widget For Blogger

Preview

The MyBlogLog Recent Readers Widget by MyBlogLog.com ( now owned by Yahoo! ) is not just popular on Blogger blogs, but its a favorite amongst other bloggers too. Recently the widget has been given a cosmetic change to make it look graphically appealing. I guess it does look good. The colors of the widget are also customizable.

The widget will help you create an online community of admirers and fans of your blog. The more people join your community, the more likely you are to attract traffic to your blog.

The address of your community on MyBlogLog will be like http://mybloglog.com/buzz/community/_________ ( you can have a keyword of your choice in the blank space)

It's easy to add a blog or site to your MyBlogLog profile. First, you need to get a Yahoo! Id. Most people already have it and if you don't you can always get a free account from

http://www.yahoo.com

On your profile page, click Add Blog/Site I Author.

You will be taken to a page on which you can add the details of your blog or website. Fill out the details and your blog will be added(the screenshot of your site will be added automatically).

Once your site is added to your profile, the next step is to create the widget for your blog. Your blog should be listed under "My Sites and Services", It will also have a link labelled "Widget" beside your blog. Clicking the "Widget" link will take you to the page where you can customize the color of your widget

The textbox labelled "Your Code", generates the widget code that you need to copy to your blog template(preferrably on your sidebar).Then add HTML/JavaScript into blogger

Click Here To Add MyBlogLog Widgets In Ur Blog

PageRank Widget For Blogger

By adding Page Rank Checker Button to your site you can check the rank (check PR) of all your web site pages right on your web site.To use our Page Rank Checking tool you just need to add a small piece of HTML code to the pages where you want to check the page rank and our free tool Page Rank Checker will show the small icon that displays the current Google.com PageRank of those web pages.

Preview

Click Here To Add PageRank Widgets In Ur Blog

Add a Twitter Updates Widget to Blogger

If you are a regular Twitter user and have a bunch of followers you might want to add a Twitter Updates widget to Blogger (Blogspot). In today's tutorial I will show you the easy way to add a Twitter Updates widget to Blogger (Blogspot). It is fairly straightforward to add this Twitter Updates widget to Blogger so please don't be put off if you are a Blogger beginner as you can have this widget up and running in no time.

If you are new to Twitter and don't have an account yet you can sign up to Twitter for free

How to Add a Twitter Updates Gadget to Blogger
There are several methods of adding a Twitter Updates widget to Blogger which I will be discussing over the next few posts. Today I will start with the easiest method by far. This Twitter widget won't slow down your blog loading time particularly but I suggest as with all HTML widgets that you place it near the bottom of your column of gadgets and limit the number of updates shown.

This Twitter Updates widget will provide a basic widget only and is fine if you aren't too bothered about styling. The widget uses the styling from your blog based on the Blogger template you are using but unfortunately there is no way to modify its appearance at the moment. If you want something a little more fancy keep an eye out for my future posts about Twitter Updates widgets.

Log in to Blogger if you are not already logged in
Go to Layout > Page Elements
Click Add a Gadget in the Blogger sidebar
Click on More Gadgets to the left and choose the Twitter Updates widget. Blogger may change this so if you don't find it there try looking in Featured or Popular.
Enter your Twitter name (usually your blog name)
Choose the number of updates to display. By default this is set to 5
Uncheck display link to your Twitter page if you do not want visitors to go to your Twitter page for some reason otherwise leave it as is.
Click Update to Preview any changes and then Save
Use Blogger's drag and drop feature to reposition your Twitter gadget in the desired location in sidebar or footer of your Blogger blog. Save any changes
Click View Blog to admire your new Twitter Updates widget

In today's tutorial I have shown you how easy it is to add a Twitter Updates widget to your Blogger blog (Blogspot blog). The Twitter Updates widget will display your latest Twitter tweets on your blog. The disadvantage of this third party Twitter Updates widget is that it has basic styling only and no way to modify it. On the plus side it loads fast and is likely to be trouble free. I will be writing more about Twitter updates widgets in the next couple of posts so keep an eye out. Enjoy!

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Add Twitter Button or Twitter Badge to Blogger
Add Twitter Followers Counter to Blogger

How to downlaod free Key loggers ?

How to Download Free Port Scanners?

All contents provided here are only for educational purposes.

I am giving you various types of port scanners. If you want something special you can mention here, i will provide you that as early as possible.

Blogger Post Image Borders Change or Remove

Sometimes you may want to remove, delete or change the image border of a custom Blogger template or default Blogger template (Blogspot template). In this Blogger tutorial you will learn how easy it is to make changes to your template so that you can get rid of unwanted image borders around all the images that appear in your blog posts or around a single image in a blog post.

You will also learn how to enhance your Blogger template (Blogspot template) by changing the line color and line style of the existing image borders.

Note this Blogger tutorial applies to custom templates and the previous generation of Blogger templates. If you are using the new default Blogger Template Simple please refer to my Blogger tutorial How to Remove the Image Border in Blogger template Simple for instructions

This Blogspot tutorial is rated easy. It involves making minor alterations to your Blogger template (Blogspot template) but this is well within the capabilities of beginner bloggers and newbies. The changes will take less than 5 minutes to complete and can make the world of difference to your Blogger template.

How to Delete, Remove, Get Rid of the Image Border in Blogger Posts
The following instructions will remove the little border around the images in your Blogger posts.

Login into Blogger if not already logged in
From the Dashboard navigate to your blog. Go to Design > Edit HTML by clicking on the Design tab and then choosing the Edit HTML link
Back up your existing Blogger template by clicking on the Download Full Template button
Find the following code in your Blogger template (no need to check the Expand Widgets Template box as we are only working with the CSS Style Sheet). Note: the code in Blogger templates varies but this is the code you will find on a Blogger Minima template and most other default Blogger templates.

.post img {
padding:4px;
border:1px solid $bordercolor;
}

If you do not have this code look for the following:

img{
padding: 4px;
border:1px solid $bordercolor;
}
There are two ways to get rid of the unwanted border image code. You can either:
- Remove the following line:
  
  border:1px solid $bordercolor;
  or
- Change it to the following
  border:0px;
Click on the Save Template button
Click View Blog to admire your post images minus any image border.

How to Change the Color of the Image Border Around Posts in a Blogger Template
The following instructions will show you how to change the color of the border which appears around images in your Blogger posts

Follow Steps 1 to 4 as per removing the image border from Blogger posts.
There are several methods to change the color of the image border but the easiest is to
- Change the following line:
  border:1px solid $bordercolor;
  
  to
  border:1px solid #6698FF;
  
  The above change will make the border line color sky blue. To change the color (in red) to your own color choice replace with the hex color code for your chosen color
Click the Save Template button to save your changes
Click on View Blog to admire the new color around the images in your Blogger posts

Tips and Troubleshooting

To change the image border line style from a solid line to a dotted line change the word solid to dotted eg

border:1px dotted $bordercolor;
To change the image border line style from a solid line to a dashed line change the word solid to dashed eg

border:1px dashed $bordercolor;
To increase the width of the image border change the size from 1px to 2px or 3px eg

border:3px solid $bordercolor;
To Remove The Image Border Around Only One Image paste the following into your image code in your Blogger post:

style="border:none"
eg
<img style="cursor:pointer; cursor:hand;width: 126px; height: 22px;" src="http://3.bp.blogspot.com/_vLeiVavkV_M/SrRp2wb1I_I/AAAAAAAAAAA/XXXXXXXXX/s200/download-now.png" border="0" style="border:none" alt=""id="BLOGGER_PHOTO_ID_XXXXXXXXXXXX" />

In this Blogger tutorial you have learned how to remove, delete and get rid of the line border which appears around images in your Blogger posts (Blogspot posts). You have also learned how to change the line color of the border image to your own chosen hex color. In addition I have shown you how to change the line style from solid to dotted or dashed and to remove the border around a single image. As always any problems with making these changes please let me know. Good luck!

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Remove the Image Border in Blogger Simple Template

Add 3 Column or 4 Column Footer to Blogger

In this Blogspot tutorial you will learn how to convert your existing Blogger footer (Blogspot footer) into a 3 column footer or a 4 column footer. With more columns in your Blogger footer you will be have the extra room to accommodate more widgets such as Flickr photos and Twitter updates. Also you will be able to put less frequently used widgets such as recents comments, archives, followers, About Me etc at the bottom of your template so that only the most important widgets are loaded first.

This tweak involves adding code to the footer section of your existing Blogger template to change it to 3 columns or 4 columns. The tutorial is not beyond the capabilities of Blogger newbies and webmasters with intermediate skills but care needs to be taken when modifying your Blogger template so back up before you start. For best results a Blogger template with a width of around 900px is best.

Convert your Blogger footer to a 3 column footer

How to Add a 3 Column Footer to Blogger

Log in to Blogger if not already logged in
Navigate to Layout > Page Elements
Move any existing widgets out of the footer section and place them in the sidebar temporarily and save changes
Navigate to Layout > Edit HTML
Back up your template as a precaution by downloading it to your computer
Find the following section in your Blogger template

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

If you are having difficulty finding this section trying searching for footer-wrap or something similar as sometimes this section is called something else in some templates.
To Add a 3 Column Footer to Blogger
Replace all the code located in Step 6 with the following

<div id='footer-columns'>
<div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

To Add a 3 Column Footer to Blogger with a Lower Footer Section
Replace all the code located in Step 6 with the following

<div id='footer-columns'>
<div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p/>
<div id='footer-bottom' style='text-align: center; padding: 10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div>

To Add a 4 Column Footer to Blogger
Replace all the code located in Step 6 with the following

<div id='footer-columns'>
<div id='footer1' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
Save changes to your Blogger template.
Navigate to Layout > Page Elements. You will now see a 3 column footer, 3 column footer with a lower section or a 4 column footer depending on what option you chose.
Move the desired gadgets to the new Blogger footer columns. Create new widgets to fill up the footer columns if necessary. Save your changes.
Click View Blog to admire your new footer section

Tips and Troubleshooting

To Add Padding Between Footer Columns in Blogger
To create some padding between the columns add the following code to the style section of your Blogger template - before </b:skin> tag.

#footer-columns {
clear:both;
}

.footer-column {
padding: 10px;
}
To Add a Border to the 3 or 4 Column Blogger Footer
- For Top Border Only of the 3 or 4 Column Footer
  Paste the following code before the </b:skin> tag
  
  #footer-columns{
  border-top:1px dotted $bordercolor;
  clear:both;
  margin:0 auto;
  }
  
  Replace $bordercolor with a hex color if default color is not displayed. Change this color to suit your template. For example
  
  #footer-columns{
  border-top:1px dotted #113355;
  clear:both;
  margin:0 auto;
  }
- For a Box Border Around the 3 or 4 Column Footer
  
  #footer-columns{
  border:1px dotted $bordercolor;
  clear:both;
  margin:0 auto;
  }
  
  Replace $bordercolor with a hex color if default color is not displayed. Change this color to suit your template. For example
  
  #footer-columns{
  border-top:1px dotted #113355;
  clear:both;
  margin:0 auto;
  }

In today's Blogger tutorial you have learned how to add a 3 column footer or a 4 column footer to your Blogger template (Blogspot template). You have also learned how to add some styling such as a border above the footer and around the footer. As always I am available to answer questions if you need assistance. Good luck!

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Customize Blogger Tips