Here I will try to write about blogger login form widget. This widget is a widget is feasible to install your blog. If you want to log in practicality dashboard blogger, this widget should have on your blog sidebar.

You can also add a widget is a free blog on your own .... How easy is press the button below to add a blogger login form widget in your blog.

Here I will try to write about blogger login form widget. This widget is a widget is feasible to install your blog. If you want to log in practicality dashboard blogger, this widget should have on your blog sidebar.

You can also add a widget is a free blog on your own .... How easy is press the button below to add a blogger login form widget in your blog.

Please enter your username and password to Login your Blogger Dashboard!<br/><br/><form id="start-login" action="https://www.google.com/accounts/ServiceLoginBoxAuth" name="login" onsubmit="onlogin()" method="post"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"><input value="blogger" name="service" type="hidden"><input value="8" name="nui" type="hidden"><input value="8" name="naui" type="hidden"><input value="2" name="fpui" type="hidden"><input value="3" name="uilel" type="hidden"><input value="true" name="skipvpage" type="hidden"><input value="false" name="rm" type="hidden"><input value="true" name="alwf" type="hidden"><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"><input value="0" name="alinsu" type="hidden"><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"><div><label for="Email"> Username: <br/><input id="Email" tabindex="1" value="" name="Email" size="20" type="text"></label></div><div><label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"></div><br/><input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"></form><span style="font-size: 80%">Widget edited by <a href="http://defcon-blacklist.blogspot.com/2008/12/blogger-login-form-widget.html">Defcon BlackList</a></span>

So by adding this widget and use in your blog, you no longer need to log in through the door because blogger.com to go to blogger dashboard you only need to log in through your blog.

I hope, widget blogger login form is able to shorten the length of time to log in or sign in to your blogger dashboard. Because you do not have to open the view blogger log, just in your own blog. Hehe.... Hehe .... Up to you.... You also do .... All I return to you!

O yes once again do not worry this widget make loading your blog, because this widget is less than 1kb of data will be loaded ...

Let's try it, Good Luck ........!

^^Read FullPost^^

  

Many of my readers are asking help to add Related Posts Widget . I was confused because i have added all the code correctly then why my friends are not getting this hack working. So i looked the templates of all those who sent me error message . All their templates are of same structure ( labels line is appearing below post , see the screenshot below)

But the script i have included in the post is for those who have Label line below post title like this.

Bloggers with the above format are not getting this related posts hack because the script loads earlier than the Labels line. We can fix this error in Three methods.

Method One :

Login to your blogger account and navigate to Layout section of the blog. Then go to edit HTML page and check expand widgets box.

Now search this line : <div class='post-header-line-1'/>

Now please copy and paste the code above that line.

<span class='meta'>

<b:if cond='data:post.labels'>
categories :
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:post.allowComments'>
| <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'> 1 <data:top.commentLabel/> &#187;<b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> &#187;</b:if></a>

</b:if>


</span>

you can customize the text in red to display as many results you want.

Now add the below CSS code above ]]></b:skin>

.meta{float:left;width:480px;padding:3px; color:#111; font-size:12px; margin-bottom:8px; line-height:20px;border-bottom:1px dotted #cccccc;}
.meta a{color:#cc0000;}
.meta a:hover{color:#000000;}

Please edit the text in red to suit your template.

After this you need to add the CSS code and javascript i provided in this post " Related Posts Widget with custom CSS ".

Now add the script below this line <p><data:post.body/></p>

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Other Recommended Posts</h2>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>

</div></b:if>


Thats it , now you will have related posts widget in your blog.

Method 2 :

If you follow step one then you will have two meta lines in your Blog. One below post title and one below post content. If you are happy with first method then stop or else do these steps to add related posts hack. ( don't do both)

step 1 : First of all add the below code above </head>

<style>

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://i263.photobucket.com/albums/ii150/mohamedrias/newconcept_bullet.png") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

step 2 :

Now search this text

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>

Now replace the above text with this code

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/> </b:if> </b:loop>

Now scroll down still you can find ending tag for either </div> or </span> . Now paste the following script below the ending div / span tag.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Other Recommended Posts</h2>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>

</div></b:if>

That's it now you will have related Posts hack in your blog.

Third Method :

In my Blog I am using this method . It's very simple. First do the step 1 from method 2 . ( adding script above </head> ) .

Now add the following tag below <p><data:post.body/></p> .

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Other Recommended Posts on <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </h2>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>

</div></b:if>

Now you will have related posts widget of my style.

I hope one of the above method will help you to add related posts widget to your Blog.

^^Read FullPost^^

  

"Blogumus" is a Flash based tag cloud widget which uses scripts converted from Roy Tanck's WP Cumulus plugin for Wordpress. I fell in love with Roy's original Cumulus plugin when I saw it, and simply had to learn how to convert this for use in Blogger powered blogs. The result is the widget you can see in action at the top of this post. Hover your mouse over the Flash object to see the animation begin.

In this post, I'll explain how you can add Blogumus to your own Blogger layout with ease!

Update: Improved Widget Code

I have updated the code required to run this widget to activate links in the tag cloud Flash movie. If you have already installed Blogumus, please replace your widget code with the new updated code, or reference the additional lines to modify your existing installation.

How it works

This widget uses a combination of JavaScript and Flash animation to parse and display your blog labels. Once installed in your template, it should work "out of the box" without any additional tweaking required, though of course you may prefer to change the variables for color, background and size if appropriate :)

You should also be able to move the Label Cloud widget through the Page Elements page of your dashboard if you prefer display in a different layout location.

To see Blogumus in action, both Flash and Javascript must be installed and enabled for your internet browser. However, it does degrade relatively gracefully, and label links will still be clickable (though not animated) for those who do not use JavaScript of Flash (including search engine spiders).

How to install Blogumus in your Blogger layout

Installing Blogumus in your Blogger layout is surprisingly simple! You should only need to copy and paste a section of code to your Blogger template, though any tweaks for the style of display will require some manual editing.

Here are the steps required to install Blogumus in your Blogger layout:

Go to Layout>Edit HTML in your Blogger dashboard, and search for the following line (or similar):

<b:section class='sidebar' id='sidebar' preferred='yes'>

Immediatly after this line, paste the following section of code:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>


</b:if>

<div class='widget-content'>

<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>

<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>


<script type='text/javascript'>

var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);


// uncomment next line to enable transparency

//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);

so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);


so.addVariable(&quot;mode&quot;, &quot;tags&quot;);

so.addVariable(&quot;distr&quot;, &quot;true&quot;);

so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);


so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);

so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);


so.write(&quot;flashcontent&quot;);

</script>


<b:include name='quickedit'/>

</div>

</b:includable>


</b:widget>

Then preview your template. If installed correctly, you should see the tag cloud appear in your sidebar. Then you are free to save your template, edit the colors and dimensions as required, or move it to a different location.

That's all!

Customizing Blogumus

In this default installation, Blogumus includes the following preset variables:

• Width is set to 240px


• Height is set to 300px;


• Background color is white


• Test color is grey


• Font size is "12"

If you would prefer to make your widget wider, shorter, change the color scheme, etc, you will need to do this by editing various parts of the code. I'll go through these options in the order they appear in the widget code.

Editing width and height

The variables for width and height are found in this line of the script:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

The width (currently 240) is highlighted in red, while the height (300px default) is highlighted in blue. These numerical values specify the width and height in pixels, so you can alter these of you prefer.

Editing background color

You can change the background color from white to any other color by altering the hex value in the same line:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

For example, if you prefer a bright red background, you may replace #ffffff with #ff0000. Take a look at this page for a list of commonly used hex color codes.

Alter the color of text

By default, the text is set to display as dark grey ( hex value #333333). You can alter this variable in the following line:

so.addVariable("tcolor", "0x333333");

Be aware that "tcolor" is a Flash variable and doesn't include the usual hash symbol of hex color codes. Be sure to only replace the numbers!

Adjust the font size

The maximum font size of tags is specified in this line:

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

You can alter this to ensure tags are displayed in a bigger or smaller font if you prefer by changing "12" to a larger or smaller number.

While making any of these changes, you should be able to preview your widget and be certain that your new choice of color, dimensions and background are suitable for your needs.

Credits, support and requirements

Blogumus is based on the original WP Cumulus plugin by Roy Tanck, and was converted for use with Blogger layouts by myself.

Please leave the credit links in the widget code intact. These will not be seen by the majority of your blog readers (as they will only display if JavaScript and Flash is not activated) but leaving these links intact is a great way of passing some link love on to Roy for all his hard work, and to inform other Blogger users that they can find the widget codes on this site.

Support/Issues

If you have any problems installing or using this widget, please leave your comments below or direct these to the Blogger Buster forums as Roy will be unable to provide support for installation in Blogger blogs!

Requirements

For Blogumus to display properly in your template, you will need to have Flash Player 7 or higher. You can download the latest Flash Player plugin for your browser from Adobe.

I'm not sure that this installation will support special characters as tags (only Latin characters supported at present). If you do experiecce issues with labels displaying incorrectly, please let me know. I'll try to add more support, but have very little experience using Flash!

Your thoughts?

I hope that you enjoy using Blogumus in your own Blogger blogs! Please feel free to share or syndicate this page with your favorite bookmarking service if you think it is worth a mention, or subscribe to the newsfeed to learn of more great Blogger tutorials as they are posted.

^^Read FullPost^^

  


This is for New Blogger using Layouts templates only (blogspot or custom domain). Classic Templates not supported.

As with any template modifications, always make a backup before preceding!
Also, feeds for posts must be enabled in your settings (Blogger>Dashboard>Settings>Site Feed> Post Feed can either be set at Full or Short). Private blogs do not have feeds, so they are not supported.

Step #1

Go to Template>Edit HTML. Leave the Expand Widget Templates box UNCHECKED (default)

This code will replace your Archive widget. Scroll down and find yours in your template. Will look something like this.

Copy the following code, then highlight the archive widget as shown and replace it with a paste.

<b:widget
id='BlogArchive1'
locked='false' title='Blog Archive' type='BlogArchive'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<div id='ArchiveList'>

<div expr:id='data:widget.instanceId +
"_ArchiveList"'>

<b:if cond='data:style ==
"HIERARCHY"'>

<b:include data='data'
name='interval'/>

</b:if>

<b:if cond='data:style ==
"FLAT"'>

<b:include
data='data' name='flat'/>

</b:if>

<b:if cond='data:style ==
"MENU"'>

<b:include
data='data' name='menu'/>

</b:if>

</div>

</div>

<b:include name='quickedit'/>

</div>

</b:includable>

<b:includable id='toggle' var='interval'>

<!-- Toggle not needed for Calendar -->

</b:includable>

<b:includable id='flat' var='data'>

<div id='bloggerCalendarList'>

<ul>

<b:loop values='data:data'
var='i'>

<li
class='archivedate'>

<a
expr:href='data:i.url'><data:i.name/></a>
(<data:i.post-count/>)

</li>

</b:loop>

</ul>

</div>

<div id='blogger_calendar' style='display:none'>

<table id='bcalendar'><caption
id='bcaption'>

</caption>

<!-- Table Header -->

<thead id='bcHead'></thead>

<!-- Table Footer -->

<!-- Table Body -->

<tbody><tr><td id='cell1'>
</td><td id='cell2'>
</td><td id='cell3'>
</td><td id='cell4'>
</td><td id='cell5'>
</td><td id='cell6'>

</td><td id='cell7'>
</td></tr>

<tr><td id='cell8'>
</td><td id='cell9'>
</td><td id='cell10'>

</td><td id='cell11'>
</td><td id='cell12'>
</td><td id='cell13'>
</td><td id='cell14'>
</td></tr>

<tr><td id='cell15'>
</td><td id='cell16'>
</td><td id='cell17'>
</td><td id='cell18'>
</td><td id='cell19'>

</td><td id='cell20'>
</td><td id='cell21'>
</td></tr>

<tr><td id='cell22'>
</td><td id='cell23'>

</td><td id='cell24'>
</td><td id='cell25'>
</td><td id='cell26'>
</td><td id='cell27'>
</td><td id='cell28'>
</td></tr>

<tr><td id='cell29'>
</td><td id='cell30'>
</td><td id='cell31'>
</td><td id='cell32'>
</td><td id='cell33'>

</td><td id='cell34'>
</td><td id='cell35'>
</td></tr>

<tr id='lastRow'><td id='cell36'>
</td><td id='cell37'>

</td></tr>

</tbody>

</table>

<table id='bcNavigation'><tr>

<td id='bcFootPrev'></td>

<td id='bcFootAll'></td>

<td id='bcFootNext'></td>

</tr></table>

<div id='calLoadingStatus' style='display:none;
text-align:center;'>

<script
type='text/javascript'>bcLoadStatus();</script>

</div>

<div id='calendarDisplay'/>

</div>

<script type='text/javascript'>

initCal();</script>

</b:includable>

<b:includable id='posts' var='posts'>

<!-- posts not needed for Calendar -->

</b:includable>

<b:includable id='menu' var='data'>

Configure your calendar archive widget - Edit archive widget
- Flat List - Newest first - Choose any Month/Year Format

</b:includable>

<b:includable id='interval' var='intervalData'>

Configure your calendar archive widget - Edit archive widget
- Flat List - Newest first - Choose any Month/Year Format

</b:includable>

</b:widget>

At this point you may want to save the template. It should save without any errors, if not then make sure you followed the above, and copy/pasted correctly.

Now, we need to copy and paste the scripts themselves. If you have an external server, you can copy the following scripts (removing the beginning /ending script tags) and save it as a file with the .js extension, then link to it from the head section. If that doesn't make any sense to you, don't worry. Just do it this way.

Find in your template the ending ]]></b:skin> tag and the ending </head> tag. It should look something like this in your template

