How to add sliding featured widget to your blog

Blog Foundation | 2:18 AM |


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($(&#39;myGallery&#39;), {
                timed: true
            });
        }
        window.addEvent(&#39;domready&#39;,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. 

Category: , ,

About Blog Foundation:: Hello Blog World...Tashidelek! You are welcome to Blog Foundation. Blog Foundation was fonded to serve all you blogger people Actually I am a blog addicted and learner. Not perfect person indeed. Here I share whatever I have learnt. Thank you guys for visiting Blog Foundation. Thujechhe.