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> <imgsrc="http://lh5.ggpht.com/_pt7i0nbIOCY/SSoUU8cXExI/AAAAAAAAAcc/W37l9b00JNQ/blogger-templates_thumb%5B2%5D.png?imgmax=800"class="full"/>
<imgsrc="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 .
After successful creation of widget code, From the Layout >select add Gadget >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 is given here( Link removed :updated ) .
Any problem in Installation ?? Ask them in the comment section .
Tags: blogger widget
Everytime my blog loaded the picture messed up on my post after some time it get okay… this may reduce my readership in blog i guess. kindly give some solutions…….pls
I like this text: "How do you speed up the loading time of the script? It shows all my images in a stack that makes things look messy before the whole thing loads. but once it loads it works perfectly…" is very interesting!
oh, the example blog doesn't has any content
This is the first time I am visiting your site. It’s cool. Also, I love your template. Its neat.