Cara Memasang Featured Post Image Slider Berdasarkan Label dengan Nivo Slider

Baca Juga

Cara Memasang Featured Post Image Slider Berdasarkan Label dengan Nivo Slider.

Nivo Slider dikenal sebagai slider terbaik. Meskipun Featured Image Slider tidak disarankan karena memperlambat loading blog, masih banyak blogger yang mau memasangnya dengan alasan "keindahan" tampilan halaman depan blog.

Berikut ini CB share Cara Memasang Featured Post Image Slider Berdasarkan Label dengan Nivo Slider.

Penampakan Featured Post Image Slider Berdasarkan Label dengan Nivo Slider seperti gambar di bawah ini:

Live DEMO

Cara Memasang Featured Post Image Nivo Slider

Berikut ini cara Cara Memasang Featured Post Image Slider Berdasarkan Label dengan Nivo Slider. Anda bisa pilih label tertentu untuk ditampilkan di slider ini.

1. Pastikan ada link ke kode jQuery di template blog Anda. Jika belum ada, copas kode berikut ini di atas kode </head>

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

atau

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

2. Copas kode berikut ini di atas kode </head> -- di bawah kode jQuery tadi.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/jquery.nivo.slider.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function () {
    $(".recent-slider").each(function () {
        $(this).append('<div id="slider"></div>');
        var e = $(this).attr("data-label"),
            n = "/feeds/posts/summary/-/" + e + "?max-results=" + 5 + "&alt=json-in-script",
            l = $(this);
        $.ajax({
            type: "GET",
            url: n,
            async: true,
            contentType: "application/json",
            dataType: "jsonp",
            success: function (s) {
                for (var r = 0; r < s.feed.entry.length; r++) {
                    for (var n = s.feed.entry[r], i = 0; i < n.link.length; i++)
                    if ("alternate" == n.link[i].rel) {
                        var o = n.link[i].href;
                        break
                    }
                    try {
                        var c = n.media$thumbnail.url.replace("s72-c", "h300-w1200-no")
                    } catch (p) {
                        var c = "https://1.bp.blogspot.com/-WcK_MwbGkl4/V75lPlr5tAI/AAAAAAAAFQ8/p4Db__YpRIUwAJib_2rfetQ03bPjVRZvQCLcB/s1600/No%2Bimage.jpg"
                    }
                    var d = n.title.$t,
                        u = n.summary.$t.substr(0, 180),
                        h = '<a href="' + o + '"><img src="' + c + '" title="<a href=\'' + o + "'><h3>" + d + "</h3></a><p>" + u + '</p>"/></a>';
                    l.find("#slider").append(h)
                }
                $("#slider").nivoSlider({
                    effect: "random",
                    pauseTime: 5e3
                })
            }
        })
    })
});
//]]>
</script>

3. Copas kode CSS Featured Post Image Nivo Slider berikut ini di atas kode ]]></b:skin>

/* The Nivo Slider styles */
.nivoSlider{position:relative;width:100%;height:300px;overflow:hidden;text-align:Center}
.nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:300px!important}
.top-l-slider .nivoSlider{position:relative;width:100%;height:400px;overflow:hidden;text-align:Center}
.top-l-slider .nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:400px!important}
.nivo-main-image{display:block!important;position:relative!important;width:100%!important}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:white;filter:alpha(opacity=0);opacity:0}
/* The slices and boxes in the Slider */
.nivo-slice{display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box{display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img{display:block}
/* Caption styles */
.nivo-caption{position:absolute;bottom:10px;left:5%;display:block;width:90%;text-align:center;font:400 26px 'segoe ui',sans-serif;z-index:8;-webkit-box-sizing:border-box;/* Safari/Chrome,other WebKit */
-moz-box-sizing:border-box;/* Firefox,other Gecko */
box-sizing:border-box;/* Opera/IE 8+ */
color:#fff}
.nivo-caption p{text-align:Center;font:400 13px 'segoe ui',sans-serif;margin:10px 20px;padding:10px;display:inline-block;border-radius:4px;background:#222;line-height:21px}
.nivo-caption a{color:#ecf0f1}
.nivo-caption h3{text-align:center;padding:5px;display:inline-block;border-radius:5px;margin:0;line-height:37px!important;background:#e74c3c;font:400 30px 'segoe ui',sans-serif}
.nivo-caption .sliderdata{margin:10px;text-align:Center;color:#fff}
.nivo-html-caption{display:none}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a{position:absolute;top:50%;margin-top:-15px;z-index:9;font-size:0;display:block;width:30px;height:30px;border-radius:5px;line-height:30px!important;background-color:rgba(255,255,255,0.5);cursor:pointer;/* border:3px solid #fff;*/
box-shadow:1px 1px 1px rgba(0,0,0,0.4);-moz-box-shadow:1px 1px 1px rgba(0,0,0,0.4);-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.4)}
.nivo-prevNav{left:10px}
.nivo-prevNav:before{content:'\2190';position:Absolute;left:0;top:0;display:block;z-index:100;font:400 20px sans-serif;color:#fff;height:30px;width:30px;line-height:30px!important;text-align:center}
.nivo-nextNav:before{content:'\2192';position:Absolute;left:0;top:0;display:block;z-index:100;font:400 20px sans-serif;color:#fff;height:30px;width:30px;line-height:30px!important;text-align:center}
.nivo-nextNav{right:10px}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav{text-align:center;z-index:100;position:absolute;top:10px;right:10px;font-size:0}
.nivo-controlNav a{cursor:pointer;display:block;width:20px;height:20px;background:#222;float:left;border-radius:10px;margin-right:5px}
.nivo-controlNav a.active{background:#e74c3c}

4. Save! Simpan template.
5. Klik Layout > Add a Gadget > pilih HTML/JavaScript
6. Masukkan kode berikut ini:

<div class='recent-slider' data-label='LabelName'></div>

Ganti LabelName dengan nama Label, misalnya Featured.

7. Pindahka widget baru ini ke atas widget "Blog Post".
8. Save!

Agar tampil hanya di halaman depan (homepage), gunakan tag kondisional untuk mengatur posisi wigdet.

Demikian Cara Memasang Featured Post Image Slider Berdasarkan Label dengan Nivo Slider. Good Luck & Happy Blogging! (www.contohblog.com).*

Sumber