Membuat Diskusi Seru di Halaman Stastis - OTODIDAK27

Membuat Diskusi Seru di Halaman Stastis

Pada artikel ini, saya telah membuat percobaan yang telah diperbarui dengan judul "Memuat Komentar Lebih Banyak". di tutorial ini saya menggunakan data dari komentar umpan dalam hubungannya dengan ajax.. Sehingga Ensikology dapat memuat halaman tanpa reload.
Membuat Diskusi Seru di Halaman Stastis
Langkah pertama.

1. Membuat Kode HTML pada bagian <body>...</body>
<div id="komentar-ensikology">
    <h3>Diskusi Seru di Ensikology</h3>
    <div class="komentar_ensikology"></div>
    <div class="lebih-banyak"><a class="load-komentar-ensikology">Lihat Lebih Banyak</a>
        <div class="loading-gan"><span></span><span></span><span></span></div>
    </div>
</div>

2. Tambahkan CSS dibawah ini.
    .komentar-konten-ensikology {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        margin: 0 0 .7em;
    }
    .komentar-img {
        max-width: 80px;
        margin: 0 .5em 0 0;
    }
    .komentar-img img {
        height: 40px;
        width: 40px;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
    }
    .komentar-user a {
        color: #000;
        font-weight: bold;
        text-decoration: none
    }
    .komentar-user,
    .komentar-summary {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
    }
    .lebih-banyak .loading-gan {
        display: none
    }
    .load-komentar-ensikology {
        cursor: pointer;
        padding: 3px 15px 6px;
        border: 1px solid #ddd;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px
    }
    .load-komentar-ensikology:hover {
        background: #f5f5f5
    }
    .loading-gan span {
        margin: 0 3px 0 0;
        display: inline-block;
        width: 20px;
        height: 20px;
        background: #000;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        -webkit-animation: loading-gan .8s linear infinite alternate;
        -moz-animation: loading-gan .8s linear infinite alternate;
        -o-animation: loading-gan .8s linear infinite alternate;
        animation: loading-gan .8s linear infinite alternate
    }
    .loading-gan span:nth-of-type(1) {
        -webkit-animation-delay: -.8s;
        -moz-animation-delay: -.8s;
        -o-animation-delay: -.8s;
        animation-delay: -.8s
    }
    .loading-gan span:nth-of-type(2) {
        -webkit-animation-delay: -.5s;
        -moz-animation-delay: -.5s;
        -o-animation-delay: -.5s;
        animation-delay: -.5s
    }
    .loading-gan span:nth-of-type(3) {
        -webkit-animation-delay: -.2s;
        -moz-animation-delay: -.2s;
        -o-animation-delay: -.2s;
        animation-delay: -.2s
    }
    @-webkit-keyframes loading-gan {
        from {
            -webkit-transform: scale(0);
            transform: scale(0)
        }
        to {
            -webkit-transform: scale(1);
            transform: scale(1)
        }
    }
    @-moz-keyframes loading-gan {
        from {
            -moz-transform: scale(0);
            transform: scale(0)
        }
        to {
            -moz-transform: scale(1);
            transform: scale(1)
        }
    }
    @-o-keyframes loading-gan {
        from {
            -o-transform: scale(0);
            transform: scale(0)
        }
        to {
            -o-transform: scale(1);
            transform: scale(1)
        }
    }
    @keyframes loading-gan {
        from {
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -o-transform: scale(0);
            transform: scale(0)
        }
        to {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1)
        }
    }

3. Kemudian pastekan juga kode JS ini.
   // Memuat Komentar Lebih Banyak by Ensikology.blogspot.com
var numComments = 10, // Jumlah Komentar
    avatarSize = 36, // Ukuran Avatar Ensikology
    characters = 36; // Jumlah Karakter
var _countC = 0,_totalC;
function loadComments(e) {
    for (var a = 0; a < e.feed.entry.length; a++) {
        for (var t = 0; t < e.feed.entry[a].link.length; t++)
            if ("alternate" == e.feed.entry[a].link[t].rel) {
                var r = e.feed.entry[a].link[t].href;
                break
            } var n = e.feed.entry[a].author[0].gd$image.src;
        if ("https://img1.blogblog.com/img/b16-rounded.gif" !== n) var s = e.feed.entry[a].author[0].gd$image.src.replace("s512-c", "s" + avatarSize + "-c");
            else s = "//1.bp.blogspot.com/-TP706VehRbw/XP103mEV5UI/AAAAAAAABtU/Myv7LQ9XDfscfSv5xplUnSJorrUIrxqFQCLcBGAs/s" + avatarSize + "-c/ensikology.png";
        if (e.feed.entry[a].author[0].uri) var o = e.feed.entry[a].author[0].uri.$t;
        else o = "javascript:void(0)";
        var c = e.feed.entry[a].author[0].name.$t,
            l = e.feed.entry[a].summary.$t.replace(/(<([^>]+)>)/gi, ""),
            i = l;
        if (l.length > characters) {
            var d = l.substring(0, characters - 3),
                u = d.lastIndexOf(" ");
            l = d.substring(0, u) + " ..."
        }
        $(".komentar_ensikology").append('<div class="komentar-konten-ensikology"><div class="komentar-img"><a href=' + o + "><img src=" + s + ' /></a></div><div class="rc-main"><span class="komentar-user"><a href=' + r + ">" + c + '</a></span><span class="komentar-summary" title="' + i + '">' + l + "</span></div></div>")
    }
}
$(function() {
    $.ajax({
        url: "https://ensikology.blogspot.com/feeds/comments/summary",
        type: "get",
        data: {
            alt: "json",
            "max-results": numComments
        },
        dataType: "jsonp",
        jsonpCallback: "loadComments",
        success: function(e) {
            _totalC = e.feed.openSearch$totalResults.$t;
            _countC += e.feed.entry.length;
            _totalC <= numComments && $(".load-komentar-ensikology").hide();
            $(".load-komentar-ensikology").on("click", function(e) {
                e.preventDefault();
                var a = $(this);
                _countC < _totalC && ($(".lebih-banyak .loading-gan").show(), a.hide(), setTimeout(function() {
                    $.ajax({
                        url: "https://ensikology.blogspot.com/feeds/comments/summary",
                        type: "get",
                        data: {
                            alt: "json",
                            "max-results": numComments,
                            "start-index": _countC + 1
                        },
                        dataType: "jsonp",
                        jsonpCallback: "loadComments",
                        success: function(e) {
                            a.show();
                            $(".lebih-banyak .loading-gan").hide();
                            _countC += e.feed.entry.length;
                            _countC == _totalC && a.html("All comments have been loaded !")
                        }
                    })
                }, 1000))
            })
        }
    })
});h

Simpan dan lihat hasilnya gan.

Catatan: Silahkan diubah kembali class atau id css nya biar nama ensikology tidak dianggap lagi asw.

Semoga sukses gan !

Demo Memuat Komentar Lebih Banyak

# blog

https://www.otodidak27.com/2019/06/membuat-diskusi-seru-di-halaman-blogger.html

0 Response to "Membuat Diskusi Seru di Halaman Stastis"

Emoticon
Urutan

Post a Comment

Beri apresiasi terhadap thread ini Gan!

Anda dan 0 lainnya
Suka
Jadilah yg pertama menyukai

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright Ensikology All Rights Reserved
Powered by Blogger