Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to Add Automatic Featured Post Widget in Blogger

Tags: mbts

For every blogger featuring your posts allows you to put your best contents in front or on top of your blog page, where your readers can see it more easily.


Featured posts are very helpful and it’s also a way to welcome your readers to your blog or highlight the important posts or announcements.

Benefits of featured posts widgets in Blogger


As Featured posts widgets allow you to feature your selected contents and more exposure, it has many benefits. Some of them are:

Your best and most important posts get more attention and attract your readers.

Search engine bots can easily access your best and important articles.

As feature posts widgets are generally placed on top. It easily allows your readers to easily read the article and this reduces the bounce rates.


More: How to create Automatic Table of Contents in Blogger

Features of Automatic Featured Posts Slider Widget


Featured posts slider is an advanced widget equipped with these features:
Author Avatar.
It displays your recent posts automatically.
It has Clickable Animated Featured Image Thumbnails
It can extract and display your recent posts dynamically from a specific category/label.
It has 2 animation effects, Slide & Fade.
It supports Third-party Images and YouTube Video thumbnails as well.
Clickable Comments Count
It has custom Date Format
You have the option to increase or decrease Image Resolution and gives you a quality image.
Title Length also adjustable. So 

More: 9 Best Recent post widget for Blogger



How to Add Automatic Featured Posts in Blogger

Just follow the few simple steps and you will be done within no time.

Step 1. Login to your Blogger blog, select Template/Theme and click on Edit HTML.


Step 2. Search for the tag and paste the below JS & CSS source links just above the tag.

'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'> 
href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
href='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.min.css' rel='stylesheet' type='text/css'/>
'https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js' type='text/javascript'>


Step 3. Now, search for ]]> code and paste the below code just above the ]]> code.


.mbt-s{margin:0 5px;border:0;width:100%;overflow:hidden} 
.mbt-s .slides{list-style-type:none;margin:0 auto;padding:0}
.mbt-s li{color:#fff;font-family:helvetica;font-size:12px;overflow:hidden;padding-top:10px}
.mbt-s .flex-control-nav li{display:inline-block;margin:0 2px}
.mbt-s .flex-control-nav a{text-indent:9999px;display:block;width:10px;cursor:pointer;height:10px;background-color:#000;border:1px solid #000;border-radius:0!important}
.flex-direction-nav .flex-prev{left:-50px}
.flex-direction-nav .flex-next{right:-50px;text-align:right}
.mbt-s .flex-control-paging{display:none}
.flex-direction-nav{position:relative;top:-250px}
.mbt-s .flex-control-nav a.flex-active{background-color:#84db06;border:1px solid #90f128}
.mbt-s .flex-div{margin:0 auto;display:block;padding:0!important;position:relative;height:370px}
.mbt-s li a{color:#0080ff;text-decoration:none}
.mbt-s i{color:#999;padding-right:5px}
.mbt-s .iline{line-height:2em;margin:0;position:relative;top:-90px;background:#31363a;padding:3px 10px;display:inline-block}
.mbt-s .icontent{line-height:1.5em;margin-top:5px}
.mbt-s div span{margin:0 5px 0 0;display:inline-block;font-weight:400}
.mbt-s .mbttitle{font-family:oswald;font-size:20px;color:#ff0;font-weight:400;text-decoration:none;position:relative;top:-90px;background:#222;padding:15px 10px;display:block}
.mbt-s .mbttitle:hover,.mbt-s .itotal a:hover{color:#fff;text-decoration:none}
.mbt-s .iedit a{text-decoration:none;color:#999;cursor:pointer}
.mbt-s .iedit:before,.mbt-s .iauthor:before,.mbt-s .itag:before,.mbt-s .icomments:before,.mbt-s .idate:before,.mbt-s .itotal span:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}
.mbt-s .iauthorpic{width:17px!important;height:17px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px}
.mbt-s .iFeatured{overflow:hidden;position:relative;margin:0;padding:0;width:100%}
.mbt-s .iFeatured a{background:none;padding:0;display:block;border:0px solid #eee;margin:0 -1px}
.mbt-s .iFeatured img{height:305px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;border-radius:0;margin:0;padding:0;opacity:.7}
.mbt-s .iFeatured:hover img{opacity:1;-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}
.mbt-s .icomments a{color:#0080ff;font-family:arial;font-size:12px}
.mbt-s .icomments a:hover{text-decoration:underline}
.mbt-s .icomments:before{content:'\f086';padding:0 3px 0 7px;color:#fff}
.mbt-s .idate{color:#fff;padding:3px 4px;font-family:arial;font-size:11px}
.mbt-s .idate:before{content:'\f073';padding:0 5px;color:#fff}

Customization

Change #222 in order to change the black background behind the title.
Change #ff0 in order to change the yellow color of the slide title font.
Change #0080ff in order to change the comment link color.
Change #fff in order to change the mouse hover color.

Step 4. Click on Save in order to save your settings.

More: How to create Social Content Locker in Blogger

Step 5. Now select Layout and click on Add a Gadget.



Step 6. Select HTML/JavaScript and paste the below code inside the empty space.





Customization


script type="text/javascript"> 
$(window).load(function() {
$('.mbt-s').flexslider({
animation: "slide",itemWidth: 600,itemMargin: 25,directionNav: true,touch: true,slideshowSpeed: 2500,pauseOnHover: true,animationSpeed: 700,});});script>
div class="flexslider mbt-s">
ul class="slides">
script type="text/javascript">
//################### Defaults
var ListBlogLink = "http://mybloggertricks.com";
var ListCount = 6;
var ListLabel = "Events";
var TitleCount = 66;
var ImageSize = 600;
//################### Function Start
function mbtslide(json) {
for (var i = 0; i ListCount; i++)
{
//################### Variables Declared
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate


This post first appeared on Wonder Krish, please read the originial post: here

Share the post

How to Add Automatic Featured Post Widget in Blogger

×

Subscribe to Wonder Krish

Get updates delivered right to your inbox!

Thank you for your subscription

×