Template For Blog | Blogger Templates | Wordpress Themes: Featured

This is a free service and it is provided by http://www.onlineleaf.com/ Their standby engine is deliver a fully functional and simple way to help your website run requiring less energy to generate. It hides heavy animations, covers the window in dark colors (as these, in many cases are less energy consuming) and pauses heavily running background processes.

When your visitors are inactive, this engine launch a standby screen, with the text "Energy saving mode".

Don't click on "Expand Widget Templates". Scroll down to where you see the </head> tag of your template. Now copy below code and paste it just before the </head> tag.


<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

This standby engine uses the jQuery Javascript library, so if you are using other Javascript libraries or code, add below code instead of above code :


<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/><script>jQuery.noConflict();</script>

Time of inactivity

Also you can easily define how long time your visitors have to be inactive, for the engine to launch the standby screen, by adding ?time=X where X should be replaced with the number of seconds you would like to define the time interval. An example could be:


<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=120"></script>

... which will set the time of inactivity to 2 minutes (120 seconds).

This can be configured to display in any of the supported languages, if you add ?lang=code, where code is one of the language short codes below.

Supported languages


ak - Akan

da - Danish

de - German

en - English

es - Spanish

fr - French

fi - Filipino

gr - Greek hr - Croatian

id - Indonesian

jp - Japanese

it - Italian

nl - Dutch

pl - Polish

pt - Portuguese

bpt - Brazilian Portuguese ro - Romanian

sl - Slovenian

se - Swedish

sk - Slovak

sw - Swahili

tr - Turkish

vi - Vietnamese

The following example will be using Spanish for the standby screen.


<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?lang=es"></script>

If you are using WordPress, just download their plugin here, activate it and everything should work instantly.

How to add great featured jQuery content slider to your blogger blog or other website ? Read the instruction given below to add this featured content slider to your blog with in few minutes. Remember to use 307px width and 254px height images for this slider. I recommend to DOWNLOAD java script files and host it yourself.

1. Login to your blogger dashboard--> Design - -> Edit HTML.

2. Scroll down to where you see </head> tag .

3. Copy below code and paste it just before the </head> tag .


<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>

<script type="text/javascript">
jQuery(document).ready(function() {
          jQuery('#mycarousel').jcarousel({
          wrap:"both",
          scroll:2,
          animation:"slow"
  });
          function mycarousel_initCallback(carousel) {
          jQuery('#featured-next-button').bind('click', function() {
                  carousel.next();
                  return false;
          });

          jQuery('#featured-prev-button').bind('click', function() {
                  carousel.prev();
                  return false;
          });
          jQuery('.button-nav span').bind('click', function() {
                  carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
                  return false;
          });
  };
          jQuery('#feature-carousel').jcarousel({
          wrap:"both",
          scroll:1,
          auto:10,
          initCallback: mycarousel_initCallback,
          buttonNextHTML: null,
          buttonPrevHTML: null
  });

});
</script>

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}

.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}

.jcarousel-skin-tango .jcarousel-clip-horizontal {width:  941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}

.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimx1d1eRqAHszgB5PmxHUkfE7_aWLhTYd9TuERayRfFbyj-vmsqX8OHv6TcHrNY_xQ6G_nD1JZBZAAcu0tcjTmCiZ0CXYGIDsMl2suQ_uGyHiDFLQ4Qd_oTgUyLLTxGe4G2HxYuOqXZ_-r/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimx1d1eRqAHszgB5PmxHUkfE7_aWLhTYd9TuERayRfFbyj-vmsqX8OHv6TcHrNY_xQ6G_nD1JZBZAAcu0tcjTmCiZ0CXYGIDsMl2suQ_uGyHiDFLQ4Qd_oTgUyLLTxGe4G2HxYuOqXZ_-r/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}

#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

4. Now save your template.

5. Go to Layout --> Page Elements.

6. Click on 'Add a Gadget'.

7. Select 'HTML/Javascript' and add the code given below:


<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='SLIDE-1-LINK-HERE'><img src='SLIDE-1-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-2-LINK-HERE'><img src='SLIDE-2-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-3-LINK-HERE'><img src='SLIDE-3-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-4-LINK-HERE'><img src='SLIDE-4-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-5-LINK-HERE'><img src='SLIDE-5-IMAGE-ADDRESS-HERE'/></a></li>
</ul>
</div>

Replace,
SLIDE-X-LINK-HERE with your real featured posts links.
SLIDE-X-IMAGE-ADDRESS-HERE with your real slide images addresses.

You are done.