Cara Membuat Widget Live Sales (Statis) seperti SEOTemplate.web.id

Widget Live Sales ini dibuat oleh Jasa-Design.web.id dan di desain khusus untuk Website E-commerce atau Toko Online seperti Landing Page Penawaran Produk, Marketplace, dsb.

Alhamdulillah Pada kesempatan ini saya Kang Rian admin Jasa-Design.web.id ingin berbagi sedikit ilmu tentang "Cara Membuat Widget Live Sales (Statis) seperti SEOTemplate.web.id" gratis untuk sobat blogger / admin website baik pemilik landing page penawaran produk, maupun Pengusaha / UMKM yang memiliki toko online dan semacamnya.

Sebetulnya, postingan ini saya buat karena ada permintaan dari Teman Facebook saya yang menginginkan Widget Live Sales yang saya buat di situs SEOTemplate.web.id



Baiklah, tidak terlalu banyak perkenalan soal Widget Live Sales (Statis) yang akan saya bagikan ini, mungkin ada beberapa teman-teman yang sudah tau tentang widget seperti ini. berikut adalah live demo nya:

Apa keuntungan menggunakan Widget "Live Sales / Notifikasi Penjualan" ini?

Sangat menguntungkan sekali! kenapa? karena dengan menggunakan / menginstall widget ini secara langsung akan meningkatkan "Trust/Kepercayaan" dari Calon Pembeli Produk2 di website sobat! kurang lebih fungsi nya sama seperti Testimonial. begitu sob :)

Langkah-langkah Membuat Widget Live Sales (Statis) seperti SEOTemplate.web.id :

Ok langsung saja, Pertama simpan kode CSS berikut ini tepat sebelum tag </head> dalam kode HTML Website sobat :

<style>
* {
    margin: 0;
    padding: 0;
    outline: none !important;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    word-wrap: break-word;
    -webkit-font-smoothing: subpixel-antialiased;
}

body {
    background: #f5f5f5;
    font-family: 'Roboto', sans-serif;
    display: flex;
    min-height: 100vh;
}

.wrapperInfo {
    max-width: 80%;
    display: block;
    margin: auto;
    text-align: center;
}

.liveSales_widget * {
    margin: 0;
    padding: 0;
    outline: none !important;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    word-wrap: break-word;
    -webkit-font-smoothing: subpixel-antialiased;
}

