Wednesday, February 21, 2018

Cara Mudah Memasang Subscribe Box Popup Pada Blog

Cara Mudah Memasang Subscribe Box Popup Pada Blog

Tags

Memasang Subscribe Box Popup Pada Blog
Subscribe box 

Sobat blogger pasti tau tentang subscribe feed pada blog kan ?. Kalo di perhatikan pada setiap blog yang ada pasti selalu menyediakan winget tersebut. Tujuan dari winget subscribe itu tidak lain adalah supaya para pengunjung dimudahkan untuk berlangganan dengan blog yang bersangkutan. Kalo saya amati winget subscribe ini sepertinya wajib ada untuk setiap blog.

Ini pendapat saya pribadi ya karna saya bicara hanya sesuai fakta dari pengalaman saya selama ngeblog. Winget subscribe ini biasanya langsung terintegrasi dengan url feed blog kita. Nah bagi yang belum membuat url feedburner silahkan bikin terlebih dahulu. Karena tutor kali ini mewajibkan ada url feed blog supaya pemanfaatan dari tutor ini bisa lebih sempurna.

Winget subscribe yang akan kita bahas yaitu winget subscribe dengan efek popup pada blog. Jadi winget ini tidak terlalu memakan tempat karena hanya butuh satu buah button untuk memunculkanya. Untuk contoh sobat bisa lihat pada gambar di atas atau lihat langsung pada winget subscribe blog saya ini.

Baiklah bagi sobat yang ingin mencoba menggunakan subscribe jenis ini pada blog. Sobat bisa ikuti beberapa langkah berikut ini. Oh iya winget ini enteng tidak membuat berat loading dari blog. Jadi saya rasa winget ini keren gak usah kawatir, sebetulnya ide memasang winget subscribe popup ini terinspirasi dari webnya tirtoid.

Langkah-langkah.


Langkah pertama yang harus sobat lakukan tentu login dan buka dashboard blog sobat. Kemudian menutu ke tema dan edit HTML. Selanjutnya copy kode CSS berikut ini dan letakan diatas. ]]></b:skin>

/* CSS Subscribe rancax */
.rancak{padding:8px;margin:20px 0;overflow:hidden;background:#3f96ff}
.rancak{width:auto;padding:10px;border-radius:5px;background:#3f96ff;font:bold 17px/40px Verdana,serif;color:#fff;text-shadow:1px 2px 1px 0;text-align:center;transition:all .8s;-moz-transition:all .8s;-webkit-transition:all .8s;-ms-transition:all .8s;-o-transition:all .8s}
.rancak:hover{color:#080808;text-shadow:1px 2px 2px #111;transform:rotate(20deg);-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);box-shadow:0 #fff}
#popup-wrap .popup-bg{opacity:0;visibility:hidden;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.8);transition:opacity .25s ease;z-index:999999}
#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:#fff;text-align:center}
#popup-wrap .popup-inner{color:#000;font-size:15px;font-family:&quot;Century Gothic&quot;,sans-serif;font-weight:700;line-height:normal}
#popup-wrap .popup-title{display:block;font-size:2em;font-weight:400;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:#3f96ff;border:0;border-radius:3px;box-sizing:border-box;color:#fff;font-family:&quot;Century Gothic&quot;,sans-serif;font-size:12px;font-weight:700;line-height:30px;padding:10px 20px;width:100%}
#popup-wrap #mailbox{background:#BCBCBC;margin:0 0 10px;text-transform:lowercase}
#popup-wrap #subbutton{cursor:pointer;margin:0;text-transform:uppercase}
#popup-wrap #subbutton:hover{background:#3C9BC8}
#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:&#39;&#39;;position:absolute;width:5px;height:1.5em;background:#000;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:#868686}
#popup-wrap .popup-form-close:before{transform:rotate(-45deg)}

Langkah selanjutnya adalah sobat copy kode berikut ini dan tempatkan diatas body penutup template. </body>

<!-- Subscribe rancax popup-->
<div id='popup-wrap'>
<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'>
<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='https://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=###&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='###'/>
<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>
</div>
</div>

Untuk id feedburnernya sobat ganti yang saya beri tanda ### dengan id feed dari blog sobat. Nah sampai disini masih belum selesai sobat. Masih ada langkah ketiga atau langkah terakhir untuk memunculkan button pemanggil popup dari subscribenya berikut kodenya.

<div class='rancak'>
<label class='rancak' for='popup-trigger'><i class='fa fa-bell'/> &#160; Subscribe for updates</label></div>

Sobat boleh meletakan kode diatas dimana saja di bawah share button juga boleh seperti subscribe button dari blog saya ini. Sampai di sini seharusnya sobat sudah berhasil memasang subscribe popup pada blog sobat. Jika ada yang perlu di tanyakan silahkan tulis pada kolom komentar. Perlu diingat subscribe ini menggunakan font awesome untuk yang belum ada font awesome pada blognya silahkan di pasang dulu. Happy blogging sobat blogger smoga pembahasan ini bermanfaat.

Buka Komentar

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
EmoticonEmoticon