In comments of my previous post "Using Jquery to make an one-time subscription pop-up" ,YellOblog said that he want the pop-up appear after an amount of time and the pop-up is always at the center of viewport .Thanks YellOblog for the suggestion . Here is the complete code for your request :
Live Demo
To make a Subscription Pop-up ,you can read my post "Using Jquery to make an one-time subscription pop-up" and follow steps from 1 to 3 .
For the step 4 - Jquery code ,replace the code in the post "Using Jquery to make an one-time subscription pop-up"
with this one
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="http://dinhquanghuy.110mb.com/jquery.cookie.js" type="text/javascript"></script>
<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>
pay attention to this line setTimeout("loadPopup()",5000);
5000 is the delay time in millisecond . You can set another value if you want .
That's all . I hope this update can fill your requests and make the subscription pop-up more profesional. You can check it out yourself and see the result .
By The Simplexdesign
▼
Wednesday, November 30, 2011
Monday, November 28, 2011
AdSense Profits Interview: TucsonOnTheCheap.com
As I mentioned a couple of weeks ago I’ll be posting interviews with some of the people who took the AdSense Profits Course back in June. Below you’ll find the second interview, with Kate Reynolds. She owns TucsonOnTheCheap.com, which is a website dedicated to finding the best deals in her city. She pretty much doubled her AdSense earnings within months, so check it out.
1. When and why did you start TucsonOnTheCheap.com?
I’m a freelance writer and belong to quite a few online writing groups. About three years ago, an online friend in one group starting writing about her blog, Atlanta on the Cheap. Her inspiration was to post bargains and deals attractive to Atlanta visitors. Well, a bunch of us thought that sounded like a great plan–especially since this economy is rough on freelancers–and we formed a group. We call it Cities on the Cheap (http://CitiesOnTheCheap.com), and it’s a network of hyper local bloggers. All of that is how TucsonOnTheCheap met the world. Here’s one interesting gem we all learned: we may have started by thinking our blogs were intended for visitors to our individual cities, but we quickly learned that our true customers were local. It’s good to be flexible and observant. We found our niche.
2. What goals did you have for it initially? Were you planning to make money?
To answer the second question first: You bet. I knew exactly nothing about making money from a blog, but I knew it had been done. Initially, I wanted to post only ephemeral sorts of deals (a dinner bargain at a local restaurant good for only three days etc.). I later learned that people were using my blog to find fun things to do in Tucson that don’t cost a lot. So it became a blog that highlighted not just passing deals but also inexpensive ways to have a blast (festivals, cheap but good Mexican restaurants etc.). A tip: Try to make your blog useful to someone. That’s the key element that determines what I post. Is the information useful?
3. When did you decided you should start monetizing it, and did it go for the first months?
I put up AdSense ads about two months after starting the blog. Nickel after nickel rolled in until I had earned a whole dime. I’m kidding, of course, but quite seriously it didn’t go well. I recall that I didn’t earn my first check from Google until about four months after putting up the AdSense ads (Google only sends out checks after you earn at least $100). After that, I regularly earned the minimum each and every month. So AdSense has been kind to me after a slow start.
4. Do you know HTML/CSS? What other technical knowledge do you have?
I do know HTML but not CSS. But I cheat: my husband is a computer guru, and he helps when I need something special. I try not to bother him too much. Knowledge of CSS would be a plus, however my blog is on WordPress, and CSS is not essential.
5. How do you promote the website?
For a while I put up AdWords, but I stopped when I realized that AdWords is a better tool for people with an actual product to sell. In my case, I give away information and hope people will click on my ads or buy from my affiliations. I do regularly tweet and make Facebook status changes. I try to engage with my readers on Facebook and have become friends with some. Twitter and Facebook are huge for me. StumbleUpon is ok, but the people who come via that route are not my target audience and they don’t stay or come back. So Twitter an Facebook are fine traffic sources, but organic search is better. Some people may not understand that good SEO is also good website promotion–in fact, it’s vital to getting the word out. What good is an excellent blog on any subject if nobody knows your blog is there? Most of my visitors come from organic Google search.
6. How much were you making before you joined the AdSense Profits course?
Here’s the breakdown on the months just before I took the course:
Here’s the breakdown on the months just before I took the course:
March 2011: $355.36
April 2011: $418.87
May 2011: $328.35
April 2011: $418.87
May 2011: $328.35
The average was around $360. As for traffic, I was receiving around 15,000 unique visitors per month.
7. How did your earnings increase after it?
On the months that followed the course I noticed a big increase in earnings. Here’s the breakdown:
On the months that followed the course I noticed a big increase in earnings. Here’s the breakdown:
July 2011: $855.94
August 2011: $669.95
September 2011: $713.39
August 2011: $669.95
September 2011: $713.39
The average is $740, so you can see my earnings pretty much doubled in a matter of months. My traffic increased as well.
8. What concepts/strategies did you learn from the course that had a positive impact on your earnings?
I had not understood the value of ad placement and size until I took Daniel’s AdSense class. Daniel personally looked at my site the first week or so of the class. He made personalized suggestions that I implemented immediately (talking about ad placement & size here). I kid you not: within maybe two or three days I had earned so much more than usual that the entire cost of the class was covered. My AdSense revenue has remained solid since then.
But that’s not all I learned. I had no idea about the world of buying and selling websites/blogs. I was simply stunned. Not only that, but I have decided to sell Tucson on the Cheap soon and plan to use methods I learned in the course. Who knows? I might wind up buying and selling websites for a living now!
9. What tip do you have for beginners that are just getting started with Adsense?
Tip # 1: The more specific your blog niche, the better Google will be able to target your site.
Tip #2: Learn where to place your ads on the page. It matters. Really.
Tip #3: STUDY the AdSense rules. Google takes its services seriously and will throw you out if you do not follow the rules. So sit down, read them, and learn.
Tip #4: Grow your audience before placing ads. In the first place, Google shows preference to older sites, and it also shows you to be a reliable blogger who isn’t looking for an easy buck. All that matters to Google–and to you, too.
10. What plans do you have for TucsonOnTheCheap.com, and how much do you think it can potentially earn per month?
I think TucsonOnTheCheap can be a highly profitable blog, and someone can make decent money with a couple of hours of work per day. That someone should be a person who understands marketing (not one of my strengths). I think my blog might potentially earn several thousand dollars/month. But I am ready to move on, and I am hoping to sell TucsonOnTheCheap soon as I mentioned.
by Daniel Scocco
Thursday, November 24, 2011
How to make a blogspot template : General steps of making blogspot template
This is the last post in series 'how to make a blogspot template' .In this post ,I just want to tell you what I did when making Simplex's templates . I do not focus on HTML/CSS /Javascript because you can find documents on these easily in internet . I also do not go further on Blogger template structures/sections /widgets/data tags/API ,because they are mentioned in previous posts . Only work orders ,tools ,and some tips .
Unlike other platforms such as wordpress stand alone or joomla which a template comes with many files ,blogger template is in one file xml only .
As we know ,blogger template contain sections . Here is the order of these sections :
Unlike other platforms such as wordpress stand alone or joomla which a template comes with many files ,blogger template is in one file xml only .
As we know ,blogger template contain sections . Here is the order of these sections :
- First ,header
- Second ,blogpost
- Third ,sidebar
- Last ,footer
All we need to do when making a template are :
- Place sections and widgets in right order . Add/remove sections /widgets
- Add HTML arround these sections ,and use CSS to decorating them .
- Add javascript /jquery for special effects ,get the feeds and mashup homepage .
1,Place sections and widgets in right order .
Blogspot is made up with sections ,widgets... so you have to place them in right order ,add more sections /widget for the function you want and remove unnecessary sections /widgets .For example ,in Simplex Blognews template ,I add more sections for page list ( in the top of page ) ,sections for advertising banner ...remove default sections and widgets in sidebar .
I also use conditional statement <b:if> to hide sections/widget in some specific cases . For example ,we all know blogpost widget show the post list /single post (see the post on blogpost widget here) ,but in thehomepage ,I don't want it to show up ,so I use a conditional statement to cover all blogpost widget
<b:if cond='data:blog.url == data:blog.homepageUrl'>
homepage content
<b:else/>
blogpost widget .....
</b:if>
homepage content
<b:else/>
blogpost widget .....
</b:if>
In the code above ,if the current page is homepage ,it will show homepage content , if the current page is a category page or single post ,it will call blogpost widget for processing content .
Or if we want to hide all the blog content when go to a specific page ,we can use a conditional statement like that :
<b:if cond='data:blog.url == "page url"'>
.....
<b:else/>
other content here
</b:if>
By add/remove widgets and place them in right order,we have the frame of a template .2,Add HTML and CSS around sections/widgets
We have a template's frame with sections and widgets,now we need to add more HTML tags around and decorate these HTML tags with CSS to make it display as we want : some images ,some text in bold , fonts ....you can do all of them in this step .Firebugs is the best tool for this work ,you can find the post on how to use this tool here . It will reduce your time on working with CSS and HTML .You can use this tool to inspect elements on websites which has design you want and find out which HTML/CSS their designer used . CSS tags information and cheatsheet can be found in this post .
To get some inspirations ,you can go to template galleries ,collections ,or go to famous blogs on design . Sometimes ,combining the elements which you love in various templates can give you an unique design .
3,Add Javascripts/jquery
Because blogger doesn't allow server side programing , Javascript/Jquery will give us a solution for mashing up a homepage . By using Javascript to get feeds from categories in blog,split the feed into post titles,post summaries ...and then display them ,we have a good homepage ,as you see in Simplex' templates .
Javascript/Jquery is also used to make special effects,for example ,sliders,hover buttons ,menu ...
You can find out more post on using Jquery/Javascript in SimplexDesign blog .
That's all steps I applied when making a template and it work for me ^^ I can't tell you how to make a specific template ,because it's very long and take times . I hope with series 'how to make a blogspot template ' you can :
-Understand the basic of a blogspot template ,structure,what it contain
-Functions of sections /widgets,how they work .Meaning of data tags /Api and statements.
-General steps to make a template,what we have to do ,what we have to search in google for making an elements ....
By reading all posts from start to the end ,I hope every time you see the code of Simplex templates ,you can understand what I did,and then make your own customization ,you can also apply them in making your own template .
It take time to search,read and then apply to make a template . It's not easy . But if you want ,you can do it .Thanks for supporting me all the time .

