×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Notifikasi Order Pembelian di Blogger Terbaru

Jagoanredesign - Kali ini saya  membagikan sebuah tutorial Cara Membuat Notifikasi Order Pembelian di Blogger, biasanya notifikasi order ini ada di blog atau website jual beli hosting dan domain. Saya tertarik bikin menerapkan diblogger ternyata sanggup dan bagus, apalagi bikin kalian yang website nya ada jual beli suatu product pastinya.

Notifikasi order ini dibuat  menggunakan javascript tanpa jQuery. pemanfaatan data memakai array object pernah bisa saja nanti dapat saya update kembali supaya jadi otomatis mengambil berasal dari suatu database dan dijadikan notifikasi order. 

Cara Membuat Notifikasi Order Pembelian di Blogger

1. Silahkan Login ke Blogger.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Kemudian cari kode berikut ini ]]></b:skin>  atau </style>dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.


/* Notifikasi Order by Jagoan Redesign */
.jagoanorder{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;font-weight:400;line-height:1.6}
.jagoanorder .item{position:fixed;bottom:0;left:0;display:flex;overflow:hidden;z-index:200;max-width:300px;font-size:16px;background:rgba(255,255,255,.95);padding:15px 20px;box-shadow:0 10px 15px rgba(0 0 0 /8%);color:#222;transition:all .4s ease;border-radius:4px;line-height:1.4;opacity:0;visibility:hidden}
.jagoanorder .item.active{left:20px;bottom:20px;opacity:1;visibility:visible}
.jagoanorder .item .image{display:flex;padding-right:20px}
.jagoanorder .item .img{background:#eeeeee url(//lh3.googleusercontent.com/-QlJpOYV6yF4/XNEPty8zjJI/AAAAAAAAF6k/7RaA8suy7AsVhOYwcP6WLMf2qc54GUXWwCEwYBhgL/h60/ava.png);background-size:cover;display:block;width:80px;height:80px;border-radius:80%;box-shadow:0 0 0 4px rgba(0 0 0 0 2%)}
.jagoanorder .item .content{position:relative}
.jagoanorder .item button{display:inline-block;width:30px;height:30px;line-height:30px;font-size:100%;margin:-15px -20px 10px 20px;border:none;background:transparent;color:#222;cursor:pointer;font-weight:500;position:absolute;right:0}
.jagoanorder .item button:before{content:'x'}
.jagoanorder .item .info b{color:#222}
.jagoanorder .item .info a{color:#fd0000;text-decoration:none}
.jagoanorder .item .info a:hover{text-decoration:underline}
.jagoanorder .item small{font-size:75%;opacity:.8;display:block;border-top:1px solid rgba(0,0,0,.06);margin-top:8px;padding-top:8px}
.jagoanorder .item small:after{content:'';display:block;clear:both}
4. Selanjutnya anda cari kode </head> dan tambahkan html dibawah ini tepat Diatas kode tersebut.
 <div class='jagoanorder'/> 
5. Setelah itu anda cari kode </body> dan tambahkan javascript dibawah ini tepat Diatas kode tersebut

<!-- Notifikasi Order by Jagoan Redesign -->
<script>
/*<![CDATA[*/
       const dataOrder = {
            "data":[
                {
                    nama:"Jagoan",
                    image:"https://2.bp.blogspot.com/--GOmtbLhVvs/YEyQFelGFmI/AAAAAAAABWQ/PajsGfgy9HcgLjdqrcTCIEBdW1aT6hy9gCK4BGAYYCw/s1600/20201008_120421.jpg",
                    kota:"Semarang",
                    tanggal:"1 jam yang lalu",
                    produk:"Template",
                    url:"www.jagoanredesign.eu.org"
                },
                {
                    nama:"Redesign",
                    image:"https://2.bp.blogspot.com/--GOmtbLhVvs/YEyQFelGFmI/AAAAAAAABWQ/PajsGfgy9HcgLjdqrcTCIEBdW1aT6hy9gCK4BGAYYCw/s1600/20201008_120421.jpg",
                    kota:"Jakarta",
                    tanggal:"1 hari yang lalu",
                    produk:"Domain",
                    url:"www.jagoanredesign.eu.org"
                },
                {
                    nama:"", // Nama Pembeli
                    image:"", // Gambar profile pembeli
                    kota:"", // kota asal pembeli
                    tanggal:"", // tanggal pembelian
                    produk:"", // pembelian produk apa
                    url:"" // url pembelian apa
                }
                // Paste disini untuk menambah data pembeli
            ]
        };
        dataOrder.data.forEach((el) =>{
            var img = "//lh3.googleusercontent.com/-QlJpOYV6yF4/XNEPty8zjJI/AAAAAAAAF6k/7RaA8suy7AsVhOYwcP6WLMf2qc54GUXWwCEwYBhgL/h60/ava.png";
            if(el.image != ""){
                img = el.image
            }
            document.querySelector('.jagoanorder').innerHTML += '<div class="item"><div class="image"><span class="img" style="background-image:url('+img+')"></div><div class="content"><button class="close"></button><span class="info"><b>'+el.nama+'</b> dari <b>'+el.kota+'</b> telah membeli <a href="'+el.url+'" target="_blank">'+el.produk+'</a><small>'+el.tanggal+'</small></span></div></div>'
        })
        document.querySelector('.jagoanorder > .item:not(:first-child)').classList.remove('active')
        setInterval(() => {
            document.querySelector('.jagoanorder .item:first-child').classList.add('active');
            setTimeout(() => {
                document.querySelectorAll('.jagoanorder .item:first-child').forEach((el) =>{
                    el.classList.remove('active');
                })
                document.querySelector('.jagoanorder').append(document.querySelector('.jagoanorder').childNodes[0])
            }, 4000);
        }, 10000);
        document.querySelectorAll('.item .close').forEach((el) =>{
            el.addEventListener('click', ()=>{
                document.querySelector('.item').classList.remove('active')
            })
        })
/*]]>*/
</script>

5. Silahkan anda SIMPAN TEMA dan Selesai.
Nah, itu adalah tutorial Cara Membuat Notifikasi Order Pembelian di Blogger Terbaru semoga totorial bermanfaat bagi anda semua. jika ada yang ingin  anda tanyakan silakan berkomentar saja di bawah.
Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

0

Post a Comment

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel