Blog Ke Liye Top 5 Responsive and Fast Loading Email Subscription Widget

Hello Dosto,
इस post में मैं आपके साथ 5 Subscription Widget Share करने वाला हूँ। सारे widgets fast loading और responsive widget है। इससे आपके Blog के Loading Time पर कोई असर नही पड़ेगा। मैं आपको 5 Style के Widget का Code बता रहा हूँ। आपको जो widget अच्छा लगे उसे अपने Blog पर Add कर लें। तो चलिए शुरू करते हैं।

दोस्तो, सबसे पहले मैं आपको बता दूं कि अपने Blog पर Subscription widget add करने के लिए आपके पास FeedBurner URL होना बहुत जरूरी है। FeedBurner URL के लिए आपको अपने Blog के लिए FeedBurner पर Account बनाना होता है। अगर आपने Feedburner पर account बना लिया है तो अच्छी बात है और अगर आपने Feedburner पर अपना account नही बनाया है तो ये Post पढ़ें - Feedburner पर अपने Blog के लिए Account कैसे बनाये


Style #1

<style><br /> <br /> .a2jm-subscribe {<br /> background: url("https://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/color-chronicl.gif") repeat scroll 0 0 transparent;<br /> margin: 0 -10px;<br /> padding: 5px 0;<br /> }<br /> body {<br /> color: #272727;<br /> font-family: Georgia,"Times New Roman",Times,serif;<br /> }<br /> body {<br /> color: #272727;<br /> font-family: Georgia,"Times New Roman",Times,serif;<br /> }<br /> .sidebar .subscribe_wrapper h5 {<br /> color: #FFFFFF;<br /> }<br /> .sidebar h5 {<br /> color: #272727;<br /> font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;<br /> font-size: 15px;<br /> font-weight: normal;<br /> padding: 4px 0 10px;<br /> }<br /> h5, h6 {<br /> letter-spacing: 2px;<br /> text-transform: uppercase;<br /> }<br /> .sidebar .subscribe_wrapper h5 {<br /> color: #FFFFFF;<br /> }<br /> .sidebar h5 {<br /> color: #272727;<br /> font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;<br /> font-size: 15px;<br /> font-weight: normal;<br /> padding: 4px 0 10px;<br /> }<br /> h5, h6 {<br /> letter-spacing: 2px;<br /> text-transform: uppercase;<br /> }<br /> .subscribe_wrapper {<br /> background: url("https://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/pattern-chronicl.png") repeat scroll 0 0 #333333;<br /> color: #CCCCCC;<br /> font-size: 14px;<br /> line-height: 20px;<br /> padding: 38px 50px 18px 38px;<br /> }<br /> .emailButton {<br /> background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;<br /> border: 0 none;<br /> border-radius: 4px 4px 4px 4px;<br /> color: #FFFFFF;<br /> cursor: pointer;<br /> font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;<br /> font-weight: bold;<br /> padding: 10px 40px;<br /> text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);<br /> width: 100%;<br /> }<br /> .emailText {<br /> background: url("https://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF;<br /> border: 0 none;<br /> border-radius: 4px 4px 4px 4px;<br /> box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;<br /> color: #444444;<br /> margin: 0 0 15px;<br /> padding: 10px 40px;<br /> text-decoration: none;<br /> width: 70%;<br /> }<br /> input, textarea {<br /> font-family: Georgia,"Times New Roman",Times,serif;<br /> }<br /> .subscribe_wrapper {<br /> color: #CCCCCC;<br /> font-size: 14px;<br /> line-height: 20px;<br /> }<br /> .post-body .emailButton {<br /> width: 300px;<br /> }<br /> .emailButton {<br /> background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;<br /> border: 0 none;<br /> border-radius: 4px 4px 4px 4px;<br /> color: #FFFFFF;<br /> cursor: pointer;<br /> font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;<br /> font-weight: bold;<br /> padding: 10px 40px;<br /> text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);<br /> width: 100%;<br /> }<br /> </style><br /> <br /> <div class="a2jm-subscribe"> <br /> <div class="subscribe_wrapper"> <br /> <h5> Subscribe Us !</h5> <p> Enter your email address and get our new post delivery update in your inbox.</p> <br /> <div id="btntEmailsub"> <br /> <form class="btntEmailform" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=AbhinavAjMods', 'popupwindow', 'scrollbars=yes,width=300,height=520');return true" method="post" action="https://feedburner.google.com/fb/a/mailverify"> <br /> <input type="hidden" value="AbhinavAjMods" name="uri" /><br /> <input type="hidden" value="en_US" name="loc" /><br /> <input class="emailText" type="text" value="Your Email......." onfocus="if (this.value == " enter your email...") {this.value="" }" onblur="if (this.value == " ") {this.value="enter your email..." ;}" name="email" /><br /> <input class="emailButton" type="submit" value="Signup Now! (FREE)" title="" /><br /> </form> <br /> </div> <br /> <p style=" line-height:0px; font-size:8px; font-weight:bold; text-align:right"> <a style="color:#D3D3D3;" href="https://www.abhinavajmods.com/2017/04/5-subscription-widget.html">Widgets</a></p> <br /> </div> <br /> </div> <br /> <br />

Style #2 :

<style><br /> #responsiveness {<br /> padding: 15px 25px 20px;<br /> line-height: 35px;<br /> text-align: center;<br /> background: none repeat scroll 0% 0% #1E1E1E;<br /> margin: -15px;<br /> border-radius: 3px;<br /> }<br /> #responsiveness h5 {<br /> font-size: 17px;<br /> font-weight: 700;<br /> font-family: 'PT Sans',sans-serif;<br /> color: #FFF;<br /> padding: 0px;<br /> text-transform: uppercase;<br /> line-height: 1.2;<br /> margin: 10px 0px 15px;<br /> letter-spacing: 0.01em;<br /> text-align: left;<br /> }<br /> input.placer {<br /> color: #333;<br /> padding: 15px;<br /> font-size: 14px;<br /> font-family: PT Sans,sans-serif;<br /> border: 1px solid #EEE;<br /> transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;<br /> margin: 10px auto 0px;<br /> border-radius: 3px;<br /> width: 89%;<br /> }<br /> input.button {<br /> background-color: #BA1A00;<br /> color: #FFF;<br /> font-weight: 400;<br /> cursor: pointer;<br /> border-radius: 4px;<br /> text-transform: uppercase;<br /> font-family: PT Sans,serif;<br /> padding: 10px 15px;<br /> border: medium none;<br /> font-size: 16px;<br /> width: 100%;<br /> margin: 15px auto 0px;<br /> }<br /> input.button:hover{<br /> background: #FFF;<br /> color: #333;<br /> }<br /> </style><br /> <link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/><br /> <div id='responsiveness'> <br /> <p style=" line-height:0px; font-size:7px; font-weight:bold; text-align:right"> <a style="color:#D3D3D3;" href="https://www.abhinavajmods.com/2017/04/5-subscription-widget.html">Widgets</a></p> <br /> <h5> Sign Up Now and Get Free Email Notification From This Blog  </h5> <form action='https://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=AbhinavAjMods', 'popupwindow', 'scrollbars=yes,width=550,height=550');return true"> <br /> <input  class="placer" type='text'  name='email' placeholder='Your Name ....' /><br /> <input  class="placer" type='text'  name='email' placeholder='Your Email ....' /><br /> <input type="hidden" value="AbhinavAjMods" name="uri"/><br /> <input type="hidden" name="loc" value="en_US"/><br /> <input value="Subscribe Now" class="button" type="submit" /><br /> </form> <br /> </div> <br />

Style #3 :

<style type="text/css"><br /> .a2jmsub {<br />     background-color: rgb(87, 98, 105);<br />     width: 100%;<br />     height: 100%;<br />     padding: 5px;<br />     box-shadow: 0px 0px 5px rgb(87, 98, 105);<br /> }<br /> <br /> .a2jmform-inner {<br />     text-align: center;<br />     color: rgb(255, 255, 255);<br />     font: bold 16px "trebuchet MS","Tahoma";<br /> }<br /> <br /> .a2jmemailform {<br />     width: 240px;<br />     margin: 10px auto;<br /> }<br /> <br /> #a2jmemailbox {<br />     background-color: #798187;<br />     color: #FFF;<br />     width: 208px;<br />     border: 1px solid #697780;<br />     padding: 15px;<br />     text-align: center;<br />     height: 18px;<br />     box-sizing: content-box;<br /> }<br /> <br /> #a2jmemailbutton {<br />     background-color: rgb(243, 93, 92);<br />     border: 1px solid rgb(215, 84, 83);<br />     color: rgb(255, 255, 255);<br />     width: 240px;<br />     font: bold 16px "trebuchet MS","Tahoma";<br />     padding: 15px;<br />     text-align: center;<br />     height: 50px;<br />     margin: 10px auto;<br />     cursor: pointer;<br /> }<br /> <br /> #a2jmemailbutton:hover {<br />     background-color: #E64C4B;<br />     border: 1px solid #BF4A49;<br /> }<br /> <br /> .a2jmsignup-form {<br />     margin-top: 15px;<br /> }<br /> <br /> .a2jmsocial-icons {<br />     overflow: hidden;<br />     text-align: center;<br />     border-bottom: 1px solid rgb(133, 133, 133);<br />     width: 230px;<br />     display: block;<br />     margin: 20px auto;<br /> }<br /> <br /> .a2jmsocial-icons ul {<br />     margin: 0px auto !important;<br />     text-align: center;<br />     padding: 0px !important;<br />     display: inline-block;<br /> }<br /> <br /> .a2jmsocial-icons ul li {<br />     background: transparent none repeat scroll 0% 0% !important;<br />     border: medium none !important;<br />     float: left;<br />     list-style-type: none !important;<br />     padding: 0px !important;<br />     margin: 0px 2px !important;<br /> }<br /> <br /> .a2jmsocial-icons ul li::before,<br /> .a2jmsocial-icons ul li::after {<br />     display: none !important;<br /> }<br /> <br /> .a2jmsocial-icons ul li a, .a2jmsocial-icons ul li a:hover {<br />     background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1oGnBOyV5Z-vOlTAuXqugjonLgCrpMfXtS-9-GqIqEbNd3NWdSEXGAp9a-j2s0hOYeGoI6mOgI7xldoAka2Lm9VR2hGBvO1pMlo2D1u4D8n8tYq-K1eyU76fxuAEKHKVVlv9IOaZV9Rtt/s1600/sprite_32x32.png") no-repeat scroll 0 0;<br />     -moz-border-radius: 50%;<br />     -webkit-border-radius: 50%;<br />     border-radius: 50%;<br />     display: block;<br />     height: 34px;<br />     overflow: hidden;<br />     text-indent: -999px;<br />     transition: all 0.25s linear 0s;<br />     width: 34px;<br /> }<br /> <br /> .a2jmsocial-icons ul li.social-facebook a {<br />     background-position: -62px 1px;<br /> }<br /> <br /> .a2jmsocial-icons ul li.social-facebook a:hover {<br />     background-color: #3b5998;<br /> }<br /> <br /> .a2jmsocial-icons ul li.social-twitter a {<br />     background-position: -254px 1px;<br /> }<br /> <br /> .a2jmsocial-icons ul li.social-twitter a:hover {<br />     background-color: #00aced;<br /> }<br /> <br /> .a2jmsocial-icons ul li.social-gplus a {<br />     background-position: -95px 0px;<br /> }<br /> <br /> .a2jmsocial-icons ul li.social-gplus a:hover {<br />     background-color: #dd4b39;<br /> }<br /> <br /> .a2jmsocial-icons ul li.social-pinterest a {<br />     background-position: -159px 1px;<br /> }<br /> <br /> .a2jmsocial-icons ul li.social-pinterest a:hover {<br />     background-color: #cb2027;<br /> }<br /> <br /> .a2jmsocial-icons ul li.social-rss a {<br />     background-position: -190px 0px;<br /> }<br /> <br /> .a2jmsocial-icons ul li.social-rss a:hover {<br />     background-color: #F87E12;<br /> }<br /> <br /> </style><br /> <br /> <div class="a2jmsub"> <br /> <br /> <div class="a2jmsocial-icons"> <br />   <ul><br /> <li class="social-facebook"><a href="YOUR-FACEBOOK-URL" target="_blank" title="Facebook">Facebook</a></li> <br /> <li class="social-twitter"><a href="YOUR-TWITTER-URL" target="_blank" title="Twitter">Twitter</a></li> <br /> <li class="social-gplus"><a href="YOUR-GOOGLE-PLUS-URL target="_blank" title="google+">Google+</a></li> <br /> <li class="social-pinterest"><a href="YOUR-PINTEREST-URL" target="_blank" title="Pinterest">Pinterest</a></li> <br /> <li class="social-rss"><a href="YOUR-RSS-URL" target="_blank" title="RSS">RSS</a></li> <br />   </ul> <br />  </div> <br /> <br />  <div class='a2jmsignup-form'> <br />   <div class='a2jmform-inner'> <br />    <h4> Subscribe to My Newsletter</h4> <br />   </div> <br />   <div class='a2jmemailform'> <br />    <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=AbhinavAjMods', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <br />     <input name='uri' type='hidden' value='AbhinavAjMods'/><br />     <input name='loc' type='hidden' value='en_US'/><br />     <input id='a2jmemailbox' name='email' required='' type='text' placeholder='Your Email'/><br />     <input id='a2jmemailbutton' title='' type='submit' value='Subscribe'/><br />    </form> <br />   </div> <br /> <p style=" line-height:0px; font-size:8px; font-weight:bold; text-align:right"> <a style="color:#D3D3D3;" href="https://www.abhinavajmods.com/2017/04/5-subscription-widget.html">Widgets</a></p> <br />  </div> <br /> </div> <br /> <br />

Style #4 :

<style><br /> #subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;}<br /> #subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}<br /> #subscribe-box .emailfield {padding:0px 20px 10px;}<br /> #subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}<br /> #subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}<br /> #subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}<br /> #subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}<br /> #subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}<br /> .creadit a{color: #A7A6A6; float: right; font-size: 8px<br /> </style><br /> <div id="subscribe-box"> <br /> <center> <br /> Subscribe for Our All Latest News And Updates</center> <br /> <div class="emailfield"> <br /> <form action="http://feedburner.google.com/fb/a/mailverify?uri=AbhinavAjMods" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=AbhinavAjMods, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <br /> <input name="name" onblur="if (this.value == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="Your Name" /><br /> <input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" type="text" value="Your Email" /><br /> <input name="uri" type="hidden" value="AbhinavAjMods" /><br /> <input name="loc" type="hidden" value="en_US" /><br /> <input class="submitbutton" type="submit" value="Subscribe Now" /><br /> </form> <br /> </div> <br /> <p style=" line-height:0px; font-size:8px; font-weight:bold; text-align:right"> <a style="color:#D3D3D3;" href="https://www.abhinavajmods.com/2017/04/5-subscription-widget.html">Widgets</a></p> <br /> </div> <br /> <br />

Style #5 :

<style><br /> .subscribebtrix {<br /> border: 2px solid #000000;<br /> padding: 8px;<br /> width: 310px;<br /> -webkit-transition: all 0.5s ease-in-out;<br /> -moz-transition: all 0.5s ease-in-out;<br /> -ms-transition: all 0.5s ease-in-out;<br /> -o-transition: all 0.5s ease-in-out;<br /> transition: all 0.5s ease-in-out;<br /> }<br /> .subscribebtrix:hover {<br /> -moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);<br /> -webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);<br /> box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);<br /> }<br /> .tbimailbox {<br /> border: 1px solid #D3D3D3;<br /> -webkit-border-radius: 4px;<br /> border-radius: 4px;<br /> -moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;<br /> -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;<br /> box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;<br /> color: #666;<br /> font: 14px "trebuchet ms", sans-serif;<br /> padding: 7px 15px;<br /> width: 160px;<br /> -webkit-transition: all 0.5s ease-in-out;<br /> -moz-transition: all 0.5s ease-in-out;<br /> -ms-transition: all 0.5s ease-in-out;<br /> -o-transition: all 0.5s ease-in-out;<br /> transition: all 0.5s ease-in-out;<br /> }<br /> .tbimailbox:hover {<br /> -webkit-box-shadow: none;<br /> box-shadow: none;<br /> -webkit-transition: all 0.5s ease-in-out;<br /> -moz-transition: all 0.5s ease-in-out;<br /> -ms-transition: all 0.5s ease-in-out;<br /> -o-transition: all 0.5s ease-in-out;<br /> transition: all 0.5s ease-in-out;<br /> }<br /> .btrixsubmit {<br /> font: bold 12px Tahoma, Geneva, sans-serif;<br /> font-style: normal;<br /> color: #ffffff;<br /> background: #ff5714;<br /> border: 0px solid #ffffff;<br /> text-shadow: 0px -1px 1px #222222;<br /> box-shadow: 2px 2px 5px #000000;<br /> -moz-box-shadow: 2px 2px 5px #000000;<br /> -webkit-box-shadow: 2px 2px 5px #000000;<br /> border-radius: 10px 10px 10px 10px;<br /> -moz-border-radius: 10px 10px 10px 10px;<br /> -webkit-border-radius: 10px 10px 10px 10px;<br /> padding: 8px 15px;<br /> cursor: pointer;<br /> margin: 0 auto;<br /> }<br /> .btrixsubmit:active {<br /> cursor: pointer;<br /> position: relative;<br /> top: 2px;<br /> }<br /> .btrixsubmit::-moz-focus-inner {<br /> border: 0;<br /> padding: 0;<br /> margin: 0;<br /> }<br /> </style><br /> <br /> <br /><br /> <div class="subscribebtrix"> <br /> <div style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;"> <br /> Free Updates to your Inbox</div> <br /> <div style="margin: 10px 0 0 6px;"> <br /> <form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=AbhinavAjMods', 'popupwindow', 'scrollbars=yes,width=550,height=520EE');return true" style="margin: 0pt;" target="popupwindow"> <br /> <input name="uri" type="hidden" value="AbhinavAjMods" /><br /> <input name="loc" type="hidden" value="en_US" /><br /> <input class="tbimailbox" name="email" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" type="text" value="Enter your email..." /><br /> <input alt="" class="btrixsubmit" title="" type="submit" value="Subscribe" /><br /> </form> <br /> </div> <br /> <div style="border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;"> <br /> Follow us:</div> <br /> <div style="margin: -32px 0 0 120px;"> <br /> <a rel="nofollow" rel="noreferrer"href="http://www.facebook.com/YOUR FACEBOOK USER NAME" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvSsorLdDIopHT8Z7exPNb2KvlEQ244zUPJ-uUGiJZeJ4iop80-gd_uM1evneasz5tB1thFBmws0dEDNNhKphMEoJnAvLARo3enAEuVjZNb1z29_lLddAut96BtGd5lB2aG2YT6Q06JZI/s1600/facebook_btrix.png" /></a><br /> <a rel="nofollow" rel="noreferrer"href="http://www.twitter.com/YOUR TWITTER USER NAME" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFoehYGflki1Ktiae4Li4tR7Hkmd0Xl8zN0Z7kTd1tscKABMISAey0P6WEsI0r5YS1bjvm5_8jXvp6gK-eaucUcHSgWjNk2QV1QesCkYrAu82_BX13Zjg2aIEvuKiTMS28OXqQW5fr9tw/s1600/twitter_btrix.png" /></a><br /> <a rel="nofollow" rel="noreferrer"href="https://plus.google.com/GOOGLE PLUS USER ID" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWc3Srl2axnwX1EnPWgAW02QpPWRqhGy3ug__-VfzGMsNDFjtWibvNhTqWhCRC5FLJMvOrK8N_ygiRuQsB0AXbGqlHhBYzajjYq2m4efs2MLeSkri9OXXm-iaxtS9FqY5uYiL_vUskJrM/s1600/googleplus_btrix.png" /></a><br /> <a rel="nofollow" rel="noreferrer"href="http://www.pinterest.com/PINTEREST USER NAME" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYubjp1CiYGBfaQS_AHfmE1SJGCaRDU-rY0aT4Iax-v6iG1hH4rB7Rx_dY9BaHrNXOMaMGUDRSDp165WSjkCVr85Q6GE40uvLIgkIFFvvuKZ4ZVO7MKcfVePT2uwjLk2dwJoXqa3BMXtU/s1600/pinterest_btrix.png" /></a><br /> </div> <br /> <div align="center"> <br /> <a rel="nofollow" rel="noreferrer"href="http://feeds.feedburner.com/FEEDBURNER ID"><img alt="" src="http://feeds.feedburner.com/~fc/bloggertrix?bg=FF9900&fg=444444&anim=1" height="26" style="border: 0;" width="88" /></a></div> <br /> <p style=" line-height:0px; font-size:8px; font-weight:bold; text-align:left"> <a style="color:#D3D3D3;" href="https://www.abhinavajmods.com/2017/04/5-subscription-widget.html">Widgets</a></p> <br /> </div>

अपने Blog पर Subscription Widget कैसे Add करें

Step 1 : सबसे पहले अपने Blogger account में login करें

Step 2 : अब Layout में जाये

Step 3 : Sidebar में Add A New Gadget पर Click करें

Step 4 : HTML/JavaScript पर click करें

Step 5 : आपको जो Widget पसन्द है उसके नीचे का Code copy करे। Code copy करने के लिए Code वाले box में click करके Ctrl+A button दबाये और Code को copy कर लें। और Paste करें।

Step 6 : अब आपको कुछ Customization करना है। क्या Customization करना है वो मैं आपको नीचे बताऊंगा

Step 7 : Customization करने के बाद Save पर Click कर दें।

क्या Customization करना है?

आप जो भी Code का Use करें उसमें आप हमारे FeedBurner URL ( uri=AbhinavAjMods ) की जगह अपना Feedburner URL डाले।

और कुछ Widgets में Social Icon भी है तो उसमें आप अपने Facebook, Twitter, Google Plus, Pinterest, etc का URL डाल दें।

• Also Read : A2JM Social Icons Widget For Blogger
• Also Read : Blog Par Free Cloudflare CDN Setup Kaise Kre (Full Guide)
• Also Read : Blogging Shuru Karne Ke Liye Top10 Topics | Top10 Topics(Niche) to Start A Blog

तो दोस्तो आज आपने सीखा कि अपने blog पर Subscription Widget कैसे Add करते है। आशा है आपको हमारा ये post पसन्द आया होगा, अगर हाँ तो please share जरूर करें। और ऐसी ही Informational post पढ़ते रहने के लिए हमे Subscribe कीजिये। 

आप अपने सवाल हमसे Comment करके पूछ सकते हैं। धन्यवाद।

Responsive Recent Post Widget For Blogger

Hello Guys,
इस Post में मैं आपको अपने Blog पर Recent Post Widget कैसे लगाते है, वो Share करने वाला हूँ।
Recent post का मतलब हुआ कि सबसे नया Post। दोस्तो जब आप ये Widget अपने Blog पर लगाएंगे तो इस Widget में आपको अपने Blog पर का सबसे Latest Post Show होगा।

दोस्तो, कई बार ऐसा होता है कि आपके पुराने post पर visitors आते है तो उन्हें पता नही चल पाता कि आपके blog का सबसे latest post कोन सा है। इसके लिए उन्हें आपके mainpage पर जाना पड़ेगा। पर जब ये widget आपके blog पर होगा तो वो आसानी से आपके latest post को देख के पढ़ सकेंगे।

Style #1 :

<br /> <div class="recentpoststyle"> <br /> <script type="text/javascript"><br /> function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write(' <li class="recent-post-title">'),document.write(n),document.write('</li> <div class="recent-post-summ"> '),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div> "),1==posts_date&&document.write('<div class="post-date"> '+m[parseInt(u,10)]+" "+c+" "+o+"</div> ")}}<br /> </script><br /> <script type="text/javascript"><br /> var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script><br /> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts"><br /> </script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="https://www.abhinavajmods.com/2017/04/recent-post-widget.html" rel="nofollow">Recent Posts Widget</a><br /> <noscript>Your browser does not support JavaScript!</noscript><br /> <style type="text/css"><br /> .recentpoststyle {counter-reset: countposts;list-style-type: none;}<br /> .recentpoststyle a {text-decoration: none;color: #49A8D1;}<br /> .recentpoststyle a:hover {color: #000;}<br /> .recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}<br /> .recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}<br /> .post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}<br /> .recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}<br /> </style></div> <br />

Style #2 :

<br /> <script type="text/javascript"><br /> function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhArZ2vPRPPdGQT-EC2xPaikI8kIvVmiAbPyGBjjtu7Hf8o4Pul8kHH3TbxBahA-bUnzdH7ODP8zKnW2DiOpzSJq9DIDMKWAgOl_w1GNe98G-rMPlJSeSIlLpKIoMvXOQy1P2mLNL8PdwYe/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write(' <li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"> <a href="'+r+'" target ="_top">'+i+"</a></div> "),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details"> '),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div> "),document.write("</li> ")}document.write("</ul> ")}<br /> </script><br /> <script type="text/javascript"><br /> var posts_no = 5;<br /> var showpoststhumbs = true;<br /> var readmorelink = true;<br /> var showcommentslink = true;<br /> var posts_date = true;<br /> var post_summary = true;<br /> var summary_chars = 40;</script><br /> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script><br /> <a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="https://www.abhinavajmods.com/2017/04/recent-post-widget.html" rel="nofollow">Recent Posts Widget</a><br /> <noscript>Your browser does not support JavaScript!</noscript><br /> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><br /> <style type="text/css"><br /> img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}<br /> .recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}<br /> ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}<br /> ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}<br /> ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}<br /> .recent-posts-container a{text-decoration:none;}<br /> .recent-post-title {margin-bottom:5px;}<br /> .recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}<br /> .recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}<br /> .recent-posts-details a{color: #777;}<br /> </style><br />

अपने Blog में Recent Post Widget कैसे लगायें

आप दोनों में से जो widget add करना चाहते हैं उसके नीचे का code copy कर लें।
Code Copy करने के लिए आप Code वाले box में click करें और Keyboard से Ctrl+A button दबाएं।

Step 1 : अपने Blogger Account में login करें

Step 2 : Layout में जाएं और sidebar में Add A Gadget पर click करें

Step 3 : अब एक Popup Window खुलेगा उसमे HTML/JavaScript पर click करें

Step 4 : अपने जो code copy किया उसे paste करें

Step 5 : Save पर click करें

Thats It  :-)

• Also Read : Responsible Back To Top Button For Blogger
• Also Read : A2JM Social Icons Widget For Blogger
• Also Read : New Post को 1 मिनट के अंदर Search Engine में कैसे लाएं ( Fast Indexing Trick )

अगर आपको हमारा ये post पसन्द आया तो please share जरूर करें।
अपने सुझाव और परेशानी हमसे comment करके पूछें। हमारे blog पर visit करने के लिए thanx, हमेशा visit करते रहें।

Responsible Back To Top Button For Blogger | Back To Top Button Blog Me Kaise Add Kre

Hello Readers,

Iss post me mai aapko btaunga ki apne blog pe Back To Top button kaise add kre.

Agar aapke blog pe bhut se information hai. Ya aap long post likhte hai to ye button aapke blog pe hona bhut jaroori hai. Taki aapke visitors aasani se menu button ke paas jaa ske.

Note :- Back To Top button add krne me koi presaani bhi aa skti hai. So, Please sbse pehle apne blog ke template ka backup bna le. Agar aapko nhi pta ki template ka backup kaise bnaya jata hai to ye post pdhe : Blogger Blog Me Template Ka Backup Kaise Le

Chliye ab jaante hai ki apne blog pe Back To Top button kaise add kiya jaye.

How To Add Back To Top Button

Step1 : Sbse pehle apne blogger account me login kre.

Step2 : Ab Template me jaaye or Edit HTML pe click kre.

Step3 : Jb template khul jaaye to apne keyboard se Ctrl+F button dbaaye.

Step4 : Ab aapko ek upr search box dikhega usme <head>  likh ke search kre.

Step5 : Ab niche diye gye code ko copy kre or <head> ke just baad paste kre.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Step6 : Ab usi search box me ]]></b:skin>  likh ke search kre.

Step7 : Ab niche diye code ko copy kre or ]]></b:skin> ke pehle paste kre.
#return-to-top { position: fixed; bottom: 20px; right: 20px; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); width: 50px; height: 50px; display: block; text-decoration: none; -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px; display: none; } #return-to-top i { color: #fff; margin: 0; position: relative; left: 16px; top: 10px; font-size: 19px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #return-to-top:hover { background: rgba(0, 0, 0, 0.9); } #return-to-top:hover i { color: #fff; }

Step8 : Ab usi search box me </body> search kre. Or niche waale code ko copy krke </body> se thik pehle paste kr de.
 
</script> <a href='javascript:' id='return-to-top'><i class='fa fa-chevron-up'/></a> <script type='text/javascript'> // ===== Back to Top ==== $(window).scroll(function() { if ($(this).scrollTop() >= 50) { $('#return-to-top').fadeIn(200); } else { $('#return-to-top').fadeOut(200); } }); $('#return-to-top').click(function() { $('body,html').animate({ scrollTop : 0 }, 500); }); </script>

Step9 : Finally, Ab Save Template pe click kre or result dekhe.

Friends, Agar aapko hmara ye post psnd aaya to please share jarur karen.
Or hmare Facebook Page ko like kijiye.

A2JM Social Icons Widget For Blogger

Hello Readers,
Iss article ke sath mai aapse share krne ja rha hu ek social icon widget. Jo aapke blog ke look ko kaafi improve krega. Apne blog pe social icon widget add krna sbse achha trika hai apne blog ko aasaani se promote krne ka.

A2JM Social Icon Widget Ko Setup Kaise Kre

Step1 : Apne blogger account me login kre.
Step2 : Template me jaake Edit HTML pe click kre
Step3 : Ctrl+F dba ke </style> search kre. Or niche diye code ko </style> se thik pehle paste kre

/*================= CSS A2JM Social Icons Widget by www.abhinavajmods.com =====================*/ .widget_social_apps{margin-left:-.5%;margin-right:-.5%}.widget_social_apps:before,.widget_social_apps:after{content:" ";display:table}.widget_social_apps:after{clear:both}.widget_social_apps .app_social{margin:0 .5% .5%;width:24%;float:left;text-align:center;background-color:#111;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.widget_social_apps .app_social.facebook{background-color:#3e64ad}.widget_social_apps .app_social.twitter{background-color:#58ccff}.widget_social_apps .app_social.pinterest{background-color:#de010d}.widget_social_apps .app_social.instagram{background-color:#125688}.widget_social_apps .app_social.google{background-color:#dd4b39}.widget_social_apps .app_social.linkedin{background-color:#007bb6}.widget_social_apps .app_social.flickr{background-color:#ff0084}.widget_social_apps .app_social.vine{background-color:#00bf8f}.widget_social_apps .app_social:hover{background-color:#111}.widget_social_apps .app_social a{display:block;color:#fff;padding:15px 5px}.widget_social_apps .app_social span{display:block}.widget_social_apps .app_social span.app_icon i{font-size:24px;margin-bottom:5px}.widget_social_apps .app_social span.app_count{font-weight:700;line-height:16px}.widget_social_apps .app_social span.app_type{font-size:14px;line-height:16px}

Step4 : Save Template pe click kr de.
Step5 : Layout me jaaye or sidebar me Add A Gadget pe click kre.
Step6 : HTML/JavaScript pe click kre.
Step7: Niche waale link ko copy krke paste kre

 <div class="widget_social_apps"> <div class="app_social facebook"> <a href="https://www.facebook.com/USER_NAME" target="_blank"> <span class="app_icon"><i class="fa fa-facebook"></i></span> <span class="app_count">7845</span> <span class="app_type">Fans</span> </a></div> <div class="app_social twitter"> <a href="https://www.twitter.com/USER_NAME" target="_blank"> <span class="app_icon"><i class="fa fa-twitter"></i></span> <span class="app_count">32</span> <span class="app_type">Followers</span> </a></div> <div class="app_social pinterest"> <a href="https://www.pinterest.com/USER_NAME" target="_blank"> <span class="app_icon"><i class="fa fa-pinterest"></i></span> <span class="app_count">4774</span> <span class="app_type">People</span> </a></div> <div class="app_social instagram"> <a href="https://www.instagram.com/USER_NAME" target="_blank"> <span class="app_icon"><i class="fa fa-instagram"></i></span> <span class="app_count">65684</span> <span class="app_type">Followers</span> </a></div> <div class="app_social google"> <a href="https://www.google.com/USER_NAME" target="_blank"> <span class="app_icon"><i class="fa fa-google-plus"></i></span> <span class="app_count">65684</span> <span class="app_type">People</span> </a></div> <div class="app_social linkedin"> <a href="https://www.linkedin.com/USER_NAME" target="_blank"> <span class="app_icon"><i class="fa fa-linkedin"></i></span> <span class="app_count">65684</span> <span class="app_type">Fans</span> </a></div> <div class="app_social flickr"> <a href="https://www.flickr.com/USER_NAME" target="_blank"> <span class="app_icon"><i class="fa fa-flickr"></i></span> <span class="app_count">44</span> <span class="app_type">Followers</span> </a></div> <div class="app_social vine"> <a href="https://www.vine.com/USER_NAME" target="_blank"> <span class="app_icon"><i class="fa fa-vine"></i></span> <span class="app_count">574</span> <span class="app_type">People</span> </a></div> </div>

Step8 : USER_NAME ki jagah pe apne social media ka username daal de or "app_count" ke aage apne social media ke likes followers ke numbers likh de. Or Save pe click kr de.


Agar aapko hmara ye post achha lga to share jarur kre. Taaki jyada se jyada bloggers iss widget ke baare me jaan ske.
Aapko koi presaani ho to comment ke madhyam se hmse apne swaal puchhe. :-)