FmD4FRX3FmXvDZXvGZT3FRFgNBP1w326w3z1NBMhNV5=
items

Cara Membuat Widget Live Sales di Blog SEO Friendly

ndisaen.com - Karena banyak yang mempertanyakan  terkait Tutorial Cara Membuat Widget E-Commerce Live Sales yang SEO Friendly di Blog, maka blog ndisaen akan memberikan panduan terkait cara membuatnya. 

Cara Membuat Widget Live Sales di Blog SEO Friendly


Untuk DEMO tampilan widget live sales, seperti dibawah ini: Tunggu beberapa detik

Nah bagaimana, apakah tampilan widget Live Sales diatas sudah sesuai dengan apa yang Anda bayangkan? Jika ya, berikut langkah-langkah cara pembuatannya di Blogger:

Panduan Cara Membuat Widget Live Sales di Blog

1. Langkah Pertama , silahkan simpan kode CSS dibawah ini sebelum tag </head> pada kode EDIT HTML Template Blogger Anda.
<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(//lh3.googleusercontent.com/-QlJpOYV6yF4/XNEPty8zjJI/AAAAAAAAF6k/7RaA8suy7AsVhOYwcP6WLMf2qc54GUXWwCEwYBhgL/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>  
2. Langkah Kedua, simpan kode HTML/Javascript dibawah ini diatas 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": "Template Blog NDISAEN.COM SEO Friendly Top #1",
        "productURL": "https://www.ndisaen.com/2020/10/cara-membuat-widget-live-sales-di-blog.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": "Jasa Menulis Artikel SEO 2020",
        "productURL": "https://www.ndisaen.com/2020/10/cara-membuat-widget-live-sales-di-blog.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": "Aplikasi Whatsapp MOD Gratis 2020",
        "productURL": "https://www.ndisaen.com/2020/10/cara-membuat-widget-live-sales-di-blog.html",
    },
};
//]]>
</script>
<script type="text/javascript" src="https://jasadesign-bdg.github.io/LiveSales-Static-Widget/livesales.js"></script>
Jika sudah di salin dan tempel dalam kode EDIT HTML Blogger Anda, selanjutnya silahkan edit data array pada ( var dataSales = { .... DATA .... } ) dibagian kode HTML dan Javascript.
No Info Data Keterangan
1 screenshotURL URL Screenshot / Bukti Penjualan ( Format : Image/JPG - Ratio 9:16 / Mobile )
2 avatarURL URL Avatar / Foto Profil Pembeli ( Format : Image/JPG - Ratio 1:1 / 60x60 Pixel )
3 time Timestamp / Tanggal Pembelian ( Format : YYYY-MM-DD / TAHUN-BULAN-TANGGAL )
4 productName Nama Produk yang dibeli ( Format : Text )
5 productURL URL Produk yang dibeli ( Format : Link Produk )
Pertanyaan yang sering diajukan
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 :)
73745675015091643