For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat widget toko (mode fullpage) di blogger

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

  1. Silahkan kamu login ke blogger menggunakan akun google milikmu
  2. Langkah selanjutnya silahkan pergi ke menu tema atau theme dalam bahasa inggrisnya, Kemudian silahkan kamu pilih menu edit HTML di dalam menu tema
  3. Selanjutnya salin kode HTML di bawah ini, kemudian letakkan di bawah kode <body>
  4. <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

  5. Langkah selanjutnya salin lagi kode javascript di bawah ini kemudian letakkan di atas kode </head>
  6. <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

  7. Kemudian untuk menampilkan widget toko saat di klik silahkan gunakan kode HTML di bawah ini
  8. <label for='forrahShopWr'>
    <!-- svg -->
    </label>

    Info: Atau kamu bisa menggubakan <label for='forrahShopWr'></label> pada setiap tombol svg yang kamu inginkan semoga bermanfaat

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.