Featured Content Widget Blogger

Now i'd like to disscuss about How To Create A Featured Content On Blogger?. Featured Content stands for posts that are normally added on top side of the main (post) column in purpose to show what contents are featured on the site. They're generally shown up with pictures and a description below its posts. This may be such an interesting feature to some bloggers, but not me. To me, it's much more better that we make another way, a simplier way, to show a featured content on our site. Maybe by making use of an element like < div>, maybe. Isn't it much more better than?, It doesn't take too many codes but shows the same look with Featured Content. - Unless the Featured Content will update itself automatically, then you have a reason to implement Featured Content On your site. But so far i know there is not yet such a Featured Content to make. - But whatever guys, you know you're the man...

Here We Go

This Featured Content Widget is making use of JQery to support the process.

1. Login to your blogger.
2. Go to the Design Page.
3. Edit HTML.
4. Find the tag < /head> in your template and place the following script above it.

< script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'>< /script> < script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js'>< /script> < script> $(document).ready(function() {$('#featured > ul').tabs ({fx:{opacity: 'toggle'}}).tabs('rotate', 5000, true);}); < /script>

5. Find the tag ]]>< /b:skin> in your template and place the following code above it.

#featured {width:500px; padding-right:200px; position:relative; height:200px; background:#fff; border:5px solid #ccc;} #featured ul .ui-tabs-nav {position:absolute; top:0; left:500px; list-style:none; padding:0; margin:0; width:200px;} #featured ul .ui-tabs-nav li {padding-left:15px; font-size:12px; color:#333;} #featured ul .ui-tabs-nav li span {font-size:12px; font-family:Verdana; line-height:20px;} #featured .ui-tabs-panel {width:500px; height:200px; background:#ccc; position:relative; overflow:hidden;} #featured .ui-tabs-hide {display:none;} #featured li .ui-tabs-nav-item a { /* On Hover Style */ display:block; height:50px; color:#333; background:#fff; line-height:20px; outline:none;} #featured li .ui-tabs-nav-item a:hover {background:#eee;} #featured li .ui-tabs-selected { /* Selected tab style */ background:url('images/selected-item.gif') top left no-repeat;} #featured ul .ui-tabs-nav li.ui-tabs-selected a {background:#ccc;} #featured ul .ui-tabs-nav li img {float:left; margin:5px; background:#fff; padding:5px; border:1px solid #eee;} #featured .ui-tabs-panel .info {position:absolute; top:150px; left:0; height:50px; width: 500px; background:url('images/transparent-bg.png');} #featured .info h2{ font-size:17px; font-family:Georgia, serif; color:#fff; padding:5px; margin:0; overflow:hidden;} #featured .info p {margin:0 5px; font-family:Verdana; font-size:12px; line-height:20px; color:#eee;} #featured .info a {text-decoration:none; color:#fff;} #featured .info a:hover {text-decoration:underline;}

6. Last step, go to your Design Page and add a new "Html/Javascript" widget to your blog (Normally above the main page (post column), then put the following code in the box. Or if you would, you can even put the following code straight to your template instead of utilizing the Hmtl Widget. But maybe you should think twice to put it directly since it'll take a quite large space.

< div id="featured"> < ul class="ui-tabs-nav"> < li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"> < a href="Place Your Post Url Here"> < img src="Place Your Image Url Here" alt=""/> < span>Your Tittle Here< /span>< /a>< /li> < li class="ui-tabs-nav-item" id="nav-fragment-2"> < a href="Place Your Post Url Here"> < img src="Place Your Image Url Here" alt=""/> < span>Your Tittle Here< /span>< /a>< /li> < li class="ui-tabs-nav-item" id="nav-fragment-3"> < a href="Place Your Post Url Here"> < img src="Place Your Image Url Here" alt=""/> < span>Your Tittle Here< /span>< /a>< /li> < li class="ui-tabs-nav- item" id="nav-fragment-4"> < a href="Place Your Post Url Here"> < img src="Place Your Image Url Here" alt=""/> < span>Your Tittle Here< /span>< /a>< /li> < /ul> < ! - - F i r s t C o n t e n t - - > < div id="fragment-1" class="ui-tabs-panel" style=""> < img src="Place Your Image Url Here" alt=""/> < div class="info"> < h2>< a href="Place Your Post Url Here">Your Tittle Here< /a>< /h2> < p>Place Your Description Here < a href="Place The Post Url Here">Read more< /a>< /p> < /div>< /div> < div id="fragment-2" class="ui-tabs-panel" style=""> < img src="Place Your Image Url Here" alt=""/> < div class="info"> < h2>< a href="Place Your Post Url Here">Your Tittle Here< /a>< /h2> < p>Place Your Description Here < a href="Place The Post Url Here">Read more< /a>< /p> < /div>< /div> < ! - - Third Content - - > < div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> < img src="Place Your Image Url Here" alt=""/> < div class="info"> < h2>< a href="Place Your Post Url Here">Your Tittle Here< /a>< /h2> < p>Place Your Description Here < a href="Place The Post Url Here">Read more< /a>< /p> < /div>< /div> < ! - - Fourth Content - - > < div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> < img src="Place Your Image Url Here" alt=""/> < div class="info"> < h2>< a href="Place Your Post Url Here">Your Tittle Here< /a>< /h2> < p>Place Your Description Here < a href="Place The Post Url Here">Read more< /a>< /p> < /div>< /div>< /div>

You're Done.