Search Google and/or this blog

Friday, March 20, 2009

Adding IM Hyperlinks to a Web Site (Msn,Yahoo,Aim,Google Talk,Skype)

Stumble del.icio.us Reddit MyWeb! Facebook Google bookmark

If you have a site, a forum or a blog and want your users to contact you any time via your site?
Here’s how you do it. You can place links with which your users can contact at any time on MSN, Googletalk, Aim, Yahoo and Skype. Also included other instant messaging commands.

Use the below html codes in your site to add various messenger functions:


Interact via Yahoo messenger

Replace USERNAME with yourID@yahoo.com

<a href=”ymsgr:sendIM?USERNAME”>Contact me via yahoo</a>

<a href=”ymsgr:addfriend?USERNAME”>Add me to buddy list</a>

<a href=”ymsgr:sendIM?USERNAME&m=YOUR+MESSAGE”>Send me an IM</a>

<a href=”ymsgr:call?USERNAME”>Call Me</a>
If you want your online status shown in the form of images. You can use one of the images in this way :

<a href=”ymsgr:sendIM?USERNAME”><img src="http://opi.yahoo.com/online?u=USERNAME&m=g&<span style="font-weight:bold;">t=1</span>&l=us" title="Am I online?" /></a>
the <span style="font-weight:bold;">t=1</span> shows the images type. You can change it to 0, 2, 3,4 etc.



Interact via Msn

Replace USERNAME with yourID@hotmail.com

<a href=”msnim:chat?contact=USERNAME”>Chat with me</a>

<a href=”msnim:add?contact=USERNAME”>Add me to your contact list!</a>

<a href=”msnim:voice?contact=USERNAME”>Voice chat with me</a>

<a href=”msnim:video?contact=USERNAME”>Video conversation with me</a>



Interact via Aim

Replace USERNAME with AOL “screenname”

<a href=”aim:goIM?screenname=USERNAME”>Contact me via aim</a>

Open new IM window with a screen name and a message
<a href=”aim:goim?screenname=USERNAME&message=MESSAGE”>Chat in aim</a>

Grabs shared files from a screen name
<a href=”aim:getfile?screenname=USERNAME”>Get Shared Files</a>

Opens a chat room
<a href=”aim:gochat?roomname=CHATROOMNAME”>Go to chat room</a>

Automatically adds screen name to the “Add Buddy” window
<a href=”aim:addbuddy?screenname=USERNAME”>Auto add buddy</a>

Automatically adds screen name and group name to the “Add Buddy” window
<a href=”aim:addbuddy?screenname=USERNAME&groupname=GROUPNAME”>Auto add Screen name and Group name</a>



Interact via GoogleTalk ()

Replace USERNAME with yourID@gmail.com

<a href=”gtalk:chat?jid=USERNAME”>Contact me via Google Talk</a>

<a href=”gtalk:call?jid=USERNAME”>Voice Chat with me</a>



Interact via Skype()

Replace USERNAME with your Skype user ID

<a href=”skype:USERNAME?chat”>Contact me via Skype</a>

<a href=”skype:USERNAME?voicemail”>Leave voicemail</a>

<a href=”skype:USERNAME?userinfo”>View Profile</a>

<a href=”skype:USERNAME?add”>Add 2 Contact List</a>



If you find an error for example while using gtalk in firefox, see this link.

Continue >>

Sunday, March 15, 2009

Set Blog/Article Title as Page Title

Stumble del.icio.us Reddit MyWeb! Facebook Google bookmark

To save yourself some effort and to enhance the search engine ranking (:D), one should help create the page titles in such a way that it is most relevant to what the blog/article talks about. This means you should have a way or have control over how the page title is displayed when you open up a new article or new blog on a blogsite. On a blog like blogger.com, it's easy to do. Here is how you can achieve this :
[YOU ARE ADVISED TO "DOWNLOAD FULL TEMPLATE" BEFORE YOU MESS WITH ANYTHING.]

  1. Go to Dashboard -> Layout ->Edit HTML
  2. Locate the <head> just around the top portion in the textbox.
  3. Just a few lines below <head> , replace <title><data:blog.pagetitle/></title> with the following:


  4. <b:if cond='data:blog.pageType == "item"'>
    <title>
    <data:blog.pageName/> | <data:blog.title/>
    </title>
    <b:else/>
    <title><data:blog.pageTitle/></title>
    </b:if>


  5. Hit save and you are done!!!
  6. Now, if you are interested in how it's done Here you go.
  7. The code above simply says that if the pagetype is an article, meaning someone has opened a page to view one full article, then the title should be page name (article title in case of blogger) separated by a pipe character and then blog title (your blog name) otherwise, the title should just be your page title (which by default will be your blog title).

Continue >>

Creating "Search This Blog" or Blogger Search box

Stumble del.icio.us Reddit MyWeb! Facebook Google bookmark

After creating my "Google Search" box, I wanted to have a search box completely dedicated to searching my current blog. Though, I could also have both the searches work together, but I prefer them to be separate. For creating the search specific to my current blog, I did not have to do much as I used the same search box that comes with the default blogger navigation bar. Wondering how ?? ... Read on ...

Well, if you just do a right click and view source for your current page you will realize that the navigation bar is an iFrame.
It looks something like this just below the <Body> part in the source code:


<div class='navbar section' id='navbar'><div class='widget Navbar' id='Navbar1'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<iframe src="http://www.blogger.com/navbar.g?targetBlogID=7763145969073648252&blogName=The+blog+hackers%27+club&publishMode=PUBLISH_MODE_BLOGSPOT&navbarType=BLUE&layoutType=LAYOUTS&homepageUrl=http%3A%2F%2Fblogdesignhack.blogspot.com%2F&searchRoot=http%3A%2F%2Fblogdesignhack.blogspot.com%2Fsearch" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" title="Blogger Navigation and Search"></iframe>
<div></div></div></div>



So, I thought why not just take out the search box from this navigation bar and place it in sidebar. That what I exactly did. All you need to do is just copy this part of the code from any of your pages, and follow the following steps:

  1. Go to Layout tab under dashboard for your current blog.
  2. Hit "Add Gadget"
  3. Choose HTML/Javascript.
  4. Paste the copied code into the content box after giving title in title box.
  5. The content box should look something like this :


<div id="navbar" class="navbar section">
<div id="Navbar1" class="widget Navbar">
<script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>

<iframe frameborder="0" title="Blogger Search" marginheight="0" marginwidth="0" height="30px" src="http://www.blogger.com/navbar.g?targetBlogID=7763145969073648252&blogName=The+blog+hackers%27+club&publishMode=PUBLISH_MODE_BLOGSPOT&navbarType=BLACK&layoutType=LAYOUTS&homepageUrl=http%3A%2F%2Fblogdesignhack.blogspot.com%2F&searchRoot=http%3A%2F%2Fblogdesignhack.blogspot.com%2Fsearch" id="navbar-iframeSelf" scrolling="no" width="90%">
</iframe>
</div>
</div>


Just make sure that you change the width to 90% so that none of the other portions appear in sidebar.
Hit save and enjoy!!!

Continue >>

Add a Google Search Box on Your Blog

Stumble del.icio.us Reddit MyWeb! Facebook Google bookmark

Do you want to add a new Google search on your blog? It's pretty simple. Just follow the steps defined here and you will be good.

  1. Go to Google Adsense and then login.
  2. Click on Adsense Setup.
  3. Click on "Adsense for Search".
  4. Click search type "The entire web".
  5. And then just follow the default patterns or whichever colors you like.
  6. At the end of it Google gives you some code. Copy both of them together.
  7. And come back to your blogspot blog.
  8. Now goto dashboard and then hit "Add a gadget".
  9. Select HTML/Javascript in the gadget list.
  10. Add a title "Search google" the title text.
  11. Paste the code that you copied in step 6. It should look like this if you copied it correctly

    :<form id="cse-search-box" action="http://myblogname.blogspot.com">
    <div>
    <input value="partner-your-pub-id" name="cx" type="hidden"/>
    <input value="FORID:10" name="cof" type="hidden"/>
    <input value="ISO-8859-1" name="ie" type="hidden"/>
    <input name="q" size="71" type="text"/>
    <input value="Search" name="sa" type="submit"/>
    <a href="http://myblogname.blogspot.com/?q=&sa=Search#1099">Clear Search</a>
    </div>
    </form>
    <script src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en" type="text/javascript"></script>
    <div id="cse-search-results"></div>
    <script type="text/javascript">
    var googleSearchIframeName = "cse-search-results";
    var googleSearchFormName = "cse-search-box";
    var googleSearchFrameWidth = 800;
    var googleSearchDomain = "www.google.com";
    var googleSearchPath = "/cse";
    </script>
    <script src="http://www.google.com/afsonline/show_afs_search.js" type="text/javascript"></script>


  12. Hit save and come back to Layout tab.
  13. Now move your gadget to the top area or whichever area you want to display.
  14. Hit save and you are done.


If you want to have radio buttons to toggle between searching web or your blog, you can append this code just below the search button code.


<font size="-1">
<br/><input checked value="" name="sitesearch" type="radio"/> Entire Web
<input value="mycomponent.blogspot.com" name="sitesearch" type="radio"/> This Blog <br/>
</font>


Continue >>

Remove / Hide the blogger Navigation Bar

Stumble del.icio.us Reddit MyWeb! Facebook Google bookmark

Well, the next thing I wanted to do in my blogs is hiding the blogger navigation bar. The way blogger has designed all its templates, you are not given an option to hide the navigation bar. So ideally speaking it means they always want you to show the nav bar. But there is a way around ... :). For example you don't see any navigation bar on this blog ..right ??? Ok here you go on how to do it in few simple steps ...
[YOU ARE ADVISED TO "DOWNLOAD FULL TEMPLATE" BEFORE YOU MESS WITH ANYTHING.]

  1. Go to your dashboard and select "Layout" tab.
  2. Click "Edit Html".
  3. Check the "Expand Widget Templates" checkbox.
  4. Scroll down until you find "#header-wrapper" or better still just copy paste everything from the textbox into a notepad and then do a Ctrl+F for "#header-wrapper".
  5. Copy and Paste the following just below #header-wrapper {width:880px; margin:0 auto 10px; border:1px solid $bordercolor;}

  6. #navbar-iframe { display: none !important; // hide the navigation bar}

  7. This should now look like this:
  8. /* Header
    -----------------------------------------------
    */

    #header-wrapper {
    width:880px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }
    #navbar-iframe {
    display: none !important; // hide the navigation bar
    }


  9. Save settings. and you are done. Enjoy!!
  10. And yeah ! don't worry you can always goto dashboard or in edit mode when you login by going to blogger.com.


If you want to know, how this works ..here it is :
1. Basically, if you right click anywhere on your blog page and take a look at the page source, you will find something like this

<style type="text/css"> #navbar-iframe { display:block }
</style>

</head>
<body>

<div class='navbar section' id='navbar'><div class='widget Navbar' id='Navbar1'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<iframe src="http://www.blogger.com/navbar.g?targetBlogID=8223219756526365841&blogName=Rants+And+Raves...+aur+Kya+%3F&publishMode=PUBLISH_MODE_BLOGSPOT&navbarType=BLACK&layoutType=LAYOUTS&homepageUrl=http%3A%2F%2Faskjha.blogspot.com%2F&searchRoot=http%3A%2F%2Faskjha.blogspot.com%2Fsearch" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" title="Blogger Navigation and Search"></iframe>

......
etc ...
etc..



If you see the frame Id is named as navbar-iframe

Thus if we change the style in CSS (cascading style sheet, which defines how your page should look) and make the display style to "none", the navbar will stop appearing in the page. :) . That's how it works !!!

Continue >>

Saturday, March 14, 2009

Create your own shortcut icon/ address bar icon

Stumble del.icio.us Reddit MyWeb! Facebook Google bookmark

Are you fed up of the generic/common blogger icon that appears on every other blog when you open it in the browser ?



Well, assuming that the Blogger terms of service are not violated if we try to change the shortcut icon (or FavIcon as it's well known), here is a series of steps on how to accomplish this with any of the templates that the blogger provides:
[YOU ARE ADVISED TO "DOWNLOAD FULL TEMPLATE" BEFORE YOU MESS WITH ANYTHING.]

  1. If you already have an icon somewhere on the web, goto step 7. Otherwise for uploading a new icon, click on new post.
  2. On the Compose or Edit Html tab, click on "Add Image" button on the text toolbar.
  3. Click browse under the "Add an image from your computer" text and select the image you want as icon. Be sure that you choose only the formats specified by Blogger. It should be one of jpg, gif, bmp and png images, 8 MB maximum size. Though, you can upload upto 8MB of image, but it won't be wise to do so. Choose an image which is not beyond 4-8 Kb size or a 20x20 or 32x32 pixel size will be sufficient. The larger the images, the slower your pages will load.
  4. Once uploaded, Click "Done", and come back to the New Post page.
  5. Now from the "Edit HTML" tab, select the src="http://www.blogger.com/......png etc" within the <img tag. Copy just the url/link of image.
  6. Click on "save as draft" button. Keep this post as draft forever.
  7. Now go to Customize -> Layout -> Edit HTML, then click "Expand widget templates" checkbox.
  8. Scroll down until you find ]]></b:skin> or </head>.
  9. Paste the full url of the image you just uploaded or the image url where you have your icon in the following format just above the </head> part as shown.

  10. < href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPBYIXunMn2FBIUnJdFS3mVP2f_ScLkYyMgYLRhSv3mftWAggyT8y9v9liBxNKwW5YEWB5D_QyLxo_XKnH3gku4QBAWk_YR2pvGTCd4qlNOskyd3JjOw1_ZLXw43f_2stf8dDHcQCbDkA/s320/Pinto.jpg' rel='SHORTCUT ICON'/> </head>



    The highlighted url will be your url image. The one shown here is mine.
  11. Click Save template and enjoy!


Continue >>

Resizing your page or blog

Stumble del.icio.us Reddit MyWeb! Facebook Google bookmark

The default size for the blog when you create it is usually 660px in most of the blog templates that the blogspot has. It's easy to change the size of the blog (width etc) if you want. Just goto customize -> Layout tab -> Edit Html. Click on Expand Widget Templates and then follow the following.

YOU ARE ADVISED TO "DOWNLOAD FULL TEMPLATE" BEFORE YOU MESS WITH ANYTHING.

The default settings are as defined here:

Under the header section, you will see the following css class definitions:


/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}


Look for #header-wrapper. This defines the header width(the block that contains your blog title and description). So you might like to change the width from 660px to say 800px or more if you want, so that it becomes:


/* Header
-----------------------------------------------
*/

#header-wrapper {
width:800px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}



Similarly, look for all other css styles with width of 660px and change them to 800px. Specially look for #header .description, #outer-wrapper, #footer.

You might see the following in NOT particularly the same order:


#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:660px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}



Now after you have changed all 660px to 800px, is the time to change the main blog post width to fit the page.
The sidebar width is usually defined at 220px as shown below: (Specially look for #sidebar-wrapper)


#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}



So we have to have the width of post as 800-220 = 580px. So look for the following in your css definitions: #main-wrapper


#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}



Change 410px or whatever is defined there to 580px. And Voila after you save the settings, you are flying with a new more spacious blog of yours. :)
Enjoy!!

Continue >>

The blog hackers

Stumble del.icio.us Reddit MyWeb! Facebook Google bookmark

I created two blogs

And then I had to re-configure them as per my design choices. So I thought, okay..it's time to create a blog where I can compile everything I do for my blogs so other users can also use them.

I am a programmer by CHOICE. So you will find everything here that you want to re-design your blog.
Happy hacking !!!

Continue >>