Gagan of the 84Productions  had asked me how to add the ajax sliding menu or the featured content on my hompage. So I would share the hack and tutorial on how to create one. This menu helps you to get an attention to your readers. As I'm using blogger, so I will tell you how to create it on blogger.

First, Download the required files at JonDesign. Download the zip files. Extract it. Then, find the following files:
1. mootools.v1.11.js
2. jd.gallery.js
3.jd.gallery.css

After that upload the files at somewhere else (make sure it is a direct link to make it work e.g Google Pages

To create one you first need to go to LAYOUT tab and pick the EDIT HTML menu. Then, you will need to find the ]]></b:skin> tag. 

Then, add the following codes (You can edit the width and height depending on your sidebar)

 #myGallery{
width: 200px !important;
height: 100px !important;
overflow: hidden;
} 


Then, ADD the following codes before </head> tag.

<script src=’REPLACE WITH YOUR OWN URL/mootools.v1.11.js’ type=’text/javascript’/>
<script src=’REPLACE WITH YOUR OWN URL/jd.gallery.js’ type=’text/javascript’/>
<link href=’REPLACE WITH YOUR OWN URL/jd.gallery.css’ media=’screen’ rel=’stylesheet’ type=’text/css’/>

Then add the codes before </body> tags

<script type=’text/javascript’>
function startGallery() {
var myGallery = new gallery($(’myGallery’), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent(’domready’, startGallery);
</script>

Then, go to Layout and click add gadgets. Pick HTML/JAVASCRIPT and put following codes

<div id=”myGallery”>

<div class=”imageElement”>
<a class=”open” href=”POST LINK”/>
<img src=”IMAGE LINK” class=”full”/> <h3>TITLE</h3>
<p>DESCRIPTION </p>
</a>
</div>

</div>

To add more pictures simply copy the codes in blue and put it between the <div id=”myGallery”> tags and </div> tags- EXAMPLE:

<div id=”myGallery”>

<div class=”imageElement”>
<a class=”open” href=”POST LINK”/>
<img src=”IMAGE LINK” class=”full”/> <h3>TITLE</h3>
<p>DESCRIPTION </p>
</a>
</div>






<div class=”imageElement”>
<a class=”open” href=”POST LINK”/>
<img src=”IMAGE LINK” class=”full”/> <h3>TITLE</h3>
<p>DESCRIPTION </p>
</a>
</div>

</div>

So, if you have any question, please do ask me!

Share This Post Stay updated and get latest news and tips or tutorials on technology by subscribing to our feed or you can always get it be delivered to your mail inbox.