How To Introduce A Free Loyalty Program On Your Blog

Loyal readers form the backbone of a blog. Making that loyalty a rewarding experience can do wonders to your blog's reputation as well as its traffic. The first thoughts about these so called "Loyalty Program" might be about their hefty costs but here PunchTab comes into the picture. It provides free loyalty programs
Click Here To View Full Post >>

How to Make a Call to Action People Respond To

Whether you're writing an email, blog post or the next bestseller, you want your readers to be listening and responding. Your goal may be to get them to keep reading, or maybe you're asking them to make a purchase, leave a comment or visit your website, but usually you want them to do something. Online content uses the call to action, or CTA. Don't let the fancy acronym fool you; calls to action are not some mysterious entity. Instead, they're clear, concise instructions for the reader to respond to.

So here is how to make your call to action more...actionable.

Create a Sense of Urgency 

You've probably heard this a million times for titles and subject lines, but this also applies to the CTA. Online retailers use urgency by displaying “Only 2 left in stock” or “You'll save $5 today” while educators post how much space is left in their classes.

If you have something that's being offered for a limited time or is very time-sensitive, then communicate this urgency with your readers.

Reduce Friction 

Don't create obstacles that prevent you from getting more responses. Obstacles include:

-Lengthy text the reader doesn't want to muddle through and asking them to click on multiple links to reach the end goal.

-Design of the page can also become an obstacle. According to KISSmetrics, a dark background with light text can be between 50% and 200% less readable than a light background with dark text.

Make sure your call to action is easy to read, respond to and comprehend.

Grab Their Attention 

Getting their attention may only be a matter of changing a word or adding an image to attract more attention. One site found that changing “read more” text to more active verbs like “find” or “discover,” yielded over 50% more click throughs. Another study by MediaPost reported a large technology vendor increased click throughs by 67% when they changed a link from text to a button, while Email-Worx found just including a small, relevant image near the CTA lifted clicks by 50%.

Use active verbs to encourage readers to respond, and make your design catchy with relevant images.


Assure Privacy 

Your CTA may require readers to provide anything from an email address to credit card information, or maybe you're just looking for data and need them to complete a survey. The more you're asking, the more reluctant readers will be about sharing.

Make readers as comfortable as possible about sharing their information. If you need their email address for a mailing list, link to your privacy policy and assure them you will not share it with anyone. If you're selling something, use a trusted shopping cart service or back yours up with safety protocols. For surveys, don't collect personal information that identifies them if you don't need it.

Test, Test, Test 

Testing is the key to learning what works and what doesn't. Split testing allows you to test two or more variables against each other to see which one brings in more results.
The studies above wouldn't be valuable if they weren't compared against something. Whenever you plan to change any aspect of your marketing campaign, set up a split test first.

Implementing these tips will help you learn even more about your audience. You'll see what they like and what triggers a response, and you'll be able to apply this information to other aspects of your campaign.

By Guest Author -Crystal Gouldey is an Education Marketing Associate at AWeber, the leading email service provider for small-to-medium businesses. Crystal's spent the past three years teaching email marketers how to optimize their campaigns. She currently writes for the AWeber blog, which you can visit for more tips on marketing with email. Sign up here to get weekly Aweber email marketing tips delivered to your inbox.

Write A Guest Post - See how you can benefit from writing a guest post.

New Wordpress Style Recommended Or Related Posts Slide Out Gadget For Blogger

In this post i have an awesome new gadget you may have seen on Wordpress blogs that's now available for Blogger.The gadget is called simply "The Slide" and is brought to you by Simple Reach.Those of you that follow some Wordpress blogs will surly have seen the recommended or related posts slide out that appears when you scroll towards the end of a post.Basically when you reach the bottom of a post a card slides out in the bottom right corner of the screen with a related post the reader can click on.The slide out card is not obtrusive and if the reader scrolls back up the card slides back in.This is a great way to keep readers on your blog browsing through your archive, we know this leads to more return visitors and subscribers.

OK enough talk lets see it in action, i have added The Slide to our Social Icon site so you can check it out there.Follow the link to the site below, click on any of the posts, scroll down the page and you will see the recommended post slide out.Then check out the video and steps below the add the slide to your blog.
Click Here To View Full Post >>

6 Top Tips To Avoid Blog Burnout

Being a blogger these days is not an easy task on hand.Many are required to handle multiple blogs concurrently. If you are a blogger, then you will agree that blogging is quite a time consuming process. Blogging might seem easy at first sight, but it really is a complex multi-stage process. It starts with getting together pieces of data followed by a thorough analysis and ends with a neat compilation of the required information. The bloggers are very zealous about their job and it may so happen in the process that they lose the trail of time. But one needs to be cautious with such an involvement because sooner or later, it will affect your physical and mental health.

If blogging is taking a toll on your body, and you already feel like a blog-burnout, then here are some interesting and effective ways to rejuvenate your mind and body

1. Bury the unwanted blogs

You may be emotionally attached to most of your blogs but one need to understand that if a blog is not getting a dose of traffic, then it simply means that the purpose the blog serves is no longer needed. So you might just want to end up working on such blogs.

2. Prioritize your work

Give the important tasks in your life a firsthand priority. Do not start new blogs if they are not really required. Channelize your energies towards the accomplishment of your objectives.

3. Focus on worth, not on figures

If you are frequent blogger, then you might consider reducing the amount of posts and rather focus on the quality of posts. A good read will almost always attract readers as compared to a post which is simply a streak of words.

4. Unleash your social life

Blogging can in no terms serves as an alternative to friends and family. If you have started taking your family for granted because you have been busy blogging all the time, then it is time to rethink. Scheduling your day to carve out time for your close ones can be an excellent move. After all, family comes first.

5. Give yourself a break

Do not feel guilty if you missed blogging about something significant because you had to cater to something else that was equally or more significant. The essence of blogging is that you should make your work matter. Simply blogging about any and everything that comes your way will not help the cause.

6. Escape from the web of wires

If you feel like going for a movie or a jog in the park, then go for it. Sitting in front of the PC all day will not help your brain’s creative juices to flow. But an exposure to fresh surroundings can really help to come up with those creative ideas.

On a conclusive note, blogging is not the only facet of your life. It is only an important part of your life just as many other things are. Whenever you find yourself in the blog-burnout condition, simply remember the fact that taking care of small things in other aspects of your life can make the big things take care of themselves.

By Guest Author -Bethany Winston is very passionate about blogging and writing. She is a gadget freak and loves to write on technology. Her article includes various aspects associated to tech help and currently she is working on two varied topics like Emergency Shelter and 3D Camcorder.

Write A Guest Post - See how you can benefit from writing a guest post.

Updated Snow Fall Effects, Merry Christmas Banner And Christmas Theme Templates For Blogger

In the build up the Christmas over the last few years i have published some seasonal posts with gadgets and widgets to add some Christmas cheer to your blog.These posts have proven very popular, the first snow fall effect for Blogger i published when Spice Up Your Blog was only a few months old in 2009 brought in a lot of new readers.So over the last week i have been working on updating the posts, the script for one of the posts "10 Falling Christmas Objects" had stopped working.I have changed that post completely and it's working fine now.Along with that post we have two other posts with snow fall effects, a stylish Merry Christmas banner that sits in the top corner of your blog and a a collection of Christmas templates on our templates site.

List Of Christmas Gadgets And Tutorials

1. Original Christmas Snow Fall Effect For Blogger.

2. Colored Christmas Snow Fall Effect For Blogger.

3. 10 Different Falling Christmas Objects For Blogger.

4. Stylish Fixed Corner Merry Christmas Banner For Blogger.

5. Christmas Theme Free Blogger Templates.

Hope you find them useful and an early Merry Christmas from Spice Up Your Blog.

Drop Your Comments And Questions Below.

Make Your Blog Sticky With Images, Aesthetics and Content

The stickiness of your blog is one of the most important measures of its success. You may be able to drive a large number of visitors to your blog, but unless the visitors stick around and engage with your blog closely, and return repeatedly, you may not find sustainable success in the highly volatile and mercurial world of blogging.

Creative Use of Images

Many bloggers commit the cardinal mistake of over-emphasizing on the quality of written content while ignoring the importance of images in the process. Images help to arouse the curiosity of a new visitor, and get him or her drawn into your blog’s great content. An average blog visitor’s attention span is very limited because the choices for readers are too many out there in the free world of blogging.

Therefore, unless you make a creative use of images you may end up with a blog that appears drab, unexciting, and visually unappealing. Many visitors to such a blog may make a quick exit without waiting to check the quality of its content, if the design and appearance of the blog does not appear inviting, refreshing, and somewhat rewarding.

Images are easily obtained through sites like iStockPhoto, Jupiter Images or Shutterpoint. Tools like Zemanta can also help bloggers find images that fall under GPL and Creative Commons licensing.

Encourage RSS Subscriptions

In a highly competitive world of blogging, it has become very important to include an RSS feed and invite the readers to subscribe to the blog. This will help to create a loyal blog readership because the blog posts will drop directly into the subscriber’s mailbox. RSS feed is one of the biggest reasons of the success of prominent blogs around the world.

Tools like RSS 2.0 and Atom 1.0 are built right in to WordPress and Blogger so you can get a feed set up rather easily for your readers.

Smart Blog Design

Bloggers who are keen to enhance the stickiness of their blog for the long haul cannot afford to ignore blog design. New visitors tend to judge a blog within the first few seconds of their visit. If they find the blog confusing, cluttered, or difficult to navigate, a majority of them will not wait to stick around to read too much of the content even of the content that was read was marvellously written. If the placement of ads takes precedence over the placement of content, it can put off many visitors and kill the stickiness of a potentially impressive blog (see Myspace).

Clear Blog Branding

Your maximum effort should be invested in creating a great homepage that draws visitors into the blog. A new visitor should be able to know exactly what the blog is all about almost at the first glance itself. Blog design, title, headlines, taglines, logo, and navigational elements should all work to communicate effectively about the blog’s content.

Compelling Content

The backbone of any sticky blog, ultimately, is the quality of its content. A blog that makes outstanding promises at the outset and delivers little in terms of content is likely to fizzle out soon. The content must be relevant and sharply focused to the tastes and preferences of the target audience.

Furthermore, it is critical that the content must be updated regularly. Each time the blog should have something new and exciting to offer to the readers. In a fast-paced world of blogging, the blogger cannot afford to take it easy or become complacent about dishing out and providing new content consistently.

While any one of these techniques can help keep your readers engaged longer on your site, a combination of them will help keep your readers focused on what your site has to say to them and will develop a much stronger community around your blog.

By Guest Author -Jon writes about Promotional codes and discounts for different coupon blogs that share Jupiter Images coupon and iStockPhoto promotional codes. Currently, he writes a coupon site that offers the latest Jupiter Images coupons and iStockPhoto promotional codes to help people save money on stock images.

Google Plus - Create A Facebook Style Fan Page On Google+

Google Plus has been live online since the end of June 2011, while it started growing at the speed of a runaway train questions are being asked as to it's future.Recently however Google have added a Google Plus Pages option for Business, Bands and products.Google Plus Pages are not just like Facebook Pages they have almost the exact same format.So for us Bloggers, we can as on Facebook create a page for our blog on Google Plus.Creating the page is quick and easy and in this post i will walk you through he steps.

Create A Google Plus Fan Page For Your Blog

Step 1. Go to the Google Plus Pages : Create Google Plus Page.

Step 2. Pick a category in on the left of the page, Click "Product Or Band".

Step 3. Add your page name (The Name Of Your Blog), and blog address in the website field.

Step 4. Agree to the terms and click create, that's it.

