How to add a scroll to top button with jQuery

This script adds ability to scroll to an absolute position (from top of page) or just a specific element on the page instead. For pages that are long winded, it’s a good idea to provide your viewers with an easy way to quickly navigate up to the top of the page. Also allows you to set it’s visibility on a readers screen: on start, in between, or when a user scrolls to the bottom.

Click here to see the demo

1. Login into your Blogger dashboard > Layouts > Edit HTML

2. Insert the following section code below into your template right after the section code: ]]></b:skin>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>

<script type="text/javascript" src="scrolltopcontrol.js">
/*********************************************
* © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
*********************************************/
</script>

Note: The above references a “scrolltopcontrol.js” file plus a sample image: which you should download below (right click, and select "Save As")

3. Next, you will need to add the section code below right before the section code: <div id='header-wrapper'>

<a href="#top"></a>

4. Preview your template and if everything works fine, Save Template.

** Tutorial completed

How to add a digital clock to your Blogger

This digital clock script attempts to mimic that cool “glow in the dark” look of a LCD watch when it comes to its interface. This clock can also display the time in standard 12-hour format, with a “AM” and “PM” indicator. Note that in non IE4+/NS6+ browsers, a regular form clock is displayed instead.

Click here to see the demo

Steps to follow:

1. Login into your Blogger dashboard > Layouts > Edit HTML

2. Insert the following section code below into your template right before the closing of head. </head>

<style>
<!--
.styling{
background-color:black;
color:lime;
font: bold 15px MS Sans Serif;
padding: 3px;
}
-->
</style>

3. Next, go to Layouts > Page Elements > and Add an HTML/JavaScript Gadget. Insert the following section code below as the HTML and after saving, move the gadget where you want the calendar to appear.

<span id="digitalclock" class="styling"></span>
<script>
<!--
var alternate=0
var standardbrowser=!document.all&&!document.getElementById

if (standardbrowser)
document.write('<form name="tick"><input type="text" name="tock" size="6"></form>')

function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById("digitalclock") : document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn="AM"

if (hours==12) dn="PM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours="0"+hours
if (minutes<=9)
minutes="0"+minutes

if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+" : "+minutes+" "+dn
else
document.tick.tock.value=hours+"   "+minutes+" "+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+"<font color='lime'>&nbsp;:&nbsp;</font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
else
clockobj.innerHTML=hours+"<font color='black'>&nbsp;:&nbsp;</font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
}
alternate=(alternate==0)? 1 : 0
setTimeout("show()",1000)
}
window.onload=show

//-->
</script>

** Tutorial completed

How to add a three column footer to your blog

From this tutorial, you will be able to add a  three column footer to your blog. Having a three column footer for your blog is not mandatory but, in having one, it can save space in your sidebar and also reduce page lag for your viewers.

To add a three column footer:

1. From your Blogger dashboard, navigate to Layouts and then Edit HTML.

2. Now search for this HTML section code:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

3. Replace this entire section code: <b:section class='footer' id='footer'/> with the one below.

<div id='footer-wrapper'> <div id='footer-column-container'> <div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'> <b:section class='footer' id='col1' preferred='yes'> <b:widget id='Text3' locked='false' title='' type='Text'/> </b:section> </div> <div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'> <b:section class='footer' id='col2' preferred='yes'> <b:widget id='Text4' locked='false' title='' type='Text'/> </b:section> </div> <div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'> <b:section class='footer' id='col3' preferred='yes'/> <b:widget id='Text5' locked='false' title='' type='Text'/> </div> <div style='clear:both;'/> <p> <hr align='center' color='#5d5d54' width='90%'/></p> <div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'> <b:section class='footer' id='col-bottom' preferred='yes'> <b:widget id='Text2' locked='false' title='' type='Text'/> </b:section> </div>

Add style with CSS:

4. Next, you will need to add the CSS section code the footer. To do this, copy and paste the following section code below right before: ]]></b:skin>

#footer-column-container { clear:both; background: #f7f7f7; } .footer-column { padding: 10px; }

Note: You can add more style to this code.

5. You should preview your blog first to see if all codes have been implemented correctly. If so, save your template and you’re finished.