Membuat Tombol Subscribe Blog Melayang Dengan CSS Tanpa Javascript

Setiap blog tentu senang kalo banyak yang baca apalagi jika pembacanya adalah para pelanggan atau subscribernya. Untuk itu, pada blog dapat dipasang tombol Subscribe Blog Melayang. Dengan harapan semakin banyak pengunjung yang mengikuti berita terbaru dari blog kita.

Buat kawan blogger yang lagi nyari Tutorial Membuat Tombol Subscribe Blog Melayang Dengan CSS Tanpa Javascript, berikut admin jelaskan caranya ya.

1. Taruh kode di bawah ini di atas /style.

Kode CSS

/* CSS popup*/
#popup-wrap .popup-button { background: #f80538 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkb4JILwO1fCa1rkJEvN4AWh91WcGbchESP2HqLoHVnnYuqwg-6uYS4NDP-gPN8I4ljabfptKpgCfx-e37ZyGmnee2mveeO5cHvyDKgNUON_NXptC3hyogt0p90jML69BIAKVissDkOphC/s1600/envelop.png") no-repeat scroll center center; border-radius: 50%; bottom: 25px; cursor: pointer; height: 70px; left: 25px; position: fixed; width: 70px; z-index: 99999; }/* background bisa diganti dengan warna lain*/
#popup-wrap .popup-button:hover { background-color: #5555CC; }/* background-color bisa diganti dengan warna lain*/

#popup-wrap .popup-bg { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(45deg, #f80538, #623740); transition: opacity .25s ease; z-index: 999999; }/* background bisa diganti putih (#fff) supaya transparan atau warna lain yang disukai*/
#popup-wrap .popup-bg-close { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; }
#popup-wrap .popup-trigger { display: none; }
#popup-wrap .popup-trigger:checked + .popup-bg { opacity: 1; visibility: visible; }
#popup-wrap .popup-trigger:checked + .popup-bg .popup-form { top: 0; }

#popup-wrap .popup-form { transition: top .25s ease; position: absolute; top: -20%; right: 0; bottom: 0; left: 0; max-width: 400px; margin: auto; overflow: auto; padding: 2.5em; max-height: 280px; background: #cc6055; text-align: center; }
#popup-wrap .popup-inner { color: #fff; font-size: 15px; font-family: "Century Gothic", sans-serif; font-weight: bold; line-height: normal; }
#popup-wrap .popup-title { display: block; font-size: 2em; font-weight: normal; margin-bottom: 20px; }
#popup-wrap .popup-content { font-size: 16px; line-height: 26px; }
#popup-wrap .popup-footer { font-size: 75%; font-style: italic; }
#popup-wrap #mailbox,
#popup-wrap #subbutton { background: #A1362A; border: none; border-radius: 3px; box-sizing: border-box; color: #fff; font-family: "Century Gothic",sans-serif; font-size: 12px; font-weight: bold; line-height: 30px; padding: 10px 20px; width: 100%; }
#popup-wrap #mailbox { margin: 0 0 10px; text-transform: lowercase; }
#popup-wrap #subbutton { cursor: pointer; margin: 0; text-transform: uppercase; }
#popup-wrap #subbutton:hover { background: #70261D; }

#popup-wrap .popup-form-close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; }
#popup-wrap .popup-form-close:after,
#popup-wrap .popup-form-close:before { content: ''; position: absolute; width: 5px; height: 1.5em; background: #A1362A; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; }
#popup-wrap .popup-form-close:hover:after,
#popup-wrap .popup-form-close:hover:before { background: #70261D; }
#popup-wrap .popup-form-close:before { transform: rotate(-45deg); }
@media screen and (max-width:480px){
#popup-wrap .popup-button { bottom: 25px; height: 65px; width: 65px; }
}

Kodebackground: linear-gradient(45deg, #f80538, #623740)

akan memberi efek latar belakang warna merah (dengan gradasi). Kamu bisa sesuaikan lagi sesuai keperluan.

2. Taruh kode ini di atas/body.

Kode HTML

<div id='popup-wrap'>
  <!-- Subscribe Trigger -->
       <label class='popup-button' for='popup-trigger' title='Subscribe via email'/>

  <!-- Subscribe Content -->
  <input class='popup-trigger' id='popup-trigger' type='checkbox'/>
  <div class='popup-bg'>
            <label class='popup-bg-close' for='popup-trigger' id='popup-close'/>
            <div class='popup-form'>
                <label class='popup-form-close' for='popup-trigger' id='popup-close'/>
                <div class='popup-inner'>
                    <!-- Opt-In Subscribe -->
                    <span class='popup-title'>Subscribe Via Email</span>
                    <span class='popup-content'>Subscribe to our newsletter to get the latest updates to your inbox. ;-)</span>
                    <br/><br/>
                    <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID_FEEDBURNER_MU&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
                        <input name='uri' type='hidden' value='ID_FEEDBURNER_MU'/>
                        <input name='loc' type='hidden' value='en_US'/>
                        <input id='mailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' required='' type='text' value='Enter your email...'/>
                        <input id='subbutton' title='' type='submit' value='Sign up'/>
                    </form>
                    <br/>
                    <span class='popup-footer'>Your email address is safe with us!</span>
                </div>
            </div><!-- .popup-form -->
  </div><!-- .popup-bg -->
    </div><!-- #popup-wrap -->

3. Kalau sudah selesai, klik Simpan.

Saatnya kamu periksa dan tes hasil pemasangan tombol subscribe blog di atas. Semoga berhasil.

Demikian cara Membuat Tombol Subscribe Blog Melayang Dengan CSS Tanpa Javascript. Semoga bermanfaat.