.liveSales_widget {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

.liveSales_widget a {
    text-decoration: none;
}

.liveSales_widget .item {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 300;
    max-width: 300px;
    font-size: 95%;
    background: rgba(255, 255, 255, .95);
    padding: 15px 20px;
    border-radius: 6px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
    color: #888;
    transition: .4s;
    opacity: 0;
    visibility: hidden;
}

.liveSales_widget .item:hover {
    background: #fff;
}

.liveSales_widget .item span.avatarURL {
    background: #fafafa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh023Y-nsjo8uWo6U6LPlVpddsxZ8UyZwXxmGBTxuFLcuC7-vQNRiUAWxhZNvJE4qWpkE9P2_WsctJekRvgGttFBmcgG5u24tLiHUDPL2q0Tf0y8wKPxm-BQeAFOvOFMUYAUi8M2A6MGDE/h60/ava.png) no-repeat center center;
    background-size: cover;
    display: block;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    line-height: 1;
    float: left;
    margin-bottom: 10px;
}

.liveSales_widget .item.active {
    left: 20px;
    bottom: 20px;
    opacity: 1;
    visibility: visible;
}

.liveSales_widget .item.hidden {
    left: -40px !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

@media only screen and (max-width: 1068px) {
    .liveSales_widget .item.active {
        bottom: 15px;
        left: 15px;
        max-width: 290px;
    }
}

.liveSales_widget .item i {
    display: inline-block;
    vertical-align: middle;
    font-size: 200%;
    margin-right: 5px;
    color: #4285F4;
}

.liveSales_widget .item h5 {
    display: inline-block;
    float: right;
    margin-top: -15px;
    margin-right: -20px;
    border-top: 0;
    border-right: 0;
    overflow: hidden;
    margin-left: 10px;
    margin-bottom: 10px;
}

.liveSales_widget .item h5 a {
    display: inline-block;
    vertical-align: middle;
    padding: 5px 10px;
    border: .5px solid #eee;
    border-radius: 0 0 0 6px;
    border-top: 0;
    border-right: 0;
}

.liveSales_widget .item h5 a:active {
    background: #fafafa;
}

.liveSales_widget .item h5 a i {
    display: inline-block;
    vertical-align: middle;
    font-size: 150%;
    margin: 0 5px;
    color: #4E5665;
}

.liveSales_widget .item h5 a:hover i {
    color: #4285F4;
}

.liveSales_widget .item .infoOrder b {
    font-weight: 600;
    color: #4E5665;
}

.liveSales_widget .item .infoOrder a {
    color: #4285F4;
}

.liveSales_widget .item .infoOrder small {
    display: block;
    margin-top: 10px;
}

.liveSales_widget .item .infoOrder small a {
    display: inline-block;
    vertical-align: middle;
    padding-left: 15px;
    border-left: .5px solid #eee;
    float: right;
    color: #888;
}
</style>

Selanjutnya Simpan kode HTML & JavaScript berikut ini tepat di atas tag </body> :

<div class='liveSales_widget'></div>
<script type="text/javascript">
//<![CDATA[
var dataSales = {
    "Nama Pembeli 1": {
        "screenshotURL": "https://lh3.googleusercontent.com/u/0/d/1owCPx0Ky1hmxoozoMtJzhPkCHTNR2ZYi=w500",
        "avatarURL": "https://i.ibb.co/kQ1vzRs/image.png",
        "time": "2019-05-23",
        "productName": "TOKO WhatsApp - Premium Blogger Template",
        "productURL": "https://www.seotemplate.web.id/2019/05/toko-whatsapp-premium-blogger-template.html",
    },
    "Nama Pembeli 2": {
        "screenshotURL": "https://lh3.googleusercontent.com/u/0/d/12E_fombsKq9W7NopNsptGhhQxxDssk_8=w500",
        "avatarURL": "https://i.ibb.co/Y2Dz1Gx/image.png",
        "time": "2019-05-23",
        "productName": "TOKO WhatsApp - Premium Blogger Template",
        "productURL": "https://www.seotemplate.web.id/2019/05/toko-whatsapp-premium-blogger-template.html",
    },
    "Nama Pembeli 3": {
        "screenshotURL": "https://lh3.googleusercontent.com/u/0/d/1eb5b7YUM32Cs0UDfN3h6fiMq6c1Ig6Tz=w500",
        "avatarURL": "https://i.ibb.co/Ptn8FwY/image.png",
        "time": "2019-05-23",
        "productName": "TOKO WhatsApp - Premium Blogger Template",
        "productURL": "https://www.seotemplate.web.id/2019/05/toko-whatsapp-premium-blogger-template.html",
    },
};
//]]>
</script>
<script type="text/javascript" src="https://jasadesign-bdg.github.io/LiveSales-Static-Widget/livesales.js"></script>

Terakhir! Ubah data Array var dataSales = { .... DATA .... } pada Kode JavaScript di atas, sesuai dengan data penjualan website sobat! untuk detailnya silahkan cek tabel keterangan data berikut ini :

Info Data	Keterangan
screenshotURL	URL Screenshot / Bukti Penjualan ( Format : Image/JPG - Ratio 9:16 / Mobile )
avatarURL	URL Avatar / Foto Profil Pembeli ( Format : Image/JPG - Ratio 1:1 / 60x60 Pixel )
time	Timestamp / Tanggal Pembelian ( Format : YYYY-MM-DD / TAHUN-BULAN-TANGGAL )
productName	Nama Produk yang dibeli ( Format : Text )
productURL	URL Produk yang dibeli ( Format : Link Produk )

Tambahan: Untuk sobat yang tidak memiliki hosting untuk mengunggah / upload image Screenshot & Avatar Pembeli, saya sarankan sobat menggunakan layanan situs https://id.imgbb.com/ selain mudah digunakan, gambar yang diupload cukup cepat ketika di akses!

Sekian & Semoga Bermanfaat! Jika ada pertanyaan, jangan sungkan untuk bertanya pada kolom komentar dibawah postingan ini. terima kasih :)