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 Remove Blogger Attribution (Powered By Blogger) Gadget

<div dir="ltr" style="text-align: left;" trbidi="on"> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFSPfBg0DpIi9BJUnUftUTsu4qB1OFdNDvCbNhmsSWQOW3G1ub_MMHa4tfE4IeZCIpnGtVDE8bV7rBrv6qmL7avpwFdQxmmbDhMSBlZjkoDPHdKt3UCprmQI-mDFSUCt7vy0ffP7l5EWAB/s1600/Remove+bloggers+attribution+gadget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFSPfBg0DpIi9BJUnUftUTsu4qB1OFdNDvCbNhmsSWQOW3G1ub_MMHa4tfE4IeZCIpnGtVDE8bV7rBrv6qmL7avpwFdQxmmbDhMSBlZjkoDPHdKt3UCprmQI-mDFSUCt7vy0ffP7l5EWAB/s320/Remove+bloggers+attribution+gadget.png" width="320" /></a></div> <br /> <br /> The blogger attribution gadget is a gadget at the footer of any blogger blog stating "Powered By Blogger". Well many bloggers don't like it and want to remove it. To remove it they first use the typical method by going to <span style="color: #444444;">Dashboard>>layout>></span> and click on edit of the attribution widget.<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSPMGuDCTSAiLRH6IA_1Sznohd1bd_8P7DmGthwpVGwD4dbFdaFD8qhhMyy05G3oZuYK8hDQ4_2OI4LhgEF7r1seM_wlLAK72wGV_qFrcpmGLCEmc6Vj11e37PEhYAru8tVqvwiX2ivPE9/s1600/how-to-remove-powered-by-blogger-attribution-widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="58" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSPMGuDCTSAiLRH6IA_1Sznohd1bd_8P7DmGthwpVGwD4dbFdaFD8qhhMyy05G3oZuYK8hDQ4_2OI4LhgEF7r1seM_wlLAK72wGV_qFrcpmGLCEmc6Vj11e37PEhYAru8tVqvwiX2ivPE9/s400/how-to-remove-powered-by-blogger-attribution-widget.png" width="400" /></a></div> <br /> <br />  But what do they find ? There is no remove button ! What to do now? Well don't worry here is the very simple procedure to delete the attribution link :-<br /> <br /> <blockquote class="tr_bq"> <span style="color: #990000;">MUST KNOW</span><br /> <br /> <b>Do removing this blogger attribution gadget Violate the terms and condition of Google's Blogger?</b><br /> <span style="color: #444444;">The answer is no! You don't violate the terms and conditions of blogger.com as there is no user agreement or any message stating that you don't have rights to modify your template or the modification of blogger template code is restricted and the attribution gadget is a part of the template. So, according to their Terms & Conditions Google have no rights to take any action against you & your blog for removing the blogger's attribution Gadget.</span></blockquote> <br /> <br /> <h3 style="text-align: left;"> Here are the Steps to remove the attribution gadget:</h3> <div> <br /></div> <div> <ul style="text-align: left;"> <li>Go to Your Blog's <span style="color: #444444;">Dashboard>>Template</span>.</li> <li>Now click on edit html.</li> <li>Tick the Expand Widget Templates.</li> <li>Press Ctrl+f and in the find box type Attribution1</li> <li>You will find the code given below with Attribution1 highlighted.</li> </ul> </div> <div> <br /></div> <div> <blockquote class="tr_bq"> <b><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"><span style="color: #38761d;"><b:section class='foot' id='footer-3' showaddelement='no'> --->Do not remove this... only remove the code below..</span></span></span></b><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"><b:widget id='</span></span><b><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;">Attribution1</span></span></b><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;">' locked='true' title='' type='Attribution'></span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"><b:includable id='main'></span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"><div class='widget-content' style='text-align: center;'></span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"><b:if cond='data:attribution != &quot;&quot;'></span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"><data:attribution/></span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"></b:if> </span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"></div></span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"><br /></span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"><b:include name='quickedit'/></span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"></b:includable></span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"></b:widget></span></span></span></blockquote> </div> <div> <ul style="text-align: left;"> <li>Now delete the code in blue given above. </li> </ul> </div> <div> <br /></div> <div> <span style="color: red;"><b>Warning:</b></span> <i>Do not remove the code in Green or else your template will not work. Also keep a backup of your template before editing.</i></div> <div> <i><br /></i></div> <div> <ul style="text-align: left;"> <li>You are done. </li> <li>Save the changes and view your blog now.</li> </ul> <div> <br /></div> </div> <div> <i>Having problems?? feel free to ask me...</i></div> </div>

How To Remove Blogger Attribution (Powered By Blogger) Gadget

The blogger attribution gadget is a gadget at the footer of any blogger blog stating "Powered By Blogger". Well many blogger...

Read more »