Featured Image Slider Widget For Blogger

Featured Image Slider Widget For Blogger - [Responsive]

Blogger Image Slider - Static and Responsive

We have so far discussed different types of dynamic slideshows and carousels for blogspot blogs but since some of you requested a featured image slider where you could display static posts based on your selection, so I thought of sharing a jQuery featured Image Slider where you can add custom info to feature your favorite blog posts on your homepage. If in case you want to display images automatically based on a specific label please check: Dynamic Blogger Slider.

Let's See a Demo first:

DEMO

What is a Featured Image Slider?

Blogger Featured Image sliders (also known as image carousels or slideshows) is the best way to display multiple images, videos, or graphics on your website. Featured images that users can slide or swipe can draw new visitors into your site, capturing their attention immediately thus bringing you more pageviews and revenue.

Featured Image sliders can be static or dynamic.

STATIC FEATURED IMAGE SLIDER: In a static slider that we are discussing today, you can manually add images based on your selection. Example: 4+ jQuery Image Sliders, Image Slideshow, the slider being discussed today.

DYNAMIC FEATURED IMAGE SLIDER: In a dynamic slider such as Blogger carousel or Recent posts slider that we released earlier, images are automatically displayed by pulling the latest posts from a specific blog label mentioned by you. Example: Dynamic Image Slider, Blogger Carousel

Featured Image Slider Is Responsive By Default

Featured Image Slider is built using FlexSlider and it is by default Mobile responsive and fluid. It adapts automatically to different device screen sizes. See the screenshots below

[ SMARTPHONES ]

[ TABLETS / IPADS]

[ DESKTOP / LAPTOPS ]

How To Add Featured Image Slider In Blogger?

Follow the easy steps below to add this cool responsive featured image slider to your templates.

Go To Blogger > Template

Backup your template

Click "Edit HTML"

Just below <head> tag paste the following JS and CSS source links:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

<link href='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.min.css' rel='stylesheet' type='text/css'/>

<script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js' type='text/javascript'></script>

Note: Do not add JQuery, FontAwesome, FlexSlider or Oswald source links to your template if you are already using them on your site.

Next search ]]></b:skin> and just above/before it paste the following code:

/*######### Blogger Image Slider By MyBloggerTricks #############*/

.mbt-smargin:0 5px;border:0;width:100%;overflow:hidden

.mbt-s .slideslist-style-type:none;margin:0 auto;padding:0

.mbt-s licolor:#fff;font-family:helvetica;font-size:12px;overflow:hidden;padding-top:10px

.mbt-s .flex-control-nav lidisplay:inline-block;margin:0 2px

.mbt-s .flex-control-nav atext-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-prevleft:-50px

.flex-direction-nav .flex-nextright:-50px;text-align:right

.mbt-s .flex-control-pagingdisplay:none

.flex-direction-navposition:relative;top:-250px

.mbt-s .flex-control-nav a.flex-activebackground-color:#84db06;border:1px solid #90f128

.mbt-s .flex-divmargin:0 auto;display:block;padding:0!important;position:relative;height:370px

.mbt-s li acolor:#0080ff;text-decoration:none

.mbt-s icolor:#999;padding-right:5px

.mbt-s .ilineline-height:2em;margin:0;position:relative;top:-87px;background:#31363a;padding:3px 10px;display:inline-block

.mbt-s .icontentline-height:1.5em;margin-top:5px

.mbt-s div spanmargin:0 5px 0 0;display:inline-block;font-weight:400

.mbt-s .mbttitlefont-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:hovercolor:#fff;text-decoration:none

.mbt-s .iedit atext-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:beforefont-family:fontAwesome;position:relative;padding-right:8px;color:#fff

.mbt-s .iauthorpicwidth: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 .iFeaturedoverflow:hidden;position:relative;margin:0;padding:0;width:100%

.mbt-s .iFeatured abackground:none;padding:0;display:block;border:0px solid #eee;margin:0 -1px

.mbt-s .iFeatured imgheight: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 imgopacity:1;-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)

.mbt-s .icomments acolor:#0080ff;font-family:arial;font-size:12px

.mbt-s .icomments a:hovertext-decoration:underline

.mbt-s .icomments:beforecontent:'f086';padding:0 3px 0 7px;color:#fff

.mbt-s .idatecolor: #ff0;padding: 9px 10px;font-family: Oswald;

font-size: 12px;position: relative;top: -270px; left:-80px;

background: #222;width: 23px;text-align: center;line-height: 1.8em;

.mbt-s .idate bfont-size:17px;

Make these changes
- To change the black background color behind the title and date edit: #222
- To change the yellow color of the slide title and date font edit: #ff0
- To change the color of the comment link edit: #0080ff

Save your template.

Now go to Blogger > Layout

Select "Add a Gadget"

Choose "HTML/JavaScript" gadget

Keep the title field empty and then paste the following code inside it:

<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">


<li>

<div class="flex-div">

<div class="iFeatured">

<a href="POST LINK"><img src="POST IMAGE" /></a></div>

<div class="iline"><span class="iauthor"><img class="AUTHOR IMAGE" />AUTHOR NAME</span><span class="icomments"><a href="#comment-form">COMMENTS COUNT</a></span> </div><span class="idate">Jun <b>10</b></span><a class="mbttitle" href="POST LINK" target="_blank">POST TITLE</a>

</div>

</li>


<li>

<div class="flex-div">

<div class="iFeatured">

<a href="POST LINK"><img src="POST IMAGE" /></a></div>

<div class="iline"><span class="iauthor"><img class="AUTHOR IMAGE" />AUTHOR NAME</span><span class="icomments"><a href="#comment-form">COMMENTS COUNT</a></span> </div><span class="idate">Jun <b>10</b></span><a class="mbttitle" href="POST LINK" target="_blank">POST TITLE</a>

</div>

</li>


<li>

<div class="flex-div">

<div class="iFeatured">

<a href="POST LINK"><img src="POST IMAGE" /></a></div>

<div class="iline"><span class="iauthor"><img class="AUTHOR IMAGE" />AUTHOR NAME</span><span class="icomments"><a href="#comment-form">COMMENTS COUNT</a></span> </div><span class="idate">Jun <b>10</b></span><a class="mbttitle" href="POST LINK" target="_blank">POST TITLE</a>

</div>

</li>
</ul></div>

The above code will help you create three image slides. Each slide has the same code. You just need to change the required fields in this format:
- Replace POST LINK with Post URL. It must start with http://
- Replace POST IMAGE with the thumbnail URL. Make sure your image should be at least 600px in width.
- Replace AUTHOR IMAGE with author image URL also called author avatar or profile image. This image could have a small size, say for instance less than 50px in width and height. Same size for width and height.
- Replace AUTHOR NAME with author name of that post.
- Replace COMMENTS COUNT with how many comments are posted on that post.
- Replace Jun and 10 with month and day respectively of published date.
- Replace POST TITLE with the textual title of the post.
- To add an additional slide simply copy the slide code starting from <li> and ending at </li> and paste it just above </ul></div>.

Finally click save your widget and you are all done!

Need help in installing Featured Image Slider?

In my next post I will share how to create a dynamic random post slider for the first time with all of you. For the time being do kindly share your feedback on this static one. Let me know if you need any help or assistance by leaving your comments. I hope this slider will help you better feature your content on your homepage to engage your blog visitors even more. Wish you a great blogging experience. Peace buddies! :)

2
comments

PLEASE NOTE:

We have Zero Tolerance to Spam.

Chessy Comments and Comments with
'Links'
will be deleted immediately upon our review.

(function() {
var items = ['id': '8417390585932400075', 'body': 'How to use Wow js script i dont know plz guide..', 'timestamp': '1480683038148', 'permalink': 'https://www.mybloggertricks.com/2016/12/blogger-image-slider.html?showCommentx3d1480683038148#c8417390585932400075', 'author': 'name': 'Mo Mahtab', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/12521701743330646108', 'displayTime': 'Dec 2, 2016, 5:50:00 PM', 'deleteclass': 'item-control blog-admin pid-1069533339', 'id': '6274636277810820904', 'body': 'Dear sir thank you for sharing such a nice information with us.Your article is very useful.your post is fantastic x26amp; i believe that it is very important for blogging work. ', 'timestamp': '1480746100689', 'permalink': 'https://www.mybloggertricks.com/2016/12/blogger-image-slider.html?showCommentx3d1480746100689#c6274636277810820904', 'author': 'name': 'blitz design', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/06227463406302852794', 'displayTime': 'Dec 3, 2016, 11:21:00 AM', 'deleteclass': 'item-control blog-admin pid-788418114'];
var msgs = 'loadMore': 'Load more...', 'loading': 'Loading...', 'loaded': 'No more!', 'addComment': 'Add comment', 'reply': 'Reply', 'delete': 'Delete';
var config = 'blogId': '8193278726666811965', 'postId': '5535610917048437472', 'feed': 'https://www.mybloggertricks.com/feeds/5535610917048437472/comments/default', 'authorName': 'M. Mustafa Ahmedzai', 'authorUrl': 'https://www.blogger.com/profile/11681339458447132019', 'baseUri': 'https://www.blogger.com', 'maxThreadDepth': 2;
// 0)
cursor = parseInt(items[items.length - 1].timestamp) + 1;

var bodyFromEntry = function(entry)
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved')
return '' + entry.content.$t + '';

return entry.content.$t;

var parse = function(data)
cursor = null;
var comments = ;
if (data && data.feed && data.feed.entry)
for (var i = 0, entry; entry = data.feed.entry[i]; i++)
var comment = ;
// comment ID, parsed out of the original id format
var id = /blog-(d+).post-(d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array)
var auth = entry.author[0];
if (auth)
comment.author =
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
;

if (entry.link)
if (entry.link[2])
comment.link = comment.permalink = entry.link[2].href;

if (entry.link[3])
var pid = /.*comments/default/(d+)?.*/.exec(entry.link[3].href);
if (pid && pid[1])
comment.parentId = pid[1];

comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass')
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime')
comment.displayTime = entry.gd$extendedProperty[k].value;

comments.push(comment);

return comments;
;
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor)
url += '&published-min=' + new Date(cursor).toISOString();

window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length

Mo MahtabDec 2, 2016, 5:50:00 PM

How to use Wow js script i dont know plz guide..

ReplyDelete

blitz designDec 3, 2016, 11:21:00 AM

Dear sir thank you for sharing such a nice information with us.Your article is very useful.your post is fantastic & i believe that it is very important for blogging work.

ReplyDelete

Add comment

BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');

The message for this page is from the here
The name of the picture

Clash Royale CLAN TAG#URR8PPP

搜尋此網誌

Odtnhj