How to add a clickable block in blogger templates

1. Log in to your dashboard--> layout- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find </head>.Right before it paste the next code:

<script type="text/javascript" src="http://descarca.googlecode.com/files/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
         
 $(".pane-list li").click(function(){
     window.location=$(this).find("a").attr("href");return false;
 });

}); //close doc ready
</script>

4. Now find ]]></b:skin> and before it add the following code:

<style type="text/css">
body {
 margin: 10px auto;
 width: 470px;
}
a {
 color: #333300;
 text-decoration: none;
}
a:visited {
 color: #333300;
}
a:hover {
 color: #333300;
 text-decoration: underline;
}
h3 {
 margin: 0;
 padding: 0 0 .3em;
}
p {
 margin: 0;
 padding: 0 0 .5em;
}
.pane-list {
 margin: 0;
 padding: 0;
 list-style: none;
}
.pane-list li {
 background: #ecfad7;
 padding: 10px 20px 10px;
 border-top: solid 1px #c4df9b;
 cursor: pointer;
}
.pane-list li:hover {
 background: #f6ffe9;
}
</style>

5. Now go to Layout-->Page Element and click on "Add a gadget". Select "html/java script" and add the code given below and click save.

<ul class="pane-list">
 <li>
  <h3><a href="http://www.artistutorials.co.cc">Artisteer Tutorials</a></h3>
  <p>Artisteer tutorials, tips&tricks</p>
 </li>
 <li>
  <h3>WebloDesign</h3>
  <p>Featuring the best <a href="http://www.weblodesign.co.cc">Templates for blogger</a></p>
 </li>
 <li>
  <h3>Design Studio</h3>
  <p><a href="http://www.artistutorials.co.cc">Blog</a> and design portfolio </p>
 </li>
</ul>

Change the dummy text with your own.

DEMO