dimanche 31 octobre 2010

Display Blogger Labels In A Drop Down Menu Gadget

blogger labels trickIn this post we have an excellent tutorial showing you how to display your blogger labels, tags, category's or what ever you like to call them in a drop down menu.There are a number of reasons this Blogger trick is useful.First of all by displaying your labels as a drop down menu you can have them placed in prime position at the top of your blog without taking up too much room.Some blogs i have seen have up to 50 different labels and even more, these labels in a list or cloud would take up a huge amount of space in the sidebar.Secondly we will add the hack to only one labels gadget, so you can have a drop down list of your blogs labels and still have the option to add a list or cloud version elsewhere on your blog.To make this as easy as possible for everyone we will add a new labels gadget and then add the code needed to make it a drop down menu.

Live Demo - Scroll to the end of this blog to see the drop down labels gadget in the footer section.

OK lets add a Drop down labels gadget to your blog , you might want to back up your template before you start.

Drop Down Labels Menu Gadget For Blogger

Step 1. In Your Blogger Dashboard Click > 'Design' > 'Add A Gadget'





Step 2. From the pop up menu scroll to find 'Labels' and click the 'Add' icon.
Important - The gadget will have the title 'Labels' change this to zzzzz and save the gadget.



Step 3. Now advance to your 'Edit Html' page - Do not tick the 'Expand Widget Templates' box.



Step 4. Find the following in your blogs Html : zzzzz
(Click Ctrl and F for a search bar to help find the code - More Info)

Step 5. When you locate zzzzz it will be in a section of code like this :


Step 6. Replace that full line of code with the following code :















Note - The text in red is what will be seen on drop down menu and can be changed to Tags, Category's etc..

Step 7. Save Your Template - The labels gadget is now in drop down form.You will want to change the name of the gadget from zzzzz, to do this just return to your Design page > Edit Gadget and change to Labels or Category's etc..

That it you have a very useful drop down list of your blogger labels for readers to easily navigate.Remember only this labels gadget will be in drop down format and if you remove it you will have to start from step 1 again.We have lots more Similar Blogger Tips and Hacks for you to check out and don't forget to leave your comments below.

Libellés : , , ,

vendredi 29 octobre 2010

AddThis Social Bookmarking Tool Bar For Blogger

Now that almost all custom templates have removed the Blogger Navbar lots of Bloggers are adding different Toolbars to their blogs.In this post i will show you how to add the New Share Bar from AddThis Labs.The AddThis Share Bar is a Social Bookmarking tool bar that's compact and transparent so it wont disturb readers and can be added to your blog in seconds.The Share Bar also has a search that will automatically connect to your blog.The search and share options have a tool tip style hover titles and the Share bar can be closed with a click.The bar has buttons for Facebook, Twitter, Digg, Email, Bookmark and more with the option to open and share your blog posts on every social website imaginable.

Live Demo - Check out the AddThis Share Bar Here

social bookmarking share bar for blogger

AddThis Share Bar For Blogger

Step 1. In Your Blogger Dashboard Page Click 'Design' > 'Add A Gadget' > Choose Html/Javascript from the pop up menu.

Step 2. Copy The following code and paste it into the Html/Javascript Gadget :

Best Blogger TipsBlogger Tips And Gadgets

Step 3. Save The Gadget - The position of the gadget on your design page is not important so you can drag and drop it to the bottom of your sidebar or into your footer.

Simple ! You Should check out more of our Blog Gadgets and Social Bookmarking Gadgets.Drop a comment to let us know what you think of the AddThis Share Bar.

Libellés : , , ,

5 Awesome Featured Post Sliders For Blogger

featured posts slider bloggerFeatured Sliders or Slide shows have become very popular with Blogger users over the last few months.They have becomes so popular that over 50% of the New Templates have featured post sliders already added.The featured posts sliders originally appeared on News websites and Blogs.As the news sites were constantly adding new content the Big story's would get pushed down the order on the home page.The featured post or Featured article slider was seen as a way to keep the big story's at the top of the home page.

I guess the same can be said for using a featured post slider on Blogger, you can display your best posts or the posts you want people to see in prime position at all times.There are many types of Featured sliders with lots of different designs and features.In this post i will show you five different types of sliders and how you can add them to your blog with your content.

5 Featured Posts Sliders For Blogger


1. A Simple Stylish jQuery Featured Slideshow For Blogger

Screenshot :



Demo : See This Slider In Action

Tutorial : Simple jQuery Slider Tutorial

2. Amazing Blogger jQuery Featured Slideshow Slides Images And Videos

Screenshot :



Demo : See This Slider In Action

Tutorial : jQuery Anything Slider Tutorial

3. A Cool Any Size jQuery Powered Featured Posts Slider For Blogger

Screenshot :



Demo : See This Slider In Action

Tutorial : Any Size jQuery Slider Tutorial

4. Mootools Featured Post Slider

Screenshot :



Demo : See This Slider In Action

Tutorial : Go To The Installation Steps


5. Smooth jQuery Featured Posts Slider

Screenshot :



Demo : See This Slider In Action

Tutorial : Go To The Installation Steps


That's 5 Awesome featured posts sliders you can add to your blog and direct traffic to the posts you want them to see.Check out our post with a Featured Posts list you can add to your sidebar and we also have lots more Great Blogger Gadgets.Thanks to the designers for their hard work,

Have you a favorite from the list ?

Libellés : , , , ,

mercredi 27 octobre 2010

Huge Collection Of Over 5000 Stunning Free Social Bookmarking Icons

Hi Guys, Over the last month i have been putting together a monster list of social bookmarking, social networking and general social media icons.I scanned the designer websites, scanned through the icon sites and set up shop in Deviant Art.At first i thought if i could list maby 20 to 30 sets of cool social bookmarking icons it would be great but the list just grew and grew.The result is 101 (+5) full sets of totally stunning and totally free social bookmark icons.In all it adds up to over 5,000 icons for every social networking site from Facebook to Hi5, every Bookmark site from Digg to Design Float and extras from Email Rss to Favorite, Blogger and Wordpress icons.

The Fluffy Pillow Set


So after countless hours of building the list of icons i checked and re-checked the links, images and spelling ect.. as this would be the largest post published on Spice Up Your Blog.But when i published i realised the D*** Blogger Auto Pagination had kicked in.So my beautifully crafted homepage with the latest 12 posts in easy nav summery boxes was cropped to display only one post.

The Wood Triangle Set


The result is i couldn't publish the list here on Spice Up Your Blog.Instead i had to publish my monster list of icons on my main freelance writing site Info Barrel.I have re posted this here because in an upcoming post i will show you how you can use any of these Bookmark Icons on Blogger (They can be used on any Blog Platform).Yep i will be showing you 106 differant Social Bookmarking Gadgets you can place below all your posts on Blogger !

To check out the 101+ Sets With Over 5,000 icons follow the link :


The Truck Icon Set


Let us know what you think of the Icons or your Favorite sets in the comments, and look out for the post showing you how you can use any of the sets on your Blogger Blog !

Libellés : , , , ,

mardi 26 octobre 2010

Floating Back To Top Button For Blogger

The 'Back To Top' button is quiet popular on Blogs and websites and i this post we will see how to add a back to top button to Blogger.Once added the Button Will float down the page as the reader scrolls n rest at the foot of the page until needed.Adding the Back to top button to blogger just requires some code added to a html/javascript gadget in your design page.We will be using an image button for the back to top and i will show you how you can change this image to any button you like.

Demo - Check Out A Demo Of The Back To Top Button Here , you should see the button fall as you scroll.

Add Back To Top Button To Blogger

Step 1. In your dashboard click 'Design' > 'Add A Gadget' > Choose 'Html/Javascript' from the pop up menu.

Step 2. Copy The Code Below And Paste It Into The Html/Javascript gadget.

Best Blogger Tips
Blogger Top Gadget

Important 

If the button stops in the middle of your page and not at the bottom increase the number in red at the start of the code, for example in the demo i had to set that number to 500.

left:650px; = How far from the left the button appears you can increase and decrease it to suit your blog.

top:400px; = How far from the top it appears.

You can change the image used for the button by changing the image URL in blue to any image you wish to use.

Step 3. Save your template - You can drag and drop the gadget to the bottom of your design page as position wont effect the gadget.

That's it your Back to top button has been added to your blog.Check out more of our Gadgets and Resources for Blogger.

Drop Your Comments And Questions Below.

Libellés : , ,

7 Colored Twitter Counter Buttons For Blogger

color tiwtter buttonsThe basic twitter counter button is probably the most popular social bookmarking tool used by Bloggers.Allowing readers to Tweet and ReTweet blog posts with the numbers displayed you usually find the buttons floating at the top and bottom of blog posts.With so many blogs using the twitter counter button they have almost become invisible to readers so adding a different looking retweet button to your blog seems like a great idea.In this post i will show you how you can choose from a selection of colored  Twitter counter buttons and add one to your blog.We will see how to float the colored Twitter button at the top of your posts wrapped in text, at the foot of your posts or on other sections.These buttons are from Twittley and as an added bonus when readers Tweet your posts they are also listed on the Twittley website.If you just want the standard Twitter Counter Button Click Here.


color twitter counter button blogger


Add Colored Twitter Counter Button To Blogger

Step 1. In your dashboard click 'Design' > 'Edit Html' > Tick the 'Expand Widget Templates' Box.







Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)


Step 3. Pick the color Twitter button you want and add the code for your choosen button Directly Above / Before

Note - All The Buttons Are Working Try Them Out !

1. Blue Twitter Counter Button.