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