March 7, 2018

Cara Memasang Featured Post Image Slider Berdasarkan Label dengan Nivo Slider

March 7, 2018

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:

Cara Memasang Featured Post Image 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 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

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

3 comments on Cara Memasang Featured Post Image Slider Berdasarkan Label dengan Nivo Slider

  1. kok slidernya jadi melebar kemana mana gan ? terus itu agar rapi apa wajib pasang tag kondisional? cara praktisya gmn krn liat artikelnya malah pusing hehehe

    ReplyDelete
  2. Makasih tutorialnya. Sangat bermanfaat

    ReplyDelete

Contact Form

Name

Email *

Message *