Gallery with sliding featured content in Blogger

advertisements

Anyone familiar with Revolution Wordpress themes would know about the sliding featured content section in the home page . If not , have a look at the following screen shots .

Blog administrator can set random posts as featured content so that the user can access them easily. Apart from the user navigation , it makes the blog looking good with sliding graphics. This feature is still not available in many of the converted Revolution Blogger templates .
             The sliding menu uses two JavaScripts which are available at jondesign.net . We have to incorporate these JavaScripts with necessary CSS codes to accomplish sliding featured content in Blogger .

1 .Copy the following JavaScript code just before </head> of your Blogger template . Gallery JavaScripts from  jondesign.net were uploaded to my Google pages account and linked with the script .

<script src="http://coloriteman.googlepages.com/mootoolsv111.js" type="text/javascript"/>
<script src="http://coloriteman.googlepages.com/jdgallery.js" type="text/javascript"/>

2. Now we have to add a CSS code for formatting the  Sliding Gallery with featured content .
Copy the following code and insert it before </style>(in Blogger ]]></b:skin>) tag of your template .
Download the CSS code .

3 . Next we have to decide the number of posts to be appeared  in the content Gallery , along with the design of sliding Gallery elements(photos) description and targeting links .
A maximum of 5 pics(450px *150px or reasonable) would be enough as otherwise leads to slower page loading .
After preparation  , we have  to build a similar Blogger widget as shown below . It depends on the number of sideshow elements , image URL, targeting URL ,  featured content header text etc . Here in this example , there's only two featured gallery elements used .

<div id="myGallery">

      <div class="imageElement">

            <h3>Give your featured content header here</h3>



            <p>Give your small featured content description</p>

            <a href="Targeting URL" class="open" title="Click here to read full story"></a>

            <img src="Sideshow picture element uploaded URL" class="full"/>



            <img src="Sideshow picture element uploaded URL" class="thumbnail"/>

     </div>

     <div class="imageElement">

            <h3>Blogger Templates</h3>

            <p>Get Blogger templates for free here!</p>



            <a href="http://www.techknowl.com" class="open" title="Click here to read full story"></a>

            <img
src="http://lh5.ggpht.com/_pt7i0nbIOCY/SSoUU8cXExI/AAAAAAAAAcc/W37l9b00JNQ/blogger-templates_thumb%5B2%5D.png?imgmax=800"
class="full"/>



            <img
src="http://lh5.ggpht.com/_pt7i0nbIOCY/SSoUU8cXExI/AAAAAAAAAcc/W37l9b00JNQ/blogger-templates_thumb%5B2%5D.png?imgmax=800"
class="thumbnail"/>

     </div>

        <script type="text/javascript">

function startGallery() {

var myGallery = new gallery($('myGallery'), {

timed: true

});

}

window.addEvent('domready', startGallery);

</script>

        </div>

</div>

The portion starting with <div class="imageElement"> and ending with </div> is a single slide element .You can extend the number sliding pictures by adding more <div class="imageElement">.... </div>  elements . In the first case , I have given the positions where the images , links , descriptions etc. to be added . The second( <div class="imageElement"> case gives an example . That is , Blogger templates stands and the header and get Blogger templates as description . You have upload your own images and replace the sideshow picture elements . At the end there is JavaScript for gallery call timing, which doesn't need any change .You can download the above code here and make necessary changes adapting your template .

Download

After successful creation of widget code, From the Layout &gt;select add Gadget &gt;Add HTML or JavaScript and paste the contents .Now drag the widget to the top of your blog post to make it visible over there .

A working example for a gallery with sliding featured content in Blogger given here

Any problem in Installation ?? Ask them in the comment section .