Last year,
Blogger released new templates. In the
Contempo template, visitors wishing to access the underlying post can select the snippet title or a "read more" link under the snippet text, but, the snippet image and text are not linked to the underlying post. I wanted a means of making the snippet image and text link to the underlying post, so, after some trial and error, I made the following gadget:
<script type="text/javascript">
var d=document;
var divs;
var articles;
articles=d.getElementsByTagName('article');
for (var j=0;j<articles.length;j++){
var articleh3 = articles[j].getElementsByTagName('h3');
var articleh3a = articleh3[0].getElementsByTagName('a');
var atitle = new String(articleh3a[0].innerHTML).replace('...','');
divs=articles[j].getElementsByTagName('div');
for (var k=0;k<divs.length;k++){
if (divs[k].className=='snippet-thumbnail') {
var img = new String(divs[k].innerHTML);
divs[k].innerHTML = '<a href="' + articleh3a[0].href +'" title="' + atitle + '">' + img + '</a>';
}
if (divs[k].className=='snippet-item r-snippetized') {
var txt = new String(divs[k].innerHTML);
if (txt.indexOf("<a")>-1){
txt=txt.replace(new RegExp("<a", "gi"),"<i");
txt=txt.replace(new RegExp("<\/a", "gi"),"</i");
}
divs[k].innerHTML = '<a href="' + articleh3a[0].href +'" title="' + atitle + '">' + txt + '</a>';
}
if (divs[k].className=='container post-body entry-content') {
divs[k].className = 'container post-body entry-content snippet-overlay';
divs[k].setAttribute("onclick","location.href='" + articleh3a[0].href + "'");
}}}
</script>
The code shown above crawls through the page looking for snippets using the class name
snippet-item r-snippetized, and copying the link from the snippet title to a link that wraps around the snippet image and the contents of the snippet text. Some of my posts have embedded links which, when carried into a snippet, might interfere with the snippet image and text links, so, the code changes any embedded links in the snippet text to the italics tag (i). The code also provides a custom CSS style
snippet-overlay that can be styled when a visitor hovers over the snippet such as in the following example CSS:
.snippet-overlay {
opacity:0.85;
}
.snippet-overlay:hover {
opacity:1.0;
cursor:pointer;
}
The CSS code above will, by default, fade the snippet slightly and when a visitor hovers over a snippet, the snippet will return to an unfaded state. The CSS code would need to be added to the advanced section of the customize theme menu while the gadget would need to be added to the page layout. By the way, the image above is
Gilbert Nightray from
Pandora Hearts. Enjoy.
Last year, Blogger released new templates. In the Contempo template, visitors wishing to access the underlying post can select the snippet title or a "read more" link under the snippet text, but, the snippet image and text are not linked to the underlying post. I wanted a means of making the snippet image and text link to the underlying post, so, after some trial and error, I made the following gadget:
