Tuesday, 27 September 2011

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 >>

Wednesday, 21 September 2011

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 >>

Monday, 19 September 2011

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.

Saturday, 10 September 2011

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.

guest blog postBy 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!

Friday, 26 August 2011

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.

View Demo Button

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.

Tuesday, 23 August 2011

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.

View Demo Button
Click Here To View Full Post >>

Monday, 15 August 2011

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.

View Demo Button

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.