Archives

Making div's clickable

The original template for this site had clickable titles in the little summary boxes on the front page, but I wanted the entire content to link to the full post. Turned out, it is a bit more complicated to do this than I had hoped. This article is the one I followed, and I have simplified it for use with blogs like my own below.

1. Download jquery and jquery.biggerlink Both of these need to be saved somewhere online so you can link to them. I put them on another of my web sites so the locations are http://ilovebacteria.com/jquery-1.3.2.min.js & http://ilovebacteria.com/jquery.biggerlink.js

2. Link to these in your template (replace the yoursite.com bit with the location of your own jquery files). Before the </head> tag paste:
<script language='JavaScript' src='http://yoursite.com/jquery-1.3.2.min.js' type='text/JavaScript'/>
<script language='JavaScript' src='http://yoursite.com/jquery.biggerlink.js' type='text/JavaScript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.biglink').biggerlink();
});
</script>


3. Now you need to find the code for the summary posts on the front page and add the biglink div to surround it. For blogs based on the Prometheus template, find <b:if cond='data:blog.pageType != &quot;item&quot;'> and add <div class="biglink"> after it. Then find <span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more</a></span> and add </div> after it.

4. Finally, I wanted the pointer to change into a hand when it hovers over the link, so I added cursor:hand; after .post:hover {

0 comments:

Post a Comment