Cara Membuat Kotak Subscribe Keren di Blog

Cara Membuat Kotak Subscribe Keren di Blog
Daftar Isi Artikel
Cara Membuat Kotak Subscribe di Blog
Cara Membuat Kotak Subscribe Keren di Blog - Kotak Subscribe atau biasa disebut Subscription Box dibuat guna memudahkan pengunjung untuk berlangganan pada blog kita melalui feedburner.

Setelah pengunjung setia anda berlangganan, pengunjung akan mendapatkan notifikasi dari email ketika blog anda memiliki artikel baru. Pastinya sangat bermanfaat bukan?

Kali ini kita membuat widget kotak subscribe keren hanya dengan menggunakan HTML dan dipadukan dengan CSS yang membuat tampilan menjadi menarik dan ringan pastinya. Lantas, bagaimana cara membuatnya? ikuti langkah demi langkah berikut ini.

Cara Membuat Subscribe di Blogger

Sebelum beranjak ke tutorial membuat kotak subsribe, 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 tepat DIATAS </style> atau ]]></b:skin>.
  4. #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:hover{ background: #133b2d;}
  5. Lalu klik Simpan.
  6. Masih di dasboard blogger, pergi ke menu  Tata Letak  Tambah Gadget  HTML/JavaScript .
  7. Masukkan kode dibawah ini.
  8. <div id='subscribe-box'>
    <div class='title'>
    Renovasi Otak
    </div>
    <p>
    Ingin mendapatkan informasi gratis terbaru setiap hari dari kami? Daftarkan nama dan email anda 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.
Tampilannya akan seperti ini, silahkan ubah warna gradient sesuai keinginan kalian.
See the Pen Subscribe Box - Renovasi Otak by Nando Rifky (@nandorifky) on CodePen.

Ya, itulah cara membuat kotak subscribe di blogger yang sering disebut subscribtion box, semoga bermanfaat.

  1. Untuk membuat judul komentar, gunakan <i rel="h2">Judul Komentar</i>
  2. Untuk membuat kotak catatan, <i rel="quote">catatan</i>
  3. Untuk membuat teks stabilo, <i rel="mark">mark</i>
  4. Untuk membuat teks mono, <i rel="kbd">kbd</i>
  5. Untuk membuat kode singkat, <i rel="code">shorcode</i>
  6. Untuk membuat kode panjang, <i rel="pre"><i rel="code">potongan kode</i></i>
  7. Untuk membuat teks tebal, <strong>tebal</strong> atau <b>tebal</b>
  8. Untuk membuat teks miring, <em>miring</em> atau <i>miring</i>

Baca Juga:

Baca Juga:

Baca Juga:


Konten Unggulan