How to Add Beautiful Newsletter in Blogger Blog? - FindersAdda : Tutorials of Make Money, Computer or Internet

Tuesday, 8 August 2017

How to Add Beautiful Newsletter in Blogger Blog?

Today, I am going to tell you about newsletter that means what is newsletter? Why we should add newsletter in blog? How to add Beautiful Newsletter in blogger blog? As we know that blogger is a plate-form which provides facility to create a blog or website. If you are a website owner and your blog is on blogger then you must read this post.



how to make beautiful newsletter in blog



Newsletter is a Subscription box by which readers subscribe own email and get updated to your blog post. We must add the newsletter in our blog because when readers subscribe our newsletter then readers will be able to get updated our new post and our blog traffic will be increased.

As we know that blogger provides various widget in which one is Email subscription but it is looking bad. So, I am going to tell that how to add beautiful newsletter in blog. I will tell about both methods to add newsletter. First is blogger email subscription and second is beautiful newsletter by using some CSS code.



How to Add Beautiful Newsletter in Blogger Blog?

Step 1. First of all, we will tell you to add simple email subscription or newsletter by using widget.

Step 2. Go to blogger plate form and login through your Gmail and password. After login, click on the Layout option in blogger dashboard to add simple email subscription box.

Step 3. After clicking the layout option, click on the “Add Widget” where you want to add your email subscription box.

Step 4. Then new page will be opened in this page click on the “Follow By Email” widget like shown in image


Follow by email widget



Step 5. Then again new page will be opened in front of you. In this page, write your subscription title like “Subscribe Our Newsletter” and then click on the Save button.



Step 6. Then click on the “Save Arrangement” button which is present in layout tab at right corner.

Now, we will know about second technique to add beautiful newsletter in blog by using Some CSS code or HTML/ Javascript code.

Step 1. First of all, copy the below CSS code and then go to blogger plateform and login through gmail and password.


#findersadda {
 padding: 15px 27px 20px;
 line-height: 25px;
 text-align: center;
 background: #148aea;
 width: 300px
 margin: -25px;
 border: 2px solid #999999;
}
input.jdk {
 color: #333;
 padding: 9px;
 font-size: 14px;
 font-family: PT Sans Caption', 'PT Sans', sans-serif;
 border: 1px solid #EEE;
 margin: 10px auto 0;
 border-radius: 3px;
 width: 89%;
}
#findersadda p {
 color: #ffffff;
 font-size: 16px;
}
#findersadda h5 {
 font-size: 20px;
 color: #000000;
 padding: 0;
 text-align: center;
}
#findersadda input[type="submit"] {
 background-color: #ea141f;
 border: #EEE solid 1px;
 color: #fff;
 cursor: pointer;
 padding: 10px 15px;
 font-size: 16px;
 width: 100%;
 margin: 15px auto 0;
}
#findersadda input[type="submit"]:hover {
 background: #ea141f;
 color: #fff;
 border: #EEE solid 1px;
}


Step 2. After login, click on the Theme tab in blogger dashboard and then click on the “Edit HTML” option.

Step 3. Then, press “CTRL + F” and search ]]></b:skin> after searching it paste the CSS code above ]]></b:skin>

Step 4. And then click on the “Save Template” to save your code.

Step 5. And then click on the Layout tab in blogger Dashboard and then click on the “Add widget” where you want to add your newsletter. You can drag and drop late this widget at another place.

Step 6. After cliking the Add Widget, a page will be opened in front of you, click on HTML/JavaScript widget in this page.

Step 7. Then again a new page will be opened in front of you. In this page, write title and in the below box paste the below code of this website.


<div id="findersadda">
<h5>Finders Adda Free SignUp</h5>
<p>Join our News Letter to get updated &receive new possts by Email</p>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=findersadda', 'popupwindow', 'scrollbars=yes,
width=550,height=520');return true" target="popupwindow">
<input class="jdk" type="text" name="name" placeholder="Enter your name" />
<input class="jdk" type="text" name="email" placeholder="Enter your email ID" />
<input type="hidden" value="findersadda" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="submit" type="submit" value="SUBSCRIBE NOW" />
</form>
</div>


Step8. Now, write your feedberner address insteads of findersadda http://feedburner.google.com/fb/a/mailverify?uri=findersadda


Step 9. And then click on the “Save” button and then click on the “Save Arrangement” option  



I hope you liked this post so much. If you loved this post, so, share with your friends and also give some suggestion that what should i improve in this post. Thank You So Much......

 

About Author

SUMIT KUMAR GUPTA
SUMIT KUMAR GUPTA

Author & Editor

Myself Sumit Kumar Gupta & 21 year's old person. I am a programmer and blogger. I spend much more time on programming and blogging and helps other programmers and bloggers.

0 comments:

Post a Comment

We are eager to see your comments.
Comment Rule :

1. Don't use any link in the comment box. If you have any problem related to link then contact me with the contact form.

2. Don't use the wrong word if you write the wrong word in comment box then it will get spam.