Cara Memasang Widget Carousel Slider Responsive Otomatis Horizontal

Baca Juga

Cara Memasang Widget Carousel Slider Responsive Otomatis Horizontal 

CAROUSEL Slider adalah widget berupa featured posts yang menampilkan posting terbaru atau per label/kategori di halaman depan blog. Fungsinya sebagai navigasi atau link internal yang menampilkan posting unggulan atau terbaru.

Berikut ini penampakannya:

Cara Memasang atau Membuatnya:

1. Layout > Add a Gadget > pilih HTML/Javascript
2. Judul kosongkan
3. Copas kode berikut ini:

<style>
.mbtslides-title2{font-family:Arial; font-weight:normal;font-size:13px!important; border-bottom:2px solid rgb(144, 241, 40); color:#242729;width:90%;display:none }
#mbt-c{    margin: 0 auto;
    width: 94%;
    background: #f1f1f1;
    padding: 0 10px;
    max-height: 170px;
    height: auto;}
.flexslider .slides {list-style-type:none; margin:0px auto 10px auto;padding:0px;} #mbt-c li {color:#666; font-family:helvetica; font-size:12px; overflow:hidden; position:relative; padding-top: 10px; line-height: 1.3em;}#mbt-c .flex-control-nav{list-style:none outside none;position:absolute;top:-45px;right:5px;text-align:right;height:10px}
.flexslider .flex-control-nav li{display:inline-block;margin:0 2px}
.flexslider .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}
.flexslider .flex-control-nav a.flex-active{background-color:rgb(132, 219, 6);border:1px solid rgb(144, 241, 40)} #mbt-c .flex-div{margin:0px auto 20px auto; display:block; border-bottom:0px solid #eee; padding-bottom:20px!important; position:relative;} #mbt-c li a { color:#0080ff; text-decoration:none; } .flexslider i{color:#999; padding-right:5px; } .flexslider .iline{line-height:1em; margin-top:3px;} .flexslider .icontent{line-height:1.3em; margin-top:5px;} .flexslider div span{margin:0 5px 0 0; display:none;font-weight: normal;} #mbt-c .mbttitle {font-family:Arial; font-size:13px; color:#666; font-weight:normal; text-decoration:none;} #mbt-c  .mbttitle:hover, .flexslider .itotal a:hover  {color:#333; text-decoration:none;}
.flexslider .iedit a{text-decoration:none; color:#999; cursor:pointer}
.flexslider .iedit:before, .flexslider .iauthor:before, .flexslider .itag:before, .flexslider .icomments:before, .flexslider .idate:before, .flexslider .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;} .flexslider .iauthorpic{width: 17px!important;height: 17px!important;border-radius: 50%; float: none; display: inline-block!important; margin:0px 0px 0px 0px; padding-right:3px; position:relative; top:3px;}
#mbt-c .iFeatured{overflow:hidden;position:relative;margin:0 0px 10px 0;padding:0;width:130px;} .flexslider .iFeatured a {background: none; padding:0px; display: block;border:1px solid #eee;} #mbt-c .iFeatured img{width:100%!important; height:75px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s; border-radius: 2px;} .flexslider .iFeatured:hover img{ opacity:1;   -moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)} .flexslider .icomments a{color:#0080ff; font-family: arial;font-size:12px;} .flexslider .icomments a:hover{text-decoration:underline} .flexslider .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#84DB06;} .flexslider .idate {position: absolute;left: 0px;top: -7px; background: rgb(132, 219, 6);color: #fff;padding: 3px 4px;font-family:Arial;font-size: 12px;border: 1px solid rgb(144, 241, 40);} .flexslider .idate div{width:18px; line-height:1.3em; text-align:center;}
.flexslider .idate:after {content: ' ';position: absolute;z-index:-9999px;width: 0;height: 0;left: 25px;top: -1px;border-width: 4px 6px;border-style: solid;border-color: transparent transparent rgb(125, 208, 4)  rgb(125, 208, 4);}
</style>
<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>
<script type="text/javascript">
  $(window).load(function() {
    $('#mbt-c').flexslider({
        animation: "slide",
        directionNav: false,
         itemWidth: 130,
        itemMargin: 5,
       touch: true,
       slideshowSpeed: 9000,
      pauseOnHover: true,
     animationSpeed: 900,
    });
  });
</script>
<h2 class="mbtslides-title2">Headlines!</h2>
<div class="flexslider" id="mbt-c">
<ul class="slides">
<script type="text/javascript">
var ListBlogLink = "http://testemplatecb.blogspot.co.id/";
var ListCount = 9;
var ListLabel = "News";
var TitleCount = 66;
var ImageSize = 150;
function mbtcarousel(json) {
for (var i = 0; i < ListCount; i++)
{
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  "";
if (json.feed.entry[i].category != null)
{
for (var k = 0; k < json.feed.entry[i].category.length; k++) {
ListTag += "<a href='"+ListBlogLink+"/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>";
if(k < json.feed.entry[i].category.length-1)
{ ListTag += " ";}
}
}
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
TotalPosts = json.feed.openSearch$totalResults.$t;
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}
if (json.feed.entry[i].thr$total)
{
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";
}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
ListAuthor=ListAuthor.slice(0, 1).join(" ");
AuthorPic = json.feed.entry[i].author[0].gd$image.src;
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0,10);
                         Y = ListDate.substring(0, 4);
                        m = ListDate.substring(5, 7);
                         D = ListDate.substring(8, 10);
                         M = ListMonth[parseInt(m - 1)];                  
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);
                         YY = ListUpdate.substring(0, 4);
                        mm = ListUpdate.substring(5, 7);
                         DD = ListUpdate.substring(8, 10);
                         TT = ListUpdate.substring(11, 16);
                         MM = ListMonth[parseInt(mm - 1)];
if (json.feed.entry[i].media$thumbnail!=null)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}
// YouTube scan
else if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
{
    var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();

    if (youtube_id.length == 11) {
        var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
        }
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbAKZASlKHAuwvLK-V9rD6qox1thyIoahnDcx1g32xhlNx0DCCLFnoX_OwI1Ra1oVcMcAYLuoaC5E7OvUIf6XuPKbL1gTJ1lyPTbBsNN6TOuIqTV18ZKGBASQiYdtFaIVfb6gcoicJUfA/s200/Icon.png'";
}
var listing = "<li><div class='flex-div'><div class='iFeatured'><a  href="
+ ListUrl+
  "><img src="
+ListImage+
"/></a></div><a class='mbttitle' href="
+ListUrl+
"target='_blank'>"
+ListTitle+
"</a><div class='iline'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
+ListAuthor+
"</span><span class='icomments'>"
+ListComments +
"</span> <span class='idate'><div>"
+ D +
"</div><div> "
+ M +
"</div></span></div></div></li>";
document.write(listing);
} }
document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtcarousel'></"+"script>");
</script>
</ul></div>

Catatan:
Ubah kode warna merah dengan alamat blog Anda, Jumlah Posting, dan Label yang akan ditampilkan:

var ListBlogLink = "http://testemplatecb.blogspot.co.id/";
var ListCount = 9;
var ListLabel = "News";

4. Save!

Demikian Cara Memasang Widget Carousel Slider Responsive Otomatis Horizontal. (Sumber).*