Customise Blogger Official Contact Form Gadget by using Dynamic CSS

<div dir="ltr" style="text-align: left;" trbidi="on"> <div> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXZxJVeTq2gWbsWIacSQRXdIImoOijgc-ctyhBN0RZWQcnzO1I_obnWpMEhy7-EwiQSjq2M0Dw41iW8FBYBW0xHoLeXuAqPzTVFSYSO2LpekijLX1_50kCkCjpP3e9PI_K5D1T5a_AYoi6/s1600/blogger+contact+form1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Customise Blogger Official Contact Form Gadget by using Dynamic CSS" border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXZxJVeTq2gWbsWIacSQRXdIImoOijgc-ctyhBN0RZWQcnzO1I_obnWpMEhy7-EwiQSjq2M0Dw41iW8FBYBW0xHoLeXuAqPzTVFSYSO2LpekijLX1_50kCkCjpP3e9PI_K5D1T5a_AYoi6/s1600/blogger+contact+form1.png" title="Customise Blogger Official Contact Form Gadget by using Dynamic CSS" width="320" /></a></div> <br /> <i>Few months ago blogger added the contact form gadget in its gadget list and it got popularized very quick. But the Problem with the official contact form gadget designed by the blogger team is that it has a very simple and plain look. And if you too are bored with the plain look of the gadget and want to add some CSS magic to it this post is for you. Today in this post I am going to share the code developed by TWBLab that will add some CSS magic to the contact form gadget.</i><br /> <div> <br /></div> <table cellpadding="0" cellspacing="0" class="tr-caption-container" style="clear: right; float: right; margin-bottom: 1em; text-align: right;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1rp2xd2YK3M8K8Qj5ZJrmRTI6frFLzXSMDpEXrVgM5lH-dc0vQdsWHzpFa1g_a3LVzbzLJY-zHXxnO6ibt2d66wMrGclmpvkoCGgxGFynnbU3dwFQvcgueTAOJIATUqBf959VDK9YtD-i/s1600/blogger+contact+form.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Blogger Official Contact Form Gadget - The old look" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1rp2xd2YK3M8K8Qj5ZJrmRTI6frFLzXSMDpEXrVgM5lH-dc0vQdsWHzpFa1g_a3LVzbzLJY-zHXxnO6ibt2d66wMrGclmpvkoCGgxGFynnbU3dwFQvcgueTAOJIATUqBf959VDK9YtD-i/s1600/blogger+contact+form.png" title="Blogger Official Contact Form Gadget - The old look." width="185" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Blogger Official Contact Form Gadget - The old look .</td></tr> </tbody></table> <div> Here are the simple steps to customize the Blogger Official Contact Form Gadget by using CSS :</div> <div> <br /></div> <div> 1.) First of all, add the official contact form to your blog by following these simple steps :</div> <div> <br /></div> <div> <br /> <ul style="text-align: left;"> <li>Go To blogger dashboard>>layout.</li> </ul> </div> <div> <ul style="text-align: left;"> <li>Click on add a gadget link, wherever you want to add the gadget.</li> </ul> </div> <div> <ul style="text-align: left;"> <li>Now in the gadget lists click on the  <span style="background-color: orange; font-weight: bold;"><span style="color: orange;">||</span></span> <span style="color: orange; font-weight: bold;">More Gadgets </span>tab in the left sidebar. (see the fig. below)</li> </ul> </div> <div> <ul style="text-align: left;"> <li>Click on the  <span style="background-color: #0b5394; color: white;">+</span><span style="background-color: white; color: white;"> </span><span style="background-color: white;">button next to the contact form to add it.</span></li> </ul> </div> <div> <ul style="text-align: left;"> <li><span style="background-color: white;">You are done.</span></li> </ul> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpVHzVxlU1nl6mxs1ZmbJm6BMJrchDc8LLdPWbUjqclVwaoy3UmeUOsXfEg7XKKZ-hz27RtIFdCskNnaRus7vg8HfovmM1N7kEphBzFmjYsNjtNMqgf91Xp74ZtGWAjhBTgjtUB0zPsQfY/s1600/adding+contact+form.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Customise Blogger Official Contact Form Gadget by using Dynamic CSS" border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpVHzVxlU1nl6mxs1ZmbJm6BMJrchDc8LLdPWbUjqclVwaoy3UmeUOsXfEg7XKKZ-hz27RtIFdCskNnaRus7vg8HfovmM1N7kEphBzFmjYsNjtNMqgf91Xp74ZtGWAjhBTgjtUB0zPsQfY/s1600/adding+contact+form.png" title="Customise Blogger Official Contact Form Gadget by using Dynamic CSS" width="320" /></a></div> <div> <br /></div> <br /> <span style="background-color: white;"><br /></span> <br /> <table> <tbody style="background-color: #9fc5ee;"> <tr><td><div style="text-align: center;"> <span style="font-family: inherit; padding: 20px;"><b style="background-color: #ea9999;">Note :</b><b style="background-color: #ffe599;"> Skip This Box if you don't want to add the Contact gadget in a static page.</b></span></div> <span style="background-color: #9fc5e8; font-family: inherit;"><b><br /></b></span> <span style="background-color: #9fc5e8; font-family: inherit;"><b>But if you want to add the contact widget in a static page follow the above steps and after that follow the steps given below :</b></span><br /> <span style="background-color: #9fc5e8; font-family: inherit;"><br />Now you  have added the contact widget in your blog and want to add it in a static page, firstly you have to hide it from wherever you have added it. For that : </span><br /> <span style="background-color: #9fc5e8; font-family: inherit;"><br /></span> <br /> <ul> <li><span style="font-family: inherit;">Go to Blogger dashboard>>template.</span></li> </ul> <ul> <li>Click edit html and find the following code <b></b:skin</b> . You can do so by pressing ctrl+f and typing the code and hitting enter.</li> </ul> <ul> <li>After you find the code add this above the <b></b:skin :</b></li> </ul> <br /> <b><br /></b> <span style="background-color: #9fc5e8; color: white; font-family: Courier New, Courier, monospace;"><span style="line-height: 16.890625px;">#ContactForm1 {</span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;">display: none !important;</span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;">}</span></span><br /> <span style="background-color: #9fc5e8; font-family: inherit;"><br /></span> <br /> <ul> <li><span style="font-family: inherit;">Now save the template and go to the page where you want to add the contact form. Edit the page in the HTML mode and not in the compose mode in blogger post editor. And add the following code between the <div> </div> tags :</span></li> </ul> <span style="background-color: #9fc5e8; font-family: inherit;"><br /></span> <span style="background-color: #9fc5e8;"><span style="color: white; font-family: Courier New, Courier, monospace;"><span style="line-height: 16.890625px;"><form name="contact-form"></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;">    <br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email ID" size="30" type="text" value="" /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;">    <br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;">    <br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><input class="reset-button" type="reset" value="Clear" /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;">    <br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><div style="max-width: 222px; text-align: center; width: 100%;"></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"></div></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"></div></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"></div></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"></form></span></span></span><br /> <span style="background-color: #9fc5e8;"><span style="color: white; font-family: inherit;"><span style="line-height: 16.890625px;"><br /></span></span></span> <br /> <ul> <li><span style="line-height: 16.890625px;">Update or Publish the page.</span></li> </ul> <ul> <li><span style="line-height: 16.890625px;">You are done.</span></li> </ul> <br /> <span style="line-height: 16.890625px;"><br /></span></td> </tr> </tbody></table> <br /> 2.) Now you have added the Contact form gadget in your blog, its time to customize it. To do so,<br /> <br /> <br /> <ul style="text-align: left;"> <li>Go to the Blogger dashboard>> template</li> </ul> <ul style="text-align: left;"> <li>Click on Customise Button.</li> </ul> <ul style="text-align: left;"> <li>Click on advanced tab in the Template Customize.</li> </ul> </div> <div> <ul style="text-align: left;"> <li>Click Add CSS and add the following code.</li> </ul> <br /> <br /> <span style="font-family: Courier New, Courier, monospace;"><br />.contact-form-name, .contact-form-email, .contact-form-email-message {<br />max-width: 170px;<br />width: 100%;<br />font-weight:bold;<br />}<br /><br />.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {<br /> border: 1px solid rgb(221, 221, 221);<br /> box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;<br />}<br /> <br />.contact-form-name {<br />background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsxsnXINT5hYM3AjSy95Po4hRlXDyriphrM6WVLpMn7tyx4ij-ynlayQ9hIjSO1GabRm9O-Lkpc_PYoW_3baJolWPXaA7jUukicSXZb0fJVctZk0PqkNEs3ZesS7VfCC2ByCC-4N2oEII/s1600/privacy-icon.png) no-repeat 7px 8px;<br />background-color: #FFF;<br />border: 1px solid #ddd;<br />box-sizing: border-box;<br />color: #A0A0A0;<br />display: inline-block;<br />font-family: Arial,sans-serif;<br />font-size: 12px;<br />font-weight:bold;<br />height: 24px;<br />margin: 0;<br />margin-top: 5px;<br />padding: 5px 15px 5px 28px;<br /> border-radius: 3px;<br />vertical-align: top;<br /> transition: all 0.2s ease-in-out;<br /> -moz-transition: all 0.2s ease-in-out; /* Firefox 4 */<br /> -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */<br /> -o-transition: all 0.2s ease-in-outs;<br />}<br /> <br />input.contact-form-name:focus {<br /> border: 1px solid rgba(82, 168, 236, 0.8);<br /> outline: 0px none;<br /> box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);<br /> border-radius: 3px;<br />}<br /><br />input.contact-form-email:focus {<br /> border: 1px solid rgba(82, 168, 236, 0.8);<br /> outline: 0px none;<br /> box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);<br /> border-radius: 3px;<br />}<br /><br />.contact-form-email {<br />background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7jhsor5rFfRkHK9VcsFjENRvjbHbKAYKEb0HDjC9ej81q9bWvbEv1zwVhoaXh3u7H9VxNsT2yEYIJ3sgQPX-DcQGrAZYgK_KhrEwxf5f0lsLKXaMcR8mqwMOu7Ux0FCsYJbRWjKACCXo/s1600/email.png) no-repeat 7px 10px;<br />background-color: #FFF;<br />border: 1px solid #ddd;<br />box-sizing: border-box;<br />color: #A0A0A0;<br />display: inline-block;<br />font-family: Arial,sans-serif;<br />font-size: 12px;<br />font-weight:bold;<br />height: 24px;<br />margin: 0;<br />margin-top: 5px;<br />padding: 5px 15px 5px 28px;<br /> border-radius: 3px;<br />vertical-align: top;<br /> transition: all 0.2s ease-in-out;<br /> -moz-transition: all 0.2s ease-in-out; /* Firefox 4 */<br /> -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */<br /> -o-transition: all 0.2s ease-in-outs;<br />}<br /><br />.contact-form-email-message {<br />background: #FFF;<br />background-color: #FFF;<br />border: 1px solid #ddd;<br />box-sizing: border-box;<br />color: #A0A0A0;<br />display: inline-block;<br />font-family: arial;<br />font-size: 12px;<br />margin: 0;<br />margin-top: 5px;<br />padding: 10px;<br />vertical-align: top;<br />max-width: 210px!important;<br />height: 110px;<br />border-radius:4px;<br /> transition: all 0.2s ease-in-out;<br /> -moz-transition: all 0.2s ease-in-out; /* Firefox 4 */<br /> -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */<br /> -o-transition: all 0.2s ease-in-outs;<br />}<br /><br /> .contact-form-email-message:focus {<br /> border: 1px solid rgba(82, 168, 236, 0.8);<br /> outline: 0px none;<br /> box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);<br /> }<br /><br />.contact-form-button {<br /> display: inline-block;<br /> vertical-align: baseline;<br /> margin: 8px 2px 0px;<br /> height: 28px;<br /> outline: medium none;<br /> cursor: pointer;<br /> text-align: center;<br /> text-decoration: none;<br /> font: 14px/100% Arial,Helvetica,sans-serif;<br /> padding: 0.3em 2em 0.55em;<br /> text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);<br /> border-radius: 0.5em;<br /> box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);<br /> background: none repeat scroll 0% 0% rgb(255, 126, 67);<br /> border: 1px solid rgb(255, 126, 67);<br /> width: 80px;<br />}<br /><br /> input.reset-button {<br /> display: inline-block;<br /> vertical-align: baseline;<br /> margin: 8px 2px 0px;<br /> height: 28px;<br /> outline: medium none;<br /> cursor: pointer;<br /> text-align: center;<br /> text-decoration: none;<br /> font: 14px/100% Arial,Helvetica,sans-serif;<br /> padding: 0.3em 2em 0.55em;<br /> text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);<br /> border-radius: 0.5em;<br /> box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);<br /> background: none repeat scroll 0% 0% rgb(255, 126, 67);<br /> border: 1px solid rgb(255, 126, 67);<br /> width: 80px;<br /> color: #FFF;<br />}<br /> input.reset-button:hover {<br />text-decoration: none;<br /> border: 1px solid #ff8942;<br /> background: #ff8942;<br />}<br /> input.reset-button:active {<br />position: relative;<br />top: 1px;<br />}<br /><br />.contact-form-button:hover {<br />text-decoration: none;<br /> border: 1px solid #ff8942;<br /> background: #ff8942;<br />}<br />.contact-form-button:active {<br />position: relative;<br />top: 1px;<br /> border: 1px solid #ff8942;<br />}<br /><br />.contact-form-button-submit:focus, .contact-form-button-submit.focus {<br /> border: 1px solid rgb(255, 137, 66);<br /> background: none repeat scroll 0% 0% rgb(255, 137, 66);<br /> }<br /><br />.contact-form-button-submit:focus:hover, .contact-form-button-submit.focus:hover {<br /> border: 1px solid rgb(255, 137, 66);<br /> background: none repeat scroll 0% 0% rgb(255, 137, 66);<br /> box-shadow: 0px 0px 0px 1px #ff8942 inset, 0px 1px 1px rgba(0, 0, 0, 0.1);<br />}<br /><br />/*for FireFox*/<br /> input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner<br /> { <br /> border : 0px;<br /> } <br />/*for IE8 */<br /> input[type="reset"]:focus, input[type="button"]:focus<br /> { <br /> outline : none; <br /> }</span><br /> <span style="font-family: Courier New, Courier, monospace;"><br /></span> <span style="font-family: Courier New, Courier, monospace;"><br /></span></div> <div> 3.) Finally Save the changes and View you blog to see the Customization. (See the figure below)</div> <div> <br /></div> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihiS5HkKOvN_zkZA0TKloiuwHQ2CozQo_boZZ3YRpCazfiAV2IY1wlQja-iyuBU-UUmfc-S9hp1iuNYfFZTJd0MT3f0MFe5ZEQfwEwOG75CJMXAZBU_4_4IjTxNBq1xVZASb6vdooDeLLC/s1600/blogger+contact+form2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="The New Look. Much better than the old one." border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihiS5HkKOvN_zkZA0TKloiuwHQ2CozQo_boZZ3YRpCazfiAV2IY1wlQja-iyuBU-UUmfc-S9hp1iuNYfFZTJd0MT3f0MFe5ZEQfwEwOG75CJMXAZBU_4_4IjTxNBq1xVZASb6vdooDeLLC/s1600/blogger+contact+form2.png" title="The New Look. Much better than the old one." width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">The New Look. Much better than the old one.</td></tr> </tbody></table> <div> <br /></div> <div> <br /></div> <h3 style="text-align: left;"> <span style="color: #b45f06;">Features of this Dynamic CSS :</span></h3> <div> <ol style="text-align: left;"> <li>Original Contact form gadget contains no clear/reset button. But these will have.</li> <li>The <b>:focus</b> styling adds more beauty to it.</li> <li><b>placeholder</b> is included making it easy for the visitors to understand whether they are inputting right or not.</li> <li>No ugly dotted lines at the border are formed on the buttons after clicking them but in the official gadget there were ugly dotted lines created at the border after clicking the button.</li> <li>The width and height of the text-area is fully controllable.</li> </ol> </div> <div> <i><br /></i></div> <div> <i>Having any Problems? Let me know via comments section.</i></div> <div> <br /></div> <div> <br /></div> <div class="separator" style="clear: both; text-align: center;"> </div> </div>

Customise Blogger Official Contact Form Gadget by using Dynamic CSS

Few months ago blogger added the contact form gadget in its gadget list and it got popularized very quick. But the Problem with the of...

Read more »

How To Add Related Post Widget By LinkWithin in Your Blog

<div dir="ltr" style="text-align: left;" trbidi="on"> <i><br /></i> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7doDB2SHs7eSR0Jgf9no8PpmY6JkU35DdX8pMIwnyq6UCIVBiPddZOGNKTsrmclgq29RypCrlk_qtXuUz3SmyYZUvIRjDJt5WyzTsMqabE_D8ZUfsUHpH_aYpzsOjLwpqoRpmEyaebX0f/s1600/LinkWithin.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How To Add Related Post Widget By LinkWithin in Your Blog" border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7doDB2SHs7eSR0Jgf9no8PpmY6JkU35DdX8pMIwnyq6UCIVBiPddZOGNKTsrmclgq29RypCrlk_qtXuUz3SmyYZUvIRjDJt5WyzTsMqabE_D8ZUfsUHpH_aYpzsOjLwpqoRpmEyaebX0f/s320/LinkWithin.png" title="How To Add Related Post Widget By LinkWithin in Your Blog" width="320" /></a></div> <i><br /></i> <i><br /></i> <i>When we talk about must-have widgets for a blog, related posts widget is among the ones that come to our mind. The related posts widget keeps your visitors engaged with your content by showing them some extra posts of the same type as of the post they are reading. So, today I going to show you how to add the Related Posts widget made by LinkWithin. LinkWithin is a website that provides related posts widget with thumbnails. It is used by many bloggers in the blogosphere due to its simplicity and easy procedure to Install.</i><br /> <i><br /></i> <i><b><span style="font-family: Courier New, Courier, monospace;"><br /></span></b></i> <i><b><span style="font-family: Courier New, Courier, monospace;">Also Read: </span></b></i><a href="http://pretoproblogger.blogspot.com/2013/11/how-to-add-cool-social-sharing-widget.html" target="_blank"><span style="font-family: Courier New, Courier, monospace;">How To Add Cool Social Sharing Widget with hover Effect?</span></a><br /> <br /> <h3 style="text-align: left;"> Why Choose LinkWithin related posts widget?</h3> <br /> <b>The question may come to your mind. There are plenty of related posts widgets in the web that have more features than LinkWithin's one, that have cool design, etc. etc. So why choose LinkWithin? </b><br /> <br /> As I said earlier many people choose it because it is easy to install and has lots of plus points:<br /> <br /><blockquote class="tr_bq"> <ul style="text-align: left;"> <li>They retrieve and index all stories from your blog archive, not just recent stories, making them accessible to new or casual readers of your blog who would not otherwise encounter them.</li> </ul> <br /><ul style="text-align: left;"> <li>The widget links to stories that are relevant and interesting to readers of a particular post, keeping them engaged with your blog, and increasing your traffic.</li> </ul> <br /><ul style="text-align: left;"> <li>Their widget is minimally styled and blends in with your site design.</li> </ul> </blockquote> <h3 style="text-align: left;"> <br /></h3> <div style="text-align: left;"> Recommended : </div> <div style="text-align: left;"> <br /></div> <div style="text-align: left;"> <a class="GHUY-LPPB" href="http://pretoproblogger.blogspot.com/2013/09/how-to-add-commentluv-comments-to-your.html" style="border: 0px; color: #1155cc; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin: 0px 10px 0px 0px; max-width: 100%; overflow: hidden; padding: 0px; text-overflow: ellipsis; vertical-align: baseline; white-space: nowrap; width: auto;" target="_blank">How To add CommentLuv Comments to Your Blogger Blog (Blogspot)</a></div> <div style="text-align: left;"> <br /></div> <div style="text-align: left;"> <a class="GHUY-LPPB" href="http://pretoproblogger.blogspot.com/2013/10/how-to-add-floating-navigation-bar-in.html" style="border: 0px; color: #1155cc; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin: 0px 10px 0px 0px; max-width: 100%; overflow: hidden; padding: 0px; text-overflow: ellipsis; vertical-align: baseline; white-space: nowrap; width: auto;" target="_blank">How to add a floating navigation bar in blogger blog?</a></div> <div style="text-align: left;"> <br /></div> <div style="text-align: left;"> <a class="GHUY-LPPB" href="http://pretoproblogger.blogspot.com/2013/08/all-in-one-subscription-widget-for.html" style="border: 0px; color: #1155cc; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin: 0px 10px 0px 0px; max-width: 100%; overflow: hidden; padding: 0px; text-overflow: ellipsis; vertical-align: baseline; white-space: nowrap; width: auto;" target="_blank">All in one subscription widget for bloggers</a></div> <h3 style="text-align: left;"> <br />Steps To Install The LinkWithin Related Posts Widget:</h3> <div> <ul style="text-align: left;"> <li>Go To <a href="http://www.linkwithin.com/" target="_blank">LinkWithin</a></li> </ul> </div> <div> <br /></div> <div> <ul style="text-align: left;"> <li>Fill Your Details in the blue box as shown in the fig. below.</li> </ul> </div> <div> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTJS75ATh44M8voSyP9KWA22wqY3BWtk-GSH2YLY5137b9pquErZf7mzxvRBfmSBCXwi1o-804-Iznt1TjEqJFUoDIYsFSrXUbpxt14BBvMSeOXdV-82n0PeOphyphenhyphenSlfw67E1ln-LDJvviT/s1600/related+posts+widget+by+linkwithin.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How To Add Related Post Widget By LinkWithin in Your Blog" border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTJS75ATh44M8voSyP9KWA22wqY3BWtk-GSH2YLY5137b9pquErZf7mzxvRBfmSBCXwi1o-804-Iznt1TjEqJFUoDIYsFSrXUbpxt14BBvMSeOXdV-82n0PeOphyphenhyphenSlfw67E1ln-LDJvviT/s320/related+posts+widget+by+linkwithin.png" title="How To Add Related Post Widget By LinkWithin in Your Blog" width="320" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> </div> <ul style="text-align: left;"> <li>Now Click On <b>Get Widget!</b> Button.</li> </ul> <br /> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> </div> <ul style="text-align: left;"> <li>After Clicking You will be Directed to the page having Instructions to install the Widget. The Instruction page  for different platforms are different so choose your platform carefully.</li> </ul> <br /> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> </div> <ul style="text-align: left;"> <li>Now follow the steps on the Instruction Page to Install the LinkWithin Related Posts Widget to your blog.</li> </ul> <br /> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> </div> <ul style="text-align: left;"> <li>You are Done.</li> </ul> <br /> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> <i>Have Problems/feedback? Let me know through comments.. Also if you found the article useful Subscribe to our blog we have lots of interesting stuffs for you.</i></div> <div> <div> <br /></div> </div> </div>

How To Add Related Post Widget By LinkWithin in Your Blog

When we talk about must-have widgets for a blog, related posts widget is among the ones that come to our mind. The related posts widge...

Read more »

All in one subscription widget for bloggers

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggzcAXWUg4tEjXyJyUgQ9MX8ZmRUh4kkpO-bRm0tQruBqY-7TyGH6TRhQqrUpH6SevZJ7HTmdL0XGKa3f_kmE_obDPSpZ8yKsc9oGvOYzVaB43o6ErypQs06lJrv0pTfKOTD1tCzrir3vI/s1600/all-in-one-subscription-box-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggzcAXWUg4tEjXyJyUgQ9MX8ZmRUh4kkpO-bRm0tQruBqY-7TyGH6TRhQqrUpH6SevZJ7HTmdL0XGKa3f_kmE_obDPSpZ8yKsc9oGvOYzVaB43o6ErypQs06lJrv0pTfKOTD1tCzrir3vI/s320/all-in-one-subscription-box-for-blogger.png" width="305" /></a></div> <i><br /></i> <i>Hey guys today I going to share all in one subscription box for blogger. I myself have added it in this blog. Every blogger knows that a subscription box is important as helps the visitors to stay connected to your blog. If you create a new post on your blog the visitor who have subscribed will get an email that your blog has new content and then the visitor will visit if he/she is interested. Thus it also increases your visits and makes your visitor a<a href="http://pretoproblogger.blogspot.in/2013/07/increasing-your-blog-readers.html" target="_blank"> reader of your blog.</a> And so blogger must add convincing content and subscription box so that visitors might end up subscribing your blog. And if the subscription box will have a little bit social touch it will be much better. Rather than adding social buttons and subscription box as different widgets we can add a Hybrid subscription box. Here is a good subscription box by <a href="http://windroidclub.com/" rel="nofollow" target="_blank">windroid club</a>:</i><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <h3 style="text-align: left;"> Steps to add this widget:</h3> <div> <br /></div> <div> <ul style="background-color: white; box-sizing: border-box; color: #333333; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;"> <li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;"><span style="font-family: inherit;">Go to your <b style="box-sizing: border-box;">blogger dashboard</b></span></span></li> </ul> <ul style="background-color: white; box-sizing: border-box; color: #333333; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;"> <li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">Select your blogger blog</span></li> </ul> <ul style="background-color: white; box-sizing: border-box; color: #333333; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;"> <li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">Click on <b style="box-sizing: border-box;">Layout </b>from Drop Down menu (<b>shown in picture</b>)</span></li> </ul> <div> <br /></div> <div style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-align: center; text-decoration: none; transition: all 0.4s ease-in-out;"> <div style="text-align: center;"> <a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFC00yUiEneD6AjI38US0XzgRdNNkTHwtoqTm9JAIePU5WoBPQ15Tbz9E1zq7eJgaqmu9nmXkP5hZ-elIzdQu-_aArare_n3GyD-Zb0rm7bk-L5MzwqzO_sXvn1rJIxJZDQ3IOQGf0QE/s900/1.jpg" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><span style="box-sizing: border-box;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFC00yUiEneD6AjI38US0XzgRdNNkTHwtoqTm9JAIePU5WoBPQ15Tbz9E1zq7eJgaqmu9nmXkP5hZ-elIzdQu-_aArare_n3GyD-Zb0rm7bk-L5MzwqzO_sXvn1rJIxJZDQ3IOQGf0QE/s900/1.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; height: auto; max-width: 100%; padding: 1px; position: relative; transition: all 0.4s ease-in-out;" width="400" /></span></a></div> </div> <span style="font-family: inherit;"><br style="box-sizing: border-box;" /></span> <ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;"> <li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">A new Window appear</span></li> </ul> <ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;"> <li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;"><span style="font-family: inherit;">Click on <b style="box-sizing: border-box;">Add gadget</b></span></span></li> </ul> <ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;"> <li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;"><span style="font-family: inherit;">And select <b style="box-sizing: border-box;">HTML/JavaScript</b></span></span></li> </ul> <ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;"> <li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;"><span style="font-family: inherit;">Next Box of HTML/JavaScript will appear <b style="box-sizing: border-box;">(shown in picture)</b></span></span></li> </ul> <span style="font-family: inherit;"><span style="box-sizing: border-box;"><b style="box-sizing: border-box; line-height: 18px;">   </b></span></span><br /> <div style="text-align: center;"> <span style="font-family: inherit;"><span style="box-sizing: border-box;"><b style="box-sizing: border-box; line-height: 18px;"><b style="box-sizing: border-box;"><a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAMOxnn2e2idyVYMtV5VFR0V8y4gRM4WvXfjh-Uj4RTeahMfv0NZ4KMtnTL0hgUsBSHtjW0v96bm52gxxVuAlZLOH4mSyV4liN99iqDL0EEBjA-ISYSmmMoHMEa9y-xUOmQ5ADyld1wk/s900/2.png" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><span style="box-sizing: border-box;"><img alt="http://pretoproblogger.blogspot.com" border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAMOxnn2e2idyVYMtV5VFR0V8y4gRM4WvXfjh-Uj4RTeahMfv0NZ4KMtnTL0hgUsBSHtjW0v96bm52gxxVuAlZLOH4mSyV4liN99iqDL0EEBjA-ISYSmmMoHMEa9y-xUOmQ5ADyld1wk/s900/2.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; height: auto; max-width: 100%; padding: 1px; position: relative; transition: all 0.4s ease-in-out;" title="http://pretoproblogger.blogspot.com" width="400" /></span></a></b></b></span></span></div> <span style="font-family: inherit;"><b style="box-sizing: border-box; line-height: 18px;"></b></span><span style="font-family: inherit;"><br style="box-sizing: border-box;" /></span> <ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;"> <li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">Now the box of HTML/JavaScript will appear when you click on the box.</span></li> </ul> <div> <br /></div> <div style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-align: center; text-decoration: none; transition: all 0.4s ease-in-out;"> <div style="text-align: center;"> <a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUdV6YIWJL_6zaX7XjWBObPleQyH90jbXnEyWlI1cx-p71AHEPFFTP_HHljNXTZsdowc_jZVihijglqjUzCgfqwCt7ENToRb94VpaD7pBmHPYYdY1epu_Cw5TmOh7S2SVcGqujzXNRB0/s900/5.png" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><span style="box-sizing: border-box;"><img alt="http://pretoproblogger.blogspot.com" border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUdV6YIWJL_6zaX7XjWBObPleQyH90jbXnEyWlI1cx-p71AHEPFFTP_HHljNXTZsdowc_jZVihijglqjUzCgfqwCt7ENToRb94VpaD7pBmHPYYdY1epu_Cw5TmOh7S2SVcGqujzXNRB0/s900/5.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; height: auto; max-width: 100%; padding: 1px; position: relative; transition: all 0.4s ease-in-out;" title="http://pretoproblogger.blogspot.com" width="400" /></span></a></div> </div> <ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;"> <li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">Now <b style="box-sizing: border-box;">paste the following code to add the All in one subscription widget</b> on your blog.</span></li> </ul> <blockquote class="tr_bq"> <style type="text/css"><br /> #wcsub-box<br />{<br />box-shadow:1px 1px 4px #dcdcdc;<br />-moz-box-box-shadow:1px 1px 4px #dcdcdc;<br />-web-kit-box-shadow:1px 1px 4px #dcdcdc;<br />-goog-ms-box-shadow:1px 1px 4px #dcdcdc;<br />margin-bottom:70px;<br />height:264px;<br />}<br />#wc-socico<br />{<br />height:33px;<br />border-bottom:1px solid #dcdcdc;<br />border-left:1px solid #dcdcdc;<br />border-right:1px solid #dcdcdc;<br />padding:2px;<br />background:#ffffff;<br />}<br />#wc-socicoimg<br />{<br />height:28px;<br />width:28px;<br />}<br />#wc-socico table<br />{<br />border:none;<br />}<br />#wc-rscount<br />{<br />margin-top:2px;<br />margin-right:-25px;<br />}<br /><br />#wcsub-box .wcsub-fblike { border-bottom: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; padding: 5px; background:#fff;}<br /> #wcsub-box .wcsub-email {border: 1px solid #dcdcdc; background: #f8f8f8; padding:11px;}<br /> #wcsub-box .wcsub-email h4{color: #444;font-family: Arial;font-size: 12px; margin: 0 0 10px;}<br /> #wcsub-box .wcsub-email .txt,#wcsub-box .wcsub-email .txt:focus{background:#fff; float:left; color:#777777; border:1px solid #dcdcdc; border-radius: 3px; padding: 7px 10px 8px; width: 140px;}<br /> #wcsub-box .wcsub-email .wcsub-button,#wcsub-box .wcsub-email .wcsub-button:focus{background:#222222; border:1px solid #222222; color:#fff; border-radius: 3px; float: right; font-size: 12px; font-weight: bold; padding:7px 3px; }<br /> #wcsub-box .wcsub-email<br /> input, textarea {<br />font-family: Georgia, "Times New Roman", Times; font-size: 1em;}<br /></style><br /><br /><div id="wcsub-box"><br /><div class="wcsub-email"><br /><h4>Get FREE updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: red;">pretoproblogger</span>" target="_blank" style="color:#3b5998;">Email</a> | <a href="http://feeds.feedburner.com/<span style="color: red;">pretoproblogger</span>" target="_blank" style="color:orange;">RSS</a></h4><br /><form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: red;">pretoproblogger</span>', 'popupwindow',<br /> 'scrollbars=yes,width=700px,height=700px');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify"><br /><input name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address')<br />{this.value = '';}" value="Enter your email address" class="txt" /><br /><input type="hidden" name="uri" value="<span style="color: red;">Pretoproblogger</span>" /><br /><input type="hidden" value="en_US" name="loc" /><br /><input type="submit" value="Subscribe" class="wcsub-button" /><br /><div style="clear:both;"></div><br /></form><br /> </div><br /><br /><br /><br /><div id="wc-socico"><br /><table border="0" cellspacing="0" cellpadding="0" width="298"><br /><tbody><br /><tr><br /><td valign="top" ><a href='http://feeds.feedburner.com/<span style="color: red;">pretoproblogger</span>' target='_blank' rel=nofollow' ><img id="wc-socicoimg" src="http://3.bp.blogspot.com/-KjMedajdI2w/UTtUCEg5_zI/AAAAAAAABcQ/K3qUhvOTNrA/s1600/feed.png" alt="Subcribe to our RSS feeds" /></a></td><br /><br /><td valign="top" ><a href='http://www.facebook.com/<span style="color: red;">Pretoproblogger</span>' target='_blank' rel='nofollow'><img id="wc-socicoimg" src="http://2.bp.blogspot.com/-7_3aMhrvLq4/UTtUB9H5ZyI/AAAAAAAABcM/JjZGcP7r3_I/s1600/fbb.png" alt="Join Us on Facebook" /></a></td><br /><br /><td valign="top" ><a href='<span style="color: red;">https://plus.google.com/102731179322289098765</span>' target='_blank' rel='nofollow'><img src="http://4.bp.blogspot.com/-vnYX9pKHZCU/UTtUCWa3-HI/AAAAAAAABcU/Xi7l4YF136U/s1600/gpp.png" alt="Add to Circles" id="wc-socicoimg" /></a></td><br /><br /><td valign="top" ><a href='https://twitter.com/<span style="color: red;">pretoproblogger</span>' target='_blank' rel='nofollow'><img id="wc-socicoimg" src="http://2.bp.blogspot.com/-VXfOkCT43uI/UTtUEItlzyI/AAAAAAAABck/cvROEjW1Vx8/s1600/tww.png" alt="Follow us on Twitter" /></a></td><br /><br /><td valign="top" ><p id="wc-rscount"><a href="http://feeds.feedburner.com/<span style="color: red;">PretoproBlogger</span>"><img src="http://feeds.feedburner.com/~fc/<span style="color: red;">PretoproBlogger</span>?bg=000000&amp;fg=ffffff&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p></td><br /></tr></tbody></table><br /></div><br /><br /><br /><br /><div class="wcsub-fblike"><br /><iframe src="//www.facebook.com/plugins/like.php? href=https://www.facebook.com/<span style="color: red;">Pretoproblogger</span>?fref=ts &send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe><a href=" https://www.facebook.com/<span style="color: red;">Pretoproblogger</span>" target="_blank" rel="nofollow" style="color: #3B5998; font-family: arial; font-size: 16px; font-weight: bold; line-height: 20px;"> Like us on Facebook </a><div class="clear"></div><br /> </div><br /><br /><br /><br /> <a href="https://twitter.com/<span style="color: red;">pretoproblogger</span>" class="twitter-follow-button" data-show-count="true" data-lang="en-gb">Follow <span style="color: red;">@PreToProBlogger</span></a><br /><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script><br /><br /><br /><br /><div class="wcgplus"><br /> <div class="g-plus" data-href="<span style="color: red;">https://plus.google.com/102731179322289098765</span>" data-width="290" data-height="131" data-theme="light"></div><br /></div><br /> </div></blockquote> <div> </div> </div> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div> <ul> <li>Change all the social ids/addresses highlighted in red with your social ids/addresses</li> </ul> <ul> <li>Leave the widget title blank.</li> </ul> <ul> <li>Click <b>save</b></li> </ul> </div> <div> <span style="line-height: 22px;"><i>You are done now.</i></span><br /> <span style="line-height: 22px;"><i><br /></i></span> <blockquote class="tr_bq"> <span style="line-height: 22px;"><i>Comment if you liked the subscription box...</i></span></blockquote> </div> </div>

All in one subscription widget for bloggers

Hey guys today I going to share all in one subscription box for blogger. I myself have added it in this blog. Every blogger knows that a...

Read more »