Skip to main content

Posts

Showing posts from November, 2009

Expand/Collapse ,Hide/show -navigation Element-widget

Here is a simple tutorial for you to add Expand/collapse ,Hide/show navigation element which gives pleasing and organized look to your sidebar.Actually the whole tutorial is divided in to three parts and every part is equally important .Any mistake might not result what is expected.
Before starting The tutorials please backup your template in case if anything goes wrong.
First part :
Add the following code in your style sheet.
.commenthidden {display:none}
.commentshown {display:inline}
Second part :
Put the following code in Between <head> and </head>
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
&lt;head&gt;
Third Part :
Add this code in your Html/javascript gadget.
<a aiotitle="click to expand" href=&…

6 different Flash clock Designs & how to add it to blogger.

1.


<img src="http://www.blogger.com/img/object_element.gif" style="height: 150px; width: 150px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_1" />
2.


<object width="150" height="150"><param name="movie" value="http://www.csalim.com/clocks/915885.swf"><embed src="http://www.csalim.com/clocks/915885.swf" width="200" height="200"></embed></object
3.

<object width="150" height="150"><param name="movie" value="http://www.csalim.com/clocks/835228.swf"><embed src="http://www.csalim.com/clocks/835228.swf" width="200" height="200"></embed></object>
4.

<object width="150" height="150"><param name="movie" value="http://www.csalim.com/clocks/570701.swf"><embed src="http…

Google Friend Connect Gadgets In Various Forms

Google friend connect gadgets which most of us use in our blogs exists in various forms Even i dont know that until one of my friend told me an give me this friend connect page link.
Most of us has used Google followers gadget but it is one of the different friend connect gadgets.


1.Go to the Friend connect gadget Through this link.
2.In the left hand side of the screen there is list of your blogspot blogs.Expand any of your blog(just click on it).
3.Choose the browse the gadget tab.






4.You can now see a list of gadgets choose your gadget (you can customze the color and size of the gadget )
5.Copy the HTML code and paste it in a Html/Javascript gadget.

Here is a list of some popular gadgets .
1.Add a social bar to your site



2.Ratings and reviews


3.Interest Polls


You can find other gadgets like Members gadget ,comments ,recommendation gadget,featured content ,news letter subscriptions and more>i am sure you will find one cool gadget for your blog too.
Note :You can add Your own gadget by…

Google wave invitation-My first encounter with Wave

Oh My God!! Finally the google wave has ended to my inbox.
After all the hard work  i have done by posting in various forums and various blogs,nothing solves my journey but a friend of mine,whom i know from few days back on internet ,just because we exchange links for our blogroll.
Thanks to my blogroll thanks to my fundoo-blog.

When i first look at the mail i refresh the page to check whether this is my mail box because as it is told that it takes 24-48 hours to recieve a mail after an invitation and that was quick almost instantaneous.

-----------------------------------------------------------------------------------------------------------
 My Google Wave Mail Letter






------------------------------------------------------------------------------------------------------------
My first encounter with Wave
Have a look at the Google Wave:(click to open in full screen)


-------------------------------------------------------------------------------------------------------
I Know there are …

Add blogger search box

Although most of the customized blogger templates has embedded  blogger search with the template.How ever you want to include a search box in the main area of the template like above or below the post area or in the sidebar OR it might be possible that your template does not has a blogger search embedded in that case you can add your own search box and place it anywhere in your blog.

Under layout >> page element tab "Click add a gadget " on the suitable place where you want to add blogger search and choose "Html /javascripts".

Below are the certain Html codes you can use from and add to your Html/javascripts popup window.

<p align="left">
<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">
<strong>YOUR BLOG NAME<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"…

How to Add ,display or insert orkut share button to blogger :New

The orkut Share API allows website owners to enable their visitors to share the website content with visitor's orkut friends. Users can optionally promote the content among their friends.   
This is a new and awesome share button(orkut-share) like every other social networking sites.Till now it is available in two forms since it is in experimental form 
Bloggers can add the buttons shown above anywhere using a JavaScript library, clicking which brings up the share dialog with the item selected for sharing like showed in image below



Adding to blogger !
Login to your dashboard.Navigate through :Layout >> Edit HTMLClick on Expand widget template : Expand widget templateUse your browser search to find  </head> and place the below code above </head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('orkut.share', '1');
      g…

How to add different meta tags for each individual posts -blogger

Why word press is consider as better blogging  than blogger is due to the fact that it allow us to add different meta tags for every individual posts by just installing plugins such as all in one seo wordpress plugin.
Now you can reduce this gap to some extent by using this tricks by which you can add meta tags for all individual posts.
Lets start this process :
1.Open blogger and login .
2.Navigate through Layout >> Edit Html
3.Click on Expand widget template : Expand widget template.
4.Use your browser search to find <head> 
5.Now paste the following code below <head> 


<b:if cond='data:blog.url == "enter the url of the post here"'>
<META NAME="keywords" CONTENT="enter keywords here separated by comms" />
<META NAME="ROBOTS" CONTENT="INDEX,FOLLOW"/>
</b:if>

Note : Please note that for each post you have to add this code again by writing the post URL (link) and keywords.
Some thing like t…

Random post widget for blogger

Thought related posts widget or popular post widget are most important widgets for a blog and most common too, but adding a random post widget will give life to all your previous posts since your blog posts are being rotated randomly with each refresh.
Adding a widget like this is very easy ,you need to be logged in to your blogger account.
Simply add a Html/Javascript gadget at any place in your sidebar and copy and paste this code :

Installation And Customization :

Click on the below button to to Add directly to your bloggger.



<script type="text/javascript"> var randarray = new Array();var l=0;var flag; var numofpost=10;function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); for(n in randarray){ var p=randarra…

A Simple Javascript to display date and time

Displaying the current Date:


var currentDate = new Date()
  var day = currentDate.getDate()
  var month = currentDate.getMonth()
  var year = currentDate.getFullYear()
  document.write("<b>"   day   "/"   month   "/"   year   "</b>")      


 Displaying the current time :

 var currentTime = new Date()
  var hours = currentTime.getHours()
  var minutes = currentTime.getMinutes()

  if (minutes < 10)
  minutes = "0"   minutes

  document.write("<b>"   hours   ":"   minutes   " "   "</b>")


Displaying the current time with AM/PM


var currentTime = new Date()
  var hours = currentTime.getHours()
  var minutes = currentTime.getMinutes()

  var suffix = "AM";
  if (hours >= 12) {
  suffix = "PM";
  hours = hours - 12;
  }
  if (hours == 0) {
  hours = 12;
  }

  if (minutes < 10)
  minutes = "0"   minutes

  document.write("<b>"   hou…

How to make rounded corners in your existing menubar

This is a simple and easy tutorials for beginners , which make rounded corners in your existing menubar without using image and can be easily implemented on blogspot blogs.There is a lot of code snippet around to create a rounder corner ,but this one is simple CSS technique of rounding off corners using  some css atributes.
This technique will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. This technique will not work in Internet Explorer.



Note : -moz-border-radius: 10px; IS used for rounding corners in mozilla based browser and -webkit-border-radius: 10px; for safari and chrome

Add following CSS attributes to your menu element to make its corner round.

 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;


  Add following CSS attributes to your menu element to make its left corner rounded :

-moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;


.

You can use  different possible combinations of  topleft, top-left,…

Stepbystep :Using Disqus to blogger-tutorial

This Tutorial will show you how to add disqus comment system ho highly customizes blogger template.
Here is a step by step procedure :




1.GO to DISQUS.

2.Click on      Sign Up,Free

3.Fill The details on the Sign up page.(click on the image to enlarge) and Click on Continue


 4.Fill the settings Page(You can skip this step and change your settings later.)


5.Click   Continue

6.Choose youe blogging platform

Since this is a blogger tutorial we,will go with blogger .Click on blogger


7.open Blogger.com in new Tab
Login to  your blogger dashboard.
Layout >> Edit HTML>> Download Full template


8.Revert back to Disqus tab.
CLICK on Choose file .
A new window will  open Chosse the select xml file which you have downloaded in step 7.
If u want to import previous comments from blogger Click on 2nd check box...like this
Use Disqus Comments on all blog entries. Any existing comments can be imported in.

Click on Upload and continue






9.COPY THE XML code given by the Disqus.

10.Revert ba…

Create falling Stars effect to blogger.

After adding various successful effect on blogger like
Spring effect to blogger,
Winter snow effect to blogger,
Create falling heart effect to blogger.


This is the forth one is this category called as Falling star effect to blogger and fairly simple and easy to install.

<script src="http://sites.google.com/site/ishanbanga03/my-uploads/stareffect2Bmyfundooblog-blogspot.com.js"><a href="http://myfundoo-blog.blogspot.com/"><span style="font-size: xx-small;">Get this for your blog</span></a> </script>


1. Click Effect to open Blogger in a new window, and follow the steps below in that window. Please login if necessary.
2.Try Copy and pasting way.
Copy the below code and add it to your Html/javascript gadget and place the gadget at the bottom.

<script src="http://sites.google.com/site/ishanbanga03/my-uploads/stareffect2Bmyfundooblog-blogspot.com.js"><a href="http://myfundoo-blog.blogspot.com/"><sp…

Make first letter of your post large and attractive

This hack will let you make the first letter of your posts standout  like you see in image here..See the Y is in Caps(with styling).



Just follow easy steps :
Login to your dashboardlayout >> Edit HTMLCheck Expand Template Widget in the top corner.Use browser search to find ]]> b:skin>Copy the following code, place it above code ]]> < /b:skin>
.initial {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}

Click on    Save template 

How to write a post??
Type this code < span class="initial"> First Letter </span> in HTML mode. Insert the first letter of your articles. After writing initial letter ,you can type in Edit HTML or in the Compose

Add devider between posts for blogger-post devider

Few days back i write a post about adding background color/image to your blogger post.Now we will learn to add post devider between posts.I have seen certain blogs with good content but failed to hold readers because of improper template design with lack of popup ability .ONE of the main reason for adding post dividers is to make readers easily differentiate between posts.
Lets just begin and see how we can add post devider to any customized blogger template.
Login to dashboard .Navigate your way to edit HTML(expand widget template)AND use your browser search to find .post
.post is responsible for post layout and its style & it may have few CSS propertes like :

.post {
background:#fff url(http://3.bp.blogspot.com/_sunpK_FtO1E/SmLpQomgPcI/AAAAAAAAAJk/9FklGNoNPxw/s1600/box-bgr.gif) repeat-x top;
    float: left;
    width: 475px;
    margin-bottom:5px;
    padding: 10px;
        overflow:hidden;
        border:1px solid #cfcfcf;
}

Now ALL you have to do is add CSS properties Of a sepe…

Blog Offline : Windows Live Writer

Windows Live Writer is Backed by a Trusted Brand - MicrosoftA big perk of using Windows Live Writer is its integration with Microsoft's other products, particularly the other Windows Live tools. You can feel confident that Windows Live Writer will continue to be updated well into the future.


Windows Live Writer Offers a Wide Variety of Features New Authoring Capabilities



* Inline spell checking

* Table editing
* Ability to add categories
* Page authoring for WordPress and TypePad
* Support for excerpts and extended entries
* Improved hyperlinking and image insertion
* Paste Special

Integration and Compatibility

* SharePoint 2007 support
* New APIs enabling custom extensions by weblog providers
* Automatic synchronization of local and online edits
* Integration with Windows Live Gallery
* Support for Blogger Labels

Plus...

* New look and feel
* Available in 6 languages
* Improved accessibility and keyboard support
* Many other frequently requested enhancements!

Download from Live.com||Dow…

Sitemap

Add a Gtalk live chat button to your blog

Google Talk chatback badge will let visitors to your web page chat with you. They’ll be able to chat with you whenever you’re signed in to Google Talk.” The badge will display your online status (whether you're available to chat or not) and, optionally, your status message.




What U need in order to create one for your blog?
U need to be an Gtalk user.
If you're not a current Google Talk user, you'll need to create a new Google Account. If you have Gmail on your Google Account, you can use Google Talk with your Gmail account.


Lets Get this one for your blog :
to create  read the below details and visit :gtalk badge



Title: Text appearing in blue.
Your nickname:  Name Displayed to guest.
Style :click on the drop down list to select to select from 6 options.


Click Update badge

Copy the HTML code From below And paste in your gadget list

How to change default cursor in blogger or myspace blogs

It is about the World Cup and we can give the blog a sporty style with these cursors Free soccer alluding that can fit easily and remove them whenever you want.
To make any of these cursors in your blog goes into Design | Edit HTML and before </ body> paste the code cursor that you like.
If you are a Football Fan like me then must check posts for you:-
16 football style blogger templates And Football worldcup exclusive template

<style type="text/css"> body, a, a: hover (Cursor: url (http://cur.cursors-4u.net/sports/spo-5/spo406.cur) progress;) </ style>
 <style type="text/css"> body, a, a: hover (cursor: url (http://cur.cursors-4u.net/sports/spo-5/spo409.cur) progress;) </ style>
 <style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/sports/spo-4/spo378.cur), progress;}</style>  <style type="text/css"> body, a, a: hover (cursor: url (http://cur.cursors-4u.net/sports/spo-1/sp…