How to add sliding featured widget to your blog
Now a days sliding featured content is so popular. Because it gives nice look to blog and it makes easy to find posts on blog. So I was trying to find this for my blog finally I found it and now enjoying this feature.
So I wanna share this useful tips to you all blogger friends. Come on and follow few steps I have shown below:
1. First of all Sign in your Blogger and then Design and then edit "Html"
2. 'Expand Widget Templates'
3. Ctrl+F for search and find
</head>
4. Then paste following codes just before it.
<style>
#myGallery, #myGallerySet, #flickrGallery {
width: 600px;
height: 200px;
margin: 5px;
z-index:5;
border: 1px solid #000;
}
.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 61px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
</style>
<!-- begin gallery scripts -->
<link charset='utf-8' href='http://sites.google.com/site/everythingaboutblogging/featured/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/everythingaboutblogging/featured/mootools.v1.11.js' type='text/javascript'/>
<script src='http://sites.google.com/site/everythingaboutblogging/featured/jd.gallery.js' type='text/javascript'/>
<!-- end gallery scripts -->
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready',startGallery);
</script>
5. Now search for this code:
<div id='main-wrapper'>
6. Paste following codes just below this code:
<div id='featured'>
<div id='myGallery'>
<div class='imageElement'>
<h2>YOUR TITLE</h2>
<p>SHORT DESCRIPTION OF YOUR POST...</p>
<a class='open' href='LINK OF YOUR POST' title='Read More'/>
<img class='full' src='LINK OF YOUR POST PHOTO'/>
<img class='thumbnail' src='LINK OF YOUR POST PHOTO'/>
</div>
<div class='imageElement'>
<h2>YOUR TITLE</h2>
<p>SHORT DESCRIPTION OF YOUR POST...</p>
<a class='open' href='LINK OF YOUR POST' title='Read More'/>
<img class='full' src='LINK OF YOUR POST PHOTO'/>
<img class='thumbnail' src='LINK OF YOUR POST PHOTO'/>
</div>
<div class='imageElement'>
<h2>YOUR TITLE</h2>
<p>SHORT DESCRIPTION OF YOUR POST...</p>
<a class='open' href='LINK OF YOUR POST' title='Read More'/>
<img class='full' src='LINK OF YOUR POST PHOTO'/>
<img class='thumbnail' src='LINK OF YOUR POST PHOTO'/>
</div>
<div class='imageElement'>
<h2>YOUR TITLE</h2>
<p>SHORT DESCRIPTION OF YOUR POST...</p>
<a class='open' href='LINK OF YOUR POST' title='Read More'/>
<img class='full' src='LINK OF YOUR POST PHOTO'/>
<img class='thumbnail' src='LINK OF YOUR POST PHOTO'/>
</div>
</div>
</div>
7. Preview it. If it is working then 'Save Template'. Ok enjoy the featured content on your blog. I hope you will do it for your blog.
