How to Make a Cool Subscribe Widget Without Editing a Blog Template

Hello everyone, back at porkaone. This time I want to give a tutorial on how to make a subscribe widget on your blog. Before we get into how to make it, I will explain a little about the benefits of this subscribe widget. See an example below.

Subscribe Widget

Benefits

This subscribe widget has good benefits for the growth of our blog. Among the benefits we will get are:

1. Increase visitor traffic.

2. Make it easy for readers. Because of this facility, readers will automatically receive an email notification immediately containing at a glance or in full about articles and direct links to our blog. That way readers don't have to bother going to the browser and typing in the address of our blog.

3. No need to bother sharing. With this facility, it certainly makes it easier for us to expand and spread links, even the links that are shared are more personal.

4. Returning visitors who have visited our blog.

How to Make the Widget

1. After logging into the cpanel of your blog account, immediately click on layout or layout

2. Then add a gadget in the desired section (it is recommended to put the widget on the sidebar or blog footer to make it look more presentable, pro, not distracting and easy for visitors to see

3. Add HTML javascript then copy and paste the code below:

<style type='text/css'>
#subscribe-box {width: 300px;height: auto;border-radius: 2px;background-color: #E0E0DF;box-shadow: 0px 3px 0px 0px #7f8c8d;padding-bottom:10px}
#subscribe-box .title {padding: 10px 25px;line-height: 30px;font: 26px Oswald;color: #95A5A6;text-align: center;background: #F1F1F1;text-transform:uppercase;border-radius:2px 2px 0 0;}
#subscribe-box p {font-family: &#39;Droid Serif&#39;;font-size: 13px;color:#555;line-height: 20px;padding: 10px 20px 0 20px;margin: 0;}
#subscribe-box .emailfield {padding: 0px 20px 10px;}
#subscribe-box .emailfield input {color: #777;padding: 10px;margin-top: 10px;font-size: 15px;font-family: &#39;Droid Serif&#39;;width: 92%;border:0;border-radius: 2px;box-shadow: 0px 3px 0px 0px #bbb;}
#subscribe-box .emailfield input:focus {outline: none;}
#subscribe-box .emailfield .submitbutton {background: #008287;color: #fff!important;border:none;outline: none;width: 100%;cursor:pointer;box-shadow: 0px 3px 0px 0px #00686C}
#subscribe-box .emailfield .submitbutton:active {padding-top: 11px;padding-bottom: 9px;box-shadow: 0px 1px 0px 0px #3293ba;}
#subscribe-box .emailfield .submitbutton:hover{background: #00686C;}
</style>
<div id='subscribe-box'>
    <div class='title'>
        Subscribe Here
    </div>
    <p>Sign up here with your email address to receive updates from this blog in your inbox.</p>
    <div class='emailfield'>
        <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=your-feed-burner-name&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
            <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}' onfocus='if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}' value='Your Name'/>
            <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
            <input name='uri' type='hidden' value='your-feed-burner-name'/>
            <input name='loc' type='hidden' value='en_US'/>
            <input class='submitbutton' type='submit' value='Subscribe Now!'/>
        </form>
    </div>
</div>

4. Change the your-feed-burner-name text with your blog feed on feedburner

5. Then save and see the results.

ok, so this tutorial is about how to make a cool subscribe widget on blogger. Hopefully useful, if there is something you want to ask, please ask directly in the comments column below. That is all and thank you.