Cara Membuat Subscribe Box Ala Arlina Design

Cara-Membuat-Subscribe-Box-Ala-Arlina-Design Cara Membuat Subscribe Box Ala Arlina Design ikramlink
Unknown
Arlina Design, siapa sih yang gak kenal Arina Design di dunia blogger, selain artikelnya sangat bermanfaat juga sangat membantu dalam penyemangat didunia blogger dengan karya karya nya yang menurut saya sangat luar biasa. salah satunya ini adalah form subcribe yang di buat.



Cara Membuat Subscribe Box Ala Arlina Design

Untuk membuatnya silakan ikuti langkah langkahnya.

1. Buka Blogger > Template > Edit HTML

2. Tambahkan script di bawah ini </style>

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#37b185;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}

Untuk warna dan desain lainnya bisa diedit sesuai selesa kalian.

3. Selanjutnya tambahkan script berikut di bagian footer-wrapper kalian, atau terserah dimana penempatan yang kalian inginkan, misalnya di blog ini saya tempatkan di sidebar-wrapper.

<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=Ikramlinkcom' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=Ikramlink&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Ikramlinkcom'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>

Ganti semua kode yang ditandai Ikramlinkcom dengan id feedburner blog kalian.
4. Setelah itu simpan template dan lihat hasilnya.

Posting Komentar


Cookie Consent
Ikramlink.com serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.