Solve "Another blog or Google site is already using this address" On Blogger

This week has been complete a roller coaster ride for me. I saw both the ups & downs with my blog - almost lost this domain, PR Update, etc... Many would have noticed that my domain "www.newbloggingtipz.com" was not available for few days. The reason behind the absence was a redirection problem - the infamous "Another blog or Google site is running on this address" problem.

I did struggle to get my domain back. I'm not sure how I solved my issue but this might help you provided you have proper DNS settings on your domain registrar. I should definitely thank Jacklynn Tong and Patrick from the Google Apps team for their support and nitecruz from the blogger help forum who tried their best to solve my issue. I would list two possible solutions that would solve this issue.

Before we beign, just check whether the DNS settings are correct on your domain registrar. You need to have the CNAME and A NAME records as mentioned in the screen-shot below.

Note: Please replace the domain name in the respective rows above with your domain name. I just showed you the DNS settings for my blog. 
Are they correct? If not, change them as mentioned above and wait for 1800 seconds. Now, trying redirecting your blog to the custom domain. If they are correct and still you see the problem on the blogger dashboard, then you need to try this...

SOLUTION 1
1. Login to your Google Apps Account - Domain Management. Navigate to "Settings" page from the dashboard. Now, choose sites tab that appears on the left.
2. You will see a tab that shows "Web Mapping". Just click on it. Check whether a mapping exists. If yes, then delete the mapping.

3. Now, login to your Blogger Dashboard and try to redirect your blogspot domain to the custom domain.

SOLUTION 2
1. Login to your Google Apps Account - Domain Management. Navigate to "Settings" page from the dashboard. Now, choose "Sites" tab that appears on the left.
2. You will see a tab that shows "Web Mapping". Just click on it. Check whether a mapping exists. If not, return to the previous page. Click on "Change URL" link that appears to be blue in color. Have a look at the screen-shot below.

3. Select the second option on the page that appears below. Just enter "www" in the space available in the second option. Proceed with the continue options. Now, make the DNS changes if required to! Else, leave it as it was! Have a look at the screen-shot below for better understanding.

4. Now, save the changes that you made. Wait for few minutes. Then, login to your Blogger Dashboard and try to redirect your blogspot domain to the custom domain. It should now redirect to the sites page which you enabled (mentioned at step 3). In other words, you should not see the "Another blog or.." error.
5. If yes, then your problem is solved. Just revert back to the blogspot domain from your blogger dashboard. Save it. Later, login to your Apps Accout and navigate to "Dashboard >> Settings >> Sites". Again hit the "Change URL" link and choose the first option. Save the changes you made. Log out from your Google Apps Account. Wait for few minutes.
6. Now, login to your Blogger Account and try to redirect your custom domain. You will not see "Another blog or Google site is already using this address" error.

Well, if the above two solutions don't work. Then, login to your Google Apps Account and Use the "Support" tab to contact the Google Apps Team. Your query will be addressed in not more than 48 hours. In my case, they even gave me a call to fix the issue. So, don't panic! You will get back your domain! You may contact me via email if you need any help regarding this issue!

Click4more... 38 Comments

Google PR (PageRank) Update 2011

We talked enough about PR and factors that contribute to PR. We even discussed about the nofollow and dofollow tags in our previous articles. So this time, I wanted to show you some proven results to attain PR rather than just discussions. We are glad to inform that we got a PR3 today for homepage while several inner pages have got a PR2 or PR1! Did Google Update its PR this month?

From Googling, I found that the last major update was made on "19th January 2011". I guess Google is making another update this month "June 2011", as well. Few claim that they had a change in their PR this month just like I do. Well, who knows - it may just be a minor update! So, keep your fingers crossed and hope for the best!!! It's been confirmed that the PR Update happened on June 27th 2011. So, what's your PR?

I recently published an article about the comparison between Google PR and Alexa Rank - Alexa Rank Vs. Google PageRank(PR). I did mention that the Google PR algorithm seems to be pretty complex. I guess I should correct myself now!!! They do appear to be complex when you consider all factors like Page Speed, Do Follow Links, No Follow Links, etc.. But, if you narrow them down to one factor, well, it's pretty simple. That's the result I'm talking about - backlinks (the one big factor).

I would prove this is the main factor that contributes to PR from the analysis I carried out with my very own domain. Initially, I ran my blog on blogspot domain "www.newbloggingtipz.blogspot.com" which had a PR4. I assumed that blogs run on blogger, by default, were dofollow but later found that, they are not! So, it was a nofollow blog with more than 50 quality back-links from domains that had PR ranging from 1 to 5.

Later, I made the shift to the custom domain "www.newbloggingtipz.com"- way back in the month of June 2010. My PR dropper to Zero due to the shift. I made my blog "dofollow" which brought nothing but a lot of spam comments. I waited for the PR update - that was made on Jan 2011, but to my disappointment I found that even after the update my domain still had a PR0.

Well, I decided to revert my blog back to nofollow. I made this shift probably in the month of April 2011, I guess. Suprisingly, it has worked now. So, as far as I know, to have a better PR, make sure your blog has enough dofollow backlinks while your blog is on a nofollow status. Though it seems to be pretty selfish (getting all the link juice you want from high PR domains but not spreading them to your followers), I recommend you do it for a better PR.

Though I personally don't recommend building a PR, I do recommend you to build a quality website/blog with great content and good design. You don't have to follow sites that list dofollow blogs and  comment on them, PR will follow your blog! So, just concentrate on your content and work a little more on improving your design! Do let us know via comments if you had a change in your PR this month!

Click4more... 35 Comments

Puxee Review - An Alternative to BuySellAds

The days of CPC & CPM ads are gone. Both publishers & advertisers look out for direct advertisements through sites like BuySellAds, AdvertiseSpace, etc... I see a lot of blogs running BuySellAds that simply shows people love making money online by building quality websites/blogs - a healthy blogosphere. But, I do get feedbacks saying "I got rejected from BuySellAds! What do I do? Suggest me few alternatives. When should I apply?"

This post basically deals with the answer to the former part of the question while the later is answered in this article - How To Get Approved For BuySellAds? I'm sure you would have noticed the addition of new Ad blocks on the right sidebar of my blog - these blocks are from Puxee! I just wanted to give it a try because one of my friend suggested to do so. To be very frank, I'm pretty happy to know that there is a new competition for BuySellAds. The sign up process was very simple! Just the basic details and your done!

An Activation email would be sent immediately. Once you activate your account and add your blog as a publisher, you will receive an email  in not more than 24 hours about the approval of your blog into their directory! As far as I know, if you have a pretty decent amount of traffic, they will approve you - not necessary that you meet the guidelines of BuySellAds. 

Adding sites and zones - user interface seems to be very simple. However, it needs a lot of improvement because you will not know whether you made a change or not. An example to show the flaw in their website - Just try editing your website details. When you  try to edit your website details, you click on the "Edit Website" tab available on the left.  Look at the tab available for saving at the bottom on the page that opens. This tab will remain the same before and after you make a change.

PROS/ADVANTAGES :

• Simple Sign Up Process.
• Easy Acceptance Into Their Database.
• 75% Revenue Of Your Income. (Only 25% Commission For Puxee)
• Easy Integration Of Ad Code - similar to BuySellAds.
• Instant Payments Via PayPal.
• 25% Affiliate Commission.

CONS/DISADVANTAGES:

• Improved User Interface.
• An Improved Directory. 
• Better Coding To Fetch The Details Of Publisher - Facebook Fans, FeedBurner Stats, etc...

Since the number of pros are higher than the cons for this website, I would say "Puxee is a better alternative to BuySellAds, definitely not the best!!!" I recommend the newbies to try this website so that they make some pennies out of their blog. Share your knowledge or experience about this website via  comments. We would love to hear from you!

Click4more... 14 Comments

3 Great Apps To Write Or Edit Blog Posts On Android Powered Smartphone Or Tablet

Mobile computing is the wave of the future and for those of us who have trouble in finding time to sit in front of a computer to write or edit a blog post it can be a godsend. Here are three mobile applications for Android powered smartphones and tablets that will help you write and edit blog posts more easily while your on the go.

1. SWYPE

Swype is an amazing new keyboard technology that doubles the speed with which people can enter text on a touch screen. Swype works by sliding your finger over the letters that make up a word rather than pressing each button individually. So for example, rather than typing “expert” by tapping each letter in sequence you simply drag your finger tip over each letter. The program is remarkably good at figuring out the word your going for. Not only does Swype save time, but it's also far more accurate while on a bumpy train or bus. Swype comes pre-installed on most Android devices but if it isn’t on yours, it can be found completely free with a quick Google search.

2. GOOGLE DOCS

The Google Docs App works as a sort of hub and provides a better mobile interface for organizing your uploaded documents. Simply clicking on the document opens it in the browser so that you can keep writing or editing it on your phone or tablet as easily as on a computer. Another cool feature is that if you begin to type a blog post on Google Docs and save it. Well, you can get back home and log on to your computer to pick up directly from where you left off. Google Docs can be accessed on any Android device by logging in with the browser but the free application available from the market is a much better and faster option.

3. THINK FREE OFFICE

As convenient and easy as Google Docs is to use on mobile devices, chances are there where you’re unable to get a service or sometimes, without an access to the Internet. For those instances, think free office is the best mobile office suit for Android. Think free gives you the same powerful tools you’re used to, for editing word and excel documents on your smartphone or tablet. Think Free Office also gives you the option to log in to your Google account and download your documents so that they are all there and ready for you if ever you need them and there isn’t an internet connection available. Think Free Office can be downloaded from the Android market at no cost.

I have enlisted only a few options for mobile computing. If you know better about mobile computing and the associated apps for it, well, you can share your knowledge via comments. We would love to hear from you!!!

Click4more... 1 Comment

Shoutmeloud Thesis Theme Customization - Part 5

We are constantly working on our SML blogger theme and updating the same to match the original WP version created by Harsh Agarwal. In our previous article - Part 4, we explained about the link hover effect and block-quotes section while this article deals with the tag section along with the inclusion of a Numbered Page Navigation widget similar to SML. Excited to add this to your existing SML theme?

Check out the live demo of the above mentioned hacks : LIVE DEMO

BLOCK TYPE TAG/LABELS ON SML BLOGGER THEME
So, let's get started. We'll first add the tag section beneath our posts similar to SML. To do so, first navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page.
1. Once the back up is over, expand your template and search for the following block of code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div stlye='font-family:Times New Roman; font-size:16px; font-color:#A91B33;'><br/>For Further Reading,
<div style='display:none;'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name +   &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop></div>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script></div></b:if>

2. Place the following piece of code just below the block of code mentioned in step 1.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<span style='width=100px; float:left; margin-top:3px;'>Tagged as : </span><b:loop values='data:post.labels' var='label'><span class='new-labels' style='background-color: #006699; color: #FFFFFF; line-height: 30px;     text-decoration: none; float:left; display:block; padding-left:5px; padding-right:5px; width:auto; margin-left:5px;'><a expr:href='data:label.url' rel='tag'><data:label.name/></a></span><b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop>
</b:if>
</span>
<br/>
</b:if>

3. Next, look for the following code.

]]></b:skin>

4. Place the following piece of code ( CSS part) just above the line mentioned in step 3.

.new-labels a{
background-color: #006699;
color: #fff;
text-decoration: none;
}

5. That's it!!! Save your template.

"The block type labels or tag section will be visible only the post pages. So, check out your individual articles rather than the homepage."

PAGE NAVIGATION FOR SML BLOGGER THEME
Let's move to the next tutorial on adding the page navigation to SML blogger theme. The hack is pretty similar to the one you installed above - addition of CSS and a script to work out the coding. Just make a backup of your template as explained earlier in the post. Later, follow these steps.
1. Search for the following piece of code.

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

2. Place the code present in this text document - SML Page Navigation Script, just below the line mentioned in step 1.
3. Search for the following code in your template and remove/delete it.

#blog-pager-newer-link{ float:left; display:inline}
#blog-pager-older-link{ float:right; display:inline; margin-right:-20px}
#blog-pager{ text-align:center; display:inline}
.blog-pager{font-size:12px}
.blog-pager a:link, .blog-pager a:visited{ display:block; float:left; padding:6px 10px; text-align:center; background:#888; color:#FFF; font-size:12px; font-weight:bold; margin-right:8px}
.blog-pager a:hover{ background:#444; color:#FFF}

4. Next, search for the following piece of code.

]]></b:skin>

5. Add the following piece of code ( CSS part) just above the line mentioned in step 4.

#blog-pager-newer-link{float:left; display:inline;}
#blog-pager-older-link{float:right; display:inline; }
#blog-pager{display:inline; text-align:center;width:632px;margin-left:200px;padding:4px 0px;margin-top:5px;margin-right:0px;margin-bottom:0px;}
.showpageArea{float:left}
.showpageOf{margin:0 8px 0 0;padding:3px 7px;color:#fff;font:15px helvetica;background:#007EC4;border-radius: 4px 4px 4px 4px; border:1px solid #007EC4;}
.showpageArea{margin:10px 0;font:15px helvetica;color:#007EC4}
.showpageNum a{font:15px helvetica;padding:3px 7px;margin:0 4px;text-decoration:none;background:#007EC4;color:#fff;border-radius: 4px 4px 4px 4px;border:1px solid #007EC4;}
.showpageNum a:hover{color:#007EC4;background:#FFF;border-radius: 4px 4px 4px 4px;border:1px solid #007EC4;}
.showpage a{font:15px helvetica;padding:3px 7px;margin:0 4px;text-decoration:none;background:#007EC4;color:#fff;border-radius: 4px 4px 4px 4px; border:1px solid #007EC4;}
.showpage a:hover{color:#007EC4;background:#fff;border-radius: 4px 4px 4px 4px; border:1px solid #007EC4;}
.showpagePoint{color:#fff;font:bold 15px helvetica;padding:2px 7px;margin:2px;border-radius: 4px 4px 4px 4px; border:2px solid #fff;background:#007EC4;text-decoration:none}

Note: You may change the font-style by changing the code highlighted in green. You may decrease or increase the border radius for rounded corners (More About Rounder Corners Using CSS3) by changing the code highlighted in orange.
6. Save your template! That's it!

Please share your opinions about the customizations which you want to have on the template as well as comment on the customizations that we post. See you soon in another interesting article!

Click4more... 15 Comments

Unique Navigation Bars Using CSS Sprites

In my previous article about CSS Sprites - Introduction, I told you about the hover effect with an example. We did mention that we would come up with more practical examples so that you realize the importance of CSS Sprites. So, we have come up with step by step instructions (including a little bit of PhotoShop tutorials) for creating a unique navigation bar based on CSS Sprites.

PHOTOSHOP TUTORIAL
To create a navigation bar that stands unique from the rest of the other blogger templates, it becomes a little mandatory that you know a little about PhotoShop. So, we will just let you know how to create one.

1. Open Adobe PhotoShop. Create a new transparent file with the dimensions you want. Most of the blogs usually have a navigation bar of width 960px and height varies between 30-50px. In this tutorial, we will be working with an example of dimension 495 x 48px.

2. Now, let your imagination run wild. Create a unique navigation bar as per your wish. Try different fonts, change pixel sizes, change the text color (or) include images next to each text. It's your navigation bar. So, have it your way. The design which I made is a simple one with icons next to each text as shown below.

3. Save this image as "Nav-01" using "File>>Save for Web..." option to obtain a .png image. This image will serve as the base image below which we will build another image for the hover effect. So, create another new file with same width as that of the initial image but double the height. In my example, I had an initial image with dimensions 495 x 48 px. The new image should be 495 x 96 px.

4. Now, open "Nav-01.png" and copy the entire image to the new file which you created. Place the image to fit the window dimensions. You will find a new layer being created that has a label "Layer 1". Have a look at the following picture for better understanding.

5. Now, duplicate that layer (Layer 1) as shown below.

6. We need to show a difference when the mouse is hovered over the link. For this very reason, place the duplicate layer below the first layer and work on the duplicate layer alone. You may show difference by changing the text color (or) have gradient effects...
7. In my case, I have just added a small box to appear above each link. So, the final outcome would be something like the one shown below.

Well, save this image as "Final-Nav-Bar.png" and upload the same to PICASA or ImageShack or any image up-loader. Obtain the URL and save it to a temporary text file!!!

"I'm sure you would have gone nuts before you got the exact look you had in your mind! Assuming that you got one, you may have a cup of coffee to relax yourself before we move the next part in the tutorial."

HTML PART
The HTML coding involved with the navigation bar is pretty simple. We make use of an unordered list with 4 list items present it. We make use of span tags in the HTML part so that, the search engines index the text along with the image rather than only the image. Well, you may extend the list to any number as you want. Make sure the text on the image and text in between the span tag matches else you will end up flagged. You may place the following piece of code anywhere in between body tags to realize the effect.

<ul id='nav-example'>
<li id='nav-example-1'>
<a href='#'><span>Home</span></a></li>
<li id='nav-example-2'>
<a href='#'><span>Advertise</span></a></li>
<li id='nav-example-3'>
<a href='#'><span>Contact</span></a></li>
<li id='nav-example-4'>
<a href='#'><span>Portfolio</span></a></li>
</ul>

Save your template once you add the above code! You may replace the '#' symbol with the links you wish to point to. It's pretty self-explanatory!

CSS PART
The CSS part will vary from person to person depending upon the image size you chose and other specifications. However, the basic layout will remain the same. You just need to vary few parameters in the coding below to match your creative work.

#nav-example {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdKp6bvfkjjGa3DtAccFUlfa45fqXRitCjOdIIw8QMQKI7g1ruzgKay1e3_Bgbl29-wy4yqD-Jd8W2hB-FDFs2lVSLumQlGDmmKCyOWuPTgn6IEqsptYTRTpabNko5nD-QqGcCmWFso_ct/s800/final-nav-bar.png") no-repeat;
width:495px;
height:48px;
margin:0;
padding:0;
}
#nav-example span {
display: none;
}
#nav-example li, #nav-example a {
height:48px;
display:block;
}
#nav-example li {
float:left;
list-style:none;
display:inline;
}
#nav-example-1 {width: 125px;}
#nav-example-2 {width: 122px;}
#nav-example-3 {width: 122px;}
#nav-example-4 {width: 123px;}
#nav-example-1 a:hover {background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdKp6bvfkjjGa3DtAccFUlfa45fqXRitCjOdIIw8QMQKI7g1ruzgKay1e3_Bgbl29-wy4yqD-Jd8W2hB-FDFs2lVSLumQlGDmmKCyOWuPTgn6IEqsptYTRTpabNko5nD-QqGcCmWFso_ct/s800/final-nav-bar.png") 0px -48px no-repeat; }
#nav-example-2 a:hover {background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdKp6bvfkjjGa3DtAccFUlfa45fqXRitCjOdIIw8QMQKI7g1ruzgKay1e3_Bgbl29-wy4yqD-Jd8W2hB-FDFs2lVSLumQlGDmmKCyOWuPTgn6IEqsptYTRTpabNko5nD-QqGcCmWFso_ct/s800/final-nav-bar.png") -125px -48px no-repeat; }
#nav-example-3 a:hover {background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdKp6bvfkjjGa3DtAccFUlfa45fqXRitCjOdIIw8QMQKI7g1ruzgKay1e3_Bgbl29-wy4yqD-Jd8W2hB-FDFs2lVSLumQlGDmmKCyOWuPTgn6IEqsptYTRTpabNko5nD-QqGcCmWFso_ct/s800/final-nav-bar.png") -247px -48px no-repeat; }
#nav-example-4 a:hover {background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdKp6bvfkjjGa3DtAccFUlfa45fqXRitCjOdIIw8QMQKI7g1ruzgKay1e3_Bgbl29-wy4yqD-Jd8W2hB-FDFs2lVSLumQlGDmmKCyOWuPTgn6IEqsptYTRTpabNko5nD-QqGcCmWFso_ct/s800/final-nav-bar.png") -369px -48px no-repeat; }

If you are blogger - blogspot user, then place the above code just before the following line. Use "CTRL+F" to search your blogger template.

]]></b:skin>

Finally, replace the link which points to my example to your image URL - the one which you temporarily saved on a text document. Just replace the code highlighted in blue with your link. Save your template!

CUSTOMIZATION
1). The very basic step in customizing the CSS part to match your navigation bar would be to change the width and the height of the bar. As mentioned earlier in the post, I worked on 495 x 48 px version while your navigation bar could be much larger or smaller. So, vary the code that is highlighted in green to match the dimensions of your navigation bar and save them.

2). Note the codes highlighted in orange. These codes specify the width of the lists in the navigation bar. In my example, the first list occupies a width of 125px while the second one occupies a width of 122px and so on... You may vary this as per your design. It's better to use the option of "Rulers" in PhotoShop to know the exact width of each item. Make the respective changes as per your design and save them!

3). The background position for the a:hover state is pretty easy to fix. The vertical position will never vary because you have to display the complete bar. So, you can simply mention the height with a negative sign prefixed to it. To find the horizontal position ( Highlighted with Rose Color), initially you start off from 0px. The next position shall be obtained by subtracting from the nav-example-01 state, that is, 0 - 125 = -125 px. Similarly for the next position, obtain it from nav-example-02, -125 - 122 = -247px. This shall be done for your entire list. That's it! Save the template and your done!

Your final output should be as shown in the following DEMO LINK - NAVIGATION BAR USING CSS SPRITES, provided you followed all the steps correctly! Just hover your mouse over the lists on the page and enjoy the effect!!! Another great example to let you know how creative your work could be - CSS Navigation Bar Example.

"If you wish to have unique navigation bars for your blog without any hassle, then reach us via Our Services page. We'll design distinct navigation bars for you and set them on your blog too!!! Why to break your head when we are there to do that:)"

I tried to keep things as simple as possible! If you find any difficulties, our comments section is always welcome. Leave a comment and clear your doubts. We'll see you in another interesting tutorial!

Click4more... 10 Comments