Kumpulan Widget Statistik Corona Keren Dan Elegan Untuk Blogger

Kumpulan Widget Statistik Corona Keren Dan Elegan Untuk Blogger


Pelajar Design - Pada kesempatan kali ini saya akan membagikan Kumpulan Widget Statistik Corona Keren Dan Elegan Untuk Blogger. Widget ini dipasang agar pengunjung Website Atau Blog tahu perkembangan Virus Corona Diindonesia. Virus Corona merupakan virus yang cepat menular, maka dari itu kalian dianjurkan untuk berdiam diri dirumah (Social Distancing) oleh pemerintah sampai pandemik ini membaik.

Pemerintah sudah menyediakan ruang khusus bagi media untuk terus memperoleh update secara berkala.

Kumpulan Widget Statistik Corona Keren Dan Elegan Untuk Blogger

Sebelumnya Pelajardzgn sudah pernah membahas cara memasang Widget Statistik Corona pada tutorial sebelumnya. Berikut tutorial Cara Memasang Widget Statistik Virus Corona Full Responsive Pada Blogger.

# Widget Statistik Corona Simple 1

1. Masuk ke Blogger.com.
2. Pilih menu Tata Letak > Tambahkan Gadget > HTML/JavaScript. Lalu masukkan kode dibawah ini pada kolom Konten / Content.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var d = new Date();
        $("#date").html(d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear());
        $.ajax({
            url: "https://api.kawalcorona.com/indonesia/",
            success: function (result) {
                $("#terjangkit").html(result[0].positif);
                $("#sembuh").html(result[0].sembuh);
                $("#meninggal").html(result[0].meninggal);
            }
        });
    });
</script>

<div class="pelajardzgn-card">
    <div class="pelajardzgn-info">
        <h2>DATA COVID-19 INDONESIA</h2>
    </div>
    <p class="pelajardzgn-positif">&#128567 Positif: <span id="terjangkit"></span></p>
    <p class="pelajardzgn-sembuh">&#128522 Sembuh: <span id="sembuh"></span></p>
    <p class="pelajardzgn-meninggal">&#128557 Meninggal: <span id="meninggal"></span></p>
    <div class="pelajardzgn-info"><span><em>(Data: kawalcorona.com)</em></span></div>
</div>

<style>
    .pelajardzgn-card {
        padding: 5%;
        border: 1px solid #eaeaea;
        background: #f4f4f4;
        border-radius: 10px
    }

    .pelajardzgn-card p {
        color: #fff
    }

    .pelajardzgn-positif {
        background: #e53935
    }

    .pelajardzgn-sembuh {
        background: #43a047
    }

    .pelajardzgn-meninggal {
        padding: 10px 7px;
        background: #546e7a
    }

    .pelajardzgn-positif,
    .pelajardzgn-sembuh {
        padding: 10px 7px;
        margin-bottom: 1em
    }

    .pelajardzgn-info {
        text-align: center
    }

    .pelajardzgn-card p {
        font-weight: bold
    }
</style>

3. Simpan.

Jika pemasangan kode benar maka hasilnya akan seperti digambar.
Kumpulan Widget Statistik Corona Keren Dan Elegan Untuk Blogger

#Widget Statistik Corona Elegan Style 1 By Kopi.dev

1. Masuk ke Blogger.com.
2. Pilih menu Tata Letak > Tambahkan Gadget > HTML/JavaScript. Lalu masukkan kode dibawah ini pada kolom Content.

<div id="kopi-covid"></div>
<script>
    var f = document.createElement("iframe");
    f.src = "https://widget.kopi.dev/corona";
    f.width = "100%";
    f.height = 380;
    f.scrolling = "no";
    f.frameBorder = 0;
    var rootEl = document.getElementById("kopi-covid");
    console.log(rootEl);
    rootEl.appendChild(f);
</script>

3. Simpan.

Jika pemasangan kode benar maka hasilnya akan seperti digambar.
Kumpulan Widget Statistik Corona Keren Dan Elegan Untuk Blogger

# Widget Statistik Corona Elegan Style 2 By Kopi.dev

1. Masuk ke Blogger.com.
2. Pilih menu Tata Letak > Tambahkan Gadget > HTML/JavaScript. Lalu masukkan kode dibawah ini pada kolom Content.

<div id="kopi-covid"></div>
<script>
    var f = document.createElement("iframe");
    f.src = "https://widget.kopi.dev/corona?dark=true";
    f.width = "100%";
    f.height = 380;
    f.scrolling = "no";
    f.frameBorder = 0;
    var rootEl = document.getElementById("kopi-covid");
    console.log(rootEl);
    rootEl.appendChild(f);
</script>

3. Simpan.

Jika pemasangan kode benar maka hasilnya akan seperti digambar.
Kumpulan Widget Statistik Corona Keren Dan Elegan Untuk Blogger

# Widget Statistik Corona Simple 2

1. Masuk ke Blogger.com.
2. Pilih menu Tata Letak > Tambahkan Gadget > HTML/JavaScript. Lalu masukkan kode dibawah ini pada kolom Content.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var d = new Date();
        $("#date").html(d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear());
        $.ajax({
            url: "https://api.kawalcorona.com/indonesia/",
            success: function (result) {
                $("#terjangkit").html(result[0].positif);
                $("#sembuh").html(result[0].sembuh);
                $("#meninggal").html(result[0].meninggal);
            }
        });
    });
</script>

<div class="pelajardzgn-card">
    <div class="pelajardzgn-info">
        <h2>INDONESIA</h2>
    </div>
    <div class="pelajardzgn-flex">
        <div>
            <p><span id="terjangkit"></span></p>
            <p>Positif</p>
        </div>
        <div class="flex-middle">
            <p><span id="meninggal"></span></p>
            <p>Meninggal</p>
        </div>
        <div>
            <p><span id="sembuh"></span></p>
            <p>Sembuh</p>
        </div>
    </div>
    <div class="pelajardzgn-info"><span><em>(Data: kawalcorona.com)</em></span></div>
</div>

<style>
    .pelajardzgn-card {
        padding: 5%;
        border: 1px solid #929292
    }

    .pelajardzgn-info {
        text-align: center;
    }

    .pelajardzgn-flex {
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .pelajardzgn-flex p {
        font-weight: bold;
        text-align: center;
    }

    .pelajardzgn-flex span {
        color: #e53935
    }

    .flex-middle {
        border-left: 2px solid #eaeaea;
        border-right: 2px solid #eaeaea;
        padding: 0 1em
    }
</style>

3. Simpan.

Jika pemasangan kode benar maka hasilnya akan seperti digambar.
Kumpulan Widget Statistik Corona Keren Dan Elegan Untuk Blogger

# Widget Statistik Corona Simple 3

1. Masuk ke Blogger.com.
2. Pilih menu Tata Letak > Tambahkan Gadget > HTML/JavaScript. Lalu masukkan kode dibawah ini pada kolom Content.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var d = new Date();
        $("#date").html(d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear());
        $.ajax({
            url: "https://api.kawalcorona.com/indonesia/",
            success: function (result) {
                $("#terjangkit").html(result[0].positif);
                $("#sembuh").html(result[0].sembuh);
                $("#meninggal").html(result[0].meninggal);
            }
        });
    });
</script>

<div class="pelajardzgn-card">
    <h2>DATA COVID-19 INDONESIA</h2>
    <p>Positif: <span id="terjangkit"></span>
        <br />Sembuh: <span id="sembuh"></span>
        <br />Meninggal: <span id="meninggal"></span>&nbsp;
    </p>
    <span><em>(Data: kawalcorona.com)</em></span>
</div>

<style>
    .pelajardzgn-card {
        padding: 1.5em;
        background: linear-gradient(45deg, #42a5f5, #2196f3)
    }

    .pelajardzgn-card h2,
    .pelajardzgn-card p,
    .pelajardzgn-card span {
        color: #fff
    }

    .pelajardzgn-card h2 {
        border-bottom: 2px solid #fff
    }

    .pelajardzgn-card p {
        font-weight: bold
    }
</style>

3. Simpan.

Jika pemasangan kode benar maka hasilnya akan seperti digambar.
Kumpulan Widget Statistik Corona Keren Dan Elegan Untuk Blogger

# Widget Statistik Corona Simple 3 With Image

1. Masuk ke Blogger.com.
2. Pilih menu Tata Letak > Tambahkan Gadget > HTML/JavaScript. Lalu masukkan kode dibawah ini pada kolom  Content.

<iframe src="https://covid19.ilmucoding.com/widget" width="100%" scrolling="no" height="250px" style="border:none;"></iframe>

3. Simpan.

Jika pemasangan kode benar maka hasilnya akan seperti digambar.
Kumpulan Widget Statistik Corona Keren Dan Elegan Untuk Blogger

# Widget Statistik Corona Pop Up

1. Masuk ke Blogger.com.
2. Pilih menu Tata Letak > Tambahkan Gadget > HTML/JavaScript. Lalu masukkan kode dibawah ini pada kolom Content.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>
</script><br />
<script type='text/javascript'>
    $(document).ready(function () {
        $('img#closed').click(function () {
            $('#btm_banner').hide(90);
        });
    });
</script>
<style type='text/css'>
    div#btm_banner {
        bottom: 0;
        position: fixed;
        width: 100%;
        opacity: 0.9;
        left: 0;
    }

    div#btm_banner img {
        border: 0;
        cursor: pointer;
    }
</style>
<style>
    .covidcard-body {
        margin: 0;
        padding: 10px;
        position: relative;
    }

    .covidshadow {
        box-shadow: 0 5px 10px rgba(19, 191, 166, 0.3) !important;
    }

    .img-card:before {
        content: '';
        position: absolute;
        background: url(https://kawalcorona.com/data/images/svgs/circle.svg);
        background-position: top right;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        opacity: 0.8;
        right: 0px;
        top: 0px
    }

    .covidlogoindo {
        position: relative;
        bottom: 5px;
    }

    .covidbackground {
        background: #2c3e50;
        color: #fff !important;
    }

    .covidcountry {
        font-size: 30px;
        margin: 0px !important
    }

    .covidcorona {
        padding: 5px 0px;
        margin: 0px !important;
        line-height: 30px
    }

    .covidupdate {
        font-size: 15px;
        margin: 0px !important
    }

    .covidpositif {
        padding: 5px 7px 5px 5px;
        background: #f82649 !important;
    }

    .covidsembuh {
        padding: 5px 7px 5px 5px;
        background: #09ad95 !important;
    }

    .covidmeninggal {
        padding: 5px 7px 5px 5px;
        background: #d43f8d !important;
    }
</style>
<div style='height: 0px;'></div>
<div align='center' id='btm_banner' style='height: auto; z-index: 9999;'>
    <div style='text-align: right; width: auto; height: 16px;'>
        <img id='closed'
            src='http://1.bp.blogspot.com/-XvA7La2fWQU/T8aIU5kxRnI/AAAAAAAAAJA/uw2dWruT2Yg/s1600/close-icon.png' />
    </div>
    <div style='clear: both;'></div>
    <center>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                var d = new Date();
                $("#date").html(d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear());
                $.ajax({
                    url: "https://api.kawalcorona.com/indonesia/",
                    success: function (result) {
                        $("#terjangkit").html(result[0].positif);
                        $("#sembuh").html(result[0].sembuh);
                        $("#meninggal").html(result[0].meninggal);
                    }
                });
            });
        </script>
        <div class="covidbackground covidshadow">
            <div class="covidcard-body img-card">
                <div class="d-flex">
                    <div class="covidlogoindo"> <img src="https://kawalcorona.com/uploads/indonesia-PZq.png" width="50"
                            height="50" alt="Positif" /> </div>
                    <p class="covidcountry">COVID-19 INDONESIA</p>
                    <p class="covidcorona"><b> <span id='terjangkit' class="covidpositif"></span></b> POSITIF, <b><span
                                id='sembuh' class="covidsembuh"></span></b> SEMBUH, <b><span id='meninggal'
                                class="covidmeninggal"></span></b> MENINGGAL</p>
                    <p class="covidupdate">Update Hari ini: <span id="date"></span> | API: kawalcorona.com</p>
                </div>
            </div>
        </div>
    </center>
</div>

3. Simpan.

Jika pemasangan kode benar maka hasilnya akan seperti digambar.
Kumpulan Widget Statistik Corona Keren Dan Elegan Untuk Blogger

# Widget Statistik Corona Simple 4

1. Masuk ke Blogger.com.
2. Pilih menu Tata Letak > Tambahkan Gadget > HTML/JavaScript. Lalu masukkan kode dibawah ini pada kolom Content.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var d = new Date();
        $("#date").html(d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear());
        $.ajax({
            url: "https://api.kawalcorona.com/indonesia/",
            success: function (result) {
                $("#positifix").html(result[0].positif);
                $("#sembuh").html(result[0].sembuh);
                $("#meninggal").html(result[0].meninggal);
            }
        });
    });
</script>
<div class="ikb-orange ikb-shadow">
    <div class="ikb-card-body img-card">
        <div class="d-flex">
            <div class="ikb-logo-id">
                <img alt="Positif" height="50" src="https://kawalcorona.com/uploads/indonesia-PZq.png" width="50" />
            </div>
            <div class="ikb-negara">
                COVID-19 INDONESIA
            </div>
            <div class="ikb-infocorona">
                <b><span class="info-positif" id="positifix"></span></b> POSITIF | <b><span class="info-sembuh"
                        id="sembuh"></span></b> SEMBUH | <b><span class="info-meninggal" id="meninggal"></span></b>
                MENINGGAL
            </div>
            <div class="ikb-pembaruan-info">
                Update Hari ini: <span id="date"></span>
            </div>
        </div>
    </div>
</div>
<style>
    .ikb-card-body {
        margin: 0;
        padding: 20px;
        position: relative;
    }

    .ikb-shadow {
        box-shadow: 0 5px 10px rgba(101, 41, 41, 0.67) !important;
    }

    .img-card:before {
        content: '';
        position: absolute;
        background: url(https://kawalcorona.com/data/images/svgs/circle.svg);
        background-position: top right;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        opacity: 0.8;
        right: 0px;
        top: 0px
    }

    .ikb-logo-id {
        float: right;
        position: relative;
        top: 5px;
    }

    .ikb-orange {
        background: #462e2e;
        color: #fff !important;
        border-radius: 20px;
        background-image: linear-gradient(110deg, rgba(255, 255, 255, 0.1) 16%, rgba(255, 255, 255, 0.1) 17%, rgba(255, 255, 255, 0.05) 17%, rgba(255, 255, 255, 0.05) 23%, transparent 8.5%, transparent 78%, rgba(255, 255, 255, 0.05) 78%, rgba(255, 255, 255, 0.05) 84%, rgba(255, 255, 255, 0.1) 84%, rgba(255, 255, 255, 0.1));
    }

    .ikb-negara {
        font-size: 30px;
        margin: 0px !important
    }

    .ikb-infocorona {
        padding: 5px 0px;
        margin: 0px !important;
        line-height: 30px
    }

    .ikb-pembaruan-info {
        font-size: 20px;
        margin: 0px !important
    }

    .info-positif {
        padding: 5px 7px 5px 5px;
        background: #f82649 !important;
    }

    .info-sembuh {
        padding: 5px 7px 5px 5px;
        background: #09ad95 !important;
    }

    .info-meninggal {
        padding: 5px 7px 5px 5px;
        background: #d43f8d !important;
    }
</style>

3. Simpan.

Jika pemasangan kode benar maka hasilnya akan seperti digambar.
Kumpulan Widget Statistik Corona Keren Dan Elegan Untuk Blogger

# Widget Statistik Corona Header

1. Masuk ke Blogger.com.
2. Pilih menu Tata Letak > Tambahkan Gadget > HTML/JavaScript. Lalu masukkan kode dibawah ini pada kolom  Content.

<style type="text/css">
/* Style widget Covid */
p{margin:0}.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:flex}.data .positif,.data .sembuh,.data .meninggal,.data .indonesia{width:25%;padding:1.5rem 1.5rem;border-radius:5px;position:relative}.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:0 10px}.data .indonesia{margin:0 0 0 10px}.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}@media screen and (max-width:768px){.data .positif,.data .sembuh,.data .meninggal,.data .indonesia{width:48.55%;padding:10px;border-radius:5px;position:relative}.indonesia-title{font-size:18px}.data{display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.data .positif{margin:0 0 auto 0}.data .sembuh{margin:0 0 10px auto}.data .meninggal{margin:0}.data .indonesia{margin:auto 0 auto auto}.emoji{margin-left:auto!important;width:40px!important}}@media screen and (max-width:568px){.data .positif,.data .sembuh,.data .meninggal,.data .indonesia{width:48.55%;padding:10px;border-radius:5px;position:relative}.indonesia-title{font-size:18px}.data{display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.data .positif{margin:0 0 auto 0}.data .sembuh{margin:0 0 10px auto}.data .meninggal{margin:0}.data .indonesia{margin:auto 0 auto auto}.emoji{margin-left:auto!important;width:40px!important}}@media screen and (max-width:468px){.data .positif,.data .sembuh,.data .meninggal,.data .data .positif,.data .sembuh,.data .meninggal,.data .indonesia{width:48.44%;padding:10px;border-radius:5px;position:relative}.indonesia-title{font-size:18px}.data{display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.data .positif{margin:0 0 auto 0}.data .sembuh{margin:0 0 10px auto}.data .meninggal{margin:0}.data .indonesia{margin:auto 0 auto auto}.emoji{margin-left:auto!important;width:40px!important}}@media screen and (max-width:368px){.data .positif,.data .sembuh,.data .meninggal,.data .indonesia{width:100%;padding:10px;border-radius:5px;position:relative}.data .positif{margin:0}.data .sembuh{margin:10px 0 10px 0}.data .meninggal{margin:0 0 10px 0}.data .indonesia{margin:0}}
 </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>

3. Simpan.

Jika pemasangan kode benar maka hasilnya akan seperti digambar.
Kumpulan Widget Statistik Corona Keren Dan Elegan Untuk Blogger

# Widget Statistik Corona Elegan Style 3

1. Masuk ke Blogger.com.
2. Pilih menu Tata Letak > Tambahkan Gadget > HTML/JavaScript. Lalu masukkan kode dibawah ini 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
    }

    .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>

3. Simpan.

Jika pemasangan kode benar maka hasilnya akan seperti digambar.
Kumpulan Widget Statistik Corona Keren Dan Elegan Untuk Blogger

Bagaimana artikel tentang Kumpulan Widget Statistik Corona Keren Dan Elegan Untuk Blogger? Mudah bukan. Apabila kalian memiliki pertanyaan seputar blogger silahkan komen dibawah ya. 

You may like these posts