Prolet
Filed under: Uncategorized | Tagged: Wordpress Themes | Leave a comment »
This post explains you how to show your ads right after blog title.If you are using Expandable Summary hack ( Read More! ) to show part of the post on the front page, it’s better to show the ads within the individual posts. For that you need to place ads code between conditional control statments. I have explain this in the following section. Following image shows how ad looks on individual posts but not on home page.
If you try to insert Google AdSense or any other JavaScript-based ad code to the template, Blogger may deny and return you an error message like this:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The processing instruction target matching “[xX][mM][lL]” is not allowed.
In case there’s no error returned, the ads still won’t show anything.
The problem is that ad code or client side javascipt code is not a valid XML. It will be confused when trying to interpret your template syntax.
The solution is replacing special characters or symbols in the script to HTML code. These HTML codes will be rendered correctly when the page is generated to the viewer. Following list shows special characters that need to be converted to HTML code.
Lets look follwing steps….
1. Take Your ads code ( I have used an example ad code, use yours )
<!–
google_ad_slot = “3780780821”;
google_ad_width = 468;
google_ad_height = 60;
//–>
<script type="text/javascript"
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
2. Replace as follows
Character | Replaced with |
< | < |
> | > |
” | " |
3. Converted code looks like as follows
<script type="text/javascript"><!–
google_ad_slot = "3780780821";
google_ad_width = 468;
google_ad_height = 60;
//–>
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
4. Now go to Blogger Dashboard >> Layout >> Edit HTML
5. Expand widget Template ( First take backup of your template )
6. Now search for this code
7. If you want to put the ads at the top of post or below post title, place it above this code, and if you want to put the ads at the bottom of the post ( footer ), just put it under this code.
8. If you have applied the “Read more” hack to show part of the post on the front page, it’s better to show the ads within individual posts.So place ad code between as shown below
put your ad code here….
The conditional code in pink will check whether the page is individual or front page.If the page is individual post page, than ads will shows below the post title otherwise ads will not show up ( for front page ).
Filed under: ..etc ) inside Blogger Post, Adbrite, How to insert Ads Code ( Adsense | Leave a comment »
1. StudioPress Red
Full Test of StudioPress Red (View Test Demo)
no. | Tested Criteria | Point | Pass | Fail |
1 | Template Support Available | 2 | ||
2 | Compatible with IE7 | 1 | ||
3 | Compatible with Firefox | 1 | ||
4 | Floating Content within post area | 1 | ||
5 | Auto adjustment within the post area | 1 | ||
6 | Proper Image Alignment | 1 | ||
7 | Proper Display of Links and Quick Editing | 1 | ||
8 | Proper Display of Blog Archive and Followers Gadget | 1 | ||
Total | 9 pts | 6 pts | ||
Theme Score | 67% |
2. IcyBlue
no. | Tested Criteria | Point | Pass | Fail |
1 | Template Support Available | 2 | ||
2 | Compatible with IE7 | 1 | ||
3 | Compatible with Firefox | 1 | ||
4 | Floating Content within post area | 1 | ||
5 | Auto adjustment within the post area | 1 | ||
6 | Proper Image Alignment | 1 | ||
7 | Proper Display of Commenting System | 1 | ||
8 | Proper Display of Links and Quick Editing | 1 | ||
9 | Proper Display of Blog Archive and Followers Gadget | 1 | ||
Total | 10 pts | 8 pts | ||
Theme Score | 80% |
3. Seabreeze
no. | Tested Criteria | Point | Pass | Fail |
1 | Template Support Available | 2 | ||
2 | Compatible with IE7 | 1 | ||
3 | Compatible with Firefox | 1 | ||
4 | Floating Content within post area | 1 | ||
5 | Auto adjustment within the post area | 1 | ||
6 | Proper Image Alignment | 1 | ||
7 | Proper Display of Commenting System | 1 | ||
8 | Proper Display of Links and Quick Editing | 1 | ||
9 | Proper Display of Blog Archive and Followers Gadget | 1 | ||
Total | 10 pts | 8 pts | ||
Theme Score | 80% |
4. Green Tech 2
no. | Tested Criteria | Point | Pass | Fail |
1 | Template Support Available | 2 | ||
2 | Compatible with IE7 | 1 | ||
3 | Compatible with Firefox | 1 | ||
4 | Floating Content within post area | 1 | ||
5 | Auto adjustment within the post area | 1 | ||
6 | Proper Image Alignment | 1 | ||
7 | Proper Display of Commenting System | 1 | ||
8 | Proper Display of Links and Quick Editing | 1 | ||
9 | Proper Display of Blog Archive and Followers Gadget | 1 | ||
Total | 10 pts | 8 pts | ||
Theme Score | 80% |
5. Revolution
no. | Tested Criteria | Point | Pass | Fail |
1 | Template Support Available | 2 | ||
2 | Compatible with IE7 | 1 | ||
3 | Compatible with Firefox | 1 | ||
4 | Floating Content within post area | 1 | ||
5 | Auto adjustment within the post area | 1 | ||
6 | Proper Image Alignment | 1 | ||
7 | Proper Display of Commenting System | 1 | ||
8 | Proper Display of Links and Quick Editing | 1 | ||
9 | Proper Display of Blog Archive and Followers Gadget | 1 | ||
Total | 10 pts | 7 pts | ||
Theme Score | 70% |
Filed under: Adsense Ready Templates | Leave a comment »
Setting up super cool drop down lists for your sidebar to save sidebar space is fairly straighforward using a bit of Javascript. I’m going to list the coding necessary to do both your Previous Posts and your Archives list. This tutorial is for Blogger only. In the future I will put up coding to do this in other blogging platforms.
A Drop Down List Example
Fave Links se7en Blog Flak
First up is Blogger’s Previous Posts coding. This is a bit different than the Archives List coding below because it will require a width to be set in the code. Long Post names won’t word wrap in the list and it could force your sidebar to the bottom of your blog. When you open the list in IE long posts names will be cut off but the links will work just fine. Firefox ignores the width limitation and displays the full name regardless.
Previous Posts List for Blogger – Copy/Paste below code into your sidebar
Previous Posts
“>
Archives List for Blogger – Copy/Paste below code into your sidebar
Archives List
“>
In both cases above you will want to disable the existing coding for Previous Posts and Archives, if you don’t know which sections to remove please refer to the image below. If you are doing drop down lists for both Previous Posts and Archives you will want to remove or cut all of the code that is displayed in the image window. Image taken from Blogger template editor.
Filed under: Creating Drop Down Lists - Classic Blogger | Leave a comment »
Many people still seem to be confused about how to apply new templates to their Blogger blog. It’s not suprising though because Blogger didn’t seem to care about clearly marking the differences between the two when you are at the template editor page in your control panel. They should have used a much better naming convention and put some type of heading on the editor page that CLEARLY says which mode your blog is running in. The fact is that Blogger can run in two different modes, one is called “classic” and the other is often referred to as either “XML” or “beta”. The confusing interface is what causes most of the problems when people try to paste in a new template, with complaints like “I can’t get it to work, I keep getting errors!”.
This tutorial should help you to see the differences between the two modes and how to switch back and forth. First up is how to switch your blog to the new XML or “beta” mode. If your blog is running in “classic” mode already you will see a template editor like the one pictured below, and you will see the words “Customize Design” as pointed out by the red arrow. All you have to do is click it and choose a new template and you will automatically be switched to the “new” or “beta” mode. This will allow you to replace the code in the template editor with a custom template designed to be used in “beta” or “new” mode. “Classic” templates WILL NOT work in this mode!!!!
Now for switching your blog to “classic” mode if it’s already running in “beta” or XML mode. If you look at the image below you’ll see that the template editor page looks different than the one pictured above. The editor is much narrower and there’s a check box that says “Expand Widget Templates”. If you see that then your blog is running in XML or “beta” mode. Switching to “classic” is very easy, however Blogger did a very good job of hiding the link to do the switch over. You have to look underneath the template editor window for the words “Revert to Classic Template”. Once you click the link it will take you to a page where you can select a new template. Once you make the choice and save it you will now be running in “classic” mode. This will allow you to edit the template and install custom templates that are designed for the “classic” mode. Templates designed for XML or “beta” mode WILL NOT work in classic mode!!!!
There are a number of differences between the two modes in how they work, but the most important one when trying to edit your template is determining WHICH mode you are currently in. If you try to edit your template manually and you keep getting XML parse errors you are running in “XML” or “beta” mode. “Classic” mode is much simpler to work with for manually editing your template but the drag and drop widgets are unavailable and will not work and neither will templates designed for “classic” mode.
If you want to use templates designed for “classic” mode you MUST SWITCH your template FIRST or the template WILL NOT WORK.
Filed under: Blogger, Check box, Control panel, Editing, On the Web, Switch Blogger to “Classic” or “XML” Mode, Template, Weblogs, XML | Leave a comment »
The Goal: Your current blog at abc.blogspot.com is hosted on the Blogger platform but you now want to move this blog from Blogger to WordPress (self-hosted) with a personal domain name (say abc.com).
The Problem: WordPress.org provides an easy option to automatically import all your old blog posts and reader comments from Blogger into your new WordPress blog but there are still some bigger problems that are hard to ignore:
1. Some of your previous articles on the blogspot blog could be ranking very high in search engines for certain keywords but once you shift these articles to a new address, you might lose all that organic search traffic.
2. You cannot use a 301 redirect with Blogger to inform search engines that your site has permanently moved a new web address thus losing PageRank and other Google Juice.
3. Not just search bots, human beings who come to read your old articles via links from other sites won’t know about the new location of those articles unless you manually insert the new links in each and every blogspot article (impossible for large blogs).
4. When you switch blogging platforms, existing blog readers who are subscribed to your Blogger RSS Feed may be lost forever if they don’t manually update their RSS readers with your new WordPress feed address (and most won’t).
5. When you lose RSS subscribers and search engines rankings, the pageviews will drop and that will seriously impact your AdSense revenue in case you are running Google ads.
The Solution: Now that you are aware of the various issues associated with moving sites from Blogger to WordPress, the very good news is that there exists a simple solution to deal with all these problems in one go.
You can quickly and safely migrate any blog from Blogger to WordPress without losing RSS Subscribers or human visitors and there’s also a way to pass all that Google Juice from the old blogspot.com address to your new WordPress blog.
Important: Before you implement anything, it may be a good idea to run through these steps on a dummy blog first. Also, backup your Blogger blog including the XML template, posts and comments just to be the safe side.
Step 1: In case you haven’t done this already – register a new web domain, buy server space from some web hosting company* that offers PHP / MySQL hosting and and install WordPress software on your new domain.
Step 2: Go to your WordPress Admin Dashboard -> Tools -> Import and select the Blogger option. Authorize WordPress to access your Google Account and within minutes, all your old blog posts and comments will be available on the new WordPress site.
Step 3: Copy this file into your WordPress themes directory and then rename the file from blogger.php.txt to blogger.php. You may use either Putty with wget or Web FTP to access your WordPress themes directory located on the web server. For credentials and other details, check your cPanel.
Here are the contents of that file.
<?php /* Template Name: blogger */ global $wpdb; $old_url = $_GET['q']; if ($old_url != "") { $permalink = explode("blogspot.com", $old_url); $q = "SELECT guid FROM $wpdb->posts LEFT JOIN $wpdb->postmeta ". "ON ($wpdb->posts.ID = $wpdb->postmeta.post_id) WHERE ". "$wpdb->postmeta.meta_key='blogger_permalink' AND ". "$wpdb->postmeta.meta_value='$permalink[1]'"; $new_url = $wpdb->get_var($q)? $wpdb->get_var($q) : "/"; header ("HTTP/1.1 301 Moved Permanently"); header("Location: $new_url"); } ?>
Step 4. Open your WordPress dashboard and go to Pages -> Add New Page. Keep the title and URL of that page as blogger and select “blogger” from the Template drop-down. Save. There’s no need to add any content to this page.
Step 5. Open the template generator, type the full address of your new WordPress blog (including http:// and the trailing slash) and this tool will create a new classic template for your blogspot blog that will look something like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="<$BlogLanguageDirection$>"> <head> <title><$BlogPageTitle$></title> <script type="text/javascript"> <MainOrArchivePage>window.location.href='xxx'</MainOrArchivePage> <Blogger><ItemPage>window.location.href='xxxblogger/?q=<$BlogItemPermalinkURL$>'</ItemPage></Blogger> </script></head><body> <div style="border:#ccc 1px solid; background:#eee; padding:20px; margin:80px;"> <p>This page has moved to a new address.</p> <h1> <MainOrArchivePage><a href="xxx"><$BlogTitle$></a></MainOrArchivePage> <Blogger> <ItemPage><a href="xxxblogger/?q=<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a></ItemPage> </Blogger> </h1> </div> </body></html> <!-- replace xxx with your WordPress site URL --->
Step 6. Open your Blogger Dashboard -> Layout -> Edit HTML and choose “Revert to Classic Blog”. Copy-paste the template generated in Step 5 in the “Edit Template” area and click “Save Template Changes”.
Your are done. Open any page on your old Blogger blog and it should redirect you to the corresponding WordPress page. On the WordPress side, since we are using a permanent 301 redirect with the redirection URLs, all the Google Juice will probably pass to your new WordPress pages with time.
Update your RSS Feed: When you move from Blogger to WordPress, the address of your RSS feed will change as well. Go to Blogger -> Settings -> Site Feed, type the address of your new WordPress RSS feed here and Google Reader, Bloglines, etc. will automatically move to your new feed. Check this FeedBurner FAQ for some more ideas.
Now that your new WordPress site is up and running with all the old Blogger posts, here are a few important things you should do:
1. Add your new WordPress site to Google Webmaster, verify ownership and and submit a Sitemap listing the URLs on your new site.
2. When you migrate from Blogger to WordPress, all your pictures and screenshot images hosted on Blogger / Picasa Web Albums will not get imported into WordPress. Therefore never delete your old blogger blog as it will break images that are now embedded in your WordPress posts.
3. Once the search bots and human beings start flocking to your new site, you may update the homepage of your blogspot blog with links to some of your best posts.
4. To know how Googlebot will view your existing Blogspot blog, just turn off JavaScript in the browser and try visiting any of your old blog pages. It’s a single link under H1 that points to your new address that internally does a 301 redirect.
Filed under: Uncategorized | 1 Comment »