Tuesday, 16 February 2016

#Howto Create #SubscriptionBox #Widgets for Blogger

subscription box
How to Create Subscription Box tips4tricx blog that will share this time is how to make a box subscription (subscription box) on the blog as you can see on the blog tips4tricx. The importance of installing a subscription box I have ever been explained in the tutorial subscription box that I've shared before. So, do not need to explain back yes.

How to Create Subscription Box 


1. Go to Blogger> Template> Edit HTML
2. Place the code below the above code]]> </ b: skin> or </ style>

/ * Subscribe Box * /

# 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:#ff675c;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: # ea5a50;}
# 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-note p.subscribe span {position: relative; overflow: hidden; font-weight: 700; transition: all .5s}
# Subscribe-css-note p.subscribe span.itatu {font-weight: 400; font-style: italic; color: RGBA (255,255,255, .6); text-transform: lowercase}
# Subscribe-css-note p.subscribe span.itatu: before, # subscribe-css-note p.subscribe span.itatu: after {display: none}
# Subscribe-css p.subscribe-span note: 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 span p.subscribe-note: before {width: 100%;}


3. Then, copy the code below and place it where you want to display a grid

<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 = tips4tricx' class = 'subscribe-form "method =" post "onsubmit =" window.open (' http: // feedburner .google.com / fb / a / mailverify? uri = tips4tricx ',' popupwindow ',' scrollbars = yes, width = 550, height = 520 '); return true' target = 'popupwindow'>
<Input name = 'uri' type = 'hidden' value = 'tips4tricx' /> <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>


Change 
tips4tricx with your Feedburner id.

4. After that save the template and see the results.


Similarly tutorial on How to Create Subscription Box. Please follow the tutorial if you want to apply them to your blog. May be useful.
Previous Post
Next Post

post written by:

0 Google+:

Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
Comment to get answered or to solve a problem not to spam. Thanks