A Unique Style Drop Down Bar Navigation Menu For Blogger

In this post i have a very cool and in many ways unique type of Css drop down menu for Blogger.The regular drop down menu we are used to seeing will when a link is hovered over display more links vertically below.This menu however is known as a 'Drop Bar' as on hover it displays links horizontally in a bar below the menu.I had been looking for something like this and while i found some jQuery powered versions but i loved this as it only uses Css, so no scripts or added load time to your blog and easier to implement.Also the menu has a great fix for our old friend Internet Explorer which usually plays up when Css is used.I have tested it back to IE6 and it looks fine.Your probably still wondering how it displays the links horizontally instead of vertically so i have a screenshot and live demo you can check out below.

Click Here To View Full Post >>

How To Add Breadcrumb Navigation To Blogger Blogs

Breadcrumbs is the name given to navigation links usually displayed above posts on blogs and at the top of pages on websites.The links are a trail from the page you are currently on back to the home page.So for example on a blog you will have the home page link, a link to a label used for the post then the post title.This will be displayed like this 'Home > Label > Post Title'.This is a very popular type of navigation on all sorts of sites and in this post i will show you how to add it to blogger.

Below you can see a screenshot and the live demo.Credit for the original breadcrumbs for Blogger goes to Hoctro with further work by Blogger Plugins.




Click Here To View Full Post >>

20 Fantastic Themes And Templates Available For Both Wordpress And Blogger

There are so many options for bloggers on both Wordpress and Blogger when it comes to free themes and templates.In fact many of the best free Wordpress Themes are converted to work on Blogger blogs.With that in mind i wanted to assemble a list of the best themes and templates available for both Wordpress and Blogger.So here are 20 Wordpress themes and Blogger templates with the same design and totally free to download and use on your blog regardless of platform.

20 Free Wordpress Themes And Blogger Templates

Ocenolis Magazine

Blogger Demo / Download Wordpress Demo / Download

---

Cupid

Blogger Demo / Download Wordpress Demo / Download

---

Namisan

Blogger Demo / Download Wordpress Demo / Download

---

Galleria

Blogger Demo / Download Wordpress Demo / Download

---

Poker Point

Blogger Demo / Download Wordpress Demo / Download

---

Spectacular

Blogger Demo / Download Wordpress Demo / Download

---

Corage

Blogger Demo / Download Wordpress Demo / Download

---

Yalene

Blogger Demo / Download Wordpress Demo / Download

---

Bluitos Magazine

Blogger Demo / Download Wordpress Demo / Download

---

Grunge2

Blogger Demo / Download Wordpress Demo / Download

---

Palutonis Magazine

Blogger Demo / Download Wordpress Demo / Download

---

Jacosta

Blogger Demo / Download Wordpress Demo / Download

---

Namalitis

Blogger Demo / Download Wordpress Demo / Download

---

Astronova

Blogger Demo / Download Wordpress Demo / Download

---

Forbiz

Blogger Demo / Download Wordpress Demo / Download

---

Lamonica

Blogger Demo / Download Wordpress Demo / Download

---

Redoze

Blogger Demo / Download Wordpress Demo / Download

---

Tag Magazine

Blogger Demo / Download Wordpress Demo / Download

---

Beiger

Blogger Demo / Download Wordpress Demo / Download

---

Matus Tribune

Blogger Demo / Download Wordpress Demo / Download

---

That's the list have you a favorite ? Make sure to check out more of our Blogger Templates.

Drop Your Comments And Questions Below.

An Updated Look At Do-Follow And No-Follow Comments

In January 2010 i published what has become the most popular Search Engine Optimization (SEO) posts on Spice Up Your Blog (SUYB).The post titled 'Building Backlinks, Do-Follow Comments And Information To Increase Google Search Rank And Page Rank' has consistently been in the top 10 in terms of views and to date has 117 comments.I guess the reason it has been so popular is it covers a number of topics related to improving your blogs performance in search, especially Google.The original intention of the post was to explain Do-Follow comments, what they are and how they work.I wont explain the whole do-follow process again you can check out the post linked above for more on the subject.

To explain Do-Follow i ended up covering why Back Links are so important and the whole Back Link process.The points covered in the post are still valid and i stand behind the information but in the 19 months since published some of my personal opinions have changed.In this post i want to explain how my opinions especially of Do-Follow comments have changed.

To Follow Or Not To Follow

At the time of writing that post Spice Up Your Blog had Do-Follow comments.I have since switched the comments back to no-follow in an effort to reduce spam which was getting out of control.I said in the post i thought Do-Follow comments would help build a community.While i still think this is valid for a new blog or growing blog once you blog is established it becomes less feasible.

At the moment i receive about 10-20 spam comments every day along with 20-30 valid comments.If the SUYB comments were still do-follow the spam number could grow towards 100 daily.I simply don't have the time to sort through this and that is the reason i switched back to no-follow.If you think this is a bit of an exaggeration check out the article by Web Pro News on how professional SEO company's actually pay people to work full time leaving comments on blogs - Why SEO Disgusts Me.

Another piece of advice i gave in that post was to use the Name URL format when leaving a comment.This would mean when published your name beside your comment is a direct link to your blog.I would still recommend this were possible but unfortunately i have had to switch this option off on SUYB.The reason for switching it off is because this also opens up the comment as Anonymous option.Once again as SUYB has grown some fools have found it entertaining to leave whats best called rude comments.I'm sure you have seen the types that spend their sad lonely existence on places like YouTube commenting on every video just to say how 'F***ing S**t' it is.

I guess to sum up my opinion has changed over the last 19 months as far as my own blogs are concerned.Taking both these steps (i only turned off the Name URL and Anonymous comments last week) has seen a serious decline in spam.But if you are trying to entice comments maybe on a new blog do follow comments are something to consider.

Drop Your Comments And Questions Below.

2 Cool New Blogger Resources - Custom Blogger Templates And Glitter Burned

Two excellent designers and friends of Spice Up Your Blog recently launched new blogs that Blogger users will love.Many of you will have heard me mention Harish before, he works with me on various projects and has launched an original Blogger Template site.Lauren 'nymphont' Thompson recently listed in a top ten female designers list has launched a gallery you can all submit your blogs to and it's a Blogger only zone.

Custom Blogger Templates

CBT is the latest endeavor of Harish Dasari, he has put his amazing knowledge of Blogger along with the latest coding techniques together to provide amazing free blogger templates.The templates are converted from original Wordpress and Css designs but unlike so many "half hearted" efforts at template conversions Harish leaves no stone unturned in providing the best possible quality.Although i made some tweaks when i changed the design of SUYB two months ago the template i used is from CBT and called Corage.

Check Out Custom Blogger Templates

Glitter Burned

I have been a fan of Lauren Thompson for some time from her work on Nymfont.Com.Now Lauren has launched a showcase of Blogger powered blogs called Glitter Burned.A few minutes browsing through the gallery can uncover some fantastic blogs you might otherwise never find.You can of course also submit your own blog and have it added to the Glitter Burned gallery.

Check Out Glitter Burned

Let Us Know What You Think, Drop Your Comments And Questions Below.

jQuery Fade In Scroll To Top Button With Smooth Scroll For Blogger

In October last year i wrote a post with a Floating back to top button.Since then i have wanted to cover a more up to date back to top modern button.The popular option when it comes to scroll top buttons is to use jQuery for two reasons.Firstly with jQuery you can have the button hidden until the page is scrolled, secondly when clicked the page scrolls smoothly to the top instead of the direct jump a regular link would have.So that's exactly what i have in this tutorial.We will add a button that will only be visible when the reader starts scrolling and then when they click it the page slowly scrolls up easing into position at the top.For the button itself we us a sprite to create a hover effect sprites also keep the page load time down.

I recently started a blog in which i want to list the Best Design and Blogging posts, codes, tutorials and resources.On that blog i have the back to top button we cover in this post so we will use that as the demo.When you land on the page start to scroll and you will see the button in the bottom right corner.



Looks and Works great lets add it to your blog.Credits to Matt Verone, Wordpress users can use the plugin here.

