Blog Me Email Subscribe Box (Widget) Kaise Add Kare

1

Dosto agar aapka koi blog hai to aapko apne blog ke liye email subscription box ki jaroort jaroor padegi. esliye aaj ham apke liya ese he ek post lekar aaye hai jisse aap esaliy apne blog me email subscription box add kar payenge.. dekhte hai kaise?
 

 

Dosto agar aapko apne blog ke email subscriber bdane hai to Email Subscribe Box sabse accha tarika hai. Dosto blog me Email Subscribe Box ko add karna koi mushkil kaam nhi hai sirf aapko ek HTML Code apne Blog me add karna hai. dosto bese to aapko internet par bhut se trick mil jayinge Email Subscribe Box ko add karne ki but html code ki help se agar aap email subscribe widget ko add karte hai, to bo low internet connection or har browser par show hoga. or agar aap javascript ki help se email subscribe widget ko add karinge to bo har browser par show nhi hoga. esliye aaj ham aapko batayinge ki html code ki help se Email Subscribe Box widget blog me kaise add kare.

 


Blog Me Email Subscription Box Kaise Add Kare?

Step1: Dosto blog me Email Subscription box add karna bhut easy hai. Sabse phele aapko jo box pasand aaye uska code copy kar le.
 

Style #1

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
<div id='byard-emailsubsocial'>
 <div class='heading'>
 Join Our Newsletter
 </div>
<p>Enter your Email Address to receive Hot updates straight in your inbox.</p>
<div class='emailsub'>
 <form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=officialfuturetricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
 <input type='text' name='name' placeholder='Your Name' />
 <input type='text' name='email' placeholder='Your Email' />
 <input type="hidden" value="FutureTricks" name="uri"/>
 <input type="hidden" name="loc" value="en_US"/>
 <input value="Join Now!" class="button" type="submit" />
 </form>
</div>
<p id='credits'><a href=''></a></p>
</div>
<style type='text/css'>
 #byard-emailsubsocial {
 width: 300px;
 height: 300px;
 border: 1px solid #fff;
 border-radius: 5px 5px 0px 0px;
 }
 #byard-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: rgb(12, 13, 13);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
 }
 #byard-emailsubsocial p {
 font-family: open sans;
 font-size: 13px;
 color: rgb(12, 13, 13);
 line-height: 25px;
 padding: 10px 20px 0 20px;
 margin: 0;
 }
 #byard-emailsubsocial .emailsub {
 padding: 0px 20px 10px 20px;
 }
 #byard-emailsubsocial .emailsub input {
 color: rgb(12, 13, 13);
 padding: 10px;
 margin-top: 10px;
 font-size: 15px;
 font-family: open sans;
 width: 92%;
 border: 1px solid #ccc;
 border-bottom: 2px solid #ccc;
 border-radius: 5px;
 transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
 }
 #byard-emailsubsocial .emailsub input:focus {
 border-color:#2A71EA;
 outline: none;
 box-shadow: 0 0 2px 1px #2A71EA;
 }
 #byard-emailsubsocial .emailsub .button {
 background: #1793F0;
 color: white!important;
 border:none;
 outline: none;
 border-bottom: 3px solid #ffffff;
 transition:background .4s linear;
 width: 90%;
 margin-right:9%;
 margin-left: 1%;
 font-weight: 600;
 cursor:pointer;
 }
 #byard-emailsubsocial .emailsub .button:hover{
 background: #076DAE;
 }
#credits {
margin: 0 auto!important;
margin-top: -10px!important;
width: 260px;
}
 </style>

Style #2

<style type='text/css'>#sidebar-subscribe-box {
 background: url(https://1.bp.blogspot.com/-IyEBRR8yOQQ/UBhYdBd23PI/AAAAAAAAFTU/aeW3JdAlrCs/s1600/colored-strip.png) repeat scroll 0 0 transparent;
 border: 1px solid #aaa;
 border-radius: 3px;
 padding: 3px 0;
}
.sidebar-subscribe-box-wrapper {
 color: #111;
 background: url(https://2.bp.blogspot.com/-tUlo5p5gP8o/UBhYciGNgwI/AAAAAAAAFTM/x22pIuNLVPw/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;
 font-size: 14px;
 line-height: 20px;
 padding: 1px 20px 10px;
 text-align: center;
.sidebar-subscribe-box-email-field {
 text-transform: uppercase;
}
.sidebar-subscribe-box-form {
 clear: both;
 display: block;
 margin: 10px 0;
}
form.sidebar-subscribe-box-form {
 clear: both;
 display: block;
 margin: 10px 0 0;
 width: auto;
}
 -moz-border-radius: 4px;
 padding: 10px 40px;
 -webkit-border-radius: 4px;
 background: #fff url(https://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png) no-repeat 0 -27px;
 border: 1px solid #ccc;
 border-radius: 4px;
 color: #444;
 margin: 0 0 15px;
 width: 68%;
}
 text-shadow: 1px 1px 0 rgba(0,0,0,.4);
.sidebar-subscribe-box-email-button {
 background: #09f;
 border: 1px solid #007fff;
 box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;
 color: #fff;
 cursor: pointer;
 font-family: verdana;
 font-weight: 700;
 padding: 10px;
 text-transform: uppercase;
 box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
 width: 100%;
}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus {
 background: #1ca4ff;
}
.sidebar-subscribe-box-email-button:active {
 -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
 -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
 outline: 0;
}
 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table {
 width: 100%;
}
embed {
 border-radius: 3px;
 -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 background: #FFF;
 border: 1px solid #ddd;
 margin: 0;
 padding: 4px 4px 4px;
}
#footer-section {
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<p>Subscribe to our email newsletter & receive updates right in your inbox.
 background: #f5f5f5 url(https://1.bp.blogspot.com/-n5s9Bu0JCgg/UA_AfQ5qLkI/AAAAAAAAFMU/G9FOuh4SP7k/s0/bg-pattern.png) repeat top left;
 border-top: 1px solid #aaa;
 box-shadow: inset 0 4px 6px -3px #aaa;
 font-family: cambria;
 font-size: 14px;
 height: 100px;
 margin: 10px -30px 5px;
 padding: 0 30px;
 text-align: center;
 width: 100%;
}</style>
<input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/>
</p>
<div class="sidebar-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=officialfuturetricks"
class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=officialfuturetricks',
'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="labstrike" /><input name="loc" type="hidden" value="en_US" />
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now!" />

Style #3

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
<div id='byard-emailsubsocial'>
<div class='heading'>
 Sign Up in Seconds
 </div>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=officialfuturetricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
 <p>Sign up with your email address to receive hot updates straight in your inbox.</p>
<div class='emailsub'>
 <input type='text' name='name' placeholder='Your Name' />
 <input value="Sign Up Now!" class="button" type="submit" />
 <input type='text' name='email' placeholder='Your Email' />
 <input type="hidden" value="BloggerYard" name="uri"/>
 <input type="hidden" name="loc" value="en_US"/>
 </form>
</div>
#byard-emailsubsocial .heading {
 #byard-emailsubsocial .heading {
<p id='credits'>Powered By : <a href='https://www.futuretricks.org'>FutureTricks</a></p>
</div>
<style type='text/css'>
 #byard-emailsubsocial {
 width: 300px;
 height: 330px;
 border: 1px solid #ddd;
 border-radius: 5px 5px 0px 0px;
 }
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
 padding: 10px 20px 0 20px;
font-weight: 600;
font-family: open sans;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
 }
 #byard-emailsubsocial p {
 font-family: open sans;
 font-size: 13px;
 color: rgb(170, 170, 170);
 line-height: 25px;
 margin: 0;
 }
 transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
 #byard-emailsubsocial .emailsub {
 padding: 0px 20px 10px 20px;
 }
 #byard-emailsubsocial .emailsub input {
 color: rgb(170, 170, 170);
 padding: 10px;
 margin-top: 10px;
 font-size: 15px;
 font-family: open sans;
 width: 92%;
 border: 1px solid #ccc;
 border-bottom: 2px solid #ccc;
 border-radius: 5px;
 }
 margin-left: 5%;
 #byard-emailsubsocial .emailsub input:focus {
 border-color:#F4836A;
 outline: none;
 box-shadow: 0 0 2px 1px #F4836A;
 }
 #byard-emailsubsocial .emailsub .button {
 background: #F4836A;
 color: white!important;
 border:none;
 outline: none;
 border-bottom: 3px solid #B3614E;
 transition:background .4s linear;
 width: 90%;
 margin-right: 5%;
 </style>
 font-weight: 600;
 cursor:pointer;
 }
 #byard-emailsubsocial .emailsub .button:hover{
 background: #DD7761;
 }
#credits {
margin: 0 auto!important;
margin-top: -10px!important;
width: 160px;
}
Step2: Code ko copy karne ke baad “officialfuturetricks” ki jgha apne feed ka address daale. or Es Code ko HTML Widget me add kar de..
 
Agar aapko nhi pta ki kise Bhi Website/Blog me HTML Widget kaise add kare to aap ye post padhe:
 
To Aaj hamne aapko btaya ki kise bhi blog me Email Subscribe Box Kaise Add kare. agar aapko aaj ki hamari ye post passnad aayi hai to ese jaroor share kare. or agar koi bhi problem aa rhi ho to comment me puch le!

 


Thanks for Reading!  🙂 


1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here