Add The Brand New Official Twitter One Click Follow Button To Your Blog

Twitter developers today released a brand new shiny follow button for Blogs and Websites.The new Twitter follow button has dispensed with the pop up window to view the profile of the user in order to click Follow.Now when added to your blog as long as readers are logged in to Twitter when you click follow they are following you.Basically it works like the Facebook fan page like button, click and your done.This looks like good news for Bloggers looking to increase there Twitter followers, anything that makes it easier for people to follow you has to be good.The new button also has a few extra options like choosing a light or dark color scheme to suit your blog, display your follower count beside the button and also you can choose the language.

Live Demo - Below id a working demo of the new button, click Follow and your automatically following me (If your not logged in you get a log in option):

Follow @PaulCrowePro


Pretty Cool..

Get The New Twitter Follow Button For Your Blog

Simply follow the link to the Twitter Developers page, choose your options and grab your code - Twitter Developers New One Click Follow Button.

Add The Button To Your Blog

The Twitter One Click button uses html and javascript so for all blog platforms you can put the button anywhere that accepts Javascript which is pretty much everywhere.Here are some steps to place it in your Blogger sidebar and above or below posts.

Blogger Sidebar

On Blogger go to your Design Page > Click Add A Gadget > Choose Html/Javascript and paste in the code then save.

Above Posts

On Blogger Go To Design > Edit Html > Tick Expand Widget Templates.

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)

Paste your button code Directly Below

the save your template.

Below Posts

On Blogger Go To Design > Edit Html > Tick Expand Widget Templates.

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)

Paste Your Button Code Directly Below

then save your template.

Once again we are bringing you the latest releases as they happen so Make Sure To Follow Us For Updates with our new shiny one click button !




Drop Your Comments And Questions Below.

The 7 Top Tips Direct From AdSense To Earn More From Your Blog

A few weeks ago i told you how i managed to get my mistakenly closed AdSense account reopened.In that post i mentioned how, ironic as it seemed at the time while my AdSense account was closed i received a booklet from Google AdSense with some tips to increase earnings.The booklet had some general tips and some specific tips for Spice Up Your Blog.I know AdSense don't send these booklets to everyone so in this post i will share the tips AdSense gave.Apart from the tips specifically for my sites there was 7 general tips that i think can help everyone make more money with AdSense.
Click Here To View Full Post >>

lundi 30 mai 2011

Blogger And Wordpress Spectacular jQuery Image Zoom Effect

A few weeks ago i published a very popular post featuring an Amazing jQuery Image Zoom For Blogger.That effect allowed you to display an in dept zoom in a container beside images.In this post we have the same in dept zoom but this time it appears within the image in whats called inner zoom.So if you uploaded an image to your blog that's displayed 200x200 pixels the zoom appears within that space.Lets look at the demo so you can try it out.
Click Here To View Full Post >>

dimanche 29 mai 2011

10 Great Blogger Tips And Gadgets You May Have Missed

This week with the design change here on SUYB i have been going through some of the archive and updating older posts.I needed to update the design of some of the posts and in some cases the content itself.You know there is some really cool posts from up to 2 years ago that stand the test of time.I know many of you missed these posts when they were first published and they could be just what your looking for. So i thought today i would bump up 10 of them.From Blogger Gadgets and Design to SEO and Traffic here are 10 great posts you may have missed.

1. Show Only Posts Title On Blogger Labels Page - This post has a clever useful Blogger Tip.When someone clicks a label on your blog they will be shown a list of post titles only not full posts.This makes it easier for readers to find the content they are looking for.

2. Scrolling Recent Posts List Gadget For Blogger - Here we have a gadget that will display your blogs most recent posts scrolling across the page.A perfect gadget to go across the top of your blog or below the posts.

3. Add Google Friendly Meta Tags and Meta Description To Your Blog - This post shows you how to take control of how Google and other Search engines see your blog.Adding a meta description in a way lets you describe your blog to Google who often use it as your blogs search results snippet.

4. A Random Posts List Gadget For Blogger - A simple gadget to display a randomly generate list of posts from your archive.

5. Change The Blogger Navbar To A Hover Effect - With this Blogger trick your navbar will not appear unless users place their cursor over the navbar area.

6. 8 Basic Ways For New Bloggers To Get Traffic - A list of techniques to get readers to your new blog.

