Notifikasi
Notifikasi
Telah rilis pembaruan template Gila Material Pro v1.3. Ada diskon hingga 15% untuk periode 15 - 18 November 2022. KLIK DISINI
Find job vacancies

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


Caution - In the recruitment process, legitimate companies never charge a fee from candidates. If there are companies that charge for interviews, tests, ticket reservations, etc., it is better to avoid them because there are indications of fraud. Do not transfer any payments when applying for a job.
Join the conversation
Post a Comment
Link copied to clipboard