Smooth Scroll jQuery Back To Top Button

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed as shown in the video Below :

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 - How To Find Code In Blogger Template Template)

]]>

Step 3. Copy and Paste the following code Directly Above / Before ]]>

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;

right:10px;

overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXm68U-h16NztZ1s-hd9KqrxilGzaVx7zjPRCUTbPkozHNZPgheBoOL4IHVqHmylxPtqY1gFhxiCvpPhK1WZmtZi_Nq5aBUWGVJ_N-AuhBtjEzPL18UraJQfTA7yUIRUqG9KmzvrS-mCY/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXm68U-h16NztZ1s-hd9KqrxilGzaVx7zjPRCUTbPkozHNZPgheBoOL4IHVqHmylxPtqY1gFhxiCvpPhK1WZmtZi_Nq5aBUWGVJ_N-AuhBtjEzPL18UraJQfTA7yUIRUqG9KmzvrS-mCY/s1600/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}

Note - To move the button to the left of your blog change right:10px; to left:10px; .

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

Step 5. Now Copy And Paste This Code Directly Above / Before

Note - If you have previously added jQuery script to your template you can leave out the line in green.

Step 6. Save your template.

That's it, You can check out your new back to top button after you Comment on and Share this post ! Make sure to check out more of our jQuery Tutorials and Blogger Tips.

Drop Your Comments And Questions Below.

How To Edit Template Html And Add Gadgets In The New Blogger Dashboard

Blogger have been introducing the new Dashboard or Interface via Blogger In Draft over the last few months.This is a complete re-design and a post yesterday on the Blogger in draft blog told us all users can now use the new interface.To check it out go to www.draft.blogger.com.I think it could be another few months before the new design is default on the main Blogger site and maybe then you will still be able to switch to and use the current dashboard.But if you like the new interface and are going to use Blogger In Draft as your default following the tutorials on Spice Up Your Blog will be a little different.So i have made a video to show you how to Edit your template html, Add gadgets, Use the template designer and more.This will allow you to follow all our tutorials while in the new dashboard.
Click Here To View Full Post >>

Google To Rename Blogger Google Blogs Picasa Also To Become Google Photos ?

Social Media Blog Mashable today broke the story that Google are planning to Re-Brand Blogger over the next few weeks.According to Mashable Blogger is to be re-named Google Blogs.Google will also Re-Name their image hosting site Picasa, it will become Google Photos(All images upload to Blogger are hosted on Picasa).This has not been confirmed by Google but the source would need to be reliable for Mashable to publish the story, they said


The transition from Picasa and Blogger to Google Photos and Google Blogs will occur “in a month to a month and a half,” we’ve been told. The date aligns with the likely public launch of Google+.
Click Here To View Full Post >>

A Strange Fix For Missing Google Plus One Buttons

It's been a few weeks since the launch of Google Plus One and the Plus One Button.I'm sure many of you like me jumped on board and added the Plus One sharing or recommendation button to your blogs.I had it in a few positions and all my posts were been plus one'd (Thanks) then bang it's gone ? The script is in the head section of the template, the button code is were it should be but no sign of the button.I searched online for a solution and just found more similar questions "Were is the plus one button ?", "My plus one button is gone how can i fix it ?".

I think Plus One can be an important factor in which links people click in search results so i really wanted it back.I presume something in the template was in conflict with the button code but couldn't see what.Then i found a fix in a quiet unorthodox way.

I remember reading Google had partnered with Add This the social bookmarking service so i thought i would try the Add This version of the button, worth a go.When i added the code for the Add This version of the plus one button strangely all the plus one buttons worked again! Now you would think it is the script from Add This that is getting it to work but if i add just the script they don't work the actual button needs to be added also.

A strange Fix For The Google Plus One Button

Here is the code for the Add This version of the plus one button simply add it to your blogs template.On Blogger via a html/javascript gadget in your sidebar on Wordpress a text sidebar gadget would do.As the other buttons were now working i placed the add this version in the footer out of the way.

You can also go and get the button from AddThis.com.

That's how i fixed my Google plus one button let us know if it works for you.Make sure to check out more of our Social Media Tips and Social Bookmarking Gadgets.

