Subscribe box alias highly recommended existing subscription box your blog so that readers can easily update the latest articles via email. Most Subscribe sidebar or box is located under the posts, well what if this very useful objects we put above footer with a relatively large size. Approximately what benefits yah?
4. Now find the footer code, you can take advantage Inspect Element to look for it. On your blog page exactly in the footer, right click> Inspect Element (CTRL + Shift + i) . Sample code footer <div id = "footer-wrapper"
5. Once you get the footer code, go to the Edit HTML and paste the following code right above the footer code that you already know.
http://www.teoridesain.com/2015/12/cara-membuat-subscribe-box-responsive.html
1. Facilitate Reader Subscribe box for your blog.
2. Drawing the attention of readers to submit their email.
3. Make your blog look cool and professional.
4. Among other benefits, find out after you install it.
On this occasion I will share how to create responsive subscribe box above footer, you can modify itself according to the design template used.
How to Make a Box Subscribe Responsive Above Footer
1. Log into your Blog, Dashboard> Template> Edit HTML
2. Find the code ]]> </ b: skin> , to facilitate the search using CTRL + F
3. Copy the code below and paste thereon.
/* Subscribe Box */Description : Change the color code red accordance color you want. Please go Weather Colo-Picker to get the code you need.
#subscribe-css{position:relative;padding:20px 0;background:#222;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:#333;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#587CA2;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;max-width:120px}
.subscribe-css-email-button:hover{background:#356EAB;}
#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%;}
#subscribe-css p.subscribe-note{margin:0 0 20px 0;width:100%;}
.subscribe-wrapper {width:100%;}}
4. Now find the footer code, you can take advantage Inspect Element to look for it. On your blog page exactly in the footer, right click> Inspect Element (CTRL + Shift + i) . Sample code footer <div id = "footer-wrapper"
5. Once you get the footer code, go to the Edit HTML and paste the following code right above the footer code that you already know.
<p class='subscribe-note'><span>BERLANGGANAN</span>Description: Change the color code red with ID Feedburner you. So how to make the Subscribe Box Footer Responsive above, if there is trouble in the making. Please comment, I'll help you. May be useful
<span class='itatu'></span> VIA EMAIL</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=xxxxx' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=xxxxx', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='xxxxx'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Alamat Email Anda'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>
<div class='clear'></div>
http://www.teoridesain.com/2015/12/cara-membuat-subscribe-box-responsive.html
Leave a comment
To insert a link, use tag
[url=http://your_link]your-link[/url]To insert the code , use the tag
<i rel="code">your-code</i>The long code can use the tag
<i rel="pre">your-long-code</i>To insert an image , use the code
[img]URL Image[/img]To insert a title , use tag
<b rel="h4">Your Title here...</b>To creat Bold text
<strong>Your text here...</strong>To create Italic text used tag
<em>Your text here...</em>