Cara Memasang Widget Statistik Virus Corona Full Responsive Pada Blogger

Cara Memasang Widget Statistik Virus Corona Full Responsive Pada Blogger


Pelajar Design - Pada kesempatan kali ini saya akan membagikan Cara Memasang Widget Statistik Virus Corona Full Responsive Pada Blogger. Sebelumnya saya sudah pernah memasang widget ini namun karena tidak responsive maka saya rubah sedikit kodenya. Nah, disini saya akan membagikan kode tersebut kepada kalian.

Pemerintah sendiri menyediakan ruang khusus bagi pengguna media sosial untuk terus memperoleh update secara terus menerus setiap harinya. Peran blogger juga berguna dalam penyebaran informasi Statistik Virus Corona ini, dengan adanya Widget Statistik Virus Corona ini para blogger dapat memberikan informasi kepada para pembacanya.

Widget ini sudah banyak dipasang oleh beberapa pemilik Website Atau Blog. Ada beberapa kode yang saya ganti agar tampilan Widget Statistik Corona ini menjadi Responsive.

Menurut Organisasi Kesehatan Dunia (WHO), Corona sudah ditetapkan sebagai pandemi. Seluruh dunia sedang dalam situasi gawat darurat. Oleh karena itu, sekecil apa informasi yang disampaikan sangatlah penting bagi yang membacanya.

Jika tidak salah Virus Corona berasal dari kota Wuhan, China. Dalam beberapa waktu saja Virus Corona dapat menyebar ke beberapa belahan dunia dengan cepat. Virus Corona ini merupakan Virus yang berasal dari hewan Mamalia yang terbang yaitu Kelelawar.

Cara Memasang Widget Statistik Virus Corona Full Responsive Pada Blogger

1. Kalian masuk ke menu Tata Letak atau Layout.
2. Kemudian pilih Tambahkan Gadget atau Add A Gadget.
3. Pada jendela yang muncul silahkan pilih HTML/JavaScript.
4. Terakhir copy dan paste kode pada kolom Content.

<style type="text/css">
    / * Style widget Covid * / p.indonesia-detail {
        margin: 0 !important
    }

    .title-cov {
        text-align: center;
        color: #222;
        font-size: 14px
    }

    .indonesia-title {
        font-size: 20px;
        font-weight: 600
    }

    .keterangan {
        font-size: 10px;
        text-align: left;
        color: #ffffff
    }

    .data {
        margin: 5px 0 10px;
        display: block
    }

    .data .positif,
    .data .sembuh,
    .data .meninggal,
    .data .indonesia {
        width: 100%;
        padding: 0.5rem 1rem;
        border-radius: 5px;
        position: relative;
        width: -webkit-fill-available;
    }

    .data .positif:before,
    .data .sembuh:before,
    .data .meninggal:before,
    .data .indonesia:before {
        content: &#39;
        &#39;
        ;
        position: absolute;
        background: url(https://kawalcorona.com/data/images/svgs/circle.svg);
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: repeat;
        background-position: right;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        top: 0;
        left: 0
    }

    .data .sembuh {
        margin: 10px 0 10px auto
    }

    .data .indonesia {
        margin: 10px 0 0 0
    }

    .data .positif {
        background: #f82649 !important;
        display: flex;
        box-shadow: 0 5px 10px rgba(167, 66, 153, 0.3)
    }

    .data .sembuh {
        background: #09ad95 !important;
        display: flex;
        box-shadow: 0 5px 10px rgba(167, 66, 153, 0.3)
    }

    .data .meninggal {
        background: #d43f8d !important;
        display: flex;
        box-shadow: 0 5px 10px rgba(167, 66, 153, 0.3)
    }

    .data .indonesia {
        background: #fc7303 !important;
        display: flex;
        box-shadow: 0 5px 10px rgba(167, 66, 153, 0.3)
    }

    .emoji img {
        width: 50px
    }

    .emoji {
        margin-left: auto !important;
        width: 50px !important
    }

    .angka {
        font-weight: 600 !important;
        font-size: 20px
    }

    .indonesia-detail {
        width: 100px
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    eval(function (p, a, c, k, e, r) {
        e = function (c) {
            return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c
                .toString(36))
        };
        if (!''.replace(/^/, String)) {
            while (c--) r[e(c)] = k[c] || e(c);
            k = [function (e) {
                return r[e]
            }];
            e = function () {
                return '\\w+'
            };
            c = 1
        };
        while (c--)
            if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
        return p
    }('B C=["\\p\\9\\q\\a\\9\\5\\b","\\v\\1\\h\\5\\a\\9\\5\\b","\\c\\9\\5\\1\\l","\\9\\w\\5\\b\\x","\\c\\1\\b","\\p\\a\\q\\b","\\p\\a\\x\\b","\\9\\D\\a\\m\\l\\a\\m","\\m\\1\\w\\l\\1\\c\\h\\1\\5","\\r\\E\\l\\r\\h\\1\\5","\\q\\r\\F\\1\\c\\h\\1\\5","\\y\\1\\m\\1\\c\\h\\1\\5","\\8\\2\\3\\y\\0\\3\\2","\\G","\\8\\2\\3\\c\\4\\7\\3\\i","\\8\\2\\3\\v\\s\\d\\d\\H\\2\\0\\e","\\i\\3\\f\\d","\\I\\t\\0\\3\\2","\\i\\3\\3\\n\\g\\J\\o\\o\\0\\n\\6\\j\\K\\0\\L\\0\\d\\k\\4\\e\\4\\7\\0\\j\\k\\4\\f\\o\\6\\7\\t\\4\\7\\2\\g\\6\\0\\o","\\n\\4\\g\\6\\3\\6\\z","\\j\\k\\4\\e\\u\\n\\4\\g\\6\\3\\6\\z","\\g\\2\\f\\A\\s\\i","\\j\\k\\4\\e\\u\\g\\2\\f\\A\\s\\i","\\f\\2\\7\\6\\7\\8\\8\\0\\d","\\j\\k\\4\\e\\u\\f\\2\\7\\6\\7\\8\\8\\0\\d","\\0\\M\\0\\N","\\e\\2\\0\\t\\O"]',
        51, 51,
        'x61|x45|x65|x74|x6F|x52|x69|x6E|x67|x41|x55|x49|x4D|x6C|x72|x6D|x73|x42|x68|x2E|x63|x54|x53|x70|x2F|x4A|x4E|x4F|x75|x64|x2D|x46|x50|x4C|x44|x66|x62|var|_0x2460|x47|x4B|x56|x20|x59|x23|x3A|x6B|x77|x6A|x78|x79'
        .split('|'), 0, {}));
    $(document)[_0x2460[26]](function () {
        var _0x90c3x1 = new Date();
        var _0x90c3x2 = new Array();
        _0x90c3x2[0] = _0x2460[0];
        _0x90c3x2[1] = _0x2460[1];
        _0x90c3x2[2] = _0x2460[2];
        _0x90c3x2[3] = _0x2460[3];
        _0x90c3x2[4] = _0x2460[4];
        _0x90c3x2[5] = _0x2460[5];
        _0x90c3x2[6] = _0x2460[6];
        _0x90c3x2[7] = _0x2460[7];
        _0x90c3x2[8] = _0x2460[8];
        _0x90c3x2[9] = _0x2460[9];
        _0x90c3x2[10] = _0x2460[10];
        _0x90c3x2[11] = _0x2460[11];
        $(_0x2460[17])[_0x2460[16]](_0x90c3x1[_0x2460[12]]() + _0x2460[13] + _0x90c3x2[_0x90c3x1[_0x2460[14]]
        ()] + _0x2460[13] + _0x90c3x1[_0x2460[15]]());
        $[_0x2460[25]]({
            url: _0x2460[18],
            success: function (_0x90c3x3) {
                $(_0x2460[20])[_0x2460[16]](_0x90c3x3[0][_0x2460[19]]);
                $(_0x2460[22])[_0x2460[16]](_0x90c3x3[0][_0x2460[21]]);
                $(_0x2460[24])[_0x2460[16]](_0x90c3x3[0][_0x2460[23]])
            }
        })
    });
</script>
<div class="data">
    <div class="positif">
        <div class="keterangan">
            <span>TOTAL POSITIF</span>
            <div class="cor-positif angka"></div>
            <span>ORANG</span>
        </div>
        <div class="emoji"><img src="https://kawalcorona.com/uploads/sad-u6e.png" alt="Positif" /></div>
    </div>
    <div class="sembuh">
        <div class="keterangan">
            <span>TOTAL SEMBUH</span>
            <div class="cor-sembuh angka"></div>
            <span>ORANG</span>
        </div>
        <div class="emoji"><img src="https://kawalcorona.com/uploads/happy-ipM.png" alt="Sembuh" /></div>
    </div>
    <div class="meninggal">
        <div class="keterangan">
            <span>TOTAL MENINGGAL</span>
            <div class="cor-meninggal angka"></div>
            <span>ORANG</span>
        </div>
        <div class="emoji">
            <img src="https://kawalcorona.com/uploads/emoji-LWx.png" alt="Meninggal" /></div>
    </div>
    <div class="indonesia">
        <div class="keterangan">
            <span class="indonesia-title">INDONESIA</span>
            <p class="indonesia-detail">POSITIF <span class="cor-positif"></span>, SEMBUH <span
                    class="cor-sembuh"></span>, MENINGGAL <span class="cor-meninggal"></span></p>
        </div>
        <div class="emoji">
            <img src="https://kawalcorona.com/uploads/indonesia-PZq.png" alt="Indonesia" /></div>
    </div>
</div>
<div class="title-cov">
    Sumber data : Kementerian Kesehatan & JHU. Update terakhir : <span id="date"></span>
</div>

Bagaimana artikel tentang Cara Memasang Widget Statistik Virus Corona Full Responsive Pada Blogger? Mudah bukan. Apabila kalian memiliki pertanyaan seputar blogger silahkan komen dibawah ya.

You may like these posts