.

Auto Sliding Featured Post Widget for Blogger

Last time we introduced JQuery featured post widget for blogger. But it got some problems like overlapping the posts and code errors. But now, unlike previous widget, here I'm with new finely working featured post widget for Blogger blogs.


This featured post widget is more advanced in comparison to previous one. Take a look at the working demo of this featured post widget at first.

Demo

If you like it here is how to add it in your Blogger blog.

Step 1:
Go to Blogger > Dashboard > Edit HTML.

Step 2:
Find (Ctrl + F) the tag <body>  and just below paste the following code:

<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/smoothscroll.js' type='text/javascript'/>
<link href='http://www.digitalbunch.com/wp-content/uploads/2011/07/smooth-slider-hacktutors.css' id='smooth_slider_css-css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/hacktutorsscript.js' type='text/javascript'/>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/jquery-hacktutors.js' type='text/javascript'/>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/slide1.js' type='text/javascript'/>
<style media='screen' type='text/css'>
#smooth_sldr {
width:560px;
height:180px;
background-color:#ffffff;
border:0px solid #999999;
}
#smooth_sldr_items {
padding:10px 18px 0px 26px;
}
#smooth_sliderc {
width:516px;
height:140px;
}
.smooth_slideri {
width:506px;
height:140px;
}
.sldr_title {
font-family:Georgia, Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
font-style:normal;
color:#000000;
}
#smooth_sldr_body h2 {
line-height:17px;
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
font-style:normal;
color:#000000;
margin:0px 0 5px 0;
}
#smooth_sldr_body h2 a {
color:#000000;
}
#smooth_sldr_body span {
font-family:Arial, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
font-style:normal;
color:#333333;
}
.smooth_slider_thumbnail {
float:left;
margin:0px 5px 0 0px;
width:165px;
height:120px;
border:1px solid #000000;
}
#smooth_sldr_body p.more a {
color:#000000;
font-family:Arial, Arial, Helvetica, sans-serif;
font-size:12px;
}
#smooth_sliderc_nav li {
border:1px solid #333333;
font-size:12px;
font-family:Arial, Arial, Helvetica, sans-serif;
}
#smooth_sliderc_nav li a {
color:#000000;
}
.sldrlink {
padding-right:40px;
}
.sldrlink a {
color:#333333;
}
#slider {
background:#333;
height:205px;
display:block;
margin:22px 0 10px 10px;
width:565px;
}
</style>

Step 3:
Now go to Design > Page Element > Add a Gadget > HTML / JavaScript. Past the following code in it:

<div id="slider">
  <script type="text/javascript">
stepcarousel.setup({
galleryid: 'smooth_sliderc', //id of carousel DIV
beltclass: 'smooth_sliderb', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'smooth_slideri', //class of panel DIVs each holding content
autostep: {enable: true, moveby:1, pause:7000},
panelbehavior: {speed:500, wraparound: false, persist:false},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://www.shoutmeloud.com/wp-content/plugins/smooth-slider/images/button_prev.png', -8, 70], rightnav: ['http://www.shoutmeloud.com/wp-content/plugins/smooth-slider/images/button_next.png', 0, 70]},
statusvars: ['imageA', 'imageB', 'imageC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
onslide:function(){
 jQuery("#smooth_sliderc_nav li a").css("fontWeight", "normal");
 jQuery("#smooth_sliderc_nav li a").css("fontSize", "12px");
 var curr_slide = imageA;
   jQuery("#sldr"+curr_slide).css("fontWeight", "bolder");
 jQuery("#sldr"+curr_slide).css("fontSize", "17px");
 
  }
})
</script>
  <noscript>
  </noscript>
  <div id="smooth_sldr">
    <div id="smooth_sldr_items">
      <div id="smooth_sldr_body">
        <div id="smooth_sliderc">
          <div class="smooth_sliderb">
            <div class="smooth_slideri">
              <!-- smooth_slideri --><a href="http://www.hacktutors.info/2010/09/releasing-platinum-blogger-template.html"><img class="smooth_slider_thumbnail" src="http://1.bp.blogspot.com/_b0xJ7qk6DTc/TID70p28DHI/AAAAAAAAA-U/jeysjWTsuAI/s400/Platinum+Blogger+Template.JPG" alt="Platinum Blogger Template" /></a>
              <h2><a href="http://www.hacktutors.info/2010/09/releasing-platinum-blogger-template.html">Platinum Blogger Template</a></h2>
              <span>I converted Platinum WordPress theme into Blogger Template. Originally, Brian Gardner designed it and I converted it for all Blogger users and make it available for absolutely free.</span>
              <p class="more"><a href="http://www.hacktutors.info/2010/09/releasing-platinum-blogger-template.html">Read More</a></p>
              <!-- /smooth_slideri -->
            </div>
            <div class="smooth_slideri">
              <!-- smooth_slideri --><a href="http://www.hacktutors.info/2011/06/google-pagerank-update-june-2011.html"><img class="smooth_slider_thumbnail" src="http://4.bp.blogspot.com/-_FO0b18FevM/TgmdX1txkiI/AAAAAAAABdk/mN3A1DefpQA/s1600/google-pagerank-update.png" alt="Google Page Rank Update" /></a>
              <h2>
                <a href="http://www.hacktutors.info/2011/06/google-pagerank-update-june-2011.html">Google Page Rank Update</a>
              </h2>
              <span>Google PageRank has been updated in June 2011 for the second time in this year. HackTutors got back its PR while it was 0 before. Now its PR 3.</span>
              <p class="more"><a href="http://www.hacktutors.info/2011/06/google-pagerank-update-june-2011.html">Read More</a></p>
              <!-- /smooth_slideri -->
            </div>
            <div class="smooth_slideri">
              <!-- smooth_slideri -->
<a href="http://www.hacktutors.info/2011/05/high-pr-backlinks-within-minute.html"><img class="smooth_slider_thumbnail" src="https://lh6.googleusercontent.com/-bN5-UJUhtyM/TWi7jqBPk6I/AAAAAAAABYY/NWmixTuAmfY/s1600/FinalWSOcover.png" alt="Get Thousands of High PR Backlinks Within a Minute" /></a>
              <h2><a href="http://www.hacktutors.info/2011/05/high-pr-backlinks-within-minute.html">Get Thousands of High PR Backlinks Within a Minute</a></h2>
              <span>Now, you can discover up to *PR 7 DoFollow Pages* to place your Backlinks instantly! Yes you don't have to wait for a minute.</span>
              <p class="more"><a href="http://www.hacktutors.info/2011/05/high-pr-backlinks-within-minute.html">Read More</a></p>
              <!-- /smooth_slideri -->
            </div>
            <!-- /smooth_slideri -->
          </div>
        </div>
      </div>
    </div>
    <ul id="smooth_sliderc_nav">
      <li><a id="sldr1" href="#" >1</a></li>
      <li><a id="sldr2" href="#" >2</a></li>
      <li><a id="sldr3" href="#" >3</a></li>
    </ul>
    <br class="sldrbr" />
    <div class="sldrlink"><a href="http://www.clickonf5.org/smooth-slider" target="_blank">Smooth Slider</a></div>
  </div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#smooth_sliderc_nav a').click(function() {
var id = jQuery(this).attr('id');
        var step_to_slide = id.replace(/sldr/, "");
        document.getElementById(id).href = "javascript:stepcarousel.stepTo('smooth_sliderc', "+step_to_slide+")";
    });
});
</script>
Now, replace blue color URL with your post URL. Replace red color URL with your post's image URL. Similarly, replace green color with your post title and pink text with short post description.

Save the widget.

Step 4:
Pace the widget above the 'Blog Post' as shown below:


Finally you are done! View your blog if it is comfortable or not.

Show me your work via comment below and I will include your blog as demo working in this post.

COMMENTS

BLOGGER: 15
Loading...
Hosted by HostGator
Name

Adsense Adsense hacks Advertising Affiliate Marketing Announcement Antivirus Application hacks Applications Backlinks Blog Blogger Blogger Features Blogger Help Blogger Roll Blogger Templates Blogger Widgets Blogging Bluetooth hack Bootable Browsers Business Cell phones Contest Cool tricks CSS Device Download Email Marketing Entertainment Facebook FeedBurner FIFA World CUP Files n Folders Flash Free software Fun with Windows Games Gmail hacks Google Google hacks Google Plus Graphic Hacking tools Hosting How to HTML Info Internet Tips ip address iphone hack Ipod hacks Javascript Keyword Research Make Money Blogging Make money online Mobiles Monetize Nokia hacking Page Rank Password Hacks PC Games PC Hacks Photoshop Promote site Reviews SEO Social Bookmarking Social Media Symbian hack Tips n Tricks Traffic Tutorials USB Virus Web 2.0 Web design Widget Windows Tricks WordPress WordPress Themes
false
ltr
item
Hack Tutors — Blogger Tricks, Blogging and Social Media Tips: Auto Sliding Featured Post Widget for Blogger
Auto Sliding Featured Post Widget for Blogger
http://1.bp.blogspot.com/-8Qo4f-JhZ0E/ThfuGgwZHCI/AAAAAAAABfE/N7cdl6ThenQ/s400/featured-post-widget-blogger.jpg
http://1.bp.blogspot.com/-8Qo4f-JhZ0E/ThfuGgwZHCI/AAAAAAAABfE/N7cdl6ThenQ/s72-c/featured-post-widget-blogger.jpg
Hack Tutors — Blogger Tricks, Blogging and Social Media Tips
http://www.hacktutors.info/2011/07/auto-sliding-featured-post-widget-for.html
http://www.hacktutors.info/
http://www.hacktutors.info/
http://www.hacktutors.info/2011/07/auto-sliding-featured-post-widget-for.html
true
7369343002377078183
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy