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:
To get this cool plugin, go here:
Click the Add to Blogger button. You will then be redirected to this site:
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.



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)

<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"/>
   </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:

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.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>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FYourFacebookPage&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://www.MyBloggerTricks.com">My Blogger Tricks</a></span></div></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:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

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.

10 Free and New WordPress Theme Downloads


10 Free and New WordPress Theme Downloads
by: Carmela
 
AS one of the world’s leading blog platforms, WordPress continues to inspire users, designers, and developers to create new themes and plugins for public use.

If you want to create a free blog. The following compilation consists of some of the latest and most beautiful theme designs for your blog, which you can download and install immediately. All of these are compatible with the latest WordPress editions, so you don’t have to worry about installation problems.

Tectale Sunset
 
This is a warm sunset-inspired theme that evokes early autumn evenings or sexy nights in the city.  Most of its elements are placed in the homepage so you can check out everything at a glance.
Key features: Fixed width, right sidebar, two columns, valid XHTML, and widgets.


Click on the image for the demo, and download the latest Sunset version HERE.

Intent

This is a sleek theme that will go well with business and portfolio blog sites. Its black-white-and-gray color scheme is beautifully accented with red, giving the impression of power and professionalism. 

Key features: Right sidebar, theme options at admin panel, post thumbnails, and custom menus. 


Click on the image for the demo, then download Intent  HERE.

SUV Press
 
This predominantly masculine theme is created with the car buff in mind, hence the name. It’s suitable for any niche, especially for SUV/car sites and blogs. Set on a background of cars, car parts, and accented with elements in cool color shades, this theme gives off a high-octane and dynamic appearance. 

Key features:  Featured content options for photos and videos, post thumbnails, and theme options at admin panel.


Click on the image for the demo, then download SUVPress HERE.

TechNews
 
Technews boasts of a clean layout, with streamlined elements and a minimalist color scheme. It works well for any niche but is recommended for gaming, online games, or entertainment blog sites.
Key features: Options page, post thumbnails, featured content, dropdown categories on hover.


Click on the image for the demo, then download TechNews HERE.

Esin
 
If you like simple layouts that use plenty of white space, then Esin is for you. This theme does away with heavy bars and color blocks, and simply uses widgets and links to define its functions. Best of all, this goes with practically any blog niche. 

Key features: Featured content option (photos and videos), post thumbnails, dropdown categories on hover.


Click on the image for the demo, then download Esin HERE.

Innovation
 
This is another theme that makes good use of white space, defined by a black bar under the header to give the entire layout a more streamlined feel. It’s suitable for any niche, though it would be recommended for portfolio, business, or science-related sites. 

Key features: Featured content options (photos and videos), post thumbnails, and theme options at admin panel.


Click on the image for the demo, then download Innovation HERE.

Neolux
 
If you are into the green movement, then you might want to try out this theme. Featuring  clean lines and a predominantly white and soft gray palette with mint green accents, Neolux is an environmentalist blogger’s dream. This, however, works well with any niche, especially news or magazine-type blog sites.

Key features:  Featured content options, options page, and post thumbnails.


Click on the image for the demo, then download Neolux HERE.

Casual
 
Developed by Obox, Casual is a sleek Tumblblog-inspired theme incorporated with full WordPress functionality.  This is recommended for personal and photography blogs.
Key features: Infinite color options, Tumblog compatibility, social sharing, typography manager, portfolio section.


Click on the image for the demo, then download Casual HERE.

Selecta
 
This is another simple yet bold theme from Obox, sporting rounded edges and vivid, modern color palettes. It is best suited to video, photographs and portfolio blog sites.

Key features: OCMX framework, rounded edges, WordPress 3.0 +, color options. 


Click on the image for the demo, then download Selecta HERE.

Fashion & Lifestyle
 
This is one for the fashionistas. Designed by bglam, Fashion & Lifestyle features a simple yet stylish Mondrianesque layout that makes use of a sleek header font and bold colors set against an elegant black background .

Key features:   Featured content options, post thumbnails, colorblocked sections.


Click on the image for the demo, then download Fashion & Lifestyle HERE