I've highlighted them to show them off. But you want to copy the following code, and paste it in between these two tags. Here's what you need.

<!-- Blogger Archive Calendar -->

<script type='text/javascript'>

//<![CDATA[

var bcLoadingImage = "http://phydeauxredux.googlepages.com/loading-trans.gif";

var bcLoadingMessage = " Loading....";

var bcArchiveNavText = "View Archive";

var bcArchiveNavPrev = '&#9668;';

var bcArchiveNavNext = '&#9658;';

var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"];


// Nothing to configure past this point ----------------------------------

var timeOffset;

var bcBlogID;

var calMonth;

var calDay = 1;

var calYear;

var startIndex;

var callmth;

var bcNav = new Array ();

var bcList = new Array ();


//Initialize Fill Array

var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];

function openStatus(){

document.getElementById('calLoadingStatus').style.display = 'block';

document.getElementById('calendarDisplay').innerHTML = '';

}

function closeStatus(){

document.getElementById('calLoadingStatus').style.display = 'none';

}

function bcLoadStatus(){

cls = document.getElementById('calLoadingStatus');

img = document.createElement('img');

img.src = bcLoadingImage;

img.style.verticalAlign = 'middle';

cls.appendChild(img);

txt = document.createTextNode(bcLoadingMessage);

cls.appendChild(txt);

}

function callArchive(mth,yr,nav){

// Check for Leap Years

if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {

fill[2] = '29';

}

else {

fill[2] = '28';

}

calMonth = mth;

calYear = yr;

if(mth.charAt(0) == 0){

calMonth = mth.substring(1);

}

callmth = mth;

bcNavAll = document.getElementById('bcFootAll');

bcNavPrev = document.getElementById('bcFootPrev');

bcNavNext = document.getElementById('bcFootNext');

bcSelect = document.getElementById('bcSelection');

a = document.createElement('a');

at = document.createTextNode(bcArchiveNavText);

a.href = bcNav[nav];

a.appendChild(at);

bcNavAll.innerHTML = '';

bcNavAll.appendChild(a);

bcNavPrev.innerHTML = '';

bcNavNext.innerHTML = '';

if(nav < bcNav.length -1){

a = document.createElement('a');

a.innerHTML = bcArchiveNavPrev;

bcp = parseInt(nav,10) + 1;

a.href = bcNav[bcp];

a.title = 'Previous Archive';

prevSplit = bcList[bcp].split(',');

a.onclick =
function(){bcSelect.options[bcp].selected =
true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return
false;};

bcNavPrev.appendChild(a);

}

if(nav > 0){

a = document.createElement('a');

a.innerHTML = bcArchiveNavNext;

bcn = parseInt(nav,10) - 1;

a.href = bcNav[bcn];

a.title = 'Next Archive';

nextSplit = bcList[bcn].split(',');

a.onclick =
function(){bcSelect.options[bcn].selected =
true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return
false;};

bcNavNext.appendChild(a);

}

script = document.createElement('script');

script.src =
'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';

document.getElementsByTagName('head')[0].appendChild(script);

}


function cReadArchive(root){

// Check for Leap Years

if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {

fill[2] = '29';

}

else {

fill[2] = '28';

}

closeStatus();

document.getElementById('lastRow').style.display = 'none';

calDis = document.getElementById('calendarDisplay');

var feed = root.feed;

var total = feed.openSearch$totalResults.$t;

var entries = feed.entry || [];

var fillDate = new Array();

var fillTitles = new Array();

fillTitles.length = 32;

var ul = document.createElement('ul');

ul.id = 'calendarUl';

for (var i = 0; i < feed.entry.length; ++i) {

var entry = feed.entry[i];

for (var j = 0; j < rel ="=" link =" entry.link[j].href;" title =" entry.title.$t;" author =" entry.author[0].name.$t;" date =" entry.published.$t;" summary =" entry.summary.$t;" ispublished =" date.split('T')[0].split('-')[2];" ispublished =" isPublished.substring(1);" li =" document.createElement('li');" listtype =" 'none';" innerhtml =" '<a" href="'+link+'" val1 =" parseInt(calDay," valxx =" parseInt(calMonth," val2 =" valxx" val3 =" parseInt(calYear," firstcalday =" new" val0 =" firstCalDay.getDay();" startindex =" val0" daycount =" 1;" x ="1;" cell =" document.getElementById('cell'+x);" innerhtml =" '" classname =" 'firstCell';" innerhtml =" dayCount;" classname =" 'filledCell';" p =" 0;" daycount ="=" length ="=" fillurl =" '0'+fillDate[p];" fillurl =" fillDate[p];" classname =" 'highlightCell';" innerhtml =" '<a" href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/" innerhtml =" '" classname =" 'emptyCell';" vistotal =" parseInt(startIndex)" display =" '';" display =" 'block';" bcinit =" document.getElementById('bloggerCalendarList').getElementsByTagName('a');" bccount =" document.getElementById('bloggerCalendarList').getElementsByTagName('li');" display =" 'none';" calhead =" document.getElementById('bcHead');" tr =" document.createElement('tr');" t =" 0;" th =" document.createElement('th');" abbr =" headDays[t];" scope =" 'col';" title =" headDays[t];" innerhtml =" headInitial[t];" x =" 0;" stripyear=" bcInit[x].href.split('_')[0].split('/')[3];" stripmonth =" bcInit[x].href.split('_')[1];" sel =" document.createElement('select');" id =" 'bcSelection';" onchange =" function(){var" csend =" this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};" q =" 0;" r =" 0;" seltext =" bcInit[r].innerHTML;" selcount =" bcCount[r].innerHTML.split('>" selvalue =" bcList[r];" m =" bcList[0].split(',')[0];" y =" bcList[0].split(',')[1];" feed =" root.feed;" updated =" feed.updated.$t;" id =" feed.id.$t;" bcblogid =" id.split('blog-')[1];" uplength =" updated.length;" timeoffset = "+00:00" timeoffset =" updated.substring(upLength-6,upLength);}" timeoffset =" encodeURIComponent(timeOffset);" src="'/feeds/posts/summary?max-results=" alt="json-in-script&amp;callback=">

As of May 4 2007 the scripts will autodetect your timezone settings.
Nothing here has to be changed, but there are a few things that some people may want to configure (especially non-English blogs) but for now the defaults will do. If you want to change some things (especially if you have a non-English blog) then check out the full list at the Blogger Archive Calendar Settings Page.

Now save your template. It should save without errors, if not recheck your steps above. One more thing needs to be configured in your Archive Widget. Goto the Page Elements page, find your Archive Widget, and click to edit it.

The title can be anything you want. The style MUST be Flat List as show. Options should NOT have Show Oldest Posts firsts checked. Archive Frequency MUST be Monthly. The Date Format can be anything you want. The calendar will accept whatever you decide here.


Save the widget. Then try it out. Go view your blog and if everything is correct you should have the calendar working now.


If you've made it this far, and it's working you'll note that without any style associated with it the calendar is a bit plain. But we've got some of that covered as well. Admire your work so far. Make sure it seems to function.


To style the calendar, you can add some CSS entries. I've made up a few default styles to choose from. If you are knowledgeable in CSS than you can use the base ones to come up with your own. Or you can pick from what I've already whipped up ( I may add a few more as time goes by).
All the styles I currently have are on their own page, with instructions on how to use.

^^Read FullPost^^

  

These past few weeks, many readers have requested a tutorial for tabbed sidebar navigation, including integrated widgets for recent posts, labels and archives. This customization is a useful and stylish method to organize widgets in your sidebar (or other widgetized area of your blog template): it reduces the space used in your sidebar, and offers readers easy access to the information they may need about your blog.

So in this tutorial I will explain the method I use for tabbed navigation in Blogger Buster including all the code and CSS styling so you can customize your own tabbed widget to match the theme of your blog.

About this tutorial

One of the reasons I have delayed writing this article is because of the vast differences between template styles. It is very easy to install and use tabbed sidebar navigation, but may be much more complicated to make this match the style of your own template.

For this reason, I will explain the style code I use for the tabbed widgets in Blogger Buster, along with methods you could use to change the appearance for your own blog.

If you experience problems styling the widgets to match your own template, please refer to the forum thread for this article where it is easier to offer and receive support.

Step One: Back-up Your Template!

When customizing your Blogger template, it is standard practice to back up your existing template first! This ensures you can revert back to your working template if you make a mistake. It is especially important with this customization as you may not notice such mistakes when previewing your design.

To back-up your Blogger template, go to Layout>Edit HTML and click on the "Download full template" link near the top of the page.

You will be prompted to save a copy of your blog template as an XML file to your computer. Be sure to save this to a location where you can easily find it if required.

Step Two: Adding CSS Code

For this initial step of installing tabbed sidebar navigation, we will add the relevant style code. With this in place, it will be easier to see how your tabs will work.

To add this style code, find the closing </b:skin> tag in your template's HTML code.

Just BEFORE this line, paste the following section of code:

div.domtab{

padding:0;

width:100%;


font-size:90%;

}

ul.domtabs{

float:left;

width:100%;

margin:0;


list-style:none;

padding-left: 0;

}

ul.domtabs li{

float:left;


padding:0 5px 0 0;

text-align: center;

width: 110px;

}

ul.domtabs a:link,

ul.domtabs a:visited,

ul.domtabs a:active,


ul.domtabs a:hover{

padding:.5em 1em 0;

display:block;

background:#999;

color: #333;

height:2em;


font-weight:bold;

text-decoration:none;

}

html>body ul.domtabs a:link,

html>body ul.domtabs a:visited,

html>body ul.domtabs a:active,


html>body ul.domtabs a:hover{

height:auto;

min-height:2em;

}

ul.domtabs a:hover{

background:background:#ccc;


}

div.domtab div{

clear:both;

width:auto;

color:#ddd;

padding:0 5px;


margin: 0 0 1em 0;

}

div.domtab div .sidebar-tab, div.domtab div .sidebar-tab .widget-content {

margin: 0 0 0;

padding: 0;

}


ul.domtabs li.active a:link,

ul.domtabs li.active a:visited,

ul.domtabs li.active a:active,

ul.domtabs li.active a:hover{

background:#ccc;

color: #333;

}


div.domtab div .sidebar-tab ul li {

list-style: none;

padding: 3px 0 5px 0;

}

div.domtab div .sidebar-tab ul li a {

list-style: none;


margin: 0;

padding: 0;

}

div.domtab div .sidebar-tab ul {

width: 100%;

margin: 0;


padding: 0;

}

#domtabprintview{

float:right;

padding-right:1em;

text-align:right;


}

#domtabprintview a:link,

#domtabprintview a:visited,

#domtabprintview a:active,

#domtabprintview a:hover{

color:#ccc;

}


div.domtab div a:link,

div.domtab div a:visited,

div.domtab div a:active{

color:$linkcolor;

padding:1em .5em;

font:bodyfont;

text-decoration: none;


}

div.domtab div h2 a,

div.domtab div h2 a:hover,

div.domtab div h2 a:active{

color:#cfc;

display:inline;

padding:0;


font-weight:normal;

font-size:1em;

}



body#layout #sidebar-tabs-1 .widget,

body#layout #sidebar-tabs-2 .widget,

body#layout #sidebar-tabs-3 .widget {

display: block; clear: both;


}

div.domtab div {display: block; clear: both;}

Be sure to copy all of the code inside this box before you paste this into your template.

Step Three: Add JavaScript Code to the Head Section of your Template

The tabbed navigation requires JavaScript to switch between the different widget areas. To add this functionality to your template, locate the closing </head> tag in your template, and paste the following lines of code immedietly before this line:

<!--[if gt IE 6]>

<style type="text/css">

html>body ul.domtabs a:link,

html>body ul.domtabs a:visited,

html>body ul.domtabs a:active,


html>body ul.domtabs a:hover{

height:3em;

}

</style>


<![endif]-->

<script src='http://bloggerbuster.com/scripts/domtab/domtab.js' type='text/javascript'/>

If you prefer to host the JavaScript required for this customization on your own server, feel free to download the script and alter the tags above to reflect the location on your own server.

Save your template at this point.

Step Four: Add The Required Code to your Sidebar

For this step, you will need to find the opening DIV tag for your sidebar.

In most Blogger templates, this tag will appear like this (highlighted in red):

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar-top-section' preferred='yes'>

<b:widget id='HTML3' locked='false' title='Subscribe' type='HTML'>

However, you may need to be creative! In some templates, the sidebar section is coded like these examples, or possibly something else entirely!

• <div id='sidebar>



• <div id='right-column'>
  
  

Whatever the opening DIV for your sidebar section appears like, you need to paste the following section of code immedietly after it, and before the opening <b:section> tag:

<div class='domtab'>

<ul class='domtabs'>

<li><a href='#recent'>Recent Posts</a></li>


<li><a href='#cats'>Categories</a></li>

<li><a href='#arc'>Archives</a></li>




</ul>

<div style='border: 3px solid #ccc;'>

<p><a id='recent' name='recent'> </a><b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'>

<b:widget id='Feed99' locked='false' title='' type='Feed'>

<b:includable id='main'>


<div class='widget-content'>

<ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>

<b:loop values='data:feedData.items' var='i'>

<li class='sidebar-list'>

<span class='item-title'>

<a expr:href='data:i.alternate.href'>


<data:i.title/>

</a>

</span>

<b:if cond='data:showItemDate'>

<b:if cond='data:i.str_published != ""'>

<span class='item-date'>


- <data:i.str_published/>

</span>

</b:if>

</b:if>

<b:if cond='data:showItemAuthor'>

<b:if cond='data:i.author != ""'>


<span class='item-author'>

- <data:i.author/>

</span>

</b:if>

</b:if>

</li>


</b:loop>

</ul>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>


</b:section></p>



</div>

<div style='border: 3px solid #ccc;'>

<p><a id='cats' name='cats'> </a><b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'>


<b:widget id='Label99' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<div class='widget-content'>

<ul>

<b:loop values='data:labels' var='label'>

<li class='sidebar-list'>

<b:if cond='data:blog.url == data:label.url'>


<span expr:dir='data:blog.languageDirection'>

<data:label.name/>

</span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>

<data:label.name/>


</a>

</b:if>

</li>

</b:loop>

</ul>



<b:include name='quickedit'/>


</div>

</b:includable>

</b:widget>

</b:section></p>

</div>

<div style='border: 3px solid #ccc;'>

<p><a id='what' name='arc'/>


<a id='arc' name='arc'> </a><b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'>

<b:widget id='BlogArchive99' locked='false' title='' type='BlogArchive'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>


</b:if>

<div class='widget-content'>

<div id='ArchiveList'>

<div expr:id='data:widget.instanceId + "_ArchiveList"'>

<b:if cond='data:style == "HIERARCHY"'>

<b:include data='data' name='interval'/>


</b:if>

<b:if cond='data:style == "FLAT"'>

<b:include data='data' name='flat'/>

</b:if>

<b:if cond='data:style == "MENU"'>

<b:include data='data' name='menu'/>


</b:if>

</div>

</div>

<b:include name='quickedit'/>

</div>

</b:includable>


<b:includable id='flat' var='data'>

<ul>

<b:loop values='data:data' var='i'>

<li class='archivedate'>

<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)


</li>

</b:loop>

</ul>

</b:includable>

<b:includable id='menu' var='data'>

<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>

<option value=''><data:title/></option>


<b:loop values='data:data' var='i'>

<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>

</b:loop>

</select>


</b:includable>

<b:includable id='interval' var='intervalData'>

<b:loop values='data:intervalData' var='i'>

<ul>

<li expr:class='"archivedate " + data:i.expclass'>

<b:include data='i' name='toggle'/>

<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>


<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>

<b:if cond='data:i.data'>

<b:include data='i.data' name='interval'/>

</b:if>

<b:if cond='data:i.posts'>


<b:include data='i.posts' name='posts'/>

</b:if>

</li>

</ul>

</b:loop>

</b:includable>


<b:includable id='toggle' var='interval'>

<b:if cond='data:interval.toggleId'>

<b:if cond='data:interval.expclass == "expanded"'>

<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>


<span class='zippy toggle-open'>▼ </span>

</a>

<b:else/>

<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>


<span class='zippy'>

<b:if cond='data:blog.languageDirection == "rtl"'>

◄

<b:else/>

►

</b:if>

</span>


</a>

</b:if>

</b:if>

</b:includable>

<b:includable id='posts' var='posts'>

<ul class='posts'>

<b:loop values='data:posts' var='i'>


<li><a expr:href='data:i.url'><data:i.title/></a></li>

</b:loop>

</ul>

</b:includable>

</b:widget>


</b:section></p>

</div>



</div>

Again, be sure to copy all of the code in the scrolling box above before pasting this into your template.

To help anyone who has experienced the "Your template could not be parsed" error when trying to copy and paste this code, I have copied all the above to a text file which you can download here.

• Code for tabbed widget in sidebar (TXT file)

I hope this will help solve these problems for you!

Now, preview your template. If you have made any errors when copying and pasting the code, you will be unable to preview your template. In this case, click on the "Clear edits" button near the bottom of the page and begin again, ensuring you have copied all of the code from the box above. Be sure you paste your code between the opening DIV tag for your sidebar and the opening b:section tag.

If your installation is successful, you will see a tabbed section above your regular sidebar widgets. As you are previewing your template, the initial section will be blank. This is the Feed widget where we can add the URL for your blog feed to display these recent posts. In this instance, save your template so we can add the recent posts and perhaps change some style elements for your tabbed widget area.

Step Five: Add the Feed URL for Recent Posts

Once you have successfully installed the tabbed navigation code and saved your template, it's time to add the URL to your blog feed. This will enable you to display recent posts in the first tabbed section.

Go to Layout>Page Elements in your Blogger dashboard and look out for the new widget section which should appear like this:

Click on the "Edit" link, and add the URL to your blog feed in the pop-up window:

Choose how many items to display, and then click save. This will add your recent posts to your tabbed sidebar navigation widget.

Note: It is not possible to drag and drop the Feed, Label or Archive elements for your tabbed widget on the Page Elements page. These elements appear stacked on top of each other, and cannot be moved separately; this is also why the Feed widget looks different to other page elements on this page.

At the moment, this is a bug of the tabbed widget. Despite many attempts, I have been unable to prevent these widgets from stacking on top of one another, and it is impossible to edit the Archive and Label widgets on this page. If anyone can figure out a solution, I would be very glad to hear from you!

Step Six: Customizing the Appearance of your Tabbed Widgets

Depending on the template you are using, this may be the most complicated step of installation!

The default style code I have offered in this tutorial will be suitable for pale templates with a wide sidebar. If you have a narrow sidebar or different color scheme, you will almost certainly need to change some elements of the style!

Here are the most prominent style issues, and what you can do to resolve them:

The tabs appear on top of each other

This will happen if the combined width of your tabs is wider than the width of the sidebar area.

To alter this, you will need to change the width for the tabs. Here is the section of code you need to change:

ul.domtabs li{

float:left;

padding:0 5px 0 0;

text-align: center;

width: 110px;

}

Reduce the width to a smaller pixel value. For example, if your sidebar is 200px wide, change the tab width to 60px. Then the combined width of the three tabs will equal 180px and allow for space between them.

Changing the color of borders and tabs

In the code for this tutorial, I have used two shades of grey for the border and tab colors:

• #ccc is the paler grey
  

• #999 is the slightly darker shade
  

Using your browser's search function, you can locate all instances of these colors in the style section of your template and replace these with the hex values for your preferred colors instead.

Over to you!

As I mentioned at the beginning of this tutorial, different template designs may require different methods for customizing the appearance of your tabbed widgets. To offer support, I have created a thread in the Blogger Buster forums specifically for help with this tutorial.

If you need help customizing your widget, please post your questions there with some details of the template you are using or a link to your blog. It's much easier for me to post code on the forums than in comments, and also provides a means for others to locate solutions of they are using a similar template style.

I hope this tutorial has provided a good explanation of how to install tabbed navigation in your Blogger template! Please feel free to leave your comments and opinions about this tutorial, or if you have suggestions for how this may be enhanced.

^^Read FullPost^^