featured content gallery slider jquery blogger

HOW TO ADD FEATURED CONTENT GALLERY IN BLOGGER
if you want to use a jquery slider for your featured post,you are at right point,this jquery slider for your post title is very nice,its appearance is highly delicious,you can broadcast your newest articles in the head.

Installation of this jquery slider is very easy,we’ll use it for blogger with three steps.but you must  make a decision for using,maybe this demo works for your decision
DEMO
if you liked it decided to use for your featured content please follow the instructions are given…
Here we go!
We’ll operate on your HTML tags,so back up your full template first(!)
1. Find this code line <div id=’main-wrapper’> and paste this HTML code after/below
</p> <div> <ul> <li><a href="http://www.brotherblogger.com/#fragment-1"><img src="http://www.brotherblogger.com/images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li> <li><a href="http://www.brotherblogger.com/#fragment-2"><img src="http://www.brotherblogger.com/images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li> <li><a href="http://www.brotherblogger.com/#fragment-3"><img src="http://www.brotherblogger.com/images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li> <li><a href="http://www.brotherblogger.com/#fragment-4"><img src="http://www.brotherblogger.com/images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li> </ul> <p><!-- First Content --> </p> <div><img src="http://www.brotherblogger.com/images/image1.jpg" alt="" /> </p> <div> <h2><a href="http://www.brotherblogger.com/#">15+ Excellent High Speed Photographs</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam….<a href="http://www.brotherblogger.com/#">read more</a></p> </div> </div> <p><!-- Second Content --> </p> <div><img src="http://www.brotherblogger.com/images/image2.jpg" alt="" /> </p> <div> <h2><a href="http://www.brotherblogger.com/#">20 Beautiful Long Exposure Photographs</a></h2> <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit….<a href="http://www.brotherblogger.com/#">read more</a></p> </div> </div> <p><!-- Third Content --> </p> <div><img src="http://www.brotherblogger.com/images/image3.jpg" alt="" /> </p> <div> <h2><a href="http://www.brotherblogger.com/#">35 Amazing Logo Designs</a></h2> <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare….<a href="http://www.brotherblogger.com/#">read more</a></p> </div> </div> <p><!-- Fourth Content --> </p> <div><img src="http://www.brotherblogger.com/images/image4.jpg" alt="" /> </p> <div> <h2><a href="http://www.brotherblogger.com/#">Create a Vintage Photograph in Photoshop</a></h2> <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales….<a href="http://www.brotherblogger.com/#">read more</a></p> </div> </div> </div> <p>

2. Find this tag now ]]></b:skin> paste these CSS codes before/above it

#featured{<br /> width:400px;<br /> padding-right:250px;<br /> position:relative;<br /> height:250px;<br /> background:#fff;<br /> border:5px solid #ccc;<br /> }<br /> #featured ul.ui-tabs-nav{<br /> position:absolute;<br /> top:0; left:400px;<br /> list-style:none;<br /> padding:0; margin:0;<br /> width:250px;<br /> }<br /> #featured ul.ui-tabs-nav li{<br /> padding:1px 0; padding-left:13px;<br /> font-size:12px;<br /> color:#666;<br /> }<br /> #featured ul.ui-tabs-nav li span{<br /> font-size:11px; font-family:Verdana;<br /> line-height:18px;<br /> }<br /> #featured .ui-tabs-panel{<br /> width:400px; height:250px;<br /> background:#999; position:relative;<br /> overflow:hidden;<br /> }<br /> #featured .ui-tabs-hide{<br /> display:none;<br /> }<br /> #featured li.ui-tabs-nav-item a{/*On Hover Style*/<br /> display:block;<br /> height:60px;<br /> color:#333; background:#fff;<br /> line-height:20px;<br /> outline:none;<br /> }<br /> #featured li.ui-tabs-nav-item a:hover{<br /> background:#f2f2f2;<br /> }<br /> #featured li.ui-tabs-selected{ /*Selected tab style*/<br /> background:url(‘images/selected-item.gif’) top left no-repeat;<br /> }<br /> #featured ul.ui-tabs-nav li.ui-tabs-selected a{<br /> background:#ccc;<br /> }<br /> #featured ul.ui-tabs-nav li img{<br /> float:left; margin:2px 5px;<br /> background:#fff;<br /> padding:2px;<br /> border:1px solid #eee;<br /> }<br /> #featured .ui-tabs-panel .info{<br /> position:absolute;<br /> top:180px; left:0;<br /> height:70px; width: 400px;<br /> background: url(‘images/transparent-bg.png’);<br /> }<br /> #featured .info h2{<br /> font-size:18px; font-family:Georgia, serif;<br /> color:#fff; padding:5px; margin:0;<br /> overflow:hidden;<br /> }<br /> #featured .info p{<br /> margin:0 5px;<br /> font-family:Verdana; font-size:11px;<br /> line-height:15px; color:#f0f0f0;<br /> }<br /> #featured .info a{<br /> text-decoration:none;<br /> color:#fff;<br /> }<br /> #featured .info a:hover{<br /> text-decoration:underline;<br /> }</p> <p>

3. Find this tag now </head> paste these javacodes before/above it

</p> <p>

Save your template now and click on publish and view post to see result…But our job has not finished yet,we must customize this slider according to our content

Your image sizes and links:
Small ones 50 x 50 ideal
Large ones 400 x 250 ideal
Description for small images 41 letters ideal
Description for link on large images 21 characters ideal
Description before “read more” link 80 characters ideal