How to point a single domain to 2 different web hosting accounts


Recently i purchased a domain name 2lessons.info from GoDaddy for my blog and pointed it to blogger because there is not much customization option in wordpress.com.

My blog 2lessons.info is now powered by blogger.com. I just had to customize the blogger template.

2lessons profile

1. Setup custom domain name at Blogger

2lessons domain name setup

– In new Blogger profile click on the Basic Settings at left menu and provide your desired domain name.

2.  Choosing a webhosting company for hosting demo and download files

I have already tried many free web hosting providers, but found 000webhosting much better.

– Register at http://www.000webhost.com/order.php

– We will now create a sub domain at 000webhost http://demos.2lessons.info

– Our next step will be to park our domain name at 000webhost

3.  Setting up domain at GoDaddy to point to blogger and 000webhost both.

– Login to your GoDaddy profile.

– Click on MyAccount

– Launch your domain and open domain manager

– In DNS Manager tab click launch

– In CNAME (Alias) click Quick Add

Host: demos and Points to = “Your server address from 000webhost

Wait for 15 minutes and your changes at domain name will be propagated and you will be able to upload your files to your sub-domain.

https://itswadesh.wordpress.com/2012/07/10/how-to-point-a-single-domain-to-2-different-web-hosting-accounts/

How to Display Author Info Box of a Guest Post in Blogger


Sometimes bloggers accept guest post due to lack of time. In return they provide the author with some quality backlinks and advertisement. Hence it becomes necessary to display some information about the author in a polite and attractive manner. This further encourage more and more people to write quality articles for us.

The tutorial bellow explains how to create and add it into the blogger template. I’ve used only HTML and CSS to implement this.

So Lets jump straight to the tutorial part!

How To Create a Customized Author Info Box in Blogger?

 

1. Go To Blogger > Template > Backup > Download Full Template


 

2. Click On Edit HTML

 

 

3. Search for ]]></b:skin>

 

 

4. Just above it paste the code below

 

#ipi_profile{width:500px;height:100px;border:1px solid #dcdcdc;background-color:#f9f9f9;font:bold 12px "Trebuchet MS",Verdana,Arial}
.ipi_pic{float:left;margin:6px}
.ipi_pic img{border:4px solid #fff}
.ipi_details{float:left;border-right:1px solid #dcdcdc;padding:0 15px 10px 10px;margin-top:10px}
.ipi_contact{float:left;margin-top:10px;padding:0 0 0 15px}
.ipi_facebook,.ipi_facebook:hover{color:#3c5a98;font-weight:700;font-size:16px;text-decoration:none;margin-top:5px}
.ipi_twitter,.ipi_twitter:hover{color:#29c9ff;font-weight:700;font-size:16px;text-decoration:none;margin-top:5px}
.ipi_mailto,.ipi_mailto:hover{color:#000}

 

5.    Now Save your template and write the html code to display the author info

Whenever you write a guest post, switch to HTML mode of the editor and at the end add the code below


<!------------ Author Info Box Start ------------>
<b>Writer</b><br />
<div id="ipi_profile">
<div>
<img alt="Ipsita Sahoo" src="http://4.bp.blogspot.com/-KWqHBYbwJOI/T6EVr4BxgAI/AAAAAAAAAAs/oADS2-J3Yzs/s220/ipi.JPG" width="80px" />
</div>

<div><span style="color: #3292dc; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; line-height: normal;">Ipsita Sahoo</span><br />
Manager<br />
Odisha, INDIA
</div>
<div><span style="color: #666666; font-size: 10px;">&nbsp;</span> <br />
<span style="color: #666666; font-size: 10px;">Email&nbsp; :</span> <a href="mailto:ipsita@gmail.com">ipsita[at]gmail.com</a><br />
<div style="float: left; margin-top: 10px;"><div style="background-color: #1a4485; color: white; float: left; font: bold 14px arial; padding: 2px 4px;"><a href="http://www.facebook.com/ipi" rel="nofollow" style="color: white; text-decoration: none;" target="_blank">facebook</a></div><div style="background-color: #6fdbff; color: white; float: left; font: bold 14px arial; margin-left: 5px; padding: 2px 4px;"><a href="http://www.twitter.com/duskycode" rel="nofollow" style="color: white; text-decoration: none;" target="_blank">twitter</a></div></div>
</div>
</div>

I hope the above tutorial was useful. Keep commenting.

How to Add Syntax Highlighter to Blogger or Blogspot Blog


I run a web programming blog with tutorials. Where programming code has got the most importance. Hence i needed my code in any tutorial to be highlighted with colors. I searched throughout. I landed into the SyntaxHighlighter plugin for WordPress. Which easily integrates into WordPress.

But my requirement was to embed SyntaxHighlighter into Bloggeras i run my blog on Blogger.com. The following steps may help.

Step 1: Backup your blogger template

 

In your left side navigation menu click on Template. Then at the very top-right corner you can find a button to “Backup/Restore” your blogger template design.

 

Step 2:  Edit Blogger Template in New Blogger Interface

 

 

Navigate to Blogger dashboard > Layout > Edit HTML  and Expand Widget Templates. Search for <head> and replace it with the below code

<head>

<link href='https://sites.google.com/site/itswadesh/codehighlighter/shCore.css' rel='stylesheet' type='text/css'/>

<link href='http://sites.google.com/site/itswadesh/codehighlighter/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shCore.js' type='text/javascript'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shBrushCss.js' type='text/javascript'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shBrushJScript.js' type='text/javascript'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shBrushXml.js' type='text/javascript'/>

<script type='text/javascript'>

SyntaxHighlighter.all()

</script>

Step 3: Write Your Programming Code inside <pre> Tag

 

Whenever you publish a post with Programming Code, include the code within the <pre> section

<pre class=”brush: js”>
Your script here
</pre>

Example:

<pre class="brush: js">
$(document).bind('click', function(e) {

            var $clicked = $(e.target);
            if (! $clicked.parents().hasClass("staticMenu")){
                $(".staticMenu dd ul").hide();
                $(".staticMenu dt a").removeClass("selected");
            }        });

</pre>

8 steps to Add Feedburner Email Subscription Box To Your Blogger Blog


As a Blogger our aim is to build subscriber base which will eventually build our brand and customer base.  The subscription helps our blog users by sending a copy of our post the moment it is published.

Most of the blog users like this Email Subscription Feature of blogs. So lets know how the Email Subscription Box is added into a blog.

1.  Create a feed burner account at http://feedburner.google.com

2. Enter your blog/feed address and click next

3. Now choose the available feed to proceed

4. Next job will be to provide a title for the feed.

5. Now your feed is active.

6. We are all ready. Next step is to integrate the feed into your blog i.e. wordpress, blogger, … For that click next check all the check boxes available and again click next.

7.  Now click on publicize tab and click on Email Subscriptions Menu

8. Click Activate button and your feed will be active for publishing. Automatically the HTML code will be generated and shown. You can post it into your blog by using a HTML/JavaScript Widget(For Blogger) and Text Widget (For WordPress).

A.  For blogger there is a inbuilt option just bellow the HTML code generated by feedburner. Just choose blogger and click GO. 
B. It will take you to your blogger admin page. Follow the instructions at blogger to integrate it to blogger.

114 complete ping list for blogs like wordpress, blogger


If you are using wordpress blog, following is the recomended ping list.

Every time you post, these services will be notified of your blog post increasing your online exposure.

To use this list, copy and paste this list to your Settings->Writing tab in the admin panel.

http://www.a2b.cc/setloc/bp.a2b
http://1470.net/api/ping
http://a2b.cc/setloc/bp.a2b
http://api.feedster.com/ping
http://api.moreover.com/ping
http://api.moreover.com/RPC2
http://api.my.yahoo.co.jp/RPC2

Continue reading

Creating a Facebook landing page


If you’re out to impress do consider creating a special landing page just for them. So rather than letting them land on a just-another-generic-Facebook wall, you take them to a more personalized, more welcoming page.

You create this by adding a static FBML application. Put it in a tab, then turn the tab into a landing page. You can put almost anything on that page, but the most important one would be to ask them to Like your page. It would be a loss if they leave your welcome page without Liking your page, wouldn’t it?

This welcome page will become a landing page only for non-fan visitors. Once they Liked your page, subsequent visits will take them direct to your fan page’s Wall. (This page will in no way annoy your existing fans, because it doesn’t affect them.)

Here we go,

 

1) Add a static FBML (Facebook Markup Language) application

  1. Sign in to Facebook.
  2. Go to Static FBML application (this link opens in a new tab/window) page.
  3. Click the Add to my Page link on the left.
    add to my page link
  4. Click Add to Page button next to your page name.
    add static FBML to page

 

2) Add content to the FBML app

You want to tailor-made the content to appeal new visitors. Do include one or two call-to-action phrases or buttons. Encourage them to at least click the Like button before leaving the landing page. Here we go:

  1. Click Edit Page link under your profile image to the left.
  2. Then click Applications link on the left of the next page.
  3. Scroll down towards the bottom of the page and look for FBML application.
    fbml go to application
  4. Click the Go to Application link. This will open a text editor.
  5. Begin with entering the title of your FBML application. The application will be named after this title, so choose something appropriate.
    add content in editor
  6. Next is to add the content in FBML field.  HTML is acceptable. Javascript and iframe are not allowed.
    -The simplest and most popular method is to just embed an image.

    1. Create your landing page image using Gimp or Photoshop.
    2. Set the width of the image to be the same as the effective width of the tab canvas, which is 520px.
    3. Paste this HTML code in the text editor:
      <img title="" src="DIRECT LINK TO THE YOUR WEB HOSTED IMAGE" alt=""/>

    -To add buttons or other hyperlinked images, use this HTML:

    <a title="" href="DESTINATION URL"img src="DIRECT LINK TO YOUR WEB HOSTED IMAGE" alt=""></a>
  7. Click Save Changes button when done.

 

3) Make the tab your default landing page

Now it’s time you make the tab you added into the default welcome page. Do remember this tab will become default only to non-fan visitors.

  1. Go back to your the wall of your page.
  2. Click the Options link under the status update box’s Share button. The link will the change to Settings. Click on it to view your page settings.
    tab settings link
  3. Under View Settings, select your new tab from the dropdown menu next to Default Landing Tab for Everyone Else.
    set as landing page
  4. Finished!

Adding a facebook fans page on blogger


I) Get your Facebook page ID URL

  1. Visit Facebook and go to your page.facebook page url 1
  2. Copy the Id URL from your browser’s address bar. It’s at the end of the url.  Trim the URL until you get something like this:
    http://www.facebook.com/pages/Blogger-Sentral/115496238467364
    [http://www.facebook.com/pages/PAGE-NAME/PAGE ID]

 

II) Configure your Like box

  1. Go to Facebook Like box configuration page (opens in a new tab/window). You will see a configuration box, like this (Facebook has replaced Facebook Page ID with Facebook Page URL):facebook like fan box configuration
  2. Now paste your page ID URL inside the Facebook Page ID URL text box.
  3. Set other parameters such as width, height and stream. The Preview on the right will update itself as you enter the changes.
  4. Click Get Code button when done. You’ll be given two codes, titled iframe and XFBML. You only need the iframe code.
  5. The iframecode should look more or less like this (do not copy this code):
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogger-Sentral%2F115496238467364&amp;width=292&amp;connections=10&amp;stream=false&amp;header=true&amp;height=280" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:280px;" allowTransparency="true"></iframe>

    Update February 2011:
    It seems Facebook (perhaps erroneously) has the box height fixed to 62px. This allows only your Facebook page title and the Like button to appear inside the box. The faces will be hidden. To show them, you must increase the height. For example, to show two rows of faces, change the height to 280px. There are two heights in the code, make sure you change both.

  6. Copy the code (the code provided by Facebook, not the code in no.5).
  7. In Blogger, go to Design > Page Elements and click an Add-A-Gadget link. Select HTML/Javascript gadget and paste the code in the content box.
  8. Save and view your blog.
  9. Enjoy!