7. How To Make A YouTube Video Auto Play On Page Load - Simply Make A YouTube Video On Your Blog Automatically Start When Users Land On The Page.

8. Change The Blogger Page Title Format - An important technique to optimize the way your title tags are viewed by users and Search engines.

9. Create An Email Link, Button And Image Link - Create 3 types of link for users to Email You.

10. jQuery Animated Scroll Recent Posts With Thumbnails Gadget - A very cool recent posts gadget that uses jQuery to scroll through your latest content.


That's just 10 posts from the archive of nearly 400, you can use our quick archive to see a compact list of all posts - Spice Up Your Blog Quick Archive.

Drop Your Comments And Questions Below.

vendredi 27 mai 2011

The Complete Animated Sexy Social Bookmarks V3 For Blogger

The Sexy Bookmarks range, so called as the very first gadget had the 'Sharing Is Sexy' message is probably the most eye catching Social Sharing Widget available.On Spice Up Your Blog i have covered a few versions and even used the Arrow Messages to create my own unique versions.However in this post i have the complete sexy bookmarks range with the awesome accordion auto hide and all 8 arrow messages.

With the accordion effect one row of icons are visible and on hover the page drops to display 48 more sharing options, that's 56 in total.The icons themselves are sprites with a pop up effect, all making for a totally animated look using jQuery.Best of all by changing just one line in the code you can use any of the 8 messages.The message and icons are all transparent so work on any background color.We will be adding the sexy bookmarks gadget directly below all the posts on your blog.

Along with the steps I have a complete video tutorial walking you through the steps as I add the sharing buttons to a test blog.

Updated : 03/03/2014.

I have 2 demos showing the sexy bookmarks in action, one on a light background and one on a dark background.The demo has all 8 gadgets make sure to hover over the icons to see the drop down for the other icons.

Demo 1 - Light Background Sexy Bookmarks Demo

Demo 2 - Dark Background Sexy Bookmarks Demo

Very Cool Eh ! This version is the most complete i have seen for Blogger and thanks go to Harish from Way2Blogging.Harish also works with me on projects in the Hire Us section of Spice Up Your Blog.

Arrow Messages - The arrow messages available are Sharing Is Sexy, Sharing Is Caring, Sharing Is Caring With Hearts, Share The Love, Share The Wealth, Share And Enjoy, Share The Knowledge and even an arrow message in German !

Sharing Buttons - The Bookmarking Icons In The Gadget are for : Twitter, Facebook, Linkedin, Stumble Upon, Delicious, Digg, Google Buzz, Blogger, Yahoo Mail, Gmail, Google Bookmarks, Google Reader, Rss, Orkut, Design Bump, Reddit, Design Float, Friend Feed, Dzone, Web Blend, Propeller, Tumblr, Squidoo, Posterous, Technorati, Bebo, Hotmail, Blinklist, Blog Engage, Blog Marks, Box.Net, Current, Diigo, Ekudos, Evernote, Hacker News, Hives, Identica, Jumptags, Email, Meneame, Mister Wong, My Link Vault, Myspace, Netvibes, Netvouz, Newsvine, Ning, Ping FM, Plaxo, Plurk, Print Friendly, Slashdot, Sphinn, Techmeme and Tipd.

OK lets add it to your blog.

Add The V3 Complete Sexy Bookmarks Gadget To Your Blog

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 - More Info)

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

Note - If you previously added jQuery to your blog you can remove the line in yellow.

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 - More Info)

- If you cant find this use
instead.

Step 5. Copy and Paste the following code Directly Below / Under

jeudi 26 mai 2011

Change The Size Of Blogger Profile Picture In About Me Gadget

In this post we have a quick simple tip showing you how to change the size of your Blogger profile picture as it appears in the about me gadget on your blog.By default the image is quiet small around 80x80 pixels, By adding piece of css to your blog you can set the image to any size you like.This will help spice up what is a very plain gadget and give you more option when it comes to the profile image you use.We will be adding the code to your template via the template designer so it couldn't be easier.
Click Here To View Full Post >>

mercredi 25 mai 2011

Optimize And Personalize Your Feedburner Email Rss - Video Post

Email subscriptions are an option every blogger simply must provide and there is one service that dominates Email Rss.The Google owned feedburner does it better that anyone else.In this post we are looking at how you can get the most from the Email Feed offered on your blog.If you have not got a Feedburner Feed or Email Feed check out How To Create A Feedburner Feed For Your Blog.This is a video post and in the video we will be covering the three main areas of your Email Feed and how you can optimize and personalize them.
Click Here To View Full Post >>

mardi 24 mai 2011

jQuery Lightbox Image Overlay Pop Out Effect For Blogger

Recently we have been looking at the images you use in your blog and making them display better and more interactive.This has included an Image Zoom Effect and Featured Image Slideshow.In this post we will cover perhaps the more popular image plugin.The lightbox plugin really is a 'Must Have' for blogs that use pictures in their posts.At the moment when a user clicks on an image you uploaded on your blog they click through to the image URL page which is just the image on a blank page.With this lightbox effect when your images are clicked they smoothly pop up into a container in full size with an optional description.If you have the effect added to more than one image users will have the option to scroll through each with next previous buttons.Lets look at some Demos.

While testing this i had to make a few demos so i kept two for you to check out, just click on the images in the demo posts.You will see the next and previous buttons when you hover over the image when popped out.
Click Here To View Full Post >>

lundi 23 mai 2011

The New Advanced Share This Toolbar With Optional AdSense Unit

Over the last few years there has been a bit of a mini war between the top bookmarking widget services.Sites like Share This, Add This, Add To Any And more have been fighting for the top spot among users (Did you know the Add This Bookmark page is one of the few online with a Google Page Rank of 10/10).In my opinion over the last year Share This has been coming out on top.In The next few posts i will be showing you why with tutorials on their new Oath Bookmark buttons, Fixed Share widget with integrated AdSense and in this post the very cool toolbar also with optional integrated AdSense.
Click Here To View Full Post >>

samedi 21 mai 2011

A Simple Stylish jQuery Featured Slideshow For Blogger

Earlier this week i brought you a very cool jQuery Featured Image Slider that can slide images and videos.In that post i explained how  i hadn't covered featured sliders or slideshows too much but was gonna make up for it.So here we have another featured slider slash slideshow slash image carousel.The slideshow in this post has a simple style but that gives us some extra options, the main one is you can easily make it any size to suit your blog or the images you want to use.

In the demo i have made it quiet small so it will fit above the posts section.But you can have it fit neatly above your posts or you can have it span across your full blog in the cross column zone.
Click Here To View Full Post >>

Display Gadgets Added To Your Blogger Template On Only Full Post Pages

A comment on a recent post asked 'Please write a post showing how to have a subscribe section below posts but not on the read more page'.By read more page the commenter meant the home page and unfortunately although it was a genuine comment they included a link to their email in the comment so i couldn't publish it (Are you seeking out spam bots :D).OK so basically this person had added the code for a subscribe section to the template and it displayed below all the posts on the home page even though the posts were just a short summery.What they wanted was for it only to be below the full posts and doing this is quiet simple.
Click Here To View Full Post >>

vendredi 20 mai 2011

Create A Link To A Point On The Same Page And Add jQuery For Scroll Effect

We all add links to different pages both within our blogs and externally to other sites.But what about creating a link within a page, a link from one point on a page to another.This is something i often see in Help or FAQ pages, a list of the most common questions and you click on the question to jump to the answer.This way of linking within a page is actually very simple and nothing needs to be added to your template for it to work.In this post i will show you how to quickly create a simple link within pages on your blog.But as a bonus i will also show you how some jQuery can make the transition between the link and the point it leads to less of a jump and more of leisurely scroll.
Click Here To View Full Post >>

jeudi 19 mai 2011

New Official Blogger Gadget Add A Tip Jar For Donations To Your Blog

Blogger today released a brand new gadget to the gadget directory, it's a Google Checkout Tip Jar.Many blogs have a donate button on their blog usually from PayPal that allows readers to show their appreciation so it's not a new concept but a Google Checkout donation is.The gadget will be easy to add to your sidebar requiring only two clicks."We know that most of you blog for the sake of sharing your thoughts and opinions, however a little side income is like an unexpected gift".

Add The Google Checkout Tip Jar To Your Blog

Here are the steps as shown on the official Blogger Blog Blogger Buzz.

1. Sign up for a Google Checkout Merchant account at checkout.google.com/sell
2. Be sure to enable the HTML API by going to the Settings tab, clicking the integration link and unchecking the “My company will only post digitally signed carts” checkbox. Also, copy the Merchant Id for use in step 5.
3. Back in Blogger, on the Design | Page Elements tab click “add a gadget” where you wish to place the Support gadget.
4. Add the "Support My Blog" gadget from the gadget gallery.
5. Customize your support button settings. The Checkout Merchant Id is the one you copied down in step two. Save and you’re done!

Note - I was expecting this to be at the top of the gadget list like they do with most new gadgets but i had to search to find it.

Note 2 - Just seen only people in the United States and United Kingdom can sign up, hmmm i don't think PayPal are gonna get too worried about loosing business.

Will you add it and have you ever or would you ever donate to a Blog ?

Drop your Comments and Questions below.

mercredi 18 mai 2011

How To Make All Text On Your Blog Lowercase, Capitalized Or Uppercase

A blog i was working on had a minimalist design and the author wanted all the text to be lowercase.This is something you see on some blogs and websites and i quiet like it, it has the 'less is more' thing going on.Now having the posts text, titles and other stuff you add yourself lower case is easy, you just write it in lower case :D.But what about things like labels, text in recent posts and other gadgets and all other automatically generated text.These by default capitalize the text, the first letter is a capital.Other instances on this blog were the newer, older and home links, and meta under the posts.You have no control over how these are formatted, but you can change that.
Click Here To View Full Post >>

Set The Number Of Posts Shown On Labels Pages For Blogger

In a recent post i showed you how to have your blogs labels displayed in a drop down menu.A comment from APF in that post remarked "I'd prefer to see a drop-down that honors the limit (in my case, 1) number of posts per screen I've set for blogger in general".What APF is referring to here is he has set his blog to display one post per page, so on the home page of his blog there will be only one post.Then the Older Posts, Newer Posts links are there for people to navigate through other posts.You can set the number of posts per page on your blog in your settings under formatting.This works fine on the home page and with the older, newer links but when someone clicks a label the limit is not applied, in this post i will show you how to fix that.
Click Here To View Full Post >>

mardi 17 mai 2011

Amazing Blogger jQuery Anything Slider Slides Images And Videos

Featured Sliders also known as Slideshows, Image Sliders, Featured Posts Sliders and Carousels are very popular among bloggers.They can be used to link to featured content in your blog or just as an image carousel for your pictures.I have not really covered sliders or slideshows too much on Spice Up Your Blog.The main reason is there are so many tutorials already available for Blogger sliders, i did share 5 of my favorite Blogger Featured Sliders from other blogs not too long ago.
Click Here To View Full Post >>

dimanche 15 mai 2011

Remove The White Space Gap Below Blogger Comment Form

A question i was asked this week was 'I notice a big empty gap below the comment form on my blog.There is a big space between the comment form and the older posts, home and newer posts links, is there a way to remove it ?'.The problem is in the size given to the iframe for the comment form and you can indeed remove the space by making the iframe smaller.We simply find the code for the comment form iframe and make a quick change, couldn't be easier.
Click Here To View Full Post >>

samedi 14 mai 2011

A Day To Forget For Blogger

Blogger reported blogs were Read Only for 20.5 hours, gotta admit it felt like longer.During this time you couldn't access your blogger dashboard and your blogs comment form was also inaccessible.This was a pain but hey, Bloggers record when it comes to up time is second to none so it's excusable.What this did display is Blogger like most other Google services were found lacking when it came to customer service.In a recent post i wrote about Problems i had with AdSense and how contacting someone was imposable, now i don't expect Blogger to open phone lines but they could have keep users better informed.On Twitter Blogger did actually post regular updates but what if your not on Twitter, you had the status page and forum both with one sentence messages.



Back in November last year after a less serious problem the Blogger team published the post Improving Our Communication of Blogger Service Interruptions, they need to take another look.

Blogger being read only was the the big issue for me, a day away from my blogs is not a big deal.However having the whole system backed up by two days is major, not only were all posts and comments from them two days temporarily removed any edits you make to your blogs design were also gone.While the posts have been restored and most comments are also back i have seen no information on design changes, will they be restored or do we need to make the changes again ?

Blogger is back and i do believe this was a one off.As Spice Up Your Blog constantly displays I'm one of Bloggers biggest fans but Blogger and Google need to improve their communication skills.

mercredi 11 mai 2011

Display Post Author, Date And Labels With Icons Below Blogger Post Titles

