Membuat Recent Post Dengan Menampilkan Fungsi Next Previous

Diposkan oleh Imron fhatoniLabel: Widgeddi 15.26

Pada Postingan ini saya akan  share mengenai cara membuat Recent post terbaru dilengkapi dengan fungsi next previous ok lansung aja gan untuk menampilkannya sangat gampang kok gan silahkan agan ikuti langkah laqngkah dibawah ini...

masuk blog agan
pilih menu template
segera cari kode </head> dengan menggunakan ctrl + f
jika sudah letakan kode dibawah ini diatas tag </head>

<script type='text/javascript'>
    //<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://empblogdemo.blogspot.com";
    var charac = 100;
    var urlprevious, urlnext;

    function dhffeed(dharla, banget) {
        var showfeed = dharla.split("<");
        for (var i = 0; i < showfeed.length; i++) {
            if (showfeed[i].indexOf(">") != -1) {
                showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">") + 1, showfeed[i].length);
            }
        }
        showfeed = showfeed.join("");
        showfeed = showfeed.substring(0, banget - 1);
        return showfeed;
    }

    function showterbaru(json) {
        var entry, posttitle, posturl, postimg, postcontent;
        var showblogfeed = "";
        urlprevious = "";
        urlnext = "";
        for (var k = 0; k < json.feed.link.length; k++) {
            if (json.feed.link[k].rel == 'previous') {
                urlprevious = json.feed.link[k].href;
            }
            if (json.feed.link[k].rel == 'next') {
                urlnext = json.feed.link[k].href;
            }
        }
        for (var i = 0; i < numfeed; i++) {
            if (i == json.feed.entry.length) {
                break;
            }
            entry = json.feed.entry[i];
            posttitle = entry.title.$t;
            for (var k = 0; k < entry.link.length; k++) {
                if (entry.link[k].rel == 'alternate') {
                    posturl = entry.link[k].href;
                    break;
                }
            }
            if ("content" in entry) {
                postcontent = entry.content.$t;
            } else if ("summary" in entry) {
                postcontent = entry.summary.$t;
            } else {
                postcontent = "";
            }
            if ("media$thumbnail" in entry) {
                postimg = entry.media$thumbnail.url;
            } else {
                postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1twoweg50nlY4m4MI_6tRj3Eu2m0hvuXw9BA9Old_Goi3kvgZtNb43T_mDKQeExtHX_f1s4dI4sQD__H5K5Z4OJCX_zw_34tITZO4QbP6YCKOLqVyyfzx13WjtkOJBjoTom16TsIKy2c/s1600/no+image.jpg";
            }
            showblogfeed += "<div class='dhf-elemen'>";
            showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
            showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
            showblogfeed += "<p>" + dhffeed(postcontent, charac) + "...</p>";
            showblogfeed += "</div>";
        }
        document.getElementById("terbaru").innerHTML = showblogfeed;
        showblogfeed = "";
        if (urlprevious) {
            showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
        } else {
            showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
        }
        if (urlnext) {
            showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
        } else {
            showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
        }
        showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
        document.getElementById("dhf-navigasifeed").innerHTML = showblogfeed;
    }

    function navigasifeed(url) {
        var p, parameter;
        if (url == -1) {
            p = urlprevious.indexOf("?");
            parameter = urlprevious.substring(p);
        } else if (url == 1) {
            p = urlnext.indexOf("?");
            parameter = urlnext.substring(p);
        } else {
            parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
        }
        parameter += "&callback=showterbaru";
        incluirscript(parameter);
    }

    function incluirscript(parameter) {
        if (startfeed == 1) {
            removerscript();
        }
        document.getElementById("terbaru").innerHTML = "<div id='dhf-loading'></div>";
        document.getElementById("dhf-navigasifeed").innerHTML = "";
        var archievefeed = urlblog + "/feeds/posts/default" + parameter;
        var terbaru = document.createElement('script');
        terbaru.setAttribute('type', 'text/javascript');
        terbaru.setAttribute('src', archievefeed);
        terbaru.setAttribute('id', 'DHFLABEL');
        document.getElementsByTagName('head')[0].appendChild(terbaru);
        startfeed = 1;
    }

    function removerscript() {
        var elemen = document.getElementById("DHFLABEL");
        var parent = elemen.parentNode;
        parent.removeChild(elemen);
    }
    onload = function () {
        navigasifeed(0);
    }
    //]]>
</script>

Setelah itu barilah keatas halaman untuk mencari kode ]]></b:skin>
jika sudah ketemu letakan kode dibawah ini tepat diatas tag ]]></b:skin>

#dhf-terbaru {
    border: 1px solid #585858;
    width: 100%;
    margin: 0 auto;
}

#terbaru {
    margin: 0px;
}

.dhf-elemen {
    border: 1px solid #ccc;
    margin: 5px 0;
    padding: 5px;
    height: 79px;
}

.dhf-elemen img {
    background: #999;
    padding: 4px;
    float: left;
    height: 70px;
    margin-right: 8px;
    width: 70px;
}

.dhf-elemen h6,.dhf-elemen h6 a {
    font-size: 12px!important;
    font-weight: 700!important;
    margin: 0;
    color: #111;
}

.dhf-elemen:hover {
    background-color: #c3c3c3;
}

.dhf-elemen p {
    font: 14px PT Sans Narrow;
    text-align: justify;
    color: #555;
    line-height: 14px;
    margin: 5px 0;
}

#dhf-loading {
    color: #888;
    font-family: Tahoma;
    font-size: 100px;
    letter-spacing: -10px;
    text-align: center;
    text-shadow: -5px 0 1px #444;
    background: #141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1fNv-cn7pFvltEzpdOurWDw7ejREKOwo462U6gp5MwDBbL9usfWkgO3JXTkEVVFTJ-LXldtXF6MTApCmx0BGPnhbjLi2Hk7ZMo0SG7Z3gWmUxKixIQKOjtyox_jYcIxf2skie1jpAcJk/s1600/loading.gif) no-repeat 50% 50%;
    height: 470px;
    border: 1px solid #c3c3c3;
}

#dhf-navigasifeed {
    border: 1px solid #c3c3c3;
    color: #bbb;
    font-family: Verdana;
    font-size: 12px;
    text-align: center;
    margin: 0px;
}

#dhf-navigasifeed:hover {
    background-color: #c3c3c3;
}

#dhf-navigasifeed a {
    color: #141414!important;
    font-family: Tahoma!important;
    font-size: 12px!important;
    font-weight: 400!important;
    display: block;
    padding: 5px 10px;
}

#dhf-navigasifeed span {
    padding: 5px 10px;
}

#dhf-navigasifeed .next {
    float: right;
}

#dhf-navigasifeed .previous {
    float: left;
}

#dhf-navigasifeed .home {
    text-align: center;
}

#dhf-navigasifeed a:hover,#dhf-navigasifeed span.noactived {
    color: transparant!important;
}

Catatan : silahkan diganti semua kode yang saya tandai dengan warna merah

jika sudah kita beralih ke halaman
tata telak/add gadged
kemudian letakan kode dibawah ini pada box yang tersedia

<div id="terbaru"></div>
<div id="dhf-navigasifeed"></div>

Selesai Silahkan simpan template anda dan lihat hasinya
semoga agan suka dengan Recent Post ini
selamat mencoba semoga bermanfaat....


readmore : http://www.dhf.web.id

Penulis : Imron fhatoni Lokasi : NTB, SUMBAWA

Artikel Membuat Recent Post Dengan Menampilkan Fungsi Next Previous, ditulis oleh Imron fhatoni. Semoga artikel ini dapat menambah wawasan Kita. Silahkan tinggalkan jejak pada form Komentar untuk mempermudah Imron fhatoni berkunjung kembali ke blog sobat.(Wassalam)

Share on Google Plus

About Unknown