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.
0 comments:
Post a Comment