Drop Your Comments And Questions Below.

Awesome New Google Search Style Search Bar For Blogger

I'm sure you will have noticed the new Google design as covered in the post Evolving the Google design and experience on the official Google blog.While the changes have been subtle some stand out like the new sleek search bar on results pages.The new search bar has a more modern minimalist look with rounded corners and hover effect.But one new feature i quiet like is as you type your text into the search field an X appears than can be clicked to remove your text.Yes it's nothing major but still a neat feature none the less.So in this post i will show you how you can re-create the new Google search bar and use it on your blog.

Once on your blog it will look the very same, using jQuery for the X delete button and your blogs default search to generate results.This was covered on the Awesome Queness.Com design blog and with just a few changes i have it ready to go For Blogger.
Click Here To View Full Post >>

Add An Admin Badge Plus Differant Style Colors To Author Comments On Blogger

In the comments here on Spice Up Your Blog when i as the admin or author, post a comment in the bottom corner there is a sparkling animated badge with the word 'Admin'.I have received so many requests to cover this in a tutorial so today i will show you how it's done.OK so back in April i published a post showing how to use different colors on the authors or admin comments on Blogger and we actually use the very same technique here but this time with a background image.While i will give you the URL for the admin badge i have been using and everyone seems to like so much you can use any image.

Now while we are adding the admin badge or image we might as well add some more styles to the author comments so they stand out, it does not require any extra work so why not.To that end i have also included the Css for your comments to have a different background color, Different border color and the border will have rounded corners.Lets look at the demo :
Click Here To View Full Post >>

A Simple jQuery Powered Drop Down Menu For Blogger

I have had a lot of requests for a tutorial on creating a simple easy to use drop down menu for Blogger.There are literally thousands of drop down menus around with different styles and functions.However i want to have something that is easy to implement,add links to and Customizable.The menu i choose has all these features, a clean design with a jQuery powered drop down effect.

In the end i decided to go with a menu first published on Blogger Stop over two years ago.I simply made some small changes so it will work on the newer Template designer templates.I also added a z-index so the drop down will display over content and some Rounded corners that will be visible on browsers that support them such as Firefox, Chrome and Safari, you can see a live demo below :

Add The Simple Drop Down Menu To Blogger

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Edit Html



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 - How To Find Code In Blogger Template Template)

Step 3. Copy and Paste the following code Directly Above / Before

Note - In yellow i have highlighted the colors used, you can change these by using a different color code.You can find the code for the colors you want with our html color code generator.

Note 2. - If the rounded corners are not to your liking remove the two sections highlighted in red and there gone !

Step 4. Save Your Template.

That's the Css and jQuery added next step is to add the html for your menu.

Now go to your blogs Design Page, we will be adding the menu across your blog below the header.This area is called Cross Column and can be seen in the image below.If your blog does not have this section available you can see how to enable it here - Add Full Width Cross Column Gadgets To Blogger.

Add The Menu Html

In your blogs Design Page click Add A Gadget > Choose Html/Javascript > Copy and paste the following code into the Html/Javascript gadget :

• Home
  
• Link One
  
  
  
  • Link One Sub
  
  
  • Link One Sub
  
  
  • Link One Sub
  
  
  
  


• Link Two
  
  
  
  • Link Two Sub
  
  
  • Link Two Sub
  
  
  • Link Two Sub
  
  
  • Link Two Sub
  
  
  • Link Two Sub
  
  
  
  


• Link Three


• Link Four


• Link Five

This is the code that makes up the menu in the demo.Replace the hash tags (#) with your links and the text with ehhh your text :D.If you want to add more links you can do so in the same way, take a few minutes to look at the layout of the code and you will see how it works.

Template Designer Tabs Fix

If you use a template from the Blogger Template Designer there is a section of Css that will effect this or any menu you place in the cross column section.This is called tabs and you will need to remove or over ride the tabs css.I have made a short video to show you how to remove it.You can see the video here - Remove Tabs Css.

Thanks again to BloggerStop for the original, Make sure to Check out more of our Design Tips and jQuery Tips.

Drop Your Comments And Questions Below.