Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai cara membuat widget toko di blogger atau membuat widget produk di blogger yang support mode layout dan muncul saat di klik
Info: Oke sobat ICloudzer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Widget Toko
Widget toko merupakan suatu tampilan yang di buat khusus untuk menampilkan berbagai produk beserta harga produk menggunakan tampilan one grid, selain itu widget toko di blogger ini akan muncul saat di klik, jadi kamu harus menentukan tombol khusus yang berfungsi untuk menampilkan widget toko saat di klik
Site in site (fullpage)
Menariknya pada tampilan widget toko nantinya nampak seperti sebuah website di dalam website atau dalam pengertian kerennya site in site menggunakan mode tampilan yang memenuhi layar alias mode full page, karena widget produk ini mendukung penggunaan header blog yang membuat widget toko atau produk di blogger ini semakin mirip dengan website di dalam website, jika kamu tertarik untuk membuat website di dalam website maka tutorial kali ini sangat pas untuk kamu terapkan pada blog anda
Pengeditan mudah
Selain memiliki tampilan yang keren, widget toko di website ini sangat mudah untuk melakukan pengeditan produk misalnya mengubah nama produk, harga produk, gambar produk dan lain sebagainya
Contoh tampilan
Dari pada kamu penasaran dengan bagaimana sih contoh tampilan dari widget toko di blogger, silahkan periksa menggunakan tombol di bawah ini oke
Info: Bagaimana sobat dengan contoh tampilannya keren sekali yak, widget toko akan muncul saat di klik
Cara pembuatan
Baiklah sobat ICloudzer sekarang saatnya admin bakalan menjabarkan mehgenai cara membuat widget toko responsif di blogger, silahkan kamu baca dan ikuti setiap arahan yang admin javarkan di bawah ini
- Silahkan kamu login ke blogger menggunakan akun google milikmu
- Langkah selanjutnya silahkan pergi ke menu tema atau theme dalam bahasa inggrisnya, Kemudian silahkan kamu pilih menu edit HTML di dalam menu tema
- Selanjutnya salin kode HTML di bawah ini, kemudian letakkan di bawah kode <body>
- Langkah selanjutnya salin lagi kode javascript di bawah ini kemudian letakkan di atas kode </head>
- Kemudian untuk menampilkan widget toko saat di klik silahkan gunakan kode HTML di bawah ini
<div class='rahstore-mode'>
<input class='rahShopWrC hidden' id='forrahShopWr' type='checkbox'/>
<div class='rahShopWr'>
<div class='rahShopWrCt' id='rahShopWrB'>
<div class='rahShopWrH'>
<div class='rahShopWrH-in'>
<div id='rahShopWrH'>
<div id='rahShopWrH1'>
<div id='rahShopWrH-inner'>
<img alt='Best Viral Premium Blogger Templates from Icloudice' class='rahShop' height='35px' id='rahShopWrH-img' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjThnHwzfJ3d2PjgeucSUV46l7VdAZMzWzYwFm9YuOHOoTSqkPxhF7ocPLh9O-uIDbAc33xtbvKZfe1oQPS-VsqK3S7haR75Z7yuIDqjoLeLmFaUB8cV98GIHvxHf7zqGk7VpO3P4uDml79/s1600/xmlthemes.png' style='display:block' width='35px'/>
</div>
</div>
</div>
<!-- Menu right -->
<div id='rahShopWrH-r'>
<div id='rahShopWrH-menu'>
<ul>
<!-- Menu dark mode -->
<li class='mD'>
<label onclick='darkMode();vibRate(53)'>
Dark
</label>
</li>
<!-- Menu closing -->
<li>
<label for='forrahShopWr' onclick='vibRate(53)'>
Close
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class='rahShopWrH-wp'>
<br/>
<br/>
<!-- Menu notif -->
<div class='rahAllertCus'>
kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual
</div>
<!-- Judul produk -->
<h2 class='rahShopWrT'>
<center><span>
Welcome to my store limited
</span></center>
</h2>
<!-- Store content -->
<div class='rahallT'>
<!-- Menu produk -->
<li>
<img class='fullN' alt='Download theme blogger mirip xmlthemes.com' class='rahShop' src='https://i.imgur.com/FIm8RDk.png'/>
<div class='rahdeskShp'>
<h2>
Template mirip xmlthemes.com
</h2>
<div class='rah-tag'>
Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia
<i>
lagi <b>Diskon 50%</b>
</i>
</div>
<div class='rah-price1'>
Rp.153.000
</div>
<div class='rahdetail'>
<span class='rahVw'>
<a href='https://wa.me/message/GP2QOWTKWGEVM1' rel='external'>
Beli!
</a>
</span>
<span class='rahRd'>
<a href='themes.icloudice.com'>
Preview!
</a>
</span>
</div>
</div>
</li>
<!-- Menu produk -->
<li>
<img class='fullN' alt='Download theme blogger mirip xmlthemes.com' class='rahShop' src='https://i.imgur.com/FIm8RDk.png'/>
<div class='rahdeskShp'>
<h2>
Template mirip xmlthemes.com
</h2>
<div class='rah-tag'>
Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia
<i>
lagi <b>Diskon 50%</b>
</i>
</div>
<div class='rah-price1'>
Rp.153.000
</div>
<div class='rahdetail'>
<span class='rahVw'>
<a href='https://wa.me/message/GP2QOWTKWGEVM1' rel='external'>
Beli!
</a>
</span>
<span class='rahRd'>
<a href='themes.icloudice.com'>
Preview!
</a>
</span>
</div>
</div>
</li>
<!-- Menu produk -->
<li>
<img class='fullN' alt='Download theme blogger mirip xmlthemes.com' class='rahShop' src='https://i.imgur.com/FIm8RDk.png'/>
<div class='rahdeskShp'>
<h2>
Template mirip xmlthemes.com
</h2>
<div class='rah-tag'>
Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia
<i>
lagi <b>Diskon 50%</b>
</i>
</div>
<div class='rah-price1'>
Rp.153.000
</div>
<div class='rahdetail'>
<span class='rahVw'>
<a href='https://wa.me/message/GP2QOWTKWGEVM1' rel='external'>
Beli!
</a>
</span>
<span class='rahRd'>
<a href='themes.icloudice.com'>
Preview!
</a>
</span>
</div>
</div>
</li>
<!-- Menu produk -->
<li>
<img class='fullN' alt='Download theme blogger mirip xmlthemes.com' class='rahShop' src='https://i.imgur.com/FIm8RDk.png'/>
<div class='rahdeskShp'>
<h2>
Template mirip xmlthemes.com
</h2>
<div class='rah-tag'>
Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia
<i>
lagi <b>Diskon 50%</b>
</i>
</div>
<div class='rah-price1'>
Rp.153.000
</div>
<div class='rahdetail'>
<span class='rahVw'>
<a href='https://wa.me/message/GP2QOWTKWGEVM1' rel='external'>
Beli!
</a>
</span>
<span class='rahRd'>
<a href='themes.icloudice.com'>
Preview!
</a>
</span>
</div>
</div>
</li>
<!-- Menu produk -->
<li>
<img class='fullN' alt='Download theme blogger mirip xmlthemes.com' class='rahShop' src='https://i.imgur.com/FIm8RDk.png'/>
<div class='rahdeskShp'>
<h2>
Template mirip xmlthemes.com
</h2>
<div class='rah-tag'>
Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia
<i>
lagi <b>Diskon 50%</b>
</i>
</div>
<div class='rah-price1'>
Rp.153.000
</div>
<div class='rahdetail'>
<span class='rahVw'>
<a href='https://wa.me/message/GP2QOWTKWGEVM1' rel='external'>
Beli!
</a>
</span>
<span class='rahRd'>
<a href='themes.icloudice.com'>
Preview!
</a>
</span>
</div>
</div>
</li>
</div>
</div>
</div>
</div>
</div>Info: kode HTML di atas sudah admin sesuaikan dengan kode Javascript, jika di ubah maka tampilan dari widget toko tidak akan berfungsi
<script src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/rahShop53.js'></script>Info: Kode javascript di atas sudah admin enkripsi secara sederhana, so jangan mengedit kode apapun entar tampilan widget store atau tokonya tidak berfungsi lagi oke
<label for='forrahShopWr'>
<!-- svg -->
</label>Info: Atau kamu bisa menggubakan <label for='forrahShopWr'></label> pada setiap tombol svg yang kamu inginkan semoga bermanfaat