Membuat Widget Subscription Box untuk Blogger

Allow, selamat sore, pada kali ini akan membawakan tentang bloggingpro Membuat Widget Subscription Box untuk Blogger simak selengkapnya

Membuat Widget Subscription Box untuk Blogger - Tentunya para blogger sudah tidak asing dengan widget yang satu ini. Yap, benar Subscription Box, subscription box dibuat guna memudahkan tamu untuk berlangganan pada blog saya melalui feedburner. Setelah tamu setia awak berlangganan, tamu bakal mendapatkan notifikasi dari email ketika blog awak memiliki artikel baru. Pastinya sangat bermanfaat bukan?

Kali ini saya melaksanakan widget Subscription Box hanya dengan menggunakan HTML dan dipadukan dengan CSS yang melaksanakan tampilan menjadi menarik dan ringan pastinya. Lantas, bagaimana cara membuatnya? ikuti langkah demi langkah bersama-sama ini.

Cara Membuat Widget Subscription Box

Sebelum beranjak ke tutorial melaksanakan widget ini, pastikan kalian sudah terdaftar di FeedBurner. Jika belum, silahkan daftar terlebih dahulu.

1. Login ke akun blogger kalian

2. Pergi ke menu

Template

➤

Edit HTML

3. Letakkan kode css dibawah ini benar DIATAS </style> atau ]]></b:skin>

#subscribe-box margin:0;padding:0;width: 100%;height: auto;border-radius: 2px;background: linear-gradient(45deg, #7dffcb, #00ff77, #00ffc3, #00fff7, #00d5ff, #035787);
    background-size: 500% 500%;
    -webkit-animation: ROGradient 9s ease infinite;
    -moz-animation: ROGradient 9s ease infinite;
    animation: ROGradient 9s ease infinite;

@-webkit-keyframes ROGradient 
    0%background-position:0% 50%
    50%background-position:100% 50%
    100%background-position:0% 50%

@-moz-keyframes ROGradient 
    0%background-position:0% 50%
    50%background-position:100% 50%
    100%background-position:0% 50%

@keyframes ROGradient 
    0%background-position:0% 50%
    50%background-position:100% 50%
    100%background-position:0% 50%

#subscribe-box .title padding: 10px 25px;line-height: 30px;font: 26px Oswald;color: black;text-align: center;text-transform:uppercase;border-radius:2px 2px 0 0;
#subscribe-box p font-family: 'Droid Serif';font-size: 14px;color:black;line-height:20px;padding: 10px 20px 0 20px;margin: 0; text-align: center;
#subscribe-box .emailfield padding: 0px 20px 10px;
#subscribe-box .emailfield input box-sizing: border-box;line-height:15px;color: #777;padding: 10px;margin-top: 10px;font-size: 15px;font-family: 'Droid Serif';border:0;border-radius: 2px;width:100%;
#subscribe-box .emailfield input:focus outline: none;
#subscribe-box .emailfield .submitbutton width:100%;background: #00784e;color: white;border:none;outline: none; cursor:pointer; -webkit-transition: background 1.7s ease;
#subscribe-box .emailfield .submitbutton:hoverbackground: #133b2d;

4. Lalu klik Simpan

5. Masih di dasboard blogger, angkat kaki ke menu

Tata Letak

➤

Tambah Gadget

➤

HTML/JavaScript

6. Masukkan kode dibawah ini

<div id='subscribe-box'>
<div class='title'>
Renovasi Otak
</div>
<p>
Ingin mendapatkan informasi gratis terbelakang setiap hari dari kami? Daftarkan nama dan email awak sekarang juga.
</p>
<div class='emailfield'>
              <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=nandorifky', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == "") this.value = "Your Name";' onfocus='if (this.value == "Your Name") this.value = "";' value='Your Name' />
               <input type='text' name='email' onblur='if (this.value == "") this.value = "Your Email";' onfocus='if (this.value == "Your Email") this.value = "";' value='Your Email' />
<input name='uri' type='hidden' value='nandorifky'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='submitbutton' type='submit' value='Submit'/>
              </form>
</div>
</div>

Ubah https://feedburner.google.com/fb/a/mailverify?uri=nandorifky dengan url Feedburner anda.

Incoming Search Terms

cara melaksanakan kotak subscribe blog keren elegan
cara memakai kotak berlangganan di blog
cara menambahkan newslatter di blog
subscribe box untuk blog
kotak berlangganan blogspot

DONASI VIA PAYPAL Bantu berikan bantuan jika artikel bermanfaat. Donasi bakal digunakan sebaik mungkin untuk kepentingan renovasi-otak.blogspot.com. Terimakasih.

begitulah penjelasan tentang Membuat Widget Subscription Box untuk Blogger semoga artikel ini berfaedah salam

tulisan ini diposting pada tag bloggingpro, download lagu renovasi otak, lagu renovasi otak, , tanggal 27-09-2019, di kutip dari https://renovasi-otak.blogspot.com/2019/07/widget-subscription-box-blogger.html

Keywords 5

Cari Blog Ini