tag:blogger.com,1999:blog-83460453558060937912024-02-19T10:19:32.489+05:30The Blogger Guidethe illustrated blogger guideidshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comBlogger127125tag:blogger.com,1999:blog-8346045355806093791.post-37992989535173167552012-08-10T20:55:00.000+05:302012-08-10T20:55:12.427+05:30HOWTO: Redirect Blogger to a Country DomainRecently a reader sent me a question asking how a Blogger blog can be re-directed to a custom domain representing a country domain. This post is about how this blog, The Blogger Guide, was moved in to its current address in the <span style="font-family: "Courier New",Courier,monospace;">.lk</span> domain.<br />
<br />
Basically, there are<b> two steps</b>.<br />
<br />
<b>Firstly, you should configure a CNAME</b> (or Canonical Name) record with your country domain registry. (Additionally you can provide an A-record as well, but that is optional). Let's look at this in a bit more detail.<br />
<br />
When a visitor want to reach <span style="font-family: "Courier New",Courier,monospace;">www.bloggerguide.lk</span> from a browser, the program will first contact a <span style="font-family: "Courier New",Courier,monospace;">.lk</span> domain registry through the DNS (Domain Name Service) system. Technically, this is called a DNS look-up. A DNS look-up simply maps a <i>domain name</i> (or <a href="http://www.bloggerguide.lk/2008/06/urls.html" target="_blank">URL</a>) to a physical web hosting server which actually hosts the web site (or blog, or any Internet service for that matter) corresponding to that <i>domain name</i>. In this instance, the domain name <span style="font-family: "Courier New",Courier,monospace;">www.bloggerguide.lk</span> is hosted by Blogger and, the <span style="font-family: "Courier New",Courier,monospace;">.lk</span> domain registry should return the Blogger's hosting service as the reply to the DNS look-up. A CNAME entry is, in fact, an alias to another server which actually hosts the given URL <br />
<br />
For example, the CNAME entry given to the .lk domain registry for this blog is given below.<br />
<br />
<div class="mycode">
www.bloggerguide.lk. 3600 IN CNAME ghs.google.com.</div>
Once this CNAME entry is configured, for every look-up request for <span style="font-family: "Courier New",Courier,monospace;">www.bloggerguide.lk</span>, the <span style="font-family: "Courier New",Courier,monospace;">.lk</span> domain registry (or the <i>name server</i>) will return <span style="font-family: "Courier New",Courier,monospace;">ghs.google.com</span> (technically, that's another domain name which needs to be resolved, but that is not relevant for this post).<br />
<br />
<b>Secondly, you have to tell Blogger that you will be hosting the blog on a custom domain</b>. This step will link your blog with the custom domain name. When that is done, Blogger will know that a request asking, for example <span style="font-family: "Courier New",Courier,monospace;">www.bloggerguide.lk</span>, is actually looking for <i>this</i> blog which is running inside its servers.<br />
<br />
The way to configure the custom domain in Blogger is very simple.<br />
<ul>
<li>Go to Settings : Basic : Publishing</li>
<li>Click "Switch to advanced settings"</li>
<li>Enter the custom domain name and click Save</li>
</ul>
<br />
Once the above two steps are completed, you are done with moving your Blogger blog to a custom domain. Of course, the DNS system might take about 24 hours to properly start resolving this new name.<br />
<br />
See the Blogger's help article on <a href="http://support.google.com/blogger/bin/static.py?hl=en&ts=1233381&page=ts.cs" target="_blank">custom domains</a> for more details.idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-30206766203369787192011-07-25T20:31:00.001+05:302011-07-25T20:35:46.848+05:30Using CSS Web DesignFinding the right <a href="http://www.networksolutions.com/web-hosting/index.jsp">website hosting</a> company is a crucial step in designing your own website online. With a professional hosting company such as Network Solutions supporting you, you can have access to a number of invaluable features that can make your website easier to manage, more simple to navigate, and just generally more professional. Of course, professionalism may not be your goal if you are simply experimenting or if your website is only meant for a certain select audience; but, if you are working on putting a business online, or if you are hoping to generate a large amount of web traffic, you will benefit greatly from a smoothly running and easy to manage website. One feature offered by some website hosting platforms that can contribute to giving you this type of smoothly functional website is CSS, or Cascading Style Sheets.<br />
<br />
<br />
Cascading Style Sheets, for all intents and purposes, can best be defined as a web design language that helps to save you time and effort in the management of your website. There are multiple alternatives for web design out there, but CSS is becoming the preferred method of many website owners, and is particularly useful for those who wish to simplify the design process. One of the most useful benefits you can receive from using CSS language is the ability to change every page of your website simply by changing one CSS style sheet; think of this as a sort of template. If you want to alter the format of your site, on every one of its pages, you simply make the appropriate change on the template, and it automatically applies to all of your website’s pages, saving you valuable time and effort. There are numerous other benefits as well, all of which you can find on the Network Solutions website.<br />
<br />
<br />
While many people enjoy the use of CSS when setting up business websites, it can also be useful for simpler websites such as personal blogs. Generally, CSS is said to improve your success at drawing traffic from search engines and also improve the visual quality of your website, in addition to the aforementioned perks of saving you time and money. Therefore, you can have an efficiently run, easy to find, and aesthetically enjoyable web page whether you are attempting to run a business, or whether you are simply looking to enhance your blog and attract new readers. The range of benefits made possible by CSS design language make it well worth looking into during your web design process.<br />
<br />
<span style="font-size: x-small;"><i>(This post was brought to you by Network Solutions</i></span>)<br />
<br />
<div class="rel-posts"><p>Related Posts</p><ul><li><a href="http://bguide.blogspot.com/2009/03/css-basics-part-1.html">CSS Basics - Part 1</a></li>
</ul></div>idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-43344110500616913722010-07-15T21:32:00.000+05:302010-07-15T21:32:37.804+05:30HOWTO: Link to All Posts of a Given DayIf you have several posts written on a given day and want to create one link to all of them, here's a little tip that will help you to achieve that.<br />
<br />
Even though there is no direct way of getting this done, you can use Blogger's <i>Archive</i> feature as a workaround. All you should do is to set your archive frequency to <i>Daily</i>. (Settings -> Archiving -> Archive Frequency). Then the Archive widget will show a breakdown up to a single day. (see figure below)<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4bmNbLq4CxbBBRcGzKeRBT2Qi_YxPOuPJROIoiIow-ySEu51ANmNwrT-7bsnKNrslvhP_hKy5SKJIg3HgmegCzY36H2ThUcxPe0ilZ9weC4x9orWKQK2jahS1sT543fOILD3oIh-njBw/s1600/daily_archive.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4bmNbLq4CxbBBRcGzKeRBT2Qi_YxPOuPJROIoiIow-ySEu51ANmNwrT-7bsnKNrslvhP_hKy5SKJIg3HgmegCzY36H2ThUcxPe0ilZ9weC4x9orWKQK2jahS1sT543fOILD3oIh-njBw/s320/daily_archive.png" /></a></div><br />
Each day in the widget carries a <i>link</i> to a page that lists all the posts in that day. That's the reference you need to use to link to all posts of a given day. Even if you don't have the Archive widget, you can still make up the URL for a given day. It has the format <span style="font-family: "Courier New",Courier,monospace;">http://<your blog address>/YYYY_MM_DD_archive.html</span>.idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-79560751797807904922010-07-06T21:26:00.000+05:302010-07-06T21:26:19.287+05:30Blogger StatsBlogger has <a href="http://bloggerindraft.blogspot.com/2010/07/introducing-blogger-stats.html">announced</a> a feature which was long overdue, visitor stats. This will bring in an integrated <i>Stats</i> tab to the Blogger admin console that provides an analytics-type visitor statistics service. This will eliminate the need to install third party visitor meters such as Analytics, SiteMeter etc. in your blog.<br />
<br />
The feature is currently in beta. Login to draft.blogger.com to experience it.idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-70688721659912243442010-06-17T06:08:00.002+05:302010-06-17T06:10:04.944+05:30Template Designer is LiveThe <i>Template Designer</i> which I <a href="http://www.bloggerguide.lk/2010/04/template-designer.html">blogged</a> about a couple of months ago when it was in beta, has gone live!<br />
<br />
This brings in a powerful WYSIWYG editor to tweak your templates in many beautiful ways. The features include the ability to pick from professionally designed templates, option to select professional images as background images, ability to select many different layouts such as two-column, three-column etc in a snap and much more. The <i>Template Designer</i> is truly a wonder tool for the non-technical bloggers who were afraid of meddling around with the HTML, CSS etc to customize their templates.<br />
<br />
With the introduction of this new remarkable feature, Blogger has revised the buttons on the admin console as well. The former <i>Layout</i> button has gone out and a new button called <i>Design</i> has taken its place. The sub-menu for this section has also been revised with the old <i>Fonts and Colors </i>and <i>Pick New Template</i> buttons being replaced with a single <i>Template Designer</i> button. (see figure below)<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoyVWKy6idk7nk1X-H1jpXyozaz3_6HI_j3BCpsi_NC6LcBeuz1MeFsLEqN4T-QqNNKuXVpRT13XQMdN2lHUGN2cM3a-Eoi3udai3nG9ZmvO8ah_1cZ7cyU0ReMtutNuxReSL6rP__ggc/s1600/blogger_new_admin_console_buttons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoyVWKy6idk7nk1X-H1jpXyozaz3_6HI_j3BCpsi_NC6LcBeuz1MeFsLEqN4T-QqNNKuXVpRT13XQMdN2lHUGN2cM3a-Eoi3udai3nG9ZmvO8ah_1cZ7cyU0ReMtutNuxReSL6rP__ggc/s400/blogger_new_admin_console_buttons.png" width="400" /></a></div>The <i>Edit HTML</i> option still remains allowing the more technically inclined bloggers to dig deep. However, the template structure seems to have gone through drastic changes in order to support the new <i>Template Designer</i>. Don't worry, Blogger will take care of migrating your existing template to this new format if and when you modify your template using this option. One thing to note, however, is that you will <b>lose any existing customizations</b> on top of the current default templates.<br />
<br />
See the official Blogger Buzz <a href="http://buzz.blogger.com/2010/06/blogger-template-designer-now-available.html">announcement</a> for more details.idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-83866748906845581422010-04-12T22:30:00.006+05:302010-04-12T23:55:50.798+05:30A Review of the Domain TransitionTowards the latter part of last year, I wrote few articles discussing about <a href="http://www.bloggerguide.lk/2009/10/custom-domains-for-blogspot.html">Blogger custom domains</a>, some <a href="http://www.bloggerguide.lk/2009/11/deciding-to-move-to-custom-domain.html">factors one need to consider when moving to a custom domain</a> and also <a href="http://www.bloggerguide.lk/2009/11/moving-to-custom-domain.html">a checklist of things to do when moving to a custom domain</a>.<br /><br />These articles were the result of some learning I went through myself to evaluate the pros and cons of moving to a custom domain. In fact, I was convinced of the value of an independent domain, but was afraid of loosing traffic and most importantly the Google PageRank (PR) earned by the blogspot domain! As stated in the <a href="http://www.bloggerguide.lk/2009/11/moving-to-custom-domain.html"><span style="font-style: italic;">Moving to a Custom Domain</span></a> article, a Google employee had confirmed that the PR values will be transferred within a couple of weeks, so after all, it was not very difficult to make the decision to go ahead with the domain transition, which was fully <a href="http://www.bloggerguide.lk/2010/01/doamin-transition-complete.html">affected</a> in January this year.<br /><br />The transition was not really difficult. I had no issues with my AdSense account as it is not setup to limit the ad publishing URLs. My subscriber feed (via FeedBurner) also worked without a problem as it was named after the logical name of this blog (i.e. The Blogger Guide) and not the blogspot URL. The two visitor meters, namely Google Analytics and SiteMeter also did not require any changes as they are linked up using unique IDs, which do not depend on the domain name.<br /><br />I did not see any drop in visitor counts after the transition. However, it took a considerable amount of time to recover my Alexa rank and also for the green PageRank bar to appear in places such as the Google Toolbar.<br /><br />At the time of transition, my Alexa rank was somewhere around 230,000. Immediately after the transition, I had to resubmit the new domain as there is no way in Alexa to transfer the ranks from one domain to another. However, the rank for the new domain (www.bloggerguide.lk) quickly improved from several millions to something below 400,000 in a couple of weeks. And now, after about three months, it has reached the level it was at the time of the change.<br /><br />The Google PageRank (of 4/10) which I had at the time of transition re-appeared on the toolbar only this week, a good three months later. I think the reason for the delay is this. There are two types of page ranks; one is a static value displayed in place such as the Google Toolbar, which Google updates from time to time. The other is a very dynamic value, which is calculated continuously and used to rank search results internally. So I think what gets restored in a couple of weeks of a domain transition are these internal PR values and not the externally displayed ones. It seems that even for transferred domains, the published PR values will only get restored in the periodic updates.<br /><br />Finally, I can say that the decision to move to a custom domain did work! After a lapse of about 3 months, the blog has restored its rankings in addition to the pluses of the new independent domain.<br /><br /><div class="rel-posts"><p>Related Posts</p><ul><li><a href="http://bguide.blogspot.com/2009/10/custom-domains-for-blogspot.html">Custom Domains for BlogSpot</a></li><li><a href="http://bguide.blogspot.com/2009/11/deciding-to-move-to-custom-domain.html">Deciding to Move to a Custom Domain</a></li><li><a href="http://www.bloggerguide.lk/2009/11/moving-to-custom-domain.html">Moving to a Custom Domain</a></li></ul></div>idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-74693813046299878882010-04-04T23:11:00.004+05:302010-04-04T23:33:05.470+05:30The Template DesignerBlogger has developed another very exciting feature called the <a href="http://buzz.blogger.com/2010/03/express-yourself-with-blogger-template.html"><span style="font-style: italic;">Template Designer</span></a>. With it, you can create custom template designs using an extremely user-friendly interface without having to worry about meddling with HTML code! Yes, that's right, you don't have to go through the Layout -> Edit HTML interface to get another sidebar to your template, or to add a nice background image to your blog or to do many more template tweaks.<br /><br />This feature is still not released formerly and is now in testing stage in Blogger in Draft. If you log in to draft.blogger.com, and go to the Layout section of your blog, you will see a new sub section called the Template Designer. (see figure below)<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEGHX5rB4OeJZ4rby3mVvjVDdMxT52jW8Bs1EoxyXMT9Kgno1-IWrd1PBsGoffIQYE6QSLXD_7bbsfwBpAQXbMNpAY1AYxP6mH4_D8Qo2T17NhoqyPv5n608J5mp1FRsiKR3U_c_hf7kA/s1600/tempalte_designer.png"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 392px; height: 146px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEGHX5rB4OeJZ4rby3mVvjVDdMxT52jW8Bs1EoxyXMT9Kgno1-IWrd1PBsGoffIQYE6QSLXD_7bbsfwBpAQXbMNpAY1AYxP6mH4_D8Qo2T17NhoqyPv5n608J5mp1FRsiKR3U_c_hf7kA/s400/tempalte_designer.png" alt="" id="BLOGGER_PHOTO_ID_5456341449418782818" border="0" /></a><br />From that interface, you get to choose from a set of expert designed templates, manipulate the column layouts with a snap, apply many different background images and also customize the fonts and colors. You get a real-time preview as well, making it easier to experiment.<br /><br />Go on and try it at Blogger in Draft and I'm sure you will love it!<br /><br />Note:<br />Even if you have applied any customizations such as three-columns or wider-blogs from The Blogger Guide tutorials, the Template Designer will still work. It will recognize that the template is customized, but still its changes will work.idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-19786005109576674262010-03-11T08:38:00.003+05:302010-03-11T08:47:44.012+05:30Over 100,000 Visits!The Blogger Guide passed another milestone today; the unique visits count crossed the one hundred thousand mark!<br /><br />It's just over two years since the inception, and given the relatively little amount of time I put in, this is a great achievement for me. It's been a slow but steady growth.<br /><br />Thanks for all the help in spreading the word about The Blogger Guide.idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-88984019831965003142010-02-20T21:00:00.004+05:302023-03-18T17:24:25.455+05:30BlogazinesThe blogosphere is evolving! This post is about one such evolution which I happened to stumble upon today.<br /><br />Most of today's blogs are of a traditional columnar layout with one main (or post) column and one or more sidebars. This <span style="font-style: italic;">layout</span> is what you get in pretty much every post. However, the print industry, especially the <span style="font-style: italic;">magazines</span>, have been making good use of the basic design principles such as balance, color and fonts, to add variety to individual articles.<br /><br />Some very creative bloggers out there have drawn upon this idea of varied article layouts, on to the blog posts and the result is termed <span style="font-style: italic; font-weight: bold;">blogazines</span>. <span class="z19Dle" id="col-z13wt1ag0uusvzox104cilr4byeyjtjz4sw0k"><span class="zo">Read more about this at <a href="http://www.smashingmagazine.com/the-death-of-the-blog-post/" class="ot-anchor">http://www.smashingm<wbr>agazine.com/the-deat<wbr>h-of-the-blog-post/</a> and also some tips for creative blog post design at <a href="http://line25.com/articles/tips-for-designing-unique-and-attractive-blog-posts" class="ot-anchor">http://line25.com/ar<wbr>ticles/tips-for-desi<wbr>gning-unique-and-att<wbr>ractive-blog-posts</a></span></span>.<br /><br />This is definitely not for the average blogger as it requires lot of design skills and also effort to finish each article layout from scratch. However, I found the idea very interesting and thought you would like it too.idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-40019639018330254982010-01-31T21:15:00.004+05:302010-02-20T18:29:43.986+05:30Pages coming to Blogger!Update: 2010 Feb 20<br />The <span style="font-style: italic;">pages</span> feature has <a href="http://buzz.blogger.com/2010/02/create-pages-in-blogger.html">graduated</a> from Blogger in Draft and now is a regular service.<br /><br />It is just a little over a month ago that I <a href="http://www.bloggerguide.lk/2009/12/add-pages-in-blogger.html">wrote</a> that we cannot have <span style="font-style: italic;">pages</span> in Blogger. However, the test bed of Blogger, <span style="font-style: italic;">Blogger in Draft</span>, has recently <a href="http://bloggerindraft.blogspot.com/2010/01/pages-come-to-blogger-in-draft.html">announced</a> a <span style="font-style: italic;">pages</span> feature in Blogger.<br /><br />This, no doubt, will be an exciting news for most of the Blogger users out there. With <span style="font-style: italic;">pages</span> one can easily create static pages such as <span style="font-style: italic;">About Us</span> or <span style="font-style: italic;">Contact Us</span> to hold information that don't change as often, but which needs to be easily accessed by visitors to a blog. This feature will be accompanied by a widget which helps to manage pages and display them easily either as a tabbed navigation bar or sidebar links.<br /><br />It is still in beta stage and hopefully will be available in the primary Blogger service soon. You can try out the feature by logging in to draft.blogger.com.idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-82120650570165567822010-01-06T22:02:00.004+05:302010-01-31T21:31:43.325+05:30Domain Transition CompleteThis is to inform you that I have completed the domain name transition from bguide.blogspot.com to www.bloggerguide.lk.<br /><br />The FeedBurner feeds should work without a problem, as I have not changed the <span style="font-style: italic;">feed address</span>.<br /><br />Thank you,<br />ids.idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-86016692754603513912009-12-25T17:59:00.003+05:302009-12-25T18:23:57.147+05:30Announcement : Custom Domain TransitionThe purpose of this post is to let all the subscribed readers know that The Blogger Guide will switch to a <a href="http://bguide.blogspot.com/2009/10/custom-domains-for-blogspot.html"><span style="font-style: italic;">custom domain</span></a> starting next week. The new URL is <span style="font-weight: bold;">www.bloggerguide.lk</span> and I hope to complete the transition during the course of the next week.<br /><br />Hopefully the transition will be smooth, but there can be some unexpected hiccups, especially with my <span style="font-style: italic;">feeds</span>. Once all the configurations are complete, I will do another post on the week starting Jan 4th, 2010. If you come across any problems in receiving <span style="font-style: italic;">feeds</span> after the transition, please drop me a mail on <span style="font-family: courier new;">bloggerguide@gmail.com</span>.<br /><br />Thank you and sorry for any inconvenience that you might come across.idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-35722164536409553482009-12-20T17:37:00.003+05:302009-12-20T17:55:32.967+05:30Add Pages in Blogger"<span style="font-style: italic;">How can I add <span style="font-weight: bold;">pages</span> to my Blogger blog?</span>"; this is a frequent question on Blogger Help forums, which I think comes from bloggers who have used other blogging platforms such as Wordpress.<br /><br />The simple answer is that you <span style="font-weight: bold;">cannot</span> add <span style="font-weight: bold;"><span style="font-style: italic;">pages</span></span> to Blogger blogs. But, of course, there are workarounds.<br /><br />Most people who ask about <span style="font-style: italic;">pages</span> have a requirement to direct the readers to some key pages in their blogs such as an <span style="font-style: italic;">About</span> page or a <span style="font-style: italic;">Contact</span> page.<br /><br />There are some simple workarounds to achieve the desired effect. In all cases, you would need to write <span style="font-style: italic;">normal posts</span> with the content that you want in your <span style="font-style: italic;">pages</span>. Once you publish those <span style="font-style: italic;">posts</span>, one way to get the <span style="font-style: italic;">pages effect</span> is to <a href="http://bguide.blogspot.com/2009/01/adding-simple-navigation-bar.html">add a simple navigation bar</a> at the top and link to your relevant posts from there. (for example, see the navigation bar for this blog)<br /><br />Another alternative is to use a Link List widget or an HTML/Javascript widget in your sidebar and linking to the required posts from that widget. Placing such a widget at the top of your sidebar with a suitable caption can catch enough attention from your readers.idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-16331642520570969682009-12-06T22:28:00.004+05:302009-12-06T22:57:12.758+05:30Grow Traffic with Page Title TweakThis post is about a pretty simple modification to your template to tweak the appearance of the page titles of your blog, which will result in a traffic growth of 10% (or perhaps more). The steps for this customization was referred to me by <a href="http://interestingwebs.blogspot.com/">Mark</a>, who is a frequent visitor to my blog.<br /><br />The default <span style="font-weight: bold;">Page Title</span> in <span style="font-weight: bold;">Blogger</span> blogs appear in the order of <span style="font-family:courier new;">[Blog Title] : [Post Title]</span>. What this modification does is simply to reverse this order such that it becomes <span style="font-family:courier new;">[Post Title] : [Blog Title]</span>. With the Post Title in front, your blog's posts get a higher relevance score to keyword searches than when it is at the back.<br /><br />I applied this tip at the beginning of last October and I can confirm that I saw an overall traffic increase of approximately 10% in the past two months (see figure below from my actual SiteMeter stats). My posting frequency remained almost the same, and I didn't to any other optimization during this period. So I can safely attribute this traffic growth to this neat tip introduced by Mark.<br /><br />I recommend this modification for your Blogger blogs as well. For the details of the conversion please go <a href="http://interestingwebs.blogspot.com/2009/07/increase-blogger-traffic-change-title.html">here</a>.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSsSTgy9wnEuH2utquk3vGlg_2ENVhyphenhyphenOmw3pzhdQLfKHKErJsK7g9ThjS1lujsuqj7FiEJZ4VyiBUBu84JKvSj55q5F-quLaShicz9C-y4D8-HkDnzjgljSdUgTVkS6ME_uU8Mxt5vDeg/s1600-h/traffic_growth.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 122px; height: 342px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSsSTgy9wnEuH2utquk3vGlg_2ENVhyphenhyphenOmw3pzhdQLfKHKErJsK7g9ThjS1lujsuqj7FiEJZ4VyiBUBu84JKvSj55q5F-quLaShicz9C-y4D8-HkDnzjgljSdUgTVkS6ME_uU8Mxt5vDeg/s400/traffic_growth.png" alt="" id="BLOGGER_PHOTO_ID_5412174464265919970" border="0" /></a>idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-48937533624512992682009-11-28T21:50:00.009+05:302009-11-28T23:32:52.733+05:30Minima : Hanging Sidebar on the LeftThis article presents an interesting modification to give you a <span style="font-weight:bold;">non-conventional three column layout</span>. The idea is to add a second sidebar to a default Minima template offered by Blogger, to make it appear as <span style="font-style: italic;">hanging</span> by the side of the blog. The figure below has a preview of the finished modification and visit the <a href="http://tbgtz0002.blogspot.com/" target="_blank">Hanging Sidebar Demo</a> blog for an online demo.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB7hZw50Jwunk3Tm6sMsGJKuriNL5-AL1PzaJfdqedYybUCn6qfbRTprU3mCgHl5pM9CICzE64FfOzQbpQzzkG_D6siUsMX1fPjFPO0jXJu_m6wkFdeLrVuLksdB-dVJwwuQaYp_mgoAo/s1600/minima_hanging_sb.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 238px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB7hZw50Jwunk3Tm6sMsGJKuriNL5-AL1PzaJfdqedYybUCn6qfbRTprU3mCgHl5pM9CICzE64FfOzQbpQzzkG_D6siUsMX1fPjFPO0jXJu_m6wkFdeLrVuLksdB-dVJwwuQaYp_mgoAo/s400/minima_hanging_sb.png" alt="" id="BLOGGER_PHOTO_ID_5409206679083432354" border="0" /></a>The following steps are tested on a default 2 column <span style="font-weight: bold;">Minima</span> template but this conversion should also work on <span style="font-weight: bold;">Minima Black</span>, <span style="font-weight: bold;">Minima Blue</span> and <span style="font-weight: bold;">Minima Ochre</span> templates.<br /><br />1) Add a new CSS id selector for the 2nd sidebar wrapper.<br /><ul><li>Go to Layout -> Edit HTML</li><li>Locate the <span style="font-family:courier new;">#sidebar-wrapper</span> section (Do a Find using your browser)</li><li>Copy that full section and paste below the existing sidebar section (it doesn't have to be below) and rename it to <span style="font-family:courier new;">#left-sidebar-wrapper</span></li><li>Change the <span style="font-family:courier new;">float: $endSide</span> to <span style="font-family:courier new;">float:$startSide</span> of this newly copied section (See the code snippet below)</li></ul><div class="mycode">#sidebar-wrapper {<br /> width: 220px;<br /> float: $endSide;<br /> word-wrap: break-word; /* fix for ... IE */<br /> overflow: hidden; /* fix for long ... float */<br />}<br /><br /><span style="color: rgb(255, 0, 0);">#<span style="color: rgb(51, 51, 255);">left-</span>sidebar-wrapper {</span><br /><span style="color: rgb(255, 0, 0);"> width: 220px;</span><br /><span style="color: rgb(255, 0, 0);"> float: <span style="color: rgb(51, 51, 255);">$startSide</span>;</span><br /><span style="color: rgb(255, 0, 0);"> word-wrap: break-word; /* fix for ... in IE */</span><br /><span style="color: rgb(255, 0, 0);"> overflow: hidden; /* fix for long ... float */</span><br /><span style="color: rgb(255, 0, 0);">}</span><br /></div><br />2) Introduce a new <span style="font-family:courier new;">div</span> element, as a child of the <span style="font-family:courier new;">content-wrapper</span>, to be the placeholder for the 2nd sidebar<br /><ul><li>Locate the <span style="font-family:courier new;"><div id='main-wrapper'></span> element.</li><li>Copy the code shown in red, <span style="font-weight: bold;">above</span> that section (this has to be above)<br /></li></ul><div class="mycode"><div id='crosscol-wrapper' style='text-align:center'><br /> <b:section class='crosscol' id='crosscol' showaddelement='no'/><br /></div><br /><br /><span style="color: rgb(255, 0, 0);"><div id='left-sidebar-wrapper'></span><br /><span style="color: rgb(255, 0, 0);"> <b:section class='sidebar' id='sidebar-two' preferred='yes'></span><br /><span style="color: rgb(255, 0, 0);"> </b:section></span><br /><span style="color: rgb(255, 0, 0);"></div></span><br /><br /><div id='main-wrapper'><br /> <b:section class='main' id='main' showaddelement='no'><br /> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/><br /> </b:section><br /></div></div><br />3) Add a new CSS section for an outer header wrapper which will encompass the existing header wrapper<br /><ul><li>Add the following code below the existing <span style="font-family:courier new;">#header-wrapper</span> section</li></ul><div class="mycode"><span style="color: rgb(255, 0, 0);">#outer-header-wrapper {</span><br /><span style="color: rgb(255, 0, 0);"> width:880px;</span><br /><span style="color: rgb(255, 0, 0);"> margin:0 auto 10px;</span><br /><span style="color: rgb(255, 0, 0);">}</span></div><br />4) Add a div section as the placeholder for this outer header wrapper<br /><ul><li>Locate the section <span style="font-family:courier new;"><div id='header-wrapper'></span></li><li>Copy the code shown in red, above and below that section<br /></li></ul><div class="mycode"><span style="color: rgb(255, 0, 0);"><div id='outer-header-wrapper'></span><br /> <div id='header-wrapper'><br /> <b:section class='header' ... ><br /> <b:widget id='Header1' .../><br /> </b:section><br /> </div><br /><span style="color: rgb(255, 0, 0);"> <div class='clear'>&#164;</div><br /></div></span><br /></div><br />5) Adjust the other wrappers to accommodate the new sidebar<br /><ul><li>Locate the CSS sections called <span style="font-family:courier new;">#outer-wrapper</span>, <span style="font-family:courier new;">#header-wrapper</span> and <span style="font-family:courier new;">#footer</span></li><li>Do the modifications/additions highlighted in red<br /></li></ul><div class="mycode">#outer-wrapper {<br /> width: <span style="color: rgb(255, 0, 0);">880</span>px;<br /> margin: 0 auto;<br /> ...<br />}</div><br /><div class="mycode">#header-wrapper {<br /> width: <span style="color: rgb(255, 0, 0);">664</span>px;<br /><span style="color: rgb(255, 0, 0);"> float:$endSide;</span><br /> margin: 0 auto 10px;<br /> ...<br />}</div><br /><div class="mycode">#footer {<br /> width: <span style="color: rgb(255, 0, 0);">664</span>px;<br /> clear: both;<br /> margin: 0 auto;<br /> ...<br />}</div><br />6) Do necessary adjustments to margins, padding etc<br /><ul><li>Locate the <span style="font-family:courier new;">#main-wrapper</span> section</li><li>Insert a left margin of 12 pixels.<br /></li></ul><div class="mycode">#main-wrapper {<br /> width: 410px;<span style="color: rgb(255, 0, 0);"><br /> margin-left:12px;</span><br /> float: $startSide;<br /> ...<br />}</div><br />7) Adjust the max width of the header description to center it in the new adjusted header<br /><ul><li>Locate the <span style="font-family:courier new;">#header .description</span> section</li><li>Change the <span style="font-family:courier new;">max-width</span> property to 644 pixels.<br /></li></ul><div class="mycode">#header .description {<br /> ...<br /> padding:0 20px 15px;<br /> max-width:<span style="color: rgb(255, 0, 0);">644</span>px;<br /> ...<br />}</div><br />8) Modify the CSS rules for the wire frame layouts editor.<br /><ul><li>Locate the end of the skin denoted by "<span style="font-family:courier new;">]]></span>"</li><li>Add the following code above that line.<br /></li></ul><div class="mycode"><span style="color: rgb(255, 0, 0);">/** Page structure tweaks for layout editor wireframe */</span><br /><br /><span style="color: rgb(255, 0, 0);">body#layout #outer-wrapper { </span><br /><span style="color: rgb(255, 0, 0);"> padding-top: 0;</span><br /><span style="color: rgb(255, 0, 0);"> width:720px;</span><br /><span style="color: rgb(255, 0, 0);">}</span><br /><span style="color: rgb(255, 0, 0);">body#layout #header-wrapper,</span><br /><span style="color: rgb(255, 0, 0);">body#layout #content-wrapper,</span><br /><span style="color: rgb(255, 0, 0);">body#layout #footer { </span><br /><span style="color: rgb(255, 0, 0);"> padding: 0;</span><br /><span style="color: rgb(255, 0, 0);"> width:720px;</span><br /><span style="color: rgb(255, 0, 0);">}</span><br /><br /><span style="color: rgb(255, 0, 0);">body#layout #main-wrapper {</span><br /><span style="color: rgb(255, 0, 0);"> width:400px;</span><br /><span style="color: rgb(255, 0, 0);">}</span><br /><br /><span style="color: rgb(255, 0, 0);">body#layout #sidebar-wrapper,</span><br /><span style="color: rgb(255, 0, 0);">body#layout #left-sidebar-wrapper {</span><br /><span style="color: rgb(255, 0, 0);"> width:150px;</span><br /><span style="color: rgb(255, 0, 0);">}</span><br /><br />]]></b:skin></div><br />Save the template. Switch to Page Elements view and move some widgets on to the left sidebar. Then view your blog to see the hanging sidebar in full swing!<br /><br />(<span style="font-weight: bold;">Note:</span> This modification was applied to a default Minima template and was tested on Firefox 3, IE 8 and Chrome 3)idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-59921051058959985892009-11-08T21:03:00.005+05:302010-04-12T23:54:19.354+05:30Moving to a Custom DomainWhen you <a href="http://bguide.blogspot.com/2009/11/deciding-to-move-to-custom-domain.html">decide for sure that you will switch for a custom domain</a>, the next thing is to <span style="font-weight: bold;">plan and implement the move</span>. Given below is a brief <span style="font-weight: bold;"><span style="font-style: italic;">checklist</span> for the domain transition process</span>.<br /><ol><li><span style="font-weight: bold;">Purchase the Domain</span> (if you don’t own already) – If you use the Blogger <a href="http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=76543">wizard</a> the purchase (and setup) is quite trivial. But if the top level domain you want is not provided by the wizard, then you will have to purchase it from an external registrar.</li><li><span style="font-weight: bold;">Reconfigure External Services</span> – It is most likely that you will have several external services such as visitor meters, feeds etc installed on your blog. Update the respective accounts of those services to reflect the change of blog URL. Some examples for such services are:</li><ol><li>AdSense (if you have limited the URLs which can publish ads)</li><li>Google Webmaster Tools – re-submit the blog and sitemaps</li><li>FeedBurner or such feeds</li><li>Technorati, Alexa and other such rating services</li><li>Google Analytics, SiteMeter, Cluster Maps and similar visitor meters</li></ol><li><span style="font-weight: bold;">Inform your Readers</span> – Even after you switch to a custom domain, Blogger ensures that your previous BlogSpot URL will be redirected to the new domain. Nevertheless, inform your readers about the forthcoming change, say, by writing a post in advance.</li><li><span style="font-weight: bold;">Effect the Transition</span> – Go the Settings -> Publishing section on your blog’s admin console and enable the custom domain. If you purchase the custom domain via Blogger, setting up your blog to use it is a no-brainer as Blogger will do the required technical configurations for you. However, if you buy it from a third party, then you will have to <a href="http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=55373">manage it yourself</a>.<br /></li></ol>Last, but certainly not least, is the most important question; <span style="font-weight: bold;">what will happen to your existing PageRank (PR) because of this move</span>? You will have a temporary drop in PageRank as your custom domain is new to Google. But the good news is that you will very quickly recover the PR as Blogger will setup a <span style="font-style: italic;">301 Redirect – Moved Permanently</span> on its servers. (<span style="color: rgb(255, 0, 0);">Update</span>: See this <a href="http://www.bloggerguide.lk/2010/04/review-of-domain-transition.html">review of an actual domain change</a> to learn more about PR recovery)<br /><br />The transfer of PR can happen as quickly as within a couple of weeks as <a href="http://groups.google.com/group/google_webmaster_help-indexing/msg/70286ab20939b527">confirmed</a> by a Google employee on the Google Webmaster Help forum.<br /><br />References:<br /><a href="http://blogging.nitecruzr.net/search/label/Custom%20Domains">Custom Domains - The Real Blogger Status</a><br /><br /><div class="rel-posts"><p>Related Posts</p><ul><li><a href="http://bguide.blogspot.com/2009/10/custom-domains-for-blogspot.html">Custom Domains for BlogSpot</a></li><li><a href="http://bguide.blogspot.com/2009/11/deciding-to-move-to-custom-domain.html">Deciding to Move to a Custom Domain</a></li><li><a href="http://www.bloggerguide.lk/2010/04/review-of-domain-transition.html">Experiences of an Actual Domain Transfer</a></li></ul></div>idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-45149307761184120842009-11-01T20:09:00.003+05:302009-11-08T21:20:03.083+05:30Deciding to Move to a Custom DomainIf you are starting a fresh blog, then <a href="http://bguide.blogspot.com/2009/10/custom-domains-for-blogspot.html">publishing it on a custom domain</a> straight-away is not much of a problem. If you already own a domain or do not want to use the <span style="font-family:courier new;">blogspot.com</span> domain, then switching to a <span style="font-weight: bold; font-style: italic;">custom domain</span> right at the beginning is a safer and simpler method.<br /><br />If, however, your blog has been running for a while under <span style="font-family:courier new;">blogspot.com</span> and has incoming links, some PageRank and also installed third party widgets, then moving to a custom domain needs some planning.<br /><br />First, let’s have a look at some reasons that will make going for a custom domain worthwhile.<br /><ul><li><span style="font-weight: bold;">Independent domain</span> – Unlike a <span style="font-family:courier new;">yourblogname.blogspot.com</span> URL which is just a sub-domain under BlogSpot, a custom domain gives the chance to publish at an independent domain</li><li><span style="font-weight: bold;">Ability to integrate with an existing domain</span> – If you already have a web site, say at <span style="font-family:courier new;">www.mydomain.com</span>, then a custom domain gives the chance to integrate your blog to the same domain, say at <span style="font-family:courier new;">blog.mydomain.com</span></li><li><span style="font-weight: bold;">Intangible asset</span> – In this information age, a popular domain is a valuable asset. So if you own a custom domain and your blog ramps up in popularity, that is added value for you</li><li><span style="font-weight: bold;">Good for branding</span> – If you are using the blog for some business/freelance activity, then a custom domain related to your business brand is better than a <span style="font-family:courier new;">blogspot.com</span> URL<br /></li></ul>Once you decide that you want to go for a <span style="font-weight: bold; font-style: italic;">custom domain</span>, the next step is to prepare a checklist of things to do for the transition, which is going to be the focus of the next article in this series.<br /><br /><div class="rel-posts"><p>Related Posts</p><ul><li><a href="http://bguide.blogspot.com/2009/10/custom-domains-for-blogspot.html">Custom Domains for BlogSpot</a></li><li><a href="http://bguide.blogspot.com/2009/11/moving-to-custom-domain.html">Moving to a Custom Domain</a></li></ul></div>idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-13490653935359087172009-10-28T05:34:00.004+05:302009-11-08T21:19:18.997+05:30Custom Domains for BlogSpotStarting your own blog on Blogger is pretty simple. Just follow three steps and you are ready to go. You post some interesting entries and then you want to share it with your friends and family. That’s when you fire an email saying “<span style="font-style: italic;">hey, check out my new blog at http://yourblogname.blogspot.com</span>”.<br /><br />Did you ever wonder why is it that your blog URL ends with <span style="font-family:courier new;">blogspot.com</span> and not just <span style="font-family:courier new;">.com</span>? Did you ever wonder why is it that some of your friends have blog URLs that looks like http://www.yourfriendsname.com? In this post, we’ll see why.<br /><br />The default URL assigned by Blogger when you create a blog lies in the <span style="font-family:courier new;">blogspot.com</span> domain. A <span style="font-style: italic; font-weight: bold;">domain</span> in Internet jargon here is <span style="font-weight: bold;">a set of names</span>. For example, the <span style="font-family:courier new;">.com</span> domain is the entire set of Internet names that end with <span style="font-family:courier new;">.com</span> and the domain <span style="font-family:courier new;">blogspot.com</span> represents a sub set of this bigger set. In technical terms, <span style="font-family:courier new;">blogspot.com</span> is called a <span style="font-weight: bold; font-style: italic;">sub-domain</span>. (Each sub-domain can be further sub divided into smaller sub-domain.) This system of names used on the Internet is called the <a href="http://en.wikipedia.org/wiki/Domain_name_system">Domain Name System</a> or the DNS in short. The DNS is a distributed, hierarchical system that governs the way Internet names (or domain names) are assigned and also how computers work with those names.<br /><br />You cannot arbitrarily pick a domain name and use it because that <span style="font-weight: bold;">name must first be registered with an authority</span> that controls the particular domain or sub-domain. The <span style="font-family:courier new;">.com</span> is called a Generic Top Level Domain and it is controlled by an organization called the ICANN or the Internet Corporation for Assigned Names and Numbers. Similarly, we can say that <span style="font-family:courier new;">blogspot.com</span> is a sub-domain (under <span style="font-family:courier new;">.com</span>) for which Blogger has acquired the right to use and maintain. Therefore, while Blogger has no problem in assigning the URL <span style="font-family:courier new;">yourblogname.blogspot.com</span> as the default URL, they cannot assign the name <span style="font-family:courier new;">yourblogname.com</span> because they have no authority over the <span style="font-family:courier new;">.com</span> domain. This is where the <span style="font-weight: bold; font-style: italic;">custom domains</span> come in to play.<br /><br />What Blogger refers to as a <span style="font-weight: bold;">custom domain is a domain that does NOT end with</span> <span style="font-family:courier new;">blogspot.com</span>. If you want your blog to have the URL <span style="font-family:courier new;">yourblogname.com</span>, first you must acquire the right to use that domain name. For Blogger blogs this can be done via Blogger itself as described <a href="http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=76543">here</a>. Otherwise you can purchase it from a third party domain registrar. Domain registrars are organization accredited by the ICANN to manage Generic Top Level Domains on its behalf. (There is another type of top level domains called County Code Top Level Domains which are managed by the naming authorities in those respective countries)<br /><br />Once you purchase a custom domain such as <span style="font-family:courier new;">yourblogname.com</span>, then you can instruct Blogger to publish your blog using that custom domain. But before you decide to go for a custom domain, make sure that you analyze the pros and cons of custom domains. In follow up articles we’ll take a look at why you should use custom domains and what things you should worry about.<br /><br /><div class="rel-posts"><p>Related Posts</p><ul><li><a href="http://bguide.blogspot.com/2009/11/deciding-to-move-to-custom-domain.html">Deciding to Move to a Custom Domain</a></li><li><a href="http://bguide.blogspot.com/2009/11/moving-to-custom-domain.html">Moving to a Custom Domain</a></li></ul></div>idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-81686749173843532922009-10-24T22:14:00.004+05:302009-10-24T22:25:34.918+05:30HOWTO: Customize Post Page LabelsThis is an answer to a question I got from a reader. The question had two things; firstly "<span style="font-style: italic;">How do I change the 'comments' label to something like 'reviews'</span>?" and secondly "<span style="font-style: italic;">How can I change the label 'Posted by' to something different</span>?"<br /><br />There's something common about both of these questions. They both are Post Page labels (the word <span style="font-style: italic;">labels</span> is used to mean <span style="font-style: italic;">string literals</span> and not the labels used to categorize posts). Customizing these strings to something of your own is pretty simple. Just open the Blog widgets configuration dialog and change the strings as you like.<br /><br />The illustration below is about how you can change the default comments label to "reactions".<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtnuHG6sAjdh15BqoRVtCUo1EvHrM1hiV01WdbWza27jjnypydPVL-xoJ-JGLXUkS6JCqGb8ZKKOdWKcOZ6U9QRY5vZOavY_JvgofCnJx5iNIIGSurVUm6lLskreRlUHTlRM0W3z9vIQ4/s1600-h/comment_label.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 234px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtnuHG6sAjdh15BqoRVtCUo1EvHrM1hiV01WdbWza27jjnypydPVL-xoJ-JGLXUkS6JCqGb8ZKKOdWKcOZ6U9QRY5vZOavY_JvgofCnJx5iNIIGSurVUm6lLskreRlUHTlRM0W3z9vIQ4/s400/comment_label.PNG" alt="" id="BLOGGER_PHOTO_ID_5396210768091948402" border="0" /></a>idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-23250469750507431572009-10-03T20:35:00.003+05:302009-10-03T21:08:51.707+05:30AdSense FAQHere is a list of some common questions I get from readers regarding AdSense ads.<br /><br /><span style="font-weight: bold;">How do you place AdSense ads on Blogger?</span><br /><br />Four methods are available to place AdSense ads on Blogger blogs. They are:<br /><ol><li><span style="font-weight: bold;">The AdSense Gadget</span> - From the Page Elements view, if you select an Add Gadget option in any of the sections, the list of gadgets provide an AdSense gadget. You can easily configure the ad options from the dialog box and place the ad unit in any place where gadgets can be dragged and dropped. (See <a href="http://bguide.blogspot.com/2009/01/howto-add-more-gadgets.html">How to Add More Gadgets</a> to increase the ad placement options)</li><li><span style="font-weight: bold;">Ads Between Posts</span> - The Posts gadget has an option to display ads between posts. From the Page Elements window, go to Blog Posts -> Edit and select Show Ads Between Posts.</li><li><span style="font-weight: bold;">The Monetize Tab</span> - This is more recent addition which offers a convenient way of adding ads. Go to the Monetize tab on your blog's admin console and select the required display option</li><li><span style="font-weight: bold;">HTML/Javascript Widgets</span> - This is the most flexible method of adding ads which gives you more control over how to place them. Simply copy the ad code from your AdSense accout and use an HTML/Javascript widget to place it anywhere you want.</li></ol><span style="font-weight: bold;">How many adds can I display at a time?</span><br /><br />AdSense has a limitation of only 3 ads of one type per page. That means you can have up to 3 ad units and 3 link units per page.<br /><br /><span style="font-weight: bold;">I enabled Ads Between Posts. Now my sidebar ads are gone?</span><br /><br />This can happen due to the limit of 3 ads of one type per page. If you have configured your Posts widget to show 4 or more posts on the homepage, then the Ads Between Posts option will consume the maximum of 3 ad units on the home page. If the sidebar loads after the posts column (which is usually the case when the sidebar is on the right), then the ads on the sidebar will not be loaded ad they will exceed the ad limit per page.<br /><br /><span style="font-weight: bold;">My blog shows irrelevant ads. Why?</span><br /><br />There can be several reasons for this.<br /><br />Firstly, if your blog is new, then it takes some time for Google to properly index it and understand the relevant type of ads.<br /><br />Secondly, if your blog is not focussed on a particular topic, it becomes hard for AdSense to decide which type of ads are relevant.<br /><br />Thirdly, even if your blogs is focused on a particular niche, that niche may not have enough relevant ads. The focus of this blog itself is an example for such a case.<br /><br />Fourthly, due to the geo-targeting of ads (i.e. serving ads based on the locality of visitors), you might not see relevants ads on your blog. But visitors from the other parts of the world miget see more relevant ads than what you see.<br /><br />There can be more reasons. But the above are the most common ones for irrelevant ads.<br /><br /><span style="font-weight: bold;">My earnings are random. Why?</span><br /><br />See <a href="http://bguide.blogspot.com/2009/08/fluctuations-in-adsense-earnings.html">Fluctuations in AdSense Earnings</a><br /><br /><span style="font-weight: bold;">How can I optimze my ads?</span><br /><br />See <a href="http://bguide.blogspot.com/2009/02/adsense-tips.html">AdSense Tips</a> for some useful tipe on making more out of your ads.idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-67611851649880220642009-09-21T19:59:00.004+05:302009-09-21T20:26:49.883+05:303 Columns : 565 : Two Right SidebarsArticle Series: <a href="http://bguide.blogspot.com/2008/02/3-columns-step-by-step-guides.html">3 Column Step by Step Guides</a><br /><br />This is a tutorial that gives steps to convert a Blogger default 2 column <span style="font-weight: bold;">565 </span>template in to a three column template with two sidebars on the right hand side of the main post area.<br /><br />(If you want to know the <span style="font-weight: bold; font-style: italic;">internals</span> of what's happening here, read the article series <a href="http://bguide.blogspot.com/2008/02/three-column-templates-explained.html">Three Column Templates Explained</a>.)<br /><br />1) Add a new CSS id selector for the 2nd sidebar wrapper.<br /><ul><li>Go to Layout -> Edit HTML</li><li>Locate the <span style="font-family:courier new;">#sidebar-wrapper</span> section (Do a Find using your browser)</li><li>Copy that entire section and paste it below the existing sidebar section (it doesn't have to be below) and rename it to <span style="font-family:courier new;">#right-sidebar-wrapper</span></li><li>Change the <span style="font-family:courier new;">float: $endSide</span> to <span style="font-family:courier new;">float:$startSide</span> of the existing <span style="font-family:courier new;">#sidebar-wrapper</span> section<br /></li></ul><div class="mycode">#sidebar-wrapper {<br /> background:$sidebarBgColor url("http://www2.blogblog.com/no565/corner_sidebar_$startSide.gif") no-repeat $startSide top;<br /> width:254px;<br /> float:$<span style="color: rgb(51, 51, 255);">start</span>Side;<br /> padding:0;<br /> color: $sidebarTextColor;<br /> font-size: 83%;<br /> word-wrap: break-word; /* fix ... in IE */<br /> overflow: hidden; /* fix ... float */<br />}<br /><br /><span style="color: rgb(255, 0, 0);">#<span style="color: rgb(51, 51, 255);">right</span><span style="color: rgb(51, 51, 255);"></span><span style="color: rgb(51, 51, 255);">-</span>sidebar-wrapper {</span><br /><span style="color: rgb(255, 0, 0);"> background:$sidebarBgColor<br />url("http://www2.blogblog.com/no565/corner_sidebar_$startSide.gif")<br />no-repeat $startSide top;</span><br /><span style="color: rgb(255, 0, 0);"> width:254px;</span><br /><span style="color: rgb(255, 0, 0);"> float:$endSide;</span><br /><span style="color: rgb(255, 0, 0);"> padding:0;</span><br /><span style="color: rgb(255, 0, 0);"> color: $sidebarTextColor;</span><br /><span style="color: rgb(255, 0, 0);"> font-size: 83%;</span><br /><span style="color: rgb(255, 0, 0);"> word-wrap: break-word; /* fix for ... IE */</span><br /><span style="color: rgb(255, 0, 0);"> overflow: hidden; /* fix ... float */</span><br /><span style="color: rgb(255, 0, 0);">}</span><br /></div><br />2) Add a new <span style="font-family:courier new;">div</span> element, as a child of the <span style="font-family:courier new;">content-wrapper</span>, to hold the 2nd sidebar<br /><ul><li>Locate the <span style="font-family:courier new;"><div id='sidebar-wrapper'></span> element.</li><li>Copy the code shown in red, <span style="font-weight: bold;">below</span> that section (this must be below)</li></ul><div class="mycode"><div id='sidebar-wrapper'><br /> <b:section class='sidebar' id='sidebar' preferred='yes'><br /> <b:widget .../><br /> <!-- existing widgets will be here --><br /> </b:section><br /></div><br /><br /><span style="color: rgb(255, 0, 0);"><div id='right-sidebar-wrapper'></span><br /><span style="color: rgb(255, 0, 0);"> <b:section class='sidebar' id='right-sidebar' preferred='yes'></span><br /><span style="color: rgb(255, 0, 0);"> </b:section></span><br /><span style="color: rgb(255, 0, 0);"></div></span><br /><br /><!-- spacer for skins that want sidebar and main to be the same height--><br /></div><br />3) Expand the width of the other wrappers to accommodate the new sidebar<br /><ul><li>Locate the CSS section called <span style="font-family:courier new;">#outer-wrapper</span></li><li>Change its width property to 1006 pixels</li></ul><div class="mycode">#outer-wrapper {<br /> position:relative;<br /> top:4px;<br /> $startSide:4px;<br /> background: #889977;<br /> width:<span style="color: rgb(255, 0, 0);">1006</span>px;<br /> ...<br />}</div><br />4) Do necessary adjustments to margins, padding etc<br /><ul><li>Locate the <span style="font-family:courier new;">#main-wrapper</span> section</li><li>Insert a right margin of 6 pixels. (add the line shown in red)<br /></li></ul><div class="mycode">#main-wrapper {<br /> width: 460px;<span style="color: rgb(255, 0, 0);"><br /> margin-right:6px;</span><br /> float: $startSide;<br /> ...<br />}</div><br />5) Copy the following CSS styles shown in red, below the <span style="font-family:courier new;">#sidebar</span> selector<br /><br /><div class="mycode">#sidebar {<br /> margin:0;<br /> padding:2px 20px 10px;<br />}<br /><br /><span style="color: rgb(255, 0, 0);">#right-sidebar {</span><br /><span style="color: rgb(255, 0, 0);"> margin:0;</span><br /><span style="color: rgb(255, 0, 0);"> padding:2px 20px 10px;</span><br /><span style="color: rgb(255, 0, 0);">}</span><br /><br /><span style="color: rgb(255, 0, 0);">#right-sidebar a {</span><br /><span style="color: rgb(255, 0, 0);"> color: $sidebarLinkColor;</span><br /><span style="color: rgb(255, 0, 0);">}</span><br /><br /><span style="color: rgb(255, 0, 0);">#right-sidebar a:visited {</span><br /><span style="color: rgb(255, 0, 0);"> color: $sidebarVisitedLinkColor;</span><br /><span style="color: rgb(255, 0, 0);">}</span><br /><br /><span style="color: rgb(255, 0, 0);">#right-sidebar a:hover {</span><br /><span style="color: rgb(255, 0, 0);"> color: $sidebarVisitedLinkColor;</span><br /><span style="color: rgb(255, 0, 0);">}</span></div><br />6) Modify the CSS rules for the wire frame layouts editor.<br /><ul><li>Locate the end of the skin denoted by "<span style="font-family:courier new;">]]></span>"</li><li>Add the following code shown in red, above that line.</li></ul><div class="mycode">/** Page structure tweaks for layout editor wireframe */<br /><br /><span style="color: rgb(255, 0, 0);">body#layout #outer-wrapper { </span><br /><span style="color: rgb(255, 0, 0);"> padding-top: 0;</span><br /><span style="color: rgb(255, 0, 0);"> width:720px;</span><br /><span style="color: rgb(255, 0, 0);">}</span><br /><span style="color: rgb(255, 0, 0);">body#layout #header-wrapper,</span><br /><span style="color: rgb(255, 0, 0);">body#layout #content-wrapper,</span><br /><span style="color: rgb(255, 0, 0);">body#layout #footer-wrapper { </span><br /><span style="color: rgb(255, 0, 0);"> padding: 0;</span><br /><span style="color: rgb(255, 0, 0);"> width:720px;</span><br /><span style="color: rgb(255, 0, 0);">}</span><br /><br /><span style="color: rgb(255, 0, 0);">body#layout #main-wrapper {</span><br /><span style="color: rgb(255, 0, 0);"> width:400px;</span><br /><span style="color: rgb(255, 0, 0);">}</span><br /><br /><span style="color: rgb(255, 0, 0);">body#layout #sidebar-wrapper,</span><br /><span style="color: rgb(255, 0, 0);">body#layout #right-sidebar-wrapper {</span><br /><span style="color: rgb(255, 0, 0);"> width:150px;</span><br /><span style="color: rgb(255, 0, 0);">}</span><br /><br />]]></b:skin></div><br />Save the template. Switch to Page Elements view and enjoy your 3 column template! (The new sidebar may not be visible until some widgets are added to it)<br /><br /><div class="rel-posts"><p>Related Posts</p><ul><li><a href="http://bguide.blogspot.com/2008/02/three-column-templates-explained.html">Three Column Templates Explained</a></li></ul></div>idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-47473999346789413992009-08-26T09:21:00.005+05:302009-08-26T09:37:17.198+05:30Google Certified Ad Networks with AdSenseGoogle has announced an interesting new feature in AdSense, <span style="font-weight: bold;">Google-certified ad networks</span>.<br /><br />Ad networks are like the ad marketplaces where advertisers and publishers get together. Though the advertisers and publishers don't meet each other physically, the ad network works as the intermediary between these two parties who want to buy and sell advertising space.<br /><br />Up until now, AdSense served only AdWords ads (except for some display ads from third party vendors). With this change, they are going to allow third party ad networks to serve ads to AdSense publishers. This feature will be initially made available to publishers in North America and Europe, but according to Google, will be rolled out to other regions in due cause.<br /><br />This means that more advertisers will be competing for ad spaces and the additional competition is certainly good news for publishers.<br /><br />For more information, see <a href="http://adsense.blogspot.com/2009/08/getting-most-revenue-from-every.html">this</a> post on the AdSense blog.idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-91563021013824859352009-08-07T20:44:00.004+05:302009-08-16T20:54:11.289+05:30Why the URL colors changed suddenly?Copying content from MS Word and pasting directly on to the Blogger post editor <span style="font-weight: bold;">can upsets the template styles</span> and on most occasions, it directly <span style="font-weight: bold;">affects the URL colors</span> (i.e. the link, visited link colors etc). Over the past six months or so I have observed this question getting raised on the Blogger help forums several times and on all occasions it was caused by the same reason. (see <a href="http://www.google.com/support/forum/p/blogger/thread?tid=436d5fab0e1a1d19">this</a> one for example)<br /><br />Here's how it happens.<br /><br />The text editor in MS Word is referred to as a <span style="font-weight: bold;">Rich Text</span> editor, meaning that it support various rich formatting such as bold, italics, different fonts and colors and also many styles such as Heading 1, Heading 2, Body Text and so on. It's true that Blogger editor also gives some formatting options, but MS Word offers much much more style and formatting options. In order to support these additional formatting, MS Word keeps a whole lot of meta data in addition to the basic text you type. If you copy some text from a Word document, all the meta data also gets copied in the background and, when you directly paste that on to Blogger, you get that whole gamut of meta data as well. (Paste a single word directly from MS Word, go to the Edit HTML mode of Blogger editor and see the amount of meta information that get's pasted for that single word)<br /><br />Once you publish such a post, your template styles get messed up due to the styles copied over from MS Word and the final result will be problems such as the one describe above.<br /><br />If you draft your posts using MS Word, first pasting on to a simple text editor such as Notepad will strip off all the style information and will leave you with only the text you typed. Then copy from Notepad and paste on to Blogger editor. You will now have all what you typed minus all the formatting (such as bold, italics, fonts etc). This obviously has the problem of you having to reapply all the formatting using the Blogger's editor, but that is a safer approach as it will not mess up your template styles.<br /><br />(Note: Same problem can occur with other Rich Text editors as well)idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-36626908022945304992009-08-05T11:36:00.009+05:302009-08-16T20:55:10.993+05:30A Better Read More OptionIn a previous post I presented <a href="http://bguide.blogspot.com/2009/07/howto-add-read-more-option.html">a simple technique to add a <span style="font-weight: bold;">Read More</span> option</a> to hide a desired portion of long blog posts. But that method has a drawback because it shows the "<span style="font-weight: bold;">Read More</span>" link even for the posts that do not have hidden parts.<br /><br />Here's an improved version of that technique which shows the <span style="font-weight: bold;">Read More</span> link only if you have decided to hide part of a post. [Note that the "Read More" link will be displayed only on the blog home page and archive (i.e. label) pages]<br /><br />1) Go to Layout -> Edit HTML and click the ‘Expand Widget Templates’ check-box.<br /><br />2) Locate the </head> tag and copy the code shown in red in the following snippet, above that tag.<div class="mycode"> ]]></b:skin><br /><span style="color: rgb(255, 0, 0);"><b:if cond='data:blog.pageType == "item"'><br /><style>span.fullpost {display:inline;}</style><br /><script>function tbgHideReadMores() {}</script><br /><b:else/><br /><style>span.fullpost {display:none;}</style><br /><script><br />function tbgHideReadMores() {<br /> var els = document.getElementsByTagName(&#39;*&#39;);<br /> for (i = 0; i &lt; els.length; i++) {<br /> if ((els[i].className == &#39;post-body&#39;) || (els[i].className == &#39;post-body entry-content&#39;)) {<br /> tbgHideReadMore(els[i])<br /> }<br /> }<br />}<br /><br />function tbgHideReadMore(post) {<br /> var spans = post.getElementsByTagName(&#39;span&#39;);<br /> var found = 0;<br /> for (var i = 0; i &lt; spans.length; i++) {<br /> if (spans[i].className == &quot;fullpost&quot;) {<br /> spans[i].style.display = &#39;none&#39;;<br /> found = 1;<br /> }<br /> }<br /><br /> var lnks = post.getElementsByTagName(&#39;a&#39;);<br /> for (var i = 0; i &lt; lnks.length; i++) {<br /> if ((lnks[i].innerHTML == &quot;Read More&quot;) &amp;&amp; (found == 0)){<br /> lnks[i].style.display = &#39;none&#39;;<br /> }<br /> }<br />}<br /></script><br /></b:if></span><br /></head></div><br />3) Locate the <body> tag and modify it as shown below.<br /><br /><div class="mycode"><body <span style="color: rgb(255, 0, 0);">onload='tbgHideReadMores()'</span>><br /></div><br />4) Locate the <data:post.body/> element and add the code shown in red below.<br /><br /><div class="mycode"><div class='post-body entry-content'><br /><p><data:post.body/><br /><span style="color: rgb(255, 0, 0);"> <b:if cond='data:blog.pageType != "item"'><br/><br /> <a expr:href='data:post.url'>Read More</a><br /> </b:if></span><br /></p></div><br />5) Then for each post that you want to display a summary, you have to add the following piece of code <span style="font-weight: bold;">enclosing the part that you want to hide</span>. (Do this from the Edit Html tab of the post editor)<br /><br /><div class="mycode">This is a sample long post. Only these two lines are visible on the homepage.<br /><br /><span style="color: rgb(255, 0, 0);"><span class="fullpost"></span>This sentence, which is enclosed inside the HTML code<br />shown in red, will be displayed only when a visitor clicks on the Read More<br />link.<span style="color: rgb(255, 0, 0);"></span></span></div><br /><br /><span style="font-weight: bold;">Notes:</span><br /><ul><li>Instead of "<span style="font-weight: bold;">Read More</span>", if you want some other phrase such as "<span style="font-weight: bold;">Continue...</span>", then you have to put that exact string in the places in which "<span style="font-weight: bold;">Read More</span>" appears in steps (2) and (4).</li><li>The unnecessary <span style="font-weight:bold;">Read More</span> links get hidden only after the page is fully loaded. So you might see them initially, until the home page gets fully loaded in the browser.</li></ul>idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.comtag:blogger.com,1999:blog-8346045355806093791.post-46597525681221237312009-08-02T23:01:00.004+05:302009-08-02T23:43:32.395+05:30Fluctuations in AdSense EarningsThe AdSense earnings can vary from as few as two to three cents per click to as much as one dollar per click. These fluctuations are quite normal and are usually the result of one or more of the following reasons.<br /><ul><li><span style="font-weight: bold;">Drop in ad impressions</span> due to reduced traffic or page views</li><li><span style="font-weight: bold;">Drop in the click-through-rate</span> (or CTR) - A CTR of 1% to 4% is considered normal but I have seen days where it drops to as low as 0.5%</li><li><span style="font-weight: bold;">Lack of relevant contextual ads</span> for the content of the pages - low relevancy would mean that AdSense would serve low paying ads</li><li><span style="font-weight: bold;">Reduction in advertising budgets</span> of advertisers</li><li><span style="font-weight: bold;">Seasonal variations</span> - for example, festive seasons may attract bigger advertising budgets and therefore there will be higher cost-per-clicks (CPC)<br /></li></ul>The advertisers seem to bid higher on the beginning and in the middle of a month. But, CPC seem to drop towards the end of the month, probably because advertisers run out of gas.<br /><br />Further Reading:<br /><ul><li><a href="http://adsense.blogspot.com/2008/03/diagnosing-and-treating-revenue.html">Diagnosing and treating revenue fluctuations (Part I)</a></li><li><a href="http://adsense.blogspot.com/2008/03/diagnosing-and-treating-revenue_06.html">Diagnosing and treating revenue fluctuations (Part II)</a></li></ul>idshttp://www.blogger.com/profile/11714464391815939906noreply@blogger.com