A "SHOULD" be codes on a Photo Blog

The following two codes will be useful for those who have photography blog, or just a simple blog with lots of images on its posts. Upon doing it with my friend,

LIVE DEMO

Well here are the two codes:

1. Page Navigation using the left and right arrow keys. 

• Isn't it great to navigate using arrow keys?

Implementation:

Go to Template>Edit HTML in your Blogger dashboard and  tick the Expand widget templates box near the top of the page. Then find this codes:

<div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

 Then replace the above code with the code below:

<div class='blog-pager' id='blog-pager'>    <b:if cond='data:newerPageUrl'>      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='newer'><data:newerPageTitle/></a>
      </span>    </b:if>    <b:if cond='data:olderPageUrl'>      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='older'><data:olderPageTitle/></a>
      </span>    </b:if>

 Lastly find </body>  then paste this code above  the </body> tag:

<script type='text/javascript'>
window.onload = function()
{
document.onkeyup = function(event)
{
var kGo = (!event) ? window.event : event;
switch(kGo.keyCode)
{
case 37:
window.location.href = document.getElementById(&#39;newer&#39;).href;
break;
case 39:
window.location.href = document.getElementById(&#39;older&#39;).href;
break;
}
};
};
</script>

Preview it, if it's fine then save it.

Tips: You can add another keyboard events/shortcuts just use different id to the link then another key of course. Click here the list of the keyborad events.

case <KEYCODE HERE>:
window.location.href = document.getElementById(&#39;<ID HERE>&#39;).href;
break;

You can use the above code to add another shortcuts.

  SOURCE 

2. Lazy Load 

The concept is quite simple. Lazy loading is a nifty way to load images in a long web page. In this method the images that are on demand are loaded first. So when the user scrolls through the web page, the images are loaded one after the other. The plugin ensures that only the images that are in the viewpoint of the reader are loaded first and the other images are left untouched.

Implementation:

Find </body> tag then above this tag paste the code below:

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
  <script charset='utf-8' src='http://stylifyyourblog1.googlecode.com/svn/trunk/lazyload.js' type='text/javascript'/>
  <script charset='utf-8' type='text/javascript'>
      $(function() {
          $(&quot;img&quot;).lazyload({placeholder :
&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlV1Ri-CoPkapjKb66JPWMXCdAZDiYs0mzljc2UGIO7cfKfFOgG1GMblvLV3BldzMrin7bqkzFmvlq9-TxaLn5Ot-NIv_BQMCqQyDGxNSgdEVXUCcBkYU3e8AJ0-v-fIp0NOoRHXkPDfr/s1600/greys.gif&quot;});
      });
  </script>
   <script src='https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js' type='text/javascript'/>

That's it. Save it! Credits goes to the hosts of the code.

Last words...

It will be useful for a photoblog to implement this because it lessen the load time and make your blog more fun to "use" and easy to navigate.