tag:blogger.com,1999:blog-77631459690736482522024-03-20T19:23:22.770-07:00The blog hackers' clubEverything that you want to know to re-design your blog and trick/tips/tutorial to edit/hack your blog!Unknownnoreply@blogger.comBlogger10125tag:blogger.com,1999:blog-7763145969073648252.post-28562500104454124092009-04-21T15:32:00.000-07:002009-04-21T15:49:20.724-07:00Adding Stumble upon, digg it, facebook bookmarksThese days, the age is that of driving traffic to your blog. An easy way to promote your blog is to have the ability of allowing the users to bookmark your blog on some bookmark sites like stumbleupon.com, digg.com, facebook.com, reddit.com etc. Here is how you can add the bookmark toolbar at the top of every new blog you write. So, if a reader liked your blog, he/she can bookmark it on one/more of these sites. Here is how to add this toolbar ...<br /><span class="fullpost"><br /><br /><ol><li>Go to blogger Dashboard. (<a href="http://www.blogger.com/home">http://www.blogger.com/home</a>)</li><li>Click "Edit Layout" for your blog which you want to have this toolbar.<br /></li><li>When you are on Layout page ("Page Elements") page, click "Edit HTML".</li><li>On "Edit Template" page, check the "<label for="expandWidgets">Expand Widget Templates</label>" checkbox.</li><li>Now copy all the contents from the lower text box onto notepad.</li><li>Look for (Ctrl+F) < class='post-header-line-1'/> or <span class="fullpost"><</span>div class='post-body entry-content'></li><li>Between <div class='post-body entry-content'> and end of div (</div> which will be just before < class='post-footer'> , add the following :<br /><p class="Code"><br /><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='"_stumble"'><br /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnjtdomAZcq1Z5xOmLiiWBePR9lxm-G6Sh4DIGB7hSUGpz1a0E7NSC6qS0AUZgTi8F_6rkdl9PWCtJlTCvJlgSd686gNQ4AXnB7g5KOfzyEnyrMgg33gykmqH-xVflrAfCgp2ePzGYvAg/s320/stumb.gif' style='padding: 0px; border:0px solid black;'/>Stumble</a><br /><a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='"_digg"'><br /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTJW-baqoZhRAXS3VtGfL2VUuve60VGeVZojKCaJZ7f-srlpgFVk5kUolMeWDDsRrEaxOjuXTJ27JZMD9EokdlZWIQd_5n9dUYVevZd5c-q4HQw0cFjilD3aKGC5kGsWaEfjmpT5X2gXo/s320/digg.gif' style='padding: 0px; border:0px solid black;'/><br /> <img src='http://digg.com/img/digg-it-tiny.gif' style='padding: 0px; border:0px solid black;'/></a><br /><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='"_delicious"'><br /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv5YwLuYj4mC7I4zPmqKqHFaq1bg_NE6N6t-_x-JD0keaoxTbIsRtKSzvUwIMZ1W93gnBvDs3B16nrnKEJ8e9aQBCV4rMBbNAJDp4o1iy7HJkw0_kVb4s7GBrz0GqvIUAhDD7WATXuv6I/s320/del.jpg' style='padding: 0px; border:0px solid black;'/>del.icio.us</a><br /><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='"_reddit"'><br /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9mlJoDO4VmGC4wt0jR5Td6r8WsBdhbZu6KrY5IObMCr58Ur4y55aBfHltpLhgKOwLUEnEIWQAkXDCgFdmi74rx8Az7Qhud9hxb4fWLgzmhLlmdPze2dd2OiWWFqnjUVUwS-gUdU3qyyM/s320/reddit.gif' style='padding: 0px; border:0px solid black;'/>Reddit</a><br /><a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&t=" + data:post.title' target='"_myweb"'><br /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_mCBUZ2IM4F34-xLnrCg6moNNAgntaWiAkQboGo9AkKpxD6iOzHM6-rKBIvW69qszq0zJWQJr7D14sZ-8LyGiQd7WVwFTv2TJArmE0HWw6uV5YfQx7BOIV-aC3zPp4zjAzb1tzcN3Y28/s320/myWeb.gif' style='padding: 0px; border:0px solid black;'/>MyWeb!</a><br /><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' target='"_facebook"'><br /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDmC4r-Qw352KPkvUhj10ZgHO3VlImLCm16LSgGksGusGCbTr2BEATyjJwKO4xRYYSWRlJdZ-R4LfKh5ON69Iv30XFxqawQ_val1KHZsQQT6ZA-jj_HzKqz2WPmI-46qM7-qRoXi_TNv4/s320/facebook.gif' style='padding: 0px; border:0px solid black;'/>Facebook</a><br /><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&bkmk=" + data:post.url + "&t=" + data:post.title' target='"_facebook"'><br /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_7yKd-eOJZs2eMJdKJOplPoixNHoo7uBB-tHKNRqEeeop0uBDJisuaqQ0PpVU-eXzRZM_mfK0wZtgr8V7bPy2ygxXMJMEsJcANqWu3ABbnyK6iQ0d9W5kLFfMt03sXM565RrKo_lOPUM/s320/bookmark.gif' style='padding: 0px; border:0px solid black;'/>Google bookmark</a><br /> <b:if cond='data:blog.pageType == "item"'><br /> <style>.fullpost{display:inline;}</style><br /> <p><data:post.body/></p><br /> <b:else/><br /> <style>.fullpost{display:none;}</style><br /> <p><data:post.body/></p><br /> <a expr:href='data:post.url + "#continue"'>Continue >></a><br /> </b:if> <br /> <div style='clear: both;'/> <!-- clear for photos floats --><br /></p><br /><br />So that it becomes:<br /><p class="Code"><br /> <div class='post-header-line-1'/><br /><br /> <div class='post-body entry-content'><br /><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='"_stumble"'><br /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnjtdomAZcq1Z5xOmLiiWBePR9lxm-G6Sh4DIGB7hSUGpz1a0E7NSC6qS0AUZgTi8F_6rkdl9PWCtJlTCvJlgSd686gNQ4AXnB7g5KOfzyEnyrMgg33gykmqH-xVflrAfCgp2ePzGYvAg/s320/stumb.gif' style='padding: 0px; border:0px solid black;'/>Stumble</a><br /><a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='"_digg"'><br /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTJW-baqoZhRAXS3VtGfL2VUuve60VGeVZojKCaJZ7f-srlpgFVk5kUolMeWDDsRrEaxOjuXTJ27JZMD9EokdlZWIQd_5n9dUYVevZd5c-q4HQw0cFjilD3aKGC5kGsWaEfjmpT5X2gXo/s320/digg.gif' style='padding: 0px; border:0px solid black;'/><br /> <img src='http://digg.com/img/digg-it-tiny.gif' style='padding: 0px; border:0px solid black;'/></a><br /><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='"_delicious"'><br /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv5YwLuYj4mC7I4zPmqKqHFaq1bg_NE6N6t-_x-JD0keaoxTbIsRtKSzvUwIMZ1W93gnBvDs3B16nrnKEJ8e9aQBCV4rMBbNAJDp4o1iy7HJkw0_kVb4s7GBrz0GqvIUAhDD7WATXuv6I/s320/del.jpg' style='padding: 0px; border:0px solid black;'/>del.icio.us</a><br /><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='"_reddit"'><br /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9mlJoDO4VmGC4wt0jR5Td6r8WsBdhbZu6KrY5IObMCr58Ur4y55aBfHltpLhgKOwLUEnEIWQAkXDCgFdmi74rx8Az7Qhud9hxb4fWLgzmhLlmdPze2dd2OiWWFqnjUVUwS-gUdU3qyyM/s320/reddit.gif' style='padding: 0px; border:0px solid black;'/>Reddit</a><br /><a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&t=" + data:post.title' target='"_myweb"'><br /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_mCBUZ2IM4F34-xLnrCg6moNNAgntaWiAkQboGo9AkKpxD6iOzHM6-rKBIvW69qszq0zJWQJr7D14sZ-8LyGiQd7WVwFTv2TJArmE0HWw6uV5YfQx7BOIV-aC3zPp4zjAzb1tzcN3Y28/s320/myWeb.gif' style='padding: 0px; border:0px solid black;'/>MyWeb!</a><br /><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' target='"_facebook"'><br /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDmC4r-Qw352KPkvUhj10ZgHO3VlImLCm16LSgGksGusGCbTr2BEATyjJwKO4xRYYSWRlJdZ-R4LfKh5ON69Iv30XFxqawQ_val1KHZsQQT6ZA-jj_HzKqz2WPmI-46qM7-qRoXi_TNv4/s320/facebook.gif' style='padding: 0px; border:0px solid black;'/>Facebook</a><br /><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&bkmk=" + data:post.url + "&t=" + data:post.title' target='"_facebook"'><br /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_7yKd-eOJZs2eMJdKJOplPoixNHoo7uBB-tHKNRqEeeop0uBDJisuaqQ0PpVU-eXzRZM_mfK0wZtgr8V7bPy2ygxXMJMEsJcANqWu3ABbnyK6iQ0d9W5kLFfMt03sXM565RrKo_lOPUM/s320/bookmark.gif' style='padding: 0px; border:0px solid black;'/>Google bookmark</a><br /> <b:if cond='data:blog.pageType == "item"'><br /> <style>.fullpost{display:inline;}</style><br /> <p><data:post.body/></p><br /> <b:else/><br /> <style>.fullpost{display:none;}</style><br /> <p><data:post.body/></p><br /> <a expr:href='data:post.url + "#continue"'>Continue >></a><br /> </b:if> <br /> <div style='clear: both;'/> <!-- clear for photos floats --><br /></div><br /><br /> <div class='post-footer'> .... etc ..etc ...<br /></p><br /></li></ol><br /><br />Copy everything and paste it into the "Edit HTML" text box that you had opened earlier. Save it and you will be all set.Good luck and Enjoy !!!<br /></span><div class="blogger-post-footer"><script type="text/javascript"><!--
google_ad_client="pub-9665515199184582";
google_ad_host="pub-1556223355139109";
google_ad_width=728;
google_ad_height=90;
google_ad_format="728x90_as";
google_ad_type="text_image";
google_color_border="000000";
google_color_bg="000000";
google_color_link="AADD99";
google_color_url="CCCCCC";
google_color_text="CCCCCC";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-7763145969073648252.post-20114427823433933022009-04-21T14:45:00.001-07:002009-04-21T15:14:06.373-07:00Addinng Adsense : Getting paid for your blogging capabilities :)In this blog I'll walk you through the steps on how to monetize your blog meaning how to ask Google to help you monetarily for being a good blogger.<br />Here is how ...<br /><span class="fullpost"><br /><ol><li>Login to your blogger account by going to <a href="http://blogger.com/start" target="Start">http://blogger.com/start</a>.<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiykGwbl8q0RswiM2pQb3Zrgtbrzz3t1XbgpWCVgh62Fe28-LPUShUlrsOKB5N0cEMzQIU_K23ypk7ek-cWV9nz2xDMcdL-uBCB93W33vA0qCKh5nqlO7nNltRT-muufhO37RmbV0Leogc/s1600-h/monetize.jpg"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 320px; height: 226px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiykGwbl8q0RswiM2pQb3Zrgtbrzz3t1XbgpWCVgh62Fe28-LPUShUlrsOKB5N0cEMzQIU_K23ypk7ek-cWV9nz2xDMcdL-uBCB93W33vA0qCKh5nqlO7nNltRT-muufhO37RmbV0Leogc/s320/monetize.jpg" alt="" id="BLOGGER_PHOTO_ID_5327267000434773954" border="0" /></a></li><li>Goto dashboard : <a href="http://www.blogger.com/home" target="home">http://www.blogger.com/home</a>.</li><li>Now if you have multiple blogs, you will see a list of blogs on your dashboard. If you have just one, that blog will be listed. For the blog which you want monetized, click on Monetize link as shown here in the picture:</li><li>The wizard will take you through a number of steps. Follow the steps. It's pretty easy. If you already have a Gmail/Google account, you will be all set in a few seconds. If you do not have a Gmail account yet, it might take upto 2-3 days to activate your Google Adsense account. So wait until then.</li><li>As soon as your account is activated (for Gmail account holders, this will be immediate), goto the dashboard again (see link in step 2). Now hit Layout . It will take you Layout page. By default, "Page Elements" tab is selected. If you are comfortable with html programming, you may like to go ahead and click "Edit HTML" at the top. But for all practical purposes, yu can do well on this "Page Elements" tab. So stay here, and click on "Add a Gadget".</li><li>From the pop-up window select "Adsense".<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ZavQe03Z1mJ3qvdix-LOy9izy_NvDg7pl_N09DtqzMLi_CMq_dPpZ41cXSzBRlNIOFSB6sg8xJNQdtKHHY8UnBWV_84VnegcimD3Jkgap9A_pj1Yfbrxl7uuIuq0DLSNa0-AUNMVlBU/s1600-h/adsense.jpg"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 310px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ZavQe03Z1mJ3qvdix-LOy9izy_NvDg7pl_N09DtqzMLi_CMq_dPpZ41cXSzBRlNIOFSB6sg8xJNQdtKHHY8UnBWV_84VnegcimD3Jkgap9A_pj1Yfbrxl7uuIuq0DLSNa0-AUNMVlBU/s320/adsense.jpg" alt="" id="BLOGGER_PHOTO_ID_5327269596886817986" border="0" /></a></li><li>You should be on "Configure Adsense" page now.</li><li>Choose the format (shape and size). I suggest not to change the default colors. Select Blend Template from colors drop down. This makes the advertisements mix well with the content.</li><li>Hit save.</li><li>Again Hit Save on the Layout Page.</li><li>You are all set. you should see advertisements appearing on your blog now. :)</li><li>You may also like to read through my other blogs on <a href="http://blogdesignhack.blogspot.com/2009/03/search-this-blog-or-blogger-search-box.html" target="_bloggersearch">how to add blogger search box</a> and <a href="http://blogdesignhack.blogspot.com/2009/03/add-google-search-box-on-your-blog.html" target="_googlesearch">how to add Google Search Box</a>.</li><li>Keep in mind that Search options are far better than any link advertisements.<br /></li></ol><br /><br /><br /><br /></span><div class="blogger-post-footer"><script type="text/javascript"><!--
google_ad_client="pub-9665515199184582";
google_ad_host="pub-1556223355139109";
google_ad_width=728;
google_ad_height=90;
google_ad_format="728x90_as";
google_ad_type="text_image";
google_color_border="000000";
google_color_bg="000000";
google_color_link="AADD99";
google_color_url="CCCCCC";
google_color_text="CCCCCC";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7763145969073648252.post-40643304044266088202009-03-20T19:53:00.000-07:002009-03-20T20:31:56.814-07:00Adding IM Hyperlinks to a Web Site (Msn,Yahoo,Aim,Google Talk,Skype)If you have a site, a forum or a blog and want your users to contact you any time via your site?<br />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.<br /><br />Use the below html codes in your site to add various messenger functions:<br /><span class="fullpost"><br /><p class="Code"><br />Interact via Yahoo messenger<br /><br />Replace USERNAME with yourID@yahoo.com<br /><br /><a href=”ymsgr:sendIM?USERNAME”>Contact me via yahoo</a><br /><br /><a href=”ymsgr:addfriend?USERNAME”>Add me to buddy list</a><br /><br /><a href=”ymsgr:sendIM?USERNAME&m=YOUR+MESSAGE”>Send me an IM</a><br /><br /><a href=”ymsgr:call?USERNAME”>Call Me</a><br />If you want your online status shown in the form of images. You can use one of the images in this way :<br /><br /><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><br />the <span style="font-weight:bold;">t=1</span> shows the images type. You can change it to 0, 2, 3,4 etc.<br /></p><br /><p class="Code"><br />Interact via Msn<br /><br />Replace USERNAME with yourID@hotmail.com<br /><br /><a href=”msnim:chat?contact=USERNAME”>Chat with me</a><br /><br /><a href=”msnim:add?contact=USERNAME”>Add me to your contact list!</a><br /><br /><a href=”msnim:voice?contact=USERNAME”>Voice chat with me</a><br /><br /><a href=”msnim:video?contact=USERNAME”>Video conversation with me</a><br /></p><br /><p class="Code"><br />Interact via Aim<br /><br />Replace USERNAME with AOL “screenname”<br /><br /><a href=”aim:goIM?screenname=USERNAME”>Contact me via aim</a><br /><br />Open new IM window with a screen name and a message<br /><a href=”aim:goim?screenname=USERNAME&message=MESSAGE”>Chat in aim</a><br /><br />Grabs shared files from a screen name<br /><a href=”aim:getfile?screenname=USERNAME”>Get Shared Files</a><br /><br />Opens a chat room<br /><a href=”aim:gochat?roomname=CHATROOMNAME”>Go to chat room</a><br /><br />Automatically adds screen name to the “Add Buddy” window<br /><a href=”aim:addbuddy?screenname=USERNAME”>Auto add buddy</a><br /><br />Automatically adds screen name and group name to the “Add Buddy” window<br /><a href=”aim:addbuddy?screenname=USERNAME&groupname=GROUPNAME”>Auto add Screen name and Group name</a><br /></p><br /><p class="Code"><br />Interact via GoogleTalk (<img style="float:left; margin:0 10px 10px 0;cursor:pointer; width: 22px; height: 22px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-KSmmCIrxrcCAlbjoabIWYK0gtfVKZ5xfSBUmtZvv7Hlf6LOyi1-WZTcMCqXSFT3ZzS6Lj5ZbUbRuutMIBuabGPgcj_QxbYks-1_VFBkbiy8FnC9rYaDwCSKzjwP9_BZ44f9DDi8paPs/s200/gtalk_icon_small.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5315471469122165010" />)<br /><br />Replace USERNAME with yourID@gmail.com<br /><br /><a href=”gtalk:chat?jid=USERNAME”>Contact me via Google Talk</a><br /><br /><a href=”gtalk:call?jid=USERNAME”>Voice Chat with me</a><br /></p><br /><p class="Code"><br />Interact via Skype(<img style="float:left; margin:0 10px 10px 0;cursor:pointer; width: 16px; height: 16px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1-E1Y363rh4doxDXHVBM2x9-vQxCxRuj6c6aflu3D5oTo-_90RGbw8uZSeDGfnBPnFLZhJzl04zqIdTrLftbYG5K8r6Ze_hpVm8EuJ3pIyEGavDNQ7Y7IF7WALUbsNgqcIAWUFG1Vp9A/s200/icon_skype.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5315472320064935794" />)<br /><br />Replace USERNAME with your Skype user ID<br /><br /><a href=”skype:USERNAME?chat”>Contact me via Skype</a><br /><br /><a href=”skype:USERNAME?voicemail”>Leave voicemail</a><br /><br /><a href=”skype:USERNAME?userinfo”>View Profile</a><br /><br /><a href=”skype:USERNAME?add”>Add 2 Contact List</a><br /></p><br /><br />If you find an error for example while using gtalk in firefox, see <a href="http://support.mozilla.com/en-US/kb/The+protocol+is+not+associated+with+any+program#Associate_the_protocol_with_a_program_in_Firefox" target="new">this link</a>.<br /></span><div class="blogger-post-footer"><script type="text/javascript"><!--
google_ad_client="pub-9665515199184582";
google_ad_host="pub-1556223355139109";
google_ad_width=728;
google_ad_height=90;
google_ad_format="728x90_as";
google_ad_type="text_image";
google_color_border="000000";
google_color_bg="000000";
google_color_link="AADD99";
google_color_url="CCCCCC";
google_color_text="CCCCCC";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-7763145969073648252.post-52034436536569312262009-03-15T17:42:00.000-07:002009-03-15T18:04:19.966-07:00Set Blog/Article Title as Page TitleTo save yourself some effort and to <span style="font-size:180%;">enhance the search engine ranking</span> (: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 <span style="font-size:130%;">have control over how the page title is displayed</span> 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 :<br />[YOU ARE ADVISED TO "DOWNLOAD FULL TEMPLATE" BEFORE YOU MESS WITH ANYTHING.]<br /><span class="fullpost"><br /><ol><li>Go to Dashboard -> Layout ->Edit HTML</li><li>Locate the <head> just around the top portion in the textbox.<br /></li><li>Just a few lines below <head> , replace <title><data:blog.pagetitle/></title> with the following:<br /></li><li><br /><p class="Code"><br /> <b:if cond='data:blog.pageType == "item"'><br /><title><br /><data:blog.pageName/> | <data:blog.title/><br /></title><br /><b:else/><br /><title><data:blog.pageTitle/></title><br /></b:if><br /></p></li><br /><li> Hit save and you are done!!!</li><li>Now, if you are interested in how it's done Here you go.</li><li>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).<br /></li></ol><br /></span><div class="blogger-post-footer"><script type="text/javascript"><!--
google_ad_client="pub-9665515199184582";
google_ad_host="pub-1556223355139109";
google_ad_width=728;
google_ad_height=90;
google_ad_format="728x90_as";
google_ad_type="text_image";
google_color_border="000000";
google_color_bg="000000";
google_color_link="AADD99";
google_color_url="CCCCCC";
google_color_text="CCCCCC";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7763145969073648252.post-31235470662728185602009-03-15T14:31:00.000-07:002009-03-15T14:51:01.685-07:00Creating "Search This Blog" or Blogger Search boxAfter creating my "<a href="http://blogdesignhack.blogspot.com/2009/03/add-google-search-box-on-your-blog.html" target="_new">Google Search</a>" box, I wanted to have a search box completely dedicated to <span style="font-weight: bold;font-size:130%;" >searching my current blog</span>. Though, I could also have both the searches work together, but I prefer them to be separate. For creating the <span style="font-style: italic;font-size:130%;" >search specific to my current blog</span>, 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 ...<br /><span class="fullpost"><br />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.<br />It looks something like this just below the <Body> part in the source code:<br /><p class="Code"><br /><div class='navbar section' id='navbar'><div class='widget Navbar' id='Navbar1'><script type="text/javascript"><br /> function setAttributeOnload(object, attribute, val) {<br /> if(window.addEventListener) {<br /> window.addEventListener("load",<br /> function(){ object[attribute] = val; }, false);<br /> } else {<br /> window.attachEvent('onload', function(){ object[attribute] = val; });<br /> }<br /> }<br /> </script><br /><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><br /><div></div></div></div><br /></p><br /><br />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:<br /><br /><ol><li>Go to Layout tab under dashboard for your current blog.</li><li>Hit "Add Gadget"</li><li>Choose HTML/Javascript.</li><li>Paste the copied code into the content box after giving title in title box.</li><li>The content box should look something like this :</li></ol><br /><p class="Code"><br /><div id="navbar" class="navbar section"><br /><div id="Navbar1" class="widget Navbar"><br /><script type="text/javascript"><br /> function setAttributeOnload(object, attribute, val) {<br /> if(window.addEventListener) {<br /> window.addEventListener("load",<br /> function(){ object[attribute] = val; }, false);<br /> } else {<br /> window.attachEvent('onload', function(){ object[attribute] = val; });<br /> }<br /> }<br /> </script><br /><br /><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" <span style="font-weight: bold;font-size:130%;" >width="90%"</span>><br /></iframe><br /></div><br /></div><br /></p><br />Just make sure that you change the <span style="font-size:130%;"><span style="font-weight: bold;">width</span></span> to 90% so that none of the other portions appear in sidebar.<br />Hit save and enjoy!!!<br /><br /></span><div class="blogger-post-footer"><script type="text/javascript"><!--
google_ad_client="pub-9665515199184582";
google_ad_host="pub-1556223355139109";
google_ad_width=728;
google_ad_height=90;
google_ad_format="728x90_as";
google_ad_type="text_image";
google_color_border="000000";
google_color_bg="000000";
google_color_link="AADD99";
google_color_url="CCCCCC";
google_color_text="CCCCCC";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7763145969073648252.post-36023191281936418412009-03-15T09:36:00.000-07:002009-03-30T17:00:59.497-07:00Add a Google Search Box on Your BlogDo you want to add a new <span style="font-size:180%;"><span style="font-weight: bold;">Google search on your blog</span></span>? It's pretty simple. Just follow the steps defined here and you will be good.<br /><span class="fullpost"><br /><ol><li>Go to <a href="https://www.google.com/adsense" target="_new">Google Adsense</a> and then login.</li><li>Click on Adsense Setup.</li><li>Click on "Adsense for Search".</li><li>Click search type "The entire web".</li><li>And then just follow the default patterns or whichever colors you like.</li><li>At the end of it Google gives you some code. Copy both of them together.</li><li>And come back to your blogspot blog.</li><li>Now goto dashboard and then hit "Add a gadget".</li><li>Select HTML/Javascript in the gadget list.</li><li>Add a title "Search google" the title text.</li><li>Paste the code that you copied in step 6. It should look like this if you copied it correctly<br /><p class="Code">:<form id="cse-search-box" action="http://<span style="font-weight: bold;">myblogname</span>.blogspot.com"><br /><div><br /><input value="partner-<span style="font-weight: bold;">your-pub-id</span>" name="cx" type="hidden"/><br /><input value="FORID:10" name="cof" type="hidden"/><br /><input value="ISO-8859-1" name="ie" type="hidden"/><br /><input name="q" size="71" type="text"/><br /><input value="Search" name="sa" type="submit"/><br /><a href="http://<span class="fullpost"><span style="font-weight: bold;">myblogname</span></span>.blogspot.com/?q=&sa=Search#1099">Clear Search</a><br /></div><br /></form><br /><script src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en" type="text/javascript"></script><br /><div id="cse-search-results"></div><br /><script type="text/javascript"><br />var googleSearchIframeName = "cse-search-results";<br />var googleSearchFormName = "cse-search-box";<br />var googleSearchFrameWidth = 800;<br />var googleSearchDomain = "www.google.com";<br />var googleSearchPath = "/cse";<br /></script><br /><script src="http://www.google.com/afsonline/show_afs_search.js" type="text/javascript"></script><br /></p><br /></li><li>Hit save and come back to Layout tab.</li><li>Now move your gadget to the top area or whichever area you want to display.</li><li>Hit save and you are done.<br /></li></ol><br /><br />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.<br /><br /><p class="Code"><br /><font size="-1"><br /><br/><input checked value="" name="sitesearch" type="radio"/> Entire Web<br /><input value="mycomponent.blogspot.com" name="sitesearch" type="radio"/> This Blog <br/><br /></font><br /></p><br /></span><div class="blogger-post-footer"><script type="text/javascript"><!--
google_ad_client="pub-9665515199184582";
google_ad_host="pub-1556223355139109";
google_ad_width=728;
google_ad_height=90;
google_ad_format="728x90_as";
google_ad_type="text_image";
google_color_border="000000";
google_color_bg="000000";
google_color_link="AADD99";
google_color_url="CCCCCC";
google_color_text="CCCCCC";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7763145969073648252.post-36755982917891690362009-03-15T07:23:00.000-07:002009-03-15T08:19:43.489-07:00Remove / Hide the blogger Navigation BarWell, the next thing I wanted to do in my blogs is <span style="font-size:130%;">hiding the blogger navigation bar</span>. 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 ...<br />[YOU ARE ADVISED TO "DOWNLOAD FULL TEMPLATE" BEFORE YOU MESS WITH ANYTHING.]<br /><span class="fullpost"><br /><ol><li>Go to your dashboard and select "Layout" tab.</li><li>Click "Edit Html".</li><li>Check the "Expand Widget Templates" checkbox.</li><li>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".</li><li>Copy and Paste the following just below <span style="font-weight: bold; font-style: italic;">#header-wrapper {width:880px; margin:0 auto 10px; border:1px solid $bordercolor;}</span></li><li><br /><p class="Code">#navbar-iframe { display: none !important; // hide the navigation bar}</p></li><li>This should now look like this:</li><li><p class="Code">/* Header<br />-----------------------------------------------<br />*/<br /><br />#header-wrapper {<br /> width:880px;<br /> margin:0 auto 10px;<br /> border:1px solid $bordercolor;<br /> }<br /><span style="font-weight: bold;">#navbar-iframe {</span><br /><span style="font-weight: bold;"> display: none !important; // hide the navigation bar</span><br /><span style="font-weight: bold;"> }</span></p><br /></li><li>Save settings. and you are done. Enjoy!!</li><li>And yeah ! don't worry you can always goto dashboard or in edit mode when you login by going to <span style="font-style: italic;">blogger.com</span>.<br /></li></ol><br /><br />If you want to know, how this works ..here it is :<br />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 <br /><p class="Code"><style type="text/css"> #navbar-iframe { display:block }<br /></style><br /><br /></head><br /><body><br /><br /><div class='navbar section' id='navbar'><div class='widget Navbar' id='Navbar1'><script type="text/javascript"><br /> function setAttributeOnload(object, attribute, val) {<br /> if(window.addEventListener) {<br /> window.addEventListener("load",<br /> function(){ object[attribute] = val; }, false);<br /> } else {<br /> window.attachEvent('onload', function(){ object[attribute] = val; });<br /> }<br /> }<br /> </script><br /><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="<span style="font-weight:bold;"><span style="font-style:italic;">navbar-iframe</span></span>" title="Blogger Navigation and Search"></iframe><br /><br />......<br />etc ...<br />etc..<br /></p><br /><br />If you see the frame Id is named as <span style="font-weight:bold;">navbar-iframe<span style="font-style:italic;"></span></span><br /><br />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 !!!<br /><br /></span><div class="blogger-post-footer"><script type="text/javascript"><!--
google_ad_client="pub-9665515199184582";
google_ad_host="pub-1556223355139109";
google_ad_width=728;
google_ad_height=90;
google_ad_format="728x90_as";
google_ad_type="text_image";
google_color_border="000000";
google_color_bg="000000";
google_color_link="AADD99";
google_color_url="CCCCCC";
google_color_text="CCCCCC";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7763145969073648252.post-14988213217435221172009-03-14T14:43:00.000-07:002009-03-17T18:20:49.183-07:00Create your own shortcut icon/ address bar iconAre you fed up of the generic/common blogger icon that appears on every other blog when you open it in the browser ?<br /><br /><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 150px; height: 40px;" src="http://www.blogger.com/img/logo40.png" alt="" border="0" /><br /><br />Well, assuming that the Blogger terms of service are not violated if we try to <span style="font-size:180%;"><span style="font-weight: bold;">change the shortcut icon</span></span> (or <span style="font-size:180%;">FavIcon </span>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:<br />[YOU ARE ADVISED TO "DOWNLOAD FULL TEMPLATE" BEFORE YOU MESS WITH ANYTHING.]<br /><span class="fullpost"><br /><ol><li>If you already have an icon somewhere on the web,<span style="font-style: italic;"> goto step 7</span>. Otherwise for uploading a new icon, click on new post.</li><li>On the Compose or Edit Html tab, click on "Add Image" button on the text toolbar.</li><li>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 <span class="note">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.</span></li><li><span class="note">Once uploaded, Click "Done", and come back to the New Post page.</span></li><li><span class="note">Now from the "Edit HTML" tab, select the src="<span style="font-weight: bold;">http://www.blogger.com/......png etc</span>" within the <span style="font-weight: bold;"><img</span> tag. Copy just the url/link of image.</span></li><li><span class="note">Click on "save as draft" button. Keep this post as draft forever.</span></li><li><span class="note">Now go to Customize -> Layout -> Edit HTML, then click "Expand widget templates" checkbox.</span></li><li><span class="note">Scroll down until you find <span style="font-weight: bold;">]]></b:skin></span> or <span style="font-weight: bold;"></head></span>.</span></li><li><span class="note">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.<br /></span></li><li><p class="Code"><br /><span class="note">< href='<span style="font-style: italic; font-weight: bold;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPBYIXunMn2FBIUnJdFS3mVP2f_ScLkYyMgYLRhSv3mftWAggyT8y9v9liBxNKwW5YEWB5D_QyLxo_XKnH3gku4QBAWk_YR2pvGTCd4qlNOskyd3JjOw1_ZLXw43f_2stf8dDHcQCbDkA/s320/Pinto.jpg</span>' rel='<span style="font-size:180%;"><span style="font-weight: bold;">SHORTCUT ICON</span></span>'/> </head> </span></p><br /><br />The highlighted url will be your url image. The one shown here is mine.<br /></li><li><span class="note">Click Save template and enjoy!<br /></span></li></ol><br /><br /></span><div class="blogger-post-footer"><script type="text/javascript"><!--
google_ad_client="pub-9665515199184582";
google_ad_host="pub-1556223355139109";
google_ad_width=728;
google_ad_height=90;
google_ad_format="728x90_as";
google_ad_type="text_image";
google_color_border="000000";
google_color_bg="000000";
google_color_link="AADD99";
google_color_url="CCCCCC";
google_color_text="CCCCCC";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7763145969073648252.post-45163378643640829662009-03-14T08:15:00.000-07:002009-03-14T13:21:51.443-07:00Resizing your page or blogThe 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 <span style="font-size:180%;">change the size of the blog (width</span> etc) if you want. Just goto <span style="font-size:180%;">customize </span>-> Layout tab -> Edit Html. Click on Expand Widget Templates and then follow the following.<br /><br />YOU ARE ADVISED TO "DOWNLOAD FULL TEMPLATE" BEFORE YOU MESS WITH ANYTHING.<br /><br />The default settings are as defined here:<br /><span class="fullpost"><br />Under the header section, you will see the following css class definitions:<br /><p class="Code"><br />/* Header<br />-----------------------------------------------<br />*/<br />#header-wrapper {<br />width:660px;<br />margin:0 auto 10px;<br />border:1px solid $bordercolor;<br />}<br /></p><br />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:<br /><br /><p class="Code"><br />/* Header<br />-----------------------------------------------<br />*/<br /><br />#header-wrapper {<br />width:800px;<br />margin:0 auto 10px;<br />border:1px solid $bordercolor;<br />}<br /></p><br /><br />Similarly, look for all other css styles with width of 660px and change them to 800px. Specially look for #header .description, #outer-wrapper, #footer.<br /><br />You might see the following in NOT particularly the same order:<br /><p class="Code"><br />#header .description {<br /> margin:0 5px 5px;<br /> padding:0 20px 15px;<br /> max-width:660px;<br /> text-transform:uppercase;<br /> letter-spacing:.2em;<br /> line-height: 1.4em;<br /> font: $descriptionfont;<br /> color: $descriptioncolor;<br />}<br /><br />/* Outer-Wrapper<br />----------------------------------------------- */<br />#outer-wrapper {<br /> width: 660px;<br /> margin:0 auto;<br /> padding:10px;<br /> text-align:$startSide;<br /> font: $bodyfont;<br /> }<br /><br />/* Footer<br />----------------------------------------------- */<br />#footer {<br /> width:660px;<br /> clear:both;<br /> margin:0 auto;<br /> padding-top:15px;<br /> line-height: 1.6em;<br /> text-transform:uppercase;<br /> letter-spacing:.1em;<br /> text-align: center;<br />}<br /><br /></p><br /><br />Now after you have changed all 660px to 800px, is the time to <span style="font-size:180%;">change the main blog post width</span> to fit the page.<br />The <span style="font-size:130%;">sidebar width</span> is usually defined at 220px as shown below: (Specially look for #sidebar-wrapper)<br /><p class="Code"><br />#sidebar-wrapper {<br /> width: 220px;<br /> float: $endSide;<br /> word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br /> overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />}<br /></p><br /><br />So we have to have the width of post as 800-220 = 580px. So look for the following in your css definitions: #main-wrapper<br /><br /><p class="Code"><br />#main-wrapper {<br /> width: 410px;<br /> float: $startSide;<br /> word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br /> overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br /> }<br /></p><br /><br />Change 410px or whatever is defined there to 580px. And Voila after you save the settings, you are flying with a new <span style="font-size:180%;">more spacious blog</span> of yours. :)<br />Enjoy!!<br /></span><div class="blogger-post-footer"><script type="text/javascript"><!--
google_ad_client="pub-9665515199184582";
google_ad_host="pub-1556223355139109";
google_ad_width=728;
google_ad_height=90;
google_ad_format="728x90_as";
google_ad_type="text_image";
google_color_border="000000";
google_color_bg="000000";
google_color_link="AADD99";
google_color_url="CCCCCC";
google_color_text="CCCCCC";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7763145969073648252.post-42844644679887925312009-03-14T07:05:00.000-07:002009-03-14T13:39:46.164-07:00The blog hackersI created two blogs<br /><ul><li><span style="font-size:130%;"><a href="http://askjha.blogspot.com/" target="_new">AskJha.BlogSpot.com</a></span><br /></li><li><span style="font-size:180%;"><a href="http://mycomponent.blogspot.com/" target="_new">mycomponent.blogspot.com</a></span></li></ul>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.<br /><span style="display: inline;"><br />I am a programmer by <span style="font-weight: bold; font-style: italic;">CHOICE</span>. So you will find everything here that you want to re-design your blog.<br />Happy hacking !!!<br /></span><div class="blogger-post-footer"><script type="text/javascript"><!--
google_ad_client="pub-9665515199184582";
google_ad_host="pub-1556223355139109";
google_ad_width=728;
google_ad_height=90;
google_ad_format="728x90_as";
google_ad_type="text_image";
google_color_border="000000";
google_color_bg="000000";
google_color_link="AADD99";
google_color_url="CCCCCC";
google_color_text="CCCCCC";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>Unknownnoreply@blogger.com0