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

Nivo Slider dikenal sebagai slider terbaik. Meskipun Featured Image Slider tidak disarankan alasannya 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 ibarat gambar di bawah ini:

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

Live DEMO

Cara Memasang Featured Post Image Nivo Slider

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

1. Pastikan ada link ke instruksi jQuery di template blog Anda. Jika belum ada, copas instruksi berikut ini di atas instruksi </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 instruksi berikut ini di atas instruksi </head> -- di bawah instruksi 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="Cara Memasang Featured Post Image Slider Berdasarkan Label dengan Nivo Slider"'><h3>" + d + "</h3></a><p>" + u + '</p>"/></a>';
                    l.find("#slider").append(h)
                }
                $("#slider").nivoSlider({
                    effect: "random",
                    pauseTime: 5e3
                })
            }
        })
    })
});
//]]>
</script>

3. Copas instruksi CSS Featured Post Image Nivo Slider berikut ini di atas instruksi ]]></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 instruksi berikut ini:

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

Ganti LabelName dengan nama Label, contohnya Featured.

7. Pindahka widget gres 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.idtutorial.com).*

Sumber

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours