Pages

Saturday, October 1, 2011

1

Create an image link to your blog's dynamic views in Blogspot

Blogger just launched a new way to view the blogs: dynamic views. They're nice, but gadgets and custom javascript won't work there (at least for now). Why not offer your readers easily the best of both worlds? Here is how you can create in the traditional view a (graphical) link to the dynamic views.

Graphical link

Open your template design, and edit the html. Find </body> tag, and before that insert this code:

<a href='/view' style='display:scroll;position:fixed;bottom:4px;right:4px;' title='Try the new dynamic views!'><img src='http://oi53.tinypic.com/245wwmd.jpg'/></a>

This creates a link, which position is fixed to the downright corner of the window. The link itself is an image, a sticker-like Blogger icon, which I downloaded and resized from Findicons.com. You can use other image as well, just replace the img's src parameter value. Possibly it would be better, if you uploaded the icon to your own server space or Picasa web albums instead of tinypic. You can also change link position and the dynamic view style that is opened.


Text link

This one obviously needs no image. Open your template design, and edit the html. Find </body> tag, and before that insert this code:

<a href='/view/sidebar' style='display:scroll;position:fixed;bottom:4px;right:4px;background-color:rgba(192,255,192,0.6);' title='Try the new dynamic views!'>[ Dynamic views ]</a>

This creates a link, which position is fixed to the downright corner of the window. The link itself is semi-transparent text. You can change link colors, transparency and position. And you can also style the link using css, to use hover etc, if you know how to.

Only on index-type pages

If you want, you can show the link only on index-type pages (index, search), with conditional tags, like this:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a href='/view/sidebar' style='display:scroll;position:fixed;bottom:4px;right:4px;background-color:rgba(192,255,192,0.6);' title='Try the new dynamic views!'>[ Dynamic views ]</a>
</b:if>

Hope you liked this tip :)
Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: