Cara Membuat Subscribe Box di blogger - Onet4u Tech
Dark
News Update
Loading...

Cara Membuat Subscribe Box di blogger

Cara Membuat Subscribe Box di blogger
Cara Membuat Subscribe Box di blogger
Assalamualaikum...
Hariini saya akan kongsikan cara membuat Subscribe Box  di halaman blogger seperti yang saya gunakan.
Cara Membuat Subscribe Box di blogger

Login ke blogger anda tab pada Theme > Html Editor

Dan maskuak kod css beikut sebelum </head>
#subscribe-wrap{
background-image: url("https://www.oodlesthemes.com/wp-content/uploads/2017/10/OO0122373-Blue-abstract-background-design-copy-copy-590x300.jpg");
background-position:center;background-attachment:fixed;margin:auto;padding:0 20px;overflow:hidden;z-index:2
}
#subscribe-box{max-width:440px;margin:auto;padding:20px;overflow:hidden}#subscribe-box h4{color:#fff;margin-bottom:20px;text-align:center}
#subscribe-box .emailfield{margin:auto}
#subscribe-box .emailfield form{position:relative;text-align:center}#subscribe-box .emailfield form:before{position:absolute;font-family:fontawesome;content:'\f0e0';color:#f1c40f;left:18.7%;top:21%;z-index:2;font-weight:normal}#subscribe-box .emailfield input{background:#fff;position:relative;display:inline-block;padding:12px 12px 12px 42px;color:#555;border:0;font-size:14px;margin-bottom:16px;width:45%;border-radius:3px}#subscribe-box .emailfield input:focus,#subscribe-box .emailfield input:hover{background:#fff;color:#222;outline:none;border:0}#subscribe-box .emailfield .submitbutton{background-color:rgba(99,110,114,.9);color:#fff;margin:0 0 0 10px;padding:12px;width:20%;letter-spacing:.5px;cursor:pointer;font-weight:500;box-shadow:0 1px rgba(0,0,0,.1);border-radius:3px;transition:all .3s}#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover,#subscribe-box .emailfield .submitbutton:focus{background-color:rgba(244,67,54,.9);color:#fff}
@media screen and (max-width:800px){
#subscribe-wrap{padding:20px 0 40px 0}#subscribe-box {padding:0;width:90%}#subscribe-box .emailfield input {width:100%;border-radius:0;margin:auto}#subscribe-box .emailfield .submitbutton{margin:20px 0 0 0;width:100%;border-radius:0}#subscribe-box .emailfield {overflow:hidden;}#subscribe-box .emailfield form:before{left:2.7%;top:12%}}
@media screen and (max-width:480px){
#subscribe-box .emailfield form:before{left:4.7%;top:14%}
}

Masukan code berikut dimana anda ingin menampilkan Subscribe Box

<div id='subscribe-wrap'>
<div id='subscribe-box'>
<h4>Get notify via email</h4>
<div class='emailfield'>
<form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(\&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;' method='post' target='popupwindow'>
<input name='email' placeholder='Email Address' type='text'/>
<input name='uri' type='hidden' value='Onet4ucomTeachForever'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Submit'/>
</form>
</div>
</div>
</div>


Gantikan code yang di higlite dengan code feedburner anda,
Tekan save,
selesai sekarang anda boleh melihat hasilnya .

Thanks, Admin O4U


dottycat
“Don’t try to plan everything out to the very last detail. I’m a big believer in just getting it out there: create a minimal viable product or website, launch it, and get feedback.”

RELATED POSTS

COMMENT

Load Comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel