• Menu
  • Lycoris
  • Category
    • Animation
    • Nature
    • People
    • Technology
    • Vogue
    • Other
  • Tools
    • CSS
    • jQuery
    • Cookies
    • Wicked
  • Menu
    • CSS
    • jQuery
    • Cookies
    • Wicked
  • Sub Menu
    • CSS
    • jQuery
    • Cookies
    • Wicked

Top Free IT

Share free template blogger

  • Home
  • Contact
  • Sitemap
  • Static Page
Menu
Slider Widget Beautiful Automatic Featured Posts Slider Widget for Blogger

Beautiful Automatic Featured Posts Slider Widget for Blogger


When comparing Blogger with WordPress, we often lament the lack of easy-to-install plugins on Blogger. While this post isn’t going to magically port WordPress plugins to Blogger, it will help you add a smart, automated and customizable Featured Posts Slider on your blogger blog.

 Automatic sliding doors are dynamic content in many popular websites on the web.This is a great technique to represent different types of content in a limited space and a good way to involve the user.You have probably noticed that a lot of websites recently a working area with content that slides or changes in any way.

The point being driven at here is that you have to offer more on your blog. It's not enough that you get traffic from search engines and other sites; you also have to add some extras that will entice visitors to stay longer.
How exactly do you do that?

The Tactics of Persuading Users to Stay

Bloggers have employed a variety of tactics to persuade readers to stay. For one, they load the sidebar with widgets for Popular Posts, for example. Of course, it would be in the interest of your readers to know which other posts on your blog are gaining traction. Maybe those pieces are of interest to them as well. As a result, you've got one surefire way of making readers stay.

Now, what if you want to highlight Featured Posts, for example? Let's say that your blog has been around for a number of years and in that span, it has produced some great content that received quite the number of shares, likes, +1s, comments on so on. Wouldn't that be the kind of post you want featured? Unless your reader was looking for that topic specifically, there's little chance that they might uncover that gem if you don't bring it to their attention.

Thankfully, it's quite possible to add a Featured Posts slider for Blogger. And if you don't know how to make one yourself, this is exactly what this post is for. Here's an awesome Featured Posts slider widget that you can use on your blog.
Featured Posts Slider
  • LIVE DEMO
How to Add Featured Posts Slider Widget in Blogger
1. Go to 'Layout' > click the 'Add a gadget' link in the sidebar area and select 'HTML/JavaScript' gadget from the pop-up window.
2. Add the code below inside the empty box:
<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggah5Ce3ifhwbaEFdDBqrGenMgftmQWCCBTGVNP2uMHpDCQd8x6vYy0zRruEMdYO7W4VCZ4XwW3MGamJznziEH7kdD6WG7nDeEshtCtMBdTbkbToeva-gJQKLW65noIqeP191rdcsOfEg/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
</style>
<div id="featuredbwidget"></div>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({

listURL: "http://blogger-templatees.blogspot.com/",
featuredNum: 7,
listbyLabel: false,
feathumbSize: 350,
interval: 5000,
autoplay: true,
featuredID: "#featuredbwidget"
});
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpe5kfoFPH9Gvl9jOeqsFhwOGuMXaKPHX6NsAiOUK3gLSrEWgkGgzfqpjqQb884pt6HY49rc58B86xDNEL8Ij3sGmadyl3I7vtxTgJJkdDguD9Cv4NqT1VfitlMCrF4MGAdO7kxSLZuew/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>

Settings
listURL - replace "http://blogger-templatees.blogspot.com/" with your blog URL
featuredNum  - add the number of posts to display in the slider
listbyLabel - if you want to display posts by category / label, such as the tag fashion, it will be written as listbyLabel: "fashion"
feathumbSize - the size or dimension of the image in pixels
interval - time taken to change the slides position in milliseconds
autoplay - replace true with false if you don't want the slides to change automatically.

3. Once you are done with the settings, click the 'Save' button.

Unknown
Add Comment
Slider, Widget
Monday, December 14, 2015
  • Share
  • Share

Related Posts

  • Animated Download Buttons For Code Video and File For BloggerIf you write about web design, blogger or any technical topic then you definitely use codes to expl
  • How to Add Jumbo Social Share Bar with Counters in BloggerAre you looking to add a Jumbo social share bar in Blogger? Why it is called a Jumbo Social Bar? Wh
  • Jquery and Css Vertical Drop Down MenuGreat Widget because it does not takes a lot space even makes you more valuable space and still is
  • Smooth Sliding Social Media Widget For BloggerTo increase search engine visibility it is compulsory to use social media widget for blogger so her
  • Add Cool Subscription Box For BloggerEmail subscribers is becoming a major concern for every blogger over the internet.Using the default
  • Sliding Css Social Profile Widget for BloggerIn this post im  gonna explain how to add Css sliding social icons list  for blogger. By

Newer Older Home
Lycoris Responsive Blogger Template