Check out the Spice Up Your Blog Google Plus Page.

Drop your comments and questions below.

A Stylish Css3 Fixed Position Vertical Side Menu For Blogger

So many sites we visit now have a navigation menu fixed to the side of the page for easy access to important pages.In this post i have a very stylish and colorful menu you can fix to the side of the page on your Blogger blog.The menu will stay in place even when the reader scrolls down yet doesn't interfere with the content.The menu has 5 icons that on hover scroll out to reveal their purpose, so for example the home icon on hover scrolls out the word 'Home'.The 5 icons are for Home, About, Services, Portfolio and Contact Us.While you cant change the icons, you can change the text for each icon for example the portfolio icon could be changed to archive.

The menu is made up almost completely of Css3 with just one image and is quick and easy to install.All the credit for the menu goes to the awesome Tutorialzine, we have covered many of their tutorials previously.Below you can see a live demo, hover over the icons to see the scroll out effect.


Click Here To View Full Post >>

New Ready To Use Rss And Social Icons For Your Blog

In this post i have a brand new set of stylish icons you can use on your blog for readers to subscribe and follow you on social platforms.I really liked the look of this icon set and it includes an icon for Google + (Plus) you can use for people to check out and follow you on Google's new social network.In total i have four icons here for Facebook, Twitter, Google Plus and your Rss Feed.However the complete set has 24 icons for other sites including YouTube, LinkedIn and Stumble Upon, the complete set can be found on Social Icon Studio.

Live Preview


Click Here To View Full Post >>

New Features And Updates For Blogger

Over the last few weeks the Blogger team have been busy with some new updates and changes to existing features.
Click Here To View Full Post >>

Add A One Time Email Subscription Pop Up Form To Blogger

So many blogs and websites i visit these days have implemented a pop up subscription form for their newsletter.I'm sure you have seen it, you land on a site and after a few seconds a form appears asking for your Email to subscribe.While these can annoy some people they have been proven to have a dramatic effect on the numbers of subscribers.In this post i will show you how to add a similar form to your Blogger blog but with a form to subscribe to your blog via Email Rss provided by feedburner.The form is a one time pop up so if someone visits your blog every day it will remember they visited before and not show the form again.
Click Here To View Full Post >>

How To Turn Off Or Disable The New Blogger Lightbox Feature

In the last post i brought you news of how Blogger had just added Lightbox to all Blogger Blogs.While lightbox is a neat way for people to view images in your posts it has not been to every ones taste.I have received a few comments and Emails asking is their a way to turn off light box or disable lightbox.This morning i spent some time trying to work a simple line of Css to override lightbox but to no avail.However i did come across a hack on another blog that does the job perfectly.

This hack is from the blog Code from an English Coffee Drinker (Love the title make sure to check it out) and it works a charm.I also have a video tutorial at the bottom of the post.

Override Lightbox On Blogger Blogs

Click Here To View Full Post >>

Lightbox Image Overlay Effect Is Now Default On Blogger Blogs

Back in May this year i showed you how to add a jQuery Lightbox Image Overlay Effect For images on your blog.Today the Blogger team have made a version of this default on all blogs.Previously Images when clicked opened as a seperate page, with the lightbox effect images pop up with the background darkened also thumbnails of other images within the post are listed below.So just upload images as normal and they can be viewed in a brand new way.

Introducing Lightbox, the latest in a series of Blogger updates aimed at giving you an improved and modernized blogging experience. Lightbox is a whole new way to interact with photos. When clicked, images now expand into a shiny new overlay that displays them at their full size for optimal viewing.

Click the images below to see the effect in action.

Another great new feature for Blogger, check out the Blogger post on lightbox Here.

Drop your comments and questions below.

Know The Rhythm Of Your Blog

This is a guest post by Jessica Meyer.

When you start your blog you may have no conception of how long you're going to be doing this for or the time and effort that it is going to take on your part, but when you become a seasoned blogger, you'll be able to look back (and look forward) and see your personal seasonal rhythms with your blog.