On the recent post showing how to Display A Default Avatar For Anonymous Comments a comment by RedCherii asked "How do you put those little icons beside your post details (author, date, label) and make them appear below your post title?".The icons and details RedCherii asked about can be seen below the title of this and every post on Spice Up Your Blog.So for Redcherri and anyone else who likes them, in this post i will show you how to add them to your blog.What we are adding is the default Author Name, Post Date And Labels from the post with 16x16 icons to the left of each.I also have a pipe character splitting each, the code will be placed in your template to display this directly below the post titles.
Click Here To View Full Post >>

mardi 10 mai 2011

An Amazing jQuery Image Zoom Effect For Blogger

Many of the latest posts have been looking at Css effects and Image effects so in this post we will continue with the images but bring some jQuery into the mix.If your a beginner thinking whats he talking about don't worry we will have all the steps set up for simple copy and paste.The effect we will achieve in this post is very cool.When you add an image to your blog you can allow users to hover over that image and a larger version appears.Users can then move the cursor around the small image and see it zoomed.The demo below will show you exactly how it works.



Click Here To View Full Post >>

lundi 9 mai 2011

Add A Simple Css Bump Effect To Your Blogs Images

We all like images effects and adding some style to the pictures we use in our blogs posts.Some effects can be quiet elaborate (I have the very cool light box effect just about ready to publish) but sometimes a simple hover effect looks great.In a recent post i showed a rollover effect with some social icons changing one image to another on hover (we may look at using Css Sprites in future), in this post we will make your images simply Bump !
Click Here To View Full Post >>

dimanche 8 mai 2011

How I Got My Mistakenly Closed AdSense Account Reopened

On Saturday last (30/04/11) i clicked the AdSense icon in my bookmarks toolbar as i do most days to see how my ads were performing (Don't you find checking your blogs stats and AdSense addictive?).This time however instead of going to my AdSense homepage or dashboard i was presented with a strange update or apply to AdSense type page.I say update / apply page because i couldn't really figure out what the page was or what information it was looking for.This started a chain of events which seen my account vanish, all my ads vanish and possibly all my unpaid earnings vanish.

I guess in this post i want to look at the steps i took, the frustration in dealing with any Google service when it comes to customer service and the patience you need in this type of situation.
Click Here To View Full Post >>

vendredi 6 mai 2011

Polaroid Icons Blog Subscription Gadget With Rollover Effect

The other day i posted 3 very cool sets of icons you could use to let people subscribe to your Rss Feed, Twitter and Facebook Page.In that post i gave you the code for the icons ready to use, you just had to add your URLs then copy and paste.Two of the icon sets were very similar both having a Polaroid Picture Design.One was fresh and bright while the other had a vintage worn look.This lead me to thinking wouldn't it be cool to have the worn vintage Polaroid icons in your sidebar and when someone hovers over them they switch to the bright clean icon.This is called a rollover effect. I'm sure you have seen image rollover effects before and this is a great way to use it.
Click Here To View Full Post >>

jeudi 5 mai 2011

Simple Css Only Tooltip Hover Descriptions For Blogger

The Tooltip has become a common resource and is used by all the major sites to describe a link or give more help and information on a section of text.Often when using Google products you will see a small question mark that you can hover over to see a pop up with more information.I covered tooltips before using html, javascript and images to create the actual pop up.In this post however i have a really cool way to have tooltips on your blog using just Css.If your not too savy when it comes to this sort of thing, basically this is much easier, much faster to load and presents less chance of errors.
Click Here To View Full Post >>

mardi 3 mai 2011

Three Cool Blog Subscription Gadgets With Unique Icons

This week while doing a few jobs on blogs i added some very cool subscription icons to the sidebars.The icons link to the Rss Feed and Facebook and Twitter profiles for the blog.Pop the new Blogger Follow By Email Form gadget below the icons and you have all the main subscription options offered to readers.Anyway the icons look great one set is in the design of Polaroid photographs, the second set is the Polaroid Photograph Design but with a worn vintage feel and the third are very bright and colorful with a slight 3d look.I thought some readers of Spice Up Your Blog might like them so i have the code here and instructions to add them to your blog.The demo icons are connected to our Rss, Facebook and Twitter so you can check them out and subscribe, Like and Follow if you ain't already.

Click Here To View Full Post >>