Saturday, June 5, 2010

Hide Show DIV Content with Links by using Javascript

The Hide and Show DIV elements for HTML content is a great way to clean up your sidebar. It becomes especially handy for those long blogroll lists or anything that clutters up the blog. Just simply click a link to make all the hidden content magically appear and disappear.

Demo:




+/- Click Here to Expand and Collapse

Step 1: Adding CSS and Javascript
First, add this code below directly above the </head> tag.

<style type="text/css">
.commenthidden {display:none}
.commentshown {display:inline}
</style>
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

Step 2: Adding the Active Content to be Displayed
Place this code wherever you would like it to appear. Make sure to change the red text to a name that is "unique" to any other name in your template. An example might be "blogroll-dropdown". If you do not give each Hide Show DIV element a unique name the script cannot be used more than once on the same page. The green text is the title of the link that you click on to make the content appear. Replace the code "Expanded Content" with the content you wish to have expand and collapse.

<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')"
>Link Title</a><br />
<div class="commenthidden" id="UniqueName"
>Expanded Content</div>

Step 3: Sample Code
Here is what my code looks like for the demo above:

<a aiotitle="" href="javascript:togglecomments('hideshowdemo')">+/- Click Here to Expand and Collapse</a>
<div class="commenthidden" id="hideshowdemo"><ul><li><a href="http://technowit.blogspot.com/">tricks</a></li><li><a href="http://bloggerbiblez.blogspot.com/">Blogging</a></li></ul><div>




Wednesday, June 2, 2010

Automatic Read More Plugin for Blogge


Tuesday, June 1, 2010

Change Google logo with any doodle in Chrome


Are you bored of usual Google logo and want Google homepage with colorful Google logo doodles? You can easily do this in few simple clicks on Chrome browser using ‘Favorite Doodle’ extension. It allows you to select and display Google logo doodle of your choice on Google Search homepage in your Google Chrome browser.




STEPS:-

Replace Google logo with colorful doodle




1. Launch Google Chrome browser and open Favorite Doodle extension.

2. Install then extension and then open google.com in Chrome browser.

3. Click on Google logo to open Doodle Gallery.

OR

visit Google logos

4. Then click “Make this my favorite doodle’ button under doodle logo of your choice.

The selected doodle image will start appearing on Google homepage instead of usual Google logo. Now you can put Pacman game doodle and any other doodle forever on your Google homepage. Ready for quick change?





Find Twitter Users Near You!

If you enable location in Twitter, your current geographic coordinates (latitude and longitude) are added to your tweets.

You may not want to share the exact location of your house in a public tweet for obvious reasons but if you are visiting a new place or attending a local event, these “geo-tagged” tweets can help you quickly find other Twitter users who maybe located in a particular region.

Find Twitter Users Nearby

There are at least three popular services that can help you find local Twitter users and, if you are concerned about your own privacy, the good part is that you can use these service even without sharing your own location.

1. Twitter Maps on Bing

Twitter on Bing Maps

The first service that you may want to explore is Twitter Maps available on the Bing Maps website. You need to switch to the US edition of Bing Maps in order to install the Twitter Maps app but the service can then be used to discover Twitter users in any part of the world.

You can zoom-in to any location on the map using the mouse or you can directly type the street address /landmark in the location box. You need to click the “twitter pushpins” in order to see the underlying tweets.

2. Twitter Search with Location

Location Search in Twitter

The advanced search feature of Twitter has excellent support for location. Just add the city name, street or zip code (if you are in the US) to the “near:” search operator and Twitter will show a nice list of Tweets that have been made from that area.

For instance, the query near:lahore within:10km will show you are list of Lahore, Pakistan based Twitter users. You can increase the value of the “within” parameter from 10km to say 50km to include users based in nearby towns and villages.

3. Streamdin – Twitter Users on Google Maps

Twitter on Google Maps

Streamd.in is a proper web-based Twitter client that can also help you find Twitter users by location (see demo). In fact, it’s a lot like the Twitter App on Bing Maps except that now the Twitter users location is plotted on Google Maps instead of Bing Maps.

You can hover your mouse over the avatars to know what they the said while they were there, when they said it, and how long ago they posted it.

SOURCE -> LABNOL