We all have our ups and downs and habits that we get into, and our blogs will reflect that over time. Right now, it's getting into fall, and for a a lot of people summer is one of two extremes - it is either the time where you're lazy and don't maintain your blog as much, or you're coasting along with your blog because everyone is engaged and involved. After this, you're going to have to make one transition or another - either get more involved with your blog and write more or expect less involvement from your audience. Or you're one of those lucky few that get consistent involvement year round - know I strongly dislike you.

For those who are just starting - know that you will likely get into routines in different seasons (the weather may not correlate...but it will happen.) Blogs have life cycles and phases just as a business does. You'll probably get into a winter funk, and there will be some bumps and scrapes along the way - balancing life, work and blog isn't always easy.

As I said, your seasons may not match what you're seeing outside of the window, but you really should take note of what kind of life cycle your blog has, where the ups and downs and peaks and valleys usually occur. If you don't notice these things, your blog could become completely stale or irrelevant without you noticing. Years will run by you, and your blog hasn't grown or evolved at all. Maybe you don't get to know your audience, or haven't don't any kind of SEO, but SEO is a whole 'nother topic.

Just as a fact of life in the real-world seasons of Fall and Winter, you will be faced with a lot more holidays - from Halloween to Christmas. You'll need to decide to what degree you're going to want to share your personal experiences of the holidays, or the ways in which you're going to allow the holidays you do (or don't) celebrate color your content.

Winter

The winter of your blog is a test of discipline. Long days and little to show, at this point you're just trying to get through your posting schedule. You don't have the heart to start any new promotions or launch any new projects. You just slog through the mud and keep on keepin' on. Do you have the devotion to really keep doing this blog? Your winter is your benchmark.

Spring

Spring - buds are blooming, birds are chirping, the sun is shining. In short, things are looking better. You've got new subscribers or maybe you just got pitched a great promotional deal, but things are going so much better than they were. Whatever is making you excited about your blog again, you're posting so much more and are engaged and active, riding on cloud 9.

Summer

As I've mentioned earlier, the summer of your blog (which likely corresponds to the actual season) can be one of two things. Either you're hot and lazy and kind of abandon ship with your blog, posting less frequently, engaging less often, or you're continuing the high of summer and you could almost be on vacation because things with your blog are evolving so naturally and everything is going so easily.

Fall

The fall of your blog is the time that you need to take to analyze your blog. Do you need a new design? (Do you want a new design?) Do you need to reach out to a different audience? Guest post somewhere? Start in on a new topic or a new angle? Fall is the time to ask those questions, and figure out what is going on a bit deeper with your blog - figure out how to grow it, how to nurture it.

Don't forget your blog is a reflection of you, and you go through cycles and rhythms. Follow them, understand them. Don't try and fight them or get frustrated with it. Ups and downs happen with everything. Keep in mind the larger picture of you and your blog and how they fit together - and a big part of that is identifying and acknowledging the rhythms that your blog goes through.

By Guest Author - Jessica Meyer's favorite (real world) season is winter - she loves seeing the snow, the outdoor nativity sets, the lights, the carolers, the hot chocolate...everything that comes along with the season, including the cold!

Latest Tweet Twitter Bird With Speech Bubble Gadget For Blogger

Using the latest Twitter API it's become easy to create a neat latest tweets gadget.In this post i will show you how to add a Twitter bird with a speech bubble containing your latest tweet to your blog.The idea comes from Paulund.co.uk and all that's needed is some Css and a few lines of script.

Add The Latest Tweet Twitter Bird To Your Blog

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 > Template Designer, Then Advanced > Add Css





Step 2. Copy and Paste the following code into the Css section (See Paste Code Here Above)

#twitter_update_list{
list-style:none;
}
#twitter_update_list li{
background: #f4f8f9; /* Old browsers */
background: -moz-linear-gradient(top, #f4f8f9 1%, #e8f0f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f4f8f9), color-stop(100%,#e8f0f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f8f9', endColorstr='#e8f0f2',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* W3C */
box-shadow: 1px -1px 2px #bbc6c8;
-webkit-box-shadow: 1px -1px 2px #bbc6c8;
-moz-box-shadow: 1px -1px 2px #bbc6c8;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
padding:15px;
width:250px;
}

#twitter_update_list::after {
content: "";
position: relative;
left: 30px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #e8f0f2 transparent;
display: block;
width: 0;
}

Step 3. Thats the Css added now return to the design page and click Add A Gadget > Choose Html / Javascript





Step 4. Copy and Paste the following code into the Html/Javascript gadget

<ul id="twitter_update_list">
<li>Loading Tweets..</li>
</ul>
<a title="Follow Me" href="http://www.twitter.com/paulcrowepro" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdGBUQt4u6KqA01CUTKaXRipfBpX6sPcR2GfSPu1XSNPi97Q3kfPMWKFkxhJ_WarIUHo4puZ8sVM1dY_ieX0R4J-2t-l8PN0z3j3LHrHbQtT57IKsAMLT3qbmhtl0zYxdA-uUUQgNpcPyW/s1600/twitter-bird-gadget.png" /></a>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/paulcrowepro.json?callback=twitterCallback2&count=1"></script>

Important - Change my Twitter username paulcrowepro x2 with yours.

Step 5. Click Save and check out your new Twitter gadget.

That's it a very simple yet stylish latest tweet gadget, make sure to check out more of our Twitter Gadgets And Tutorials.Thanks again to Paulund.co.uk

Drop Your Comments And Questions Below.

The Default Theme Nivo Featured Posts Slider For Blogger

In the last post i showed you how to use the Pascal Theme Nivo Slider on Blogger.So in this post i have the second of the three Nivo themes, the default nivo slider.The default theme while looking more basic still has the cool transitions and other options like pop up captions.The slider is from Dev7 Studios and you can see the live demo below.


Click Here To View Full Post >>

The Pascal Theme Nivo Featured Posts Slider For Blogger

The Nivo jQuery powered featured posts slider is one of the most popular sliders available.The nivo slider comes in three themes with various options for the design and functionality.I have received lots of requests for a tutorial on using the nivo slider on Blogger so in the next few posts i will show you how to use all three themes or versions of the nivo slider on Blogger.In this post we will start with the Pascal Theme which looks amazing.The Pascal theme uses the various transitions that make nivo so popular but also has some unique features.The slides appear on a stylish background with a 'Featured Ribbon' in the top corner and you can optionally add captions and links to the slides.Credits for the Nivo Slider go to Dev 7 Studios, you can see it in action on the demo page.

Add The Pascal Theme Nivo Slider 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)

]]></b:skin>

Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>

Important - This is a scroll box make sure to get all the code.

/*Start Slider Css*/
/*
* jQuery Nivo Slider v2.6
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/


/* The Nivo Slider styles */
#slider{
width:618px;
height:246px;
}
.nivoSlider {
position:relative;

}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
/*
Skin Name: Pascal Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: fixed
Description: A nice, light skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom & Pascal Gartner
Author URI: http://dev7studios.com
*/

.theme-pascal.slider-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPIDJhPnbcReDKQVQTV8fv0QT_fM_tcEJLw00cPyxHNbcYQir4-j3N6hCTVNwPX_huaGtXoFWot3THs_acL4OwWCOC2MCWqC1WgLVihe7h7KgG_4Fq4d-LSfweLsHyNZcNxNhiqZQiJSor/s1600/slider.png) no-repeat;
width:668px;
height:299px;
margin:0 auto;
padding-top:17px;
position:relative;
}

.theme-pascal .nivoSlider {
position:relative;
width:630px;
height:235px;
margin-left:19px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0FJUooD4O-QVj5qDXjy6oe2y0nbR5Mo0OQZBgk2pfHCuU0yARYehPaQzuwaBv63Y9qAJjW5Quh7vyLT_2PFK-J7AH0TBGr8CU3ff2cFqFvfTWVCWDwjyph_3GevoC5tXw5PRB43xIQXiH/s1600/loading.gif) no-repeat 50% 50%;
}
.theme-pascal .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
width:630px; /* Make sure your images are the same size */
height:235px; /* Make sure your images are the same size */
}
.theme-pascal .nivoSlider a {
border:0;
display:block;
}

.theme-pascal .nivo-controlNav {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3D73p1hzMzk0pOS2JIWF5LtSkJxoTx9bpnjVOnES71PDBx0LtxN8YHOJ0r-XEC8pTfFdghVMcl-XmHf1RBgLKGoZ90JJKNPOLbhtgNvCnBxiEGjbezWQko51-mUyTED8f8kXVFFgwxU6h/s1600/controlnav.png) no-repeat;
width:251px;
height:40px;
position:absolute;
left:200px; /* Tweak this to center bullets */
bottom:-42px;
padding:8px 0 0 82px;
z-index:20;
}
.theme-pascal .nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2SWWLSbnvdFtkoRGKZSF1StxMe5oCgBXs_OpmJ5xaeV0MX5OIf8U7F8-iy9nkiHrOYUu7Y7Hd3OqXqwIXUYi_V_CP2cQQM2BuFG2dOYF4mxRrmphQJURpC7utbVZWvbld6VfNWbI9wn1v/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.theme-pascal .nivo-controlNav a.active {
background-position:0 -22px;
}

.theme-pascal .nivo-directionNav a {
display:none;
}

.theme-pascal .nivo-caption {
bottom:40%;
left:auto;
right:0px;
width:auto;
max-width:630px;
overflow:hidden;
background:#fff;
text-shadow:none;
font-family: arial, serif;
color:#4c4b4b;
}
.theme-pascal .nivo-caption p {
padding:5px 15px;
color:#333;
font-weight:bold;
font-size:27px;
text-transform:uppercase;
}
.theme-pascal .nivo-caption a {
color:#333;
font-weight:bold;
font-size:27px;
text-transform:uppercase;
}

.theme-pascal .ribbon {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp8vxvtOvdh9Znw_WIXeA_cIJGZHfZI7-TyoqA5wZ1jvE3MADJvt6NWRvHZhzEwzEUS8Grsy5pcjji973_p3NT8ZRLOKZ-tbWwCTIyf1qsxXdCnoeF-nxBqKDPWyIC6JUou7xKoD87crkT/s1600/ribbon.png) no-repeat;
width:111px;
height:111px;
position:absolute;
top:-8px;
left:-8px;
z-index:300;
}
/*End Slider Css*/

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)

</head>

Step 5. Copy and paste the following code directly above </head>

If you have previously added jQuery script to your template remove the line in green.

<!--Start Slider Scripts-->

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>

<script src='http://yourjavascript.com/8855314511/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>
<!--End Slider Scripts info @ http://www.spiceupyourblog.com-->

That's the Css and scrips added for the slider to work next we add the slides.

We will be adding the slider 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.

Adding HTML For The Slides

The HTML for the slides goes in a Html/Javascript gadget in the cross column section as shown above.

Below is the html for the slider in the demo.There is no really easy way to explain it so you will need to take a minute to figure out the code.I have the URLs (The Destination of the slide when clicked) is in red, the image is in green and the caption (Optional) is in yellow.Each slide works in the same way, you can just copy and paste this code and replace the URL, Image and captions.To add extra slides you can repeat one of the sections and once again add your URL, Image and Caption.

<div class="slider-wrapper theme-pascal">
<div class="ribbon"></div>

<div id="slider" class="nivoSlider">

<a href="http://www.spiceupyourblog.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipUDF9m9-OzawbXyYMU5okc3Yj4WJ1hhlVC0ii4Uxq3WzopAfzjoq4La1ny9vjABCnGn5T26HQKziQcIqDsvRb2jbfEbVUn_WhMLOvXkTYPAG6MOdvtC3_vSmuZjrftW1BKE5bwW1b_kV2/s1600/nemo.jpg" alt="" /></a>
<a href="http://www.spiceupyourblog.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN4-Vwt8WOxyR6lswT_vlgdtKpR6jDamF_JrdKeprKlwBWtIDt41vCnEdKO1QEkgekvHf6dvKgE42a9yLdivpiPNqj6PUyZlVf6-MQ1UCO3VmmZiusUaaIBbckq8_IgNOClN6vvoBSTDe-/s1600/toystory.jpg" alt="" title="This is an example of a caption" /></a>

<a href="http://www.spiceupyourblog.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj4Eznl2B6bpg_zgekrXBhdE1uW9vn6_Gxc0PeVzkb9q3BlcdW3xslpTjt-GD6f8XVxg5-mhw7rl6jU7jo-hFk8Zx6iLhjhftJouEuWPdNnK3KcMZL7K-syjrEs5LBIVtNYmJt-4A32GwM/s1600/up.jpg" alt="" /></a>

<a href="http://www.spiceupyourblog.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5D0M04B6v63appTryCrgczreK9BwcPhx2fOachmqZ-MXR4Wo9STiwjJ-eR3VCGk_9W03-oNl9vQ5zyhMFLxak97m1StOHJApalFuSVN2H4A46thBgIE8p4_jxyXy8P1kmuVVnwhk5UGCP/s1600/walle.jpg" alt="" title="#htmlcaption" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This is an example of a caption.
</div>

</div>

That's it over the next few posts we will cover the other versions of the nivo slider.Make sure to check out more of our jQuery tutorials.

Drop your comments and questions below.

How To Add Stacked Polaroid And Other Cool Effects To Images

There are hundreds of image editing and resizing services available online so finding a quick and easy option can be hard.One service i use regularly is Dr Pic as it has just a few quick editing options and a re size option with an instant preview.The stacked Polaroid effect is probably the one i use most and i have received a few Emails asking how it's done.So i have created a short video to show you how to use Dr Pic to edit and re size your images.
Click Here To View Full Post >>

A Neat Bold Red Drop Down Menu For Blogger Using Just Css

In the last post we had a tutorial for a very unique style of drop down navigation menu for Blogger.That menu used a horizontal bar as the drop down to display links on hover.This menu uses the more conventional style of a vertical drop down to display links.It has a large bold red on grey color scheme that stands out and looks great.As with the last menu it's built purely from Css using just two images.Below you can see the screenshot and a live demo to see it in action.





This menu is also courtesy of the awesome Free Css Menu, let's add it to your blog.

Add The Bold Red 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)

]]></b:skin>

Step 3. Copy and paste the following code Directly Above / before ]]></b:skin>

Note - This is a scroll box make sure to get all the code.

/*Start Css Menu*/
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimTwg5sk8zNhFGoE6JfCZ4pZKFWhjDW9IjYpBkkCJQJGAsmyFepBJBRYo2rRyQ7XvERBvZvDE8kgWVM2G-1BC3kt-91N2BGbfxbDqapP-1oLrIV_v2H6wANdb747SFPZM3ZsIO9GipeeTZ/s1600/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNQsJa9k5QsTDHNtKZVbRuMQCgMDtHVsIwO7ivkbPEw-Rp7K5QKvhMhfA5cLUKjwKHBMVX7ZRzS5_CQGlVT8Stwj4WnWcbSCPern86hHgn9whbfFZ_R-LoDhChuAe0ob3pIozmxmz2lnoQ/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}

/*End Css Menu from http://www.spiceupyourblog.com*/

Step 4. Save your template.

That's the Css added next 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 :

<div class="menu">

<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#" >Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>

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

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.

That's it simple ! Make sure to check out more of our Css tutorials and Blogger gadgets.

Drop Your Comments And Questions Below.

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.