Google Panda 2.5.2

Monday, October 31, 2011 By Ragupathi

I always keep an eye on the posts over at the Search Engine Roundtable. A few days back there was a post about Google Panda 2.5.2, so I checked my stats.

My fitness blog has been affected, but I'm not sure exactly how it will affect the bottom line (sales/profits). It seems I'm getting more traffic from image searches and less from keywords--kind of like what happened with the original Panda algorithm.

But it's a little too early to tell exactly how this will affect me, and I'm sure other updates will come along. I'll just do my best to produce quality content in an SEO friendly manner. I'm not going to worry over stuff I can't control.

Logo Design Process Case Study – How to Create a Logo

Wednesday, October 26, 2011 By Ragupathi

Step 1: Logo Design Draft Concepts

After you’ve filled out your initial design information for LogoNerds, you will have to wait a couple of days for their first set of concepts. I always go with their $47 “Professional Business Logo” package since it comes with 6 different draft designs (and print ready images). The most exciting part of the logo design process is when you get those first drafts and have an idea where your logo is headed.

Step 2: Critique and Logo Revisions

Depending on the web site or job, sometimes I will just select one of their first drafts and go with that logo. This time around I knew I wanted something really great for the site, so I worked with LogoNerds to create the perfect logo. After looking at all of the logos for a couple days, and asking friends and family which logo they liked best, and why, I decided to go with CONCEPT 1 (top left). I thought it was simple enough to get the point across, but also fun and brandable at the same time.
I told LogoNerds that I would like to see if they could play around with the bone structure in the background and if they could create a new variation of the dog and cat faces. You can see their revision update below.

The new bone looked much better, and I liked the new cat and dog face even more. From there I gave the LogoNerds team a few ideas on how what colors to add into the logo. Their color update is shown below.

Step 3: Text Logo Revisions

The logo is looking pretty good now, and could be considered finished, but I still wasn’t loving the “PetFoodia.com” text beneath the logo. I then requested the team try and create something nice that would go along with the logo.
The next set of finished logos with a new font design can be seen below.
While some of the font designs looks nice, none of them blew me away. I like the concept on the bottom left logo, but it just didn’t look right. Once again, I went back to the LogoNerds team to request another text revision set, this time with “more simple” text concepts. Within a couple days I had another set, which you can see below.

I was much happier with this set of designs. They were much less advanced and colorful as the previous set, but I wanted something simple and to the point. I decided on the bottom left logo with, and to remove the tagline from the logo.

Step 4: Completed Logo / Files Recieved

After the thorough design and revision process, I was extremely happy with the end result. You can see the final logo below.

LogoNerds would complete the order and send over a final design zip with a variation of different sizes, colors and file types.
After looking over the whole process, and how many times I asked LogoNerds for a revision, it’s quite amazing the service they can offer for only $47.

Add A One Time Email Subscription Pop Up Form To Blogger

Sunday, October 16, 2011 By Ragupathi

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.

This tutorial was originally posted on the excellent Simplex Design blog so make sure to check them out.Below you can see a live demo.

Add The Pop Up Subscription Box 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

Design Edit Html Blogger

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 )

]]></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.

/*Subscription Pop Up Css*/
#popupContactClose{
cursor: pointer;
text-decoration:none;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
/*End Subscription Pop Up Css @ http://www.PromoteYourBlogger.co.cc */

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)

</head>

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

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/>
<script src='http://dinhquanghuy.110mb.com/jquery.cookie.js' type='text/javascript'/>
<script type='text/javascript'>
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
centerPopup();
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}

//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}

//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var windowscrolltop = document.documentElement.scrollTop;
var windowscrollleft = document.documentElement.scrollLeft;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
var toppos = windowHeight/2-popupHeight/2+windowscrolltop;
var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;
//centering
$("#popupContact").css({
"position": "absolute",
"top": toppos,
"left": leftpos
});
//only need force for IE6

$("#backgroundPopup").css({
"height": windowHeight
});

}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie("anewsletter") != 1) {

//load popup
setTimeout("loadPopup()",5000);
}
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
}
});

});
</script>

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

</body>

Step 7. Copy and Paste the following code Directly Above / Before </body>

<div id='popupContact'>
<a id='popupContactClose'>x</a>
<h1>Get Our Latest Posts Via Email - It's Free</h1>
<p id='contactArea'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=PromoteYourBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border:1px solid #ccc;padding:3px;text-align:center;' target='popupwindow'><p>Enter your email address:</p><p><input name='email' style='width:140px' type='text'/></p><input name='uri' type='hidden' value='PromoteYourBlogger'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/><p>Delivered by <a href='http://feedburner.google.com' target='_blank'>FeedBurner</a></p></form></p>
</div>
<div id='backgroundPopup'/>

Important - You need to change our feedburner username with yours.The username for your feed can be found at the end of your feed URL.For example the our feedburner URL is http://feeds.feedburner.com/PromoteYourBlogger , with PromoteYourBlogger being the username.

That's it all thanks go to Simplex Design.

How To Turn Off Or Disable The New Blogger Lightbox Feature

Sunday, October 16, 2011 By Ragupathi

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

Step 1. In Your Blogger Dashboard Click Design > Add A Gadget > Choose Html/Javascript

Step 2. Copy And Paste The Following Code Into The Html/Javascript Gadget Form

<script type="text/javascript">
//<![CDATA[
function killLightbox() {
var images = document.getElementsByTagName('img');
for (var i = 0 ; i < images.length ; ++i) {
images[i].onmousemove=function() {
var html = this.parentNode.innerHTML;
this.parentNode.innerHTML = html;
};
}
}

if (window.addEventListener) {
window.addEventListener('load',killLightbox,false);
} else {
window.attachEvent('onload',killLightbox);
}
//]]>
</script>