| COMPUTER TRICKS

Hide Show DIV Content with Links by using Javascript

by hardik davra

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

How to use it in Your Blog

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://howhero.com/">HowHero Tutorials</a></li><li><a href="http://widgetsforfree.blogspot.com/2008/09/translate-blog-widget-using-flags.html">Blog Translation Plugin</a></li><li><a href="http://widgetsforfree.blogspot.com/2008/09/make-money-blog-widget-performancing.html">Make Money Widget</a></li></ul>
</div>

Posted in BLOGGER TIPS | 2 Comments

Top Commentators Widget for Blogger

by hardik davra

This top commenters widget is a wonderful tool for giving back to your most loyal readers. It's a great way to inspire your constituents to keep making useful comments on your blog. The widget displays links to to the top commentatorswebsites and can easily be implemented in your blog's sidebar.

Features:

Calculates the top commentators on your blog based on the last 100 comments.
Displays the Commenter's Name with a link to their Site URL.
You may also filter your own name so that you will not appear as a top commenter.
Choose the number of commenters you wish to display. The default value is 5.
This plugin functions differently from the Recent Comments Widget.

Installing the Top Commentators Widget:

When entering your blog's URL make sure to not add the "http://". The URL should be displayed asyourblog.blogspot.com

Posted in BLOGGER TIPS | 2 Comments

Blogger Tag Cloud Widget by Categories / Labels

by hardik davra

This widget is perfect for blogspot users who desire a simple tag cloud for their Categories. The Labels Cloud can easily be implemented within the sidebar of your blog and will match your template wonderfully.

Steps for Implementation

Step 1: Back it UpAlways make sure to back up your Blogger Template before doing anything else!

Step 2: The Labels Gadget

Make sure that you have the Labels Page Element installed. If you haven't already...

Go to Layout >Page Elements .
Click "Add a Gadget" and then add the "Labels" gadget.

Step 3: Locating the "Old Code"

Now go to Layout >Edit HTML
Make sure that the "Expand Widgets Template" box is unchecked.
Now we need to search for the code that looks like this.
<b:widget id='Label1' locked='false' title='Tags' type='Label'/>
Your code may look a little different. So try using your browser's search tool to find type='Label'.

Step 4: Replacing the "Old Code" with the "New Code"

Once you've located type='Label', remove the whole line of code that looks just like the code mentioned in part 3 of step 3.

Replace this code that you've just deleted with the code below:

/*
Distributed by John Smith at WidgetsForFree.blogspot.com
*/ <b:widget id='Label1' locked='false' title='Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type='text/javascript'>
/*
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
http://www.compender.com
Released to the Public Domain
*/

//Settings / Variables
var max = 150; //max css size (in percent)
var min = 70; //min css size (in percent)
var showCount = false;  // show counts? true for yes, false for no
var minCount = 1;  // what is the minimum count for a tag to be shown? 1 for all


//Begin code:
var range = max - min;

//Build label Array
var labels = new Array();
<b:loop values='data:labels' var='label'>
labels.push(&quot;<data:label.name/>&quot;);
</b:loop>

//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
urls.push(&quot;<data:label.url/>&quot;);
</b:loop>

//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
counts.push(&quot;<data:label.count/>&quot;);
</b:loop>

//Number sort funtion (high to low)
function sortNumber(a, b)
{
return b - a;
}

//Make an independant copy of counts for sorting
var sorted = counts.slice();

//Find the largest tag count
var most = sorted.sort(sortNumber)[0];

//Begin HTML output
for (x in labels)
{
if(x != &quot;peek&quot; &amp;&amp; x != &quot;forEach&quot; &amp;&amp; counts[x] >= minCount)
{
//Calculate textSize
var textSize = min + Math.floor((counts[x]/most) * range);
//Show counts?
if(showCount)
{
var count = &quot;(&quot; + counts[x] + &quot;)&quot;;
}else{
var count = &quot;&quot;;
}
//Output
document.write(&quot;<span style='font-size:&quot; + textSize + &quot;%'><a href='&quot; + urls[x] + &quot;' style='text-decoration:none;'>&quot; + labels[x] + count + &quot;</a></span> &quot; );
}
}
</script>
<br/>
<span style="font-size:80%;float:right;">Powered by <a href="http://www.widgetsforfree.blogspot.com">Blogger Widgets</a></span>
</div>
</b:includable>
</b:widget>

Step 5: Previewing the New Tag Cloud

Before saving the template make sure to click preview. The new tag cloud should now be visible. If not, make sure that you've completed all the steps correctly.

Posted in BLOGGER TIPS | 1 Comment

Blogger Templates and WordPress Themes by ThemeForest

by hardik davra

ThemeForest offers professional blog templates and themes at affordable prices. If you can't afford to hire that expensive designer then ThemeForest is the right place for you. They offer wonderfully designed WordPress Themes andBlogger Templates which will help make your blog stand out from the rest of the crowd.

More about ThemeForest

ThemeForest has a growing collection of hundreds of nicely designed templates. The prices range from about $10 to $35. In most cases the wordpress themes are a little more expensive and nicer looking than the templates for blogger.