All Blog Tools

Wednesday, December 28, 2011

Blogger Releases The Official Tag Cloud Widget v2.

Blogger Releases The Official Tag Cloud Widget v2.: many of blogger were waiting for this widget.

and finally at blogger.com 10th birthday,
blogger announced here the second edition of Labels Widget v2..
And now you can call it Tag Clouds Widget v2..

the new version comes with most of what blogger users wanted.

so lets see whats new about this version.

Show Your Face, Display your Avatar / photo On Blogger Comments

Show Your Face, Display your Avatar / photo On Blogger Comments: hi all, this must by a happy day for all blogspot users, today blogger announced new feature as part of the Blogger Birthday feature series.

And blogger called it, Show Your Face.

This feature allow you to show your profile photo next to your comment on any blogger blog post

5 New Amazing Official Blogger Templates ( Images & Video )

5 New Amazing Official Blogger Templates ( Images & Video ): In earlier time today blogger announced launching 5 new amazing blogger templates built with the latest technologies,
the new templates build with the HTML5, CSS, And Ajax,

The new templates are now public for all blogs and you can view it on your own blog, blogger team now previewing and testing this templates so the new templates will be available for all bloggers to apply and customize it on any blog, for now you can only view it on your blog.

Wednesday, December 21, 2011

Easy Steps to Remove the Underline Effect When Hovering in Blogger

Easy Steps to Remove the Underline Effect When Hovering in Blogger

by: Marvin

You have probably noticed the underline effect under the text links every time you hover over your blog post title in Blogger. Some users don’t like it and would prefer to remove it when they wanted to create a free blog for it.

In order to remove that effect on your blog, you have to edit the html/css but because of its complex scripts, and newbie bloggers might have a hard time with it. Well, here are the steps on how to edit it.

1. Login to your Blogger account and go to Dashboard.

2. From the Dashboard, choose Template on the pulldown selection.

3. Click Edit Html.

4. On the HTML code, look for a:hover. Do this shortcut (Ctrl F) to locate it quickly. As you see the script similar to this, look for the word “underline”. Below is the code which you will find in the Edit Html.

a:hover {
text-decoration:underline;
color: $(link.hover.color);

5. Change underline to none. The code will look like this

a:hover {

text-decoration:none;

color: $(link.hover.color);

6. Click Preview to see result.

7. Save.

Christmas Snowfall Widget

Christmas Snowfall Widget

by: Marvin

Christmas is just around the corner so here’s a plugin that would fit your Blogger/Blogspot template in time with the season. This Christmas Snowfall widget imitates the winter snowfall right into your web site which brings a very cool effect. This plugin uses jQuery for create a free blog and you’ll see snowflakes in your template once installed.

I tried this on my Blogger test blog and it looks like this one:

http://marvin-testonly.blogspot.com/

To get this cool plugin, go here:

http://www.bloggerplugins.org/2011/12/christmas-snowfall-widget-for-blogger.html

Click the Add to Blogger button. You will then be redirected to this site:

http://www.blogger.com/add-widget

You must login to your Blogger/Blogspot site for this to work.

Click on ‘Add Widget’ button, then Save. If you want to see it first, click ‘Preview’ before saving it.

If you wish to remove the widget, go to Layout. From there, you will see the ‘SnowFall Widget’ on your right side. Click Edit, and a pop-up window will appear. Click Remove button to remove it.

Note: If you edit this in Firefox, error like this one below might occur, so I would suggest using Chrome instead.

Source: http://www.bloggerplugins.org/2011/12/christmas-snowfall-widget-for-blogger.html

Steps in Changing Post Title Color in Blogger Picture Window Template

Steps in Changing Post Title Color in Blogger Picture Window Template

By: Marvin

Basically if you wanted to create a free blog, you can’t change the post title color of Blogger/Blogspot templates of your web site because by default there’s no option for it. Fortunately, there’s a step-by-step tutorial on how you can change the post title color in a Picture Window Blogger Template.

1. Login to your Blogger. Go to Dashboard >Template.

2. From Template, go to Edit HTML.

3. Find the codes below. (Ctrl + F for quick search)

<Variable name="post.title.font" description="Title Font" type="font"

default="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

</Group>

4. Replace the above code with these ones:

   <Group description="Post Title" selector="h3.post-title, .comments h4">

     <Variable name="post.title.font" description="Title Font" type="font"

         default="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

     <Variable name="post.title.color" description="Color" type="color" default="#FE6602" value="#FE6602"/>

<Variable name="post.title.hover.color" description="Hover Color" type="color" default="#FFD25F" value="#FFD25F"/>

   </Group>

5.  Search for these codes

h3.post-title {

  margin: 0;

  font: $(post.title.font);

6.  Then change it with these codes

h3.post-title {

  margin: 0;

  font: $(post.title.font);

  color: $(post.title.color);

h3.post-title a {

  color: $(post.title.color);

h3.post-title a:hover {

  color: $(post.title.hover.color);

7.       Save Template.

8.       Next to do is, go to Layout > Template Designer > Advanced then edit ‘Post Title’ option.

9.       You can edit post color here.

10.   Save.

Thursday, December 15, 2011

Floating Facebook LikeBox For Blogs

Floating Facebook LikeBox For Blogs

by: Keith

Does your blog site have a Facebook page yet? Well if it doesn't then now might be a good time for you to give it one.

First, having a Facebook page (NOT a profile page) obviously even if it is create a free blog it gets you and your site more exposure, and more exposure means more traffic, and more traffic means more readers, and more readers... well, you know the drill. Second, the topic for today involves creating a widget that will link to your blog site's Facebook page.

This widget will basically rest on the right side of your page and will slide and extend showing its contents once you hover your mouse over it (see screenshots below).

So if you’re ready to create your Facebook page, head on over to this link. Otherwise, let’s get on with the tutorial:

1. Starting from your Dashboard, go to Design > Page Elements (tab).

2. Click on “Add a Gadget” below the Header.

3. On the list of the pop window, choose “HTML/JavaScript”

4. Paste the following code below inside it:

//<!--

$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->

</script>

.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJGL1nSBZ23JfwXOAvbp4dMIpluyP_9eZOI1f_G4HinZESteQZexuN-huJKy_-33ksqcZiTUczkzT08d_LADs2j8HyE4zovIdMEFNIOKFortscbi8CXIai9MKsf0edX3MRG1SzkMpLaUC8/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.w2bslikebox div{border:none;position:relative;display:block;}

.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.w2bslikebox span a{color: #808080;text-decoration:none;}

.w2bslikebox span a:hover{text-decoration:underline;}

</style><div class="w2bslikebox" style=""><div>

5. Replace the hightlight “YourFacebookPage” with your Facebook page’s custom name. It’s going to look something like this:

http://www.Facebook.com/YourFacebookPage/

NOTE: As far as I know, you won’t have any success if you use a URL which directs to a profile page; it’ll only show up like this:

Now hold your horses, we’re not done yet!

6. Next, head back to Design on your Dashboard and this time click on the Edit HTML tab.

7. Look for the <head> tag in the code and insert this script:

8. Click on either “Preview” or the “Save” button and see if you got it right.

Thanks to Harish for the widget code that made this possible.