Lycoris Responsive Blogger Template

Mauris mattis auctor cursus. Phasellus tellus tellus, imperd…

Most Awesome Breathtaking Places

Most Awesome Breathtaking Places

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sat…

Overall of Fashion Week

Overall of Fashion Week

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sat…

Awesome Fashion Trend in For Winter

Awesome Fashion Trend in For Winter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sat…

7 Ways To Travel Like a Pro

7 Ways To Travel Like a Pro

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sat…

<12345>

Weekly Posts

  • thumbnails
    Viralisme
  • thumbnails
    How to Create Rounded Images with CSS
  • thumbnails
    Viral Pro
  • thumbnails
    Strap Blog
  • thumbnails
    Jenny
  • thumbnails
    MaxTemplate

Label

1 Column 2 Column 2016 2017 3rdball 3rdbell Acacia Active Mag Ad Mag Adelle Adello Admiral Tumblr Theme Ageka Simple Agista Ajustmag Alice Allure Amadeus aMag Amalie Amazine AMP Template AnankeMag Anime Anime Clean AnimeBatch AnimeMagzs AnimePacker Animeplus AnimeTango Arden Argent Arlinadesign Asteroid Astonish Author Widget Authority Auto Razz Auto Read More Autumn Avocet AwesomeOne Axact Back To The Top Barbar Base Beauteous 2016 Beauty BeautyTemplates Beehive Best Mag Better Mag BizDesk BizGlobe Black Black Cover Blacken BLagioke Blogable Blogari Blogger Blogger Magazine Blogger Template Blogger Templates Blogger Widgets Bloggertheme9 Blogghiamo Blogging Blogish Blogius Blogmag BlogrCart BlogrCart Closet v2 BlogrCart Mukabuku Blogrcart One BlogrCart SHOWCASED BlogrCart White2 BlogrShop Blogstar Blogus Blue Blue APK BlueTheme Blush Bmag BoldNews Bolina Brosense Brown Brownie Bthemez Bulan Busby Bushwick Business Businis Button Buttons Calypso Canvas Clock CarsPortal Cartoons CarZilla CB Blog Foto CelebVision ChicMag Chitoge Attack Claire Clothing CocoMag Colorindo Coming soon Conversion Cool Mag Coolbaby Cooperate Coral Drive Corner Mag Cosparell Count Me Couture Creative CreativePen Crystal CSS CSS3 CTR Booster Daily Health DaisyChain Daksh Dark Color DarkMag Date A Live Davis Dearpins Decent Deep Blog Defersite Delivery Lite Demo Page DeNews Design and CSS DesignIdea DesignPress Detube Deverclean Devil Survivor Devote Devotion Grid Discover Djogzs Dollar Sense Domag Download Buttons DreamLine Drop Down Menu Dropen Duena Duos Mag Dzine Easy Blog Easy Mag EasyMag Edogawa Education EducationPro Effective eLearn Elegantes Eleganto eNewspaper Estelle Evo Magz Exmanga ExpressNews Extra News Fabish Facebook Fag Mag Familia Fan Base Fanbase v2.2 Fancy Fanstrap Anime Fantasy Fasel News Fashion Fashion Blogger Template Fashionistas Fashionly Fast 2 Fast Edition Fast Gear fastnews Feedly Felice Fenomen Figaro Film Reviews Final Fantasy Fitness Diva Flashback FlatMag Flatness Flavio Flavio Simple Flexmag Flytemplate Food Food Blog Foodlicious FootballZone Foto Fotografity Foundia Free Blogger Template Free Premium Fresh Blog Fresh View Frontier Fusion G Vusion Gallery GameDaily GameFusion GameMag GameMaster Gameport Gamer Games GamesExpo GamesNet GamesPad GamingCenter Gear World GeoWall GirdBook Gladiolus Minimal Glam Up Glamour Glooger Gommero Gordon Gossip Gracious Gray GreatMag Green Green APK Pro GreenMag Grey Grid Template Gridisme Gumi Vocaloid Gym Happenings HaralampiLux Harmonia Hatsune Miku Headlines Health Health/Fitness HealthDaily HealthLab HealthPro HealthyLiving HeradinoMag HestiaMag HighEnd Hitamz Holomatic Honey HorseMag HostingBlog Hotmag How to HTML HugeMag iBeats Image Image Gallery Immersed iMoechan Impreza Indzign Ingrid Instaset Instinct Intent Invert Invert Grid Invision Iori Kyun iPrime iPro Irsah Ivanesia Ivero Iwata JalanTikus Jax Lite Jaximus Jenny Johansen JosePhine JoyFul Fashion JPStation jQuery JQuery Widgets Jugas Jumper Jupiter Kalimaz Kalon KitKat Klarity Koenda Kompi Landing Page Kompi Males Kontify Krakatau Lite Kuro Simple Kyoukai no kanata Lady Finger Lagicapek Landing Page Language Attribute Ledera Lemy LepontoMag Life-Fashion LifeBlog Lifestyle Lifestyle Magazine Limelight Livinia LocalNews Loveria LunaMag Lux News Mag Zilla Magazine Magazine Template Magcro Parallax Magento Magnifique Magnifying Glass MagOne MagtiMate MagTime MagWeb Magzima Marble Mashable Maskolis Masterpiece MaterialZine MaxaZine MaxTemplate Maya McKinley Mdcsite MDFostrap Meed Mega mag Mega Shop Mega Social Menowo MetroMag Micro Mag MicrownSoft Grid Milano Mini-T Minima Minima Colored Minimal Minimalist Mistery MNMLIS MobileZone Modern ModernMag Monal Montric Motive Mag Moveone Movie MovieSpot msdesignbd mSora Mugi Mularonis Multimedia MultiPurpose Blogger Template My Mag MyRestaurant Mystery N Light Nami Press Nanopress Navigation Menu Neda NeedMag Neo Mag NEOMAGz Netia New Minima Colored NewBloggerThemes NewMag NewNews NEWS News 52 News24 NewsBoard NewsCenter NewsGrand Newsly Newspaper NewsPark NewsPro NewsTube NewsZoom Nimbus Nisekoi Novelo Nubie Banget Ocean Mag Odd Themes Old Themes Older Themes Olive Olivia One Page OneStream OnlineMagazine OpenNews Oracle Orange Ore no Imouto Oreki Houtarou Origins Otaku News Ovation Overload Padhang Pago Pakdhe Johny Palki Palki 2 Palki Grid Palki Ultimate Particular Responsive PBT PBThemez Perish Personal Personal Blog Personal template Photo Photographer Blogger Template Photography Phrozen2 Picshots Picture Pink Pinterest Pointer Portfolio Power Game Powered by Blogger Precious Lite Preloading Effect Premium Premium Themes PremiumBloggerTemplates PressMania Pro Templates Lab Probama ProMag ProNews ProNewspaper Publisher Purple Raintemplates Raintimes Raspberry Rastolinos Read More Readily Reading Red ReDesign Related Posts Responsive ReStyle Revelio Rezero Chan Risa RokoPhoto Rosemary Scoop Scratch SeeNews Sense Seo Beast Blogger Templates Seo Boss seobloggertemplates Seofast Setiva Shine Shingeki No Kyojin Shiroi Shop Template Silver Simplart Simple Fast Simple Sense SimpleBuzz Simplesanget Simplest Simplex Simplex Audio Simplify Simply Mag Sincup Singl Sleekify Slider Smart Blog Smart News SmartBlog Smartseo SNews Snowseo Social Icons Social Share Buttons SocialMediaMarketing Socio SoftWind Solar Solon Soone Soonex Sora Sora Book Sora Buzz Sora Films Sora Games Sora Mag Sora Travels Sparkle Sparkling Splendid Splendor 2 SpotCommerce Spraymag Square StagoMag Strength Studio Stylish Subscribe to Subscription Box Sugar SunMag Sure APK SweeTravel Swift Takis Team Blog Tech Tech Life Tech Mag Tech World TechBlog TechGo TechJournal TechLand Technext Technology TechPro TechTrend TechUp TechZine Template TemplateClue Templateify Templateism Templatesyard Templatetrackers Templatezy Templatium Templatoid The Blog Theme The Dens The Reviewer TheAcademy TheBloopers TheCars Theme Theme Mag Themeforest Themeindie Themeswear Themexpose TheMusic TheNews TheSmart TimesDay Toniq Tooltip TopGames Torrentism Toujours TP Blue Mag Travel Travel Blog Travel Hub TravelHub Treasury Trendmag Trendy Divaa Tribes Tribute TriVusion Trophy Tubies Tumblr Ultimate Tech Under Construction UniEdu Uong Jowo UpMag UpStream Usagilabs Vacations Value Veethemes Verda Vidal Video VideoPro VideoShow Vienna Vienna Lite 2 Vienna Lite 3 Vikka VipMag Viral Mag Viral Pro Viral Ta ViralNews Vogue 2016 Voux Wallbar Warm Mag way2themes Weblogtemplates Wedding White Widget Widgets Wizzblue WorldGamer WpHealth WPNewsPaper Writer Writer Evolution X-Man XPress News Yellow YesNews Yo MAG Yo Templates YouMusic YouNews Youtube Responsive Blogger Template Zen Mag Zinnias Lite Zippo Zipson Zoom Effect

Recent Post

  • All topics simplify 2 premium for blogger
  • Gravity V3 Responsive Blogger Template
  • Moslar
  • Vox - Responsive
  • Axorys Blogger Template
  • TdbSimple2
  • Viralisme
  • Simple Template
  • AMPNews
  • Digizena

Contact

Name

Email *

Message *

  • Trang chủ

copyright © 2017 Top Free IT All Right Reserved . Created by Idntheme . Powered by Blogger