Installing Custom Blogspot Template To Your Blog

<div><div dir="ltr" style="text-align: left;" trbidi="on"><h2 style="text-align: left;"><span style="color: #3d85c6;"><b>How To Install Template To Your Blogspot</b>. </span></h2><div dir="ltr">Are you a newbie to blogging and you want an outstanding and responsive blog interface?<br>Are you new to blogger and you don't like your current blogspot template? </div><div dir="ltr">Congratulations, this article will guide you on every steps on how to beautify and redesign your blog to make it look astonishing. </div><div dir="ltr">In this tutorial, i will be covering areas as;</div><ul style="text-align: left;"><li> how to backup your Blogspot Template. </li><li> how to upload custom template to your dashboard. </li><li> how to restore / revert back to previous template.</li></ul><br><div dir="ltr">Before proceeding to further steps of this tutorial, its <b><span style="color: red;">important</span></b> you have the <b>latest</b> backup of your "<span style="color: red;">CURRENT TEMPLATE</span>" just incase anything goes <span style="color: red;">wrong</span>. </div><div dir="ltr"></div><h3 style="text-align: left;"><span style="color: #3d85c6;"><u><b>How to backup you </b><b>BlogSpot</b><b> current Template</b>. </u></span></h3>1) Login to your blogspot dashboard by following this link <a href="http://draft.blogger.com/">http://</a><a href="http://draft.blogger.com/">draft.blogger.com</a>. <br>2) After successful login, head straight to the left PANEL of your dashboard metromenu and click "<b><span style="color: red;">TEMPLATE</span></b>". <br>[img]. <br>3) In the <b><span style="color: red;">template</span></b> menu, select "<b><span style="color: red;">BACKUP/RESTORE</span></b>" situated at the top most right side of your dashboard. <br>[img]<br>4) After clicking "<span style="color: red;">BACKUP/RESTORE</span>" button, you will be presented with a pop-up dialog box as shown in the image below <br>[img] <br>5) From the pop-up box, select <b><span style="color: red;">DOWNLOAD THE FULL TEMPLATE</span></b> and your download file should be set for download. <br>6) After complete file downloading processes, a download pop-up will be displayed prompting to <b>save</b> or <b>open</b> file. <br>Choose <b><span style="color: red;">SAVE FILE</span></b> and download should start immediately. The file name of this downloaded file should have template_<b>xxxxxxxxxxxx.xml</b> where <b>xxxxxx</b> are random digits generated by Google Blogger (example is <b>template6061288766868825291.xml</b>). <br>Ensure you note down the directory this template is stored just incase you think you want to upload back to override other one. <br><div dir="ltr">That's all about backing-up your template. <br>Now, let's see how to install template to Blogspot. </div><div dir="ltr"><h3 style="text-align: left;"><span style="color: #3d85c6;"><u><b>Complete Steps And Guides On How To Install Template To Your Blogspot</b>. </u></span></h3>1) Having known how to backup your template, kindly proceed to step 2. If you skim through without reading this article from the very 1st start, i will suggest you start all over from the the beginning before jumping to step 2.<br>2) Download your preferred template which you intend to install. <br>3) Go to TEMPLATE tab of your dashboard and hit it. <br>4) Select "BACKUP/RESTORE" button and a pop-up box will be displayed. <br>5) From the pop up box, click the <b>upload</b> button and the <b>file manager</b> of your computer or mobile phone will be launched. <br>6) Navigate through to the directory where your downloaded custom template you want to upload was <b>saved</b> and select it. <br>7) Finally, click "SAVE" and your template will be uploaded and this new template will override the previous one. <br>8) Enjoy your new blog interface. Any query or challenges, feel free to contact me or drop your comments. </div><div dir="ltr"><br></div><div dir="ltr"><br></div><div dir="ltr">Alternative Method On How To Install Template To Your Blogger Dashboard Using Copy And Paste<br>Do you know that when you use the 1st method discussed above, there is this high tendency of having numerous gadgets in your <b>layout</b> and by so doing, you actually don't know which gadget is active for modification. <br>The copy and paste method involves overriding the whole previous template gadgets and coding, and now replacing them only with the new template version. Thereby making your admin layout neat and organized. <br><h4 style="text-align: left;"><b><u><span style="color: #3d85c6;">Steps</span></u></b>. </h4>Always <span style="color: red;">ensure to backup</span> your current template by following the guide above before proceeding to any step of this tutorial. <br>1) Login your blogger dashboard. <br>2) Navigate to Template Tab at the left menu of your dashboard and click it. <br>3) On the next displayed page, click <b>EDIT HTML</b> and you will be presented with the whole xml, Javascript, css, html source code of your current template. <br>4) Place your cursor on any part of the working area (code textarea) and highlight the whole code by pressing <b>CTRL+A</b> on your keyboard. <br>5) Now that the whole code has been highlighted, its time to CUT(remove/delete) them off. Ensure the whole codes are still highlighted and then press <b>CTRL+X</b> or <b>DEL</b> to <b>CUT</b> or <b>DELETE</b> the whole respectively. <br>Your template working area should be empty and contain no text or code. <br>6) Minimize your browser and Now navigate to the template you wish to install from your PC file manager and open it by double clicking the template file name. <br>7) You might be prompted with an option as to which application you want to use to view, read and edit the file. <br>Choose <b>NOTEPAD</b>. <br>I believe you already know how to use notepad to read and edit texts. <br>8) Now, in your notepad , you're already presented with the code. Highlight the whole text by pressing <b>CTRL+A</b> and copy it by pressing <b>CTRL+C</b>. <br>9) Restore or maximize your browser and paste the copied code to your empty work area by pressing <b>CTRL+V</b>. <br>Your working area should now contain codes of your new template. <br>10) Click <b>SAVE</b>. </div><div dir="ltr">You have now successfully installed template using copy and paste. Launch your blog and preview its new look. </div><div dir="ltr"><h3 style="text-align: left;"><u><span style="color: #3d85c6;"><b>How To Restore Back Blogger Template</b>. </span></u></h3>Did you modify your code and noticed code syntax error? Or are you confused as to where an error is displaying? <br>Then reverting back to any error free template is best way out. <br><b>Reverting</b> your template to error free type is same as how to install template. <br>All you need do is install the template using any of the above two listed methods and you are done. </div><div dir="ltr">Thank You. <br>Comment, drop contributions and don't forget to subscribe to our newsletter. </div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTHhsOAYnovHxiRZkBfi3SGRu3MbOdYWspyen-weOmli4sxxq3vxZ_NwAF7-Zk6DUaOMgYmcAP8MtOckX-H_F6a8sb-bhHQ-OVUYp3ybgDXDVbVHBdpYsOB6XhuXrJGGsTKENy189H6YW0/s1600/PicsArt_10-07-08.56.30.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTHhsOAYnovHxiRZkBfi3SGRu3MbOdYWspyen-weOmli4sxxq3vxZ_NwAF7-Zk6DUaOMgYmcAP8MtOckX-H_F6a8sb-bhHQ-OVUYp3ybgDXDVbVHBdpYsOB6XhuXrJGGsTKENy189H6YW0/s640/PicsArt_10-07-08.56.30.jpg"> </a> </div></div></div>

Hide Footer Credit Link from Blogger Template without Redirecting to Any Website

<div><p dir="ltr"><i><b>Hide Footer Credit Link from Blogger Template without Redirecting to Any Website</b></i></p><p dir="ltr"><b><u>Note</u></b>: <i>Before proceeding to this step please backup your template</i>.</p><p dir="ltr">Many websites are available on the internet which provides very stylish blogger template at very low cost. If you purchase their template than that template will not contain any credit link. </p><p dir="ltr">These websites also provide most of the free blogger template with <b>Non-removable credit link</b>. Means, what? If you’ll try to remove credit link from their template, then your blog will automatically <b>redirect</b> to their website (Homepage or a particular site). This is because they added some JavaScript into their free templates. In other hand, if you undo the changes and keep their original credit of template then it works perfectly.</p><p dir="ltr">[img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWUuBp5sogyQ6W_-otQ7VBXh5f-WCRj9Vq7RwogDs8UH1F3HE5R9810-aDpaUeHfJGxlpJOENSXZJZlRGq9aEzREDM73EhdapCCgjK-80fFyOBZz5MGTS7lkQS24aTnXeCa5NVq2QsLvc/s320/remove-footer-link-from-blogger-templates.png"][/img] </p><p dir="ltr">Basically, newbies blogger don’t want to invest money in <b>purchasing</b> any premium template and thus, use these types of free template for their blog. Many of them are trying to <b>remove credit link</b> but <i>unsuccessful</i>, if you are one of them then no need to wait more. Because here I'm going to share a method by which you can <i><b>hide footer link</b></i> and stop redirecting to any website.</p><p dir="ltr"><i><b>How to Hide Credit Link?</b></i><br>Actually, these links are attached with some <b>JavaScript</b> or <b>CSS</b>. </p><p dir="ltr">Finding JavaScript from the template and then removing is too boring and time-consuming also it requires lot’s of effort to do this. </p><p dir="ltr">But in other hand, you can easily hide the credit/footer link via CSS. This method is very simple and takes only 2 minutes.<br>Steps to <i><b>Hide</b></i> Credit/Footer Link:<br>>> First of all, go to Blogger.com<br>Just Login to your Blogger Profile and select your blog.<br>>> Now go to <b>Dashboard</b> > <b>Template</b> > <b>Edit HTML</b>.<br>[img src="http://i.imgur.com/D0RaIeBh.jpg"][/img]</p><p dir="ltr">>> Go to the <b>footer</b> and find the <b>credit/footer</b> link which needs to remove/hide. You’ll find something like <b>Copyright</b>, credit or designed etc (Like the picture shown below).<br>[img src="http://www.alltechway.com/wp-content/uploads/2015/07/1.png"][/img]</p><p dir="ltr">>> Add the following line with your original copyright ID. (As shown in picture below).</p><p dir="ltr">[code type="Css"]style=”visibility: hidden”[/code]</p><p dir="ltr">[img src="http://www.alltechway.com/wp-content/uploads/2015/07/2.png"][/img]</p><p dir="ltr">Now, you need to <u><i><b>Save</b></i></u> your Template.</p><p dir="ltr">Conclusion:<br>Some of you are searching on the internet how to <b><i>HIDE</i></b> footer credit link and convert free blogger template into premium. </p><p dir="ltr">So, I hope this tutorial helps you. Share your idea/suggestion/feedback related to articles I publish here. Thanks, and stay tuned. </p><p dir="ltr">MORE BLOGGING TIPS TO BE <u>SHARED</u></p><div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7_G-_mGbeWOa8jOPTG0MZaCOuMJ4RnSRMeU1u8T5C2Mw67Z-iD5R7NCIchZe6j7CzoEGsVyfP7nLLBmV6EX5ecJ2vNei1S2hOzupcTbGb-z0u_bROscwu9jk76tOocafrs9g2ChAtYG7J/s1600/20160914155846.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7_G-_mGbeWOa8jOPTG0MZaCOuMJ4RnSRMeU1u8T5C2Mw67Z-iD5R7NCIchZe6j7CzoEGsVyfP7nLLBmV6EX5ecJ2vNei1S2hOzupcTbGb-z0u_bROscwu9jk76tOocafrs9g2ChAtYG7J/s640/20160914155846.jpg"> </a> </div></div>

How To Embed a Photo Watermark Widget on Blogspot in just 5 simple steps

<div><p dir="ltr">The following tutorial will embed POWr Photo Watermark as a Widget to the Blogger website Layout. <br></p><p dir="ltr"><b>STEP 1</b> <br>Blogger Layout</p><p dir="ltr"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXpLPyDFibyAbUySggAw4V0p9axEgnp60lipKTj9hcryo_3tAd5YmvDo_bM2_FGaw7tQJ-j2Mrh5G1d9k5SsHDq_HsYzZbWjDOqTDA0gFWabnnXFiDr2aVo8Z23EJCJg1KfCnniOQyaWvV/s1600/blogger-layout-step-1.gif"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXpLPyDFibyAbUySggAw4V0p9axEgnp60lipKTj9hcryo_3tAd5YmvDo_bM2_FGaw7tQJ-j2Mrh5G1d9k5SsHDq_HsYzZbWjDOqTDA0gFWabnnXFiDr2aVo8Z23EJCJg1KfCnniOQyaWvV/s1600/blogger-layout-step-1.gif"></a></p><p dir="ltr">Launch your Blog <br></p><p dir="ltr"><b>STEP 2</b> <br>Add a New Gadget</p><p dir="ltr"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr4HGaG3QgWs2mxYcFveo_iA7zSFliFZGx2I6oIl6Kguc9-TxRJ7tb_qR1npnocjVTOTm4IQ-pdy4bALuEm3zn2woh_L9tEBg3_LhyphenhyphenYzyAfb_tYYbZAu71IqQWdgANwd0e3JiATOSZmeqm/s1600/blogger-layout-step-2.gif"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr4HGaG3QgWs2mxYcFveo_iA7zSFliFZGx2I6oIl6Kguc9-TxRJ7tb_qR1npnocjVTOTm4IQ-pdy4bALuEm3zn2woh_L9tEBg3_LhyphenhyphenYzyAfb_tYYbZAu71IqQWdgANwd0e3JiATOSZmeqm/s1600/blogger-layout-step-2.gif"></a></p><p dir="ltr">Click on any of the Add a Gadget icons to add POWr Photo Watermark. The Blogger Gadget pop-up will appear. <br><br></p><p dir="ltr"><b>STEP 3</b> <br>Create HTML Gadget</p><p dir="ltr"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigjrdNPUoCNj3PksVLFM7mDHXSWAiYu10nCVhHSH1N201noQquxpuS2W26fE6TsyAcchJSXuV6mNTdT3ck5Z6hvy5TgqRvm6B-cOvsVhZAnnsAly-3ij7Kq4SFZw82DZetsnr3ulvb4h-V/s1600/blogger-layout-html-3.jpg"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigjrdNPUoCNj3PksVLFM7mDHXSWAiYu10nCVhHSH1N201noQquxpuS2W26fE6TsyAcchJSXuV6mNTdT3ck5Z6hvy5TgqRvm6B-cOvsVhZAnnsAly-3ij7Kq4SFZw82DZetsnr3ulvb4h-V/s1600/blogger-layout-html-3.jpg"></a></p><p dir="ltr">Select the HTML/Javascript gadget from the list. <br></p><p dir="ltr"><b>STEP 4</b> <br>Paste Code</p><p dir="ltr"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU0QNmnZVmKKInBDaFAPd8HJJ3PJXCvA1lOcG255f4hAouxSQQkwI6uDSR73uElJiEPiToiIlifX0BFCO-k47ad8QRHrxrZpePFthDh4TX07VKT1UmqwOw1Za6UUrgWue1NG4vPtu2JwsY/s1600/blogger-layout-html-4.gif"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU0QNmnZVmKKInBDaFAPd8HJJ3PJXCvA1lOcG255f4hAouxSQQkwI6uDSR73uElJiEPiToiIlifX0BFCO-k47ad8QRHrxrZpePFthDh4TX07VKT1UmqwOw1Za6UUrgWue1NG4vPtu2JwsY/s1600/blogger-layout-html-4.gif"></a></p><p dir="ltr">Copy and paste this code into the Content box and save. </p><p dir="ltr">Copy </p><p dir="ltr">[code type="Javascript"]</p><p dir="ltr"><script src="http://www.</p><p dir="ltr">powr.io/powr.js" </p><p dir="ltr">external-type="blogger"></p><p dir="ltr"></script></p><p dir="ltr"><div class=</p><p dir="ltr">"powr-photo-watermark" </p><p dir="ltr">id="d020836d_1473709753047</p><p dir="ltr">"></p><p dir="ltr"></div></p><p dir="ltr">[/code]</p><p dir="ltr"><b><br></b></p><p dir="ltr"><b>STEP 5</b> <br></p><p dir="ltr">Save Arrangment</p><p dir="ltr"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimB4Y21p60mSsGAkxnO3q1ayVNax_3pz9HroxivLiGBTEOvDP8rL263k5yLfTFOnx_ulrRxPuHsSmdaQhwBO4oenjICkOYi0CMhpKSgxnUBG-BK8Er4pNLS_k1ZT6omA-ydwHm6UCOjUai/s1600/blogger-layout-html-5.gif"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimB4Y21p60mSsGAkxnO3q1ayVNax_3pz9HroxivLiGBTEOvDP8rL263k5yLfTFOnx_ulrRxPuHsSmdaQhwBO4oenjICkOYi0CMhpKSgxnUBG-BK8Er4pNLS_k1ZT6omA-ydwHm6UCOjUai/s1600/blogger-layout-html-5.gif"></a></p><p dir="ltr">Your Photo Watermark has now been added to your Layout. Click Save Arrangement, then click View Blog to set up the plugin on your live site. <br><br></p><p dir="ltr"><b>STEP 6</b> <br>View Blog to customize POWr Photo Watermark</p><p dir="ltr"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt7C4KewshQUlc-78cWZEjgRq-R847CjUT1YJBlvh3CT4bgSNkIU90fjrEZlAvUX8h2huSfuYyJSe8RekhbOGq-QvOi-OmiGmlEm_KtWys2_xJeqXyY6Lo0EwDcrZjIQslFYOgbD3ibKSg/s1600/default-edit.jpg"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt7C4KewshQUlc-78cWZEjgRq-R847CjUT1YJBlvh3CT4bgSNkIU90fjrEZlAvUX8h2huSfuYyJSe8RekhbOGq-QvOi-OmiGmlEm_KtWys2_xJeqXyY6Lo0EwDcrZjIQslFYOgbD3ibKSg/s1600/default-edit.jpg"></a></p><p dir="ltr">Click on <b><i>View Blog</i></b> to go to the live, published Blogger site. Find your new Photo Watermark Widget. You will see a blinking Edit Me sign, pointing to a Settings Icon . <br></p><p dir="ltr">Click the Settings Icon to launch the POWr Editor and start editing your Photo Watermark Widget. <br><br></p><p dir="ltr">That's it! You're done!</p><div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhknVsWGPeb3ThS4SquwOJTM_ABxiFzJJE1s7mbdpCzF3ARSZjMaWyYFLghuAbBUeotrq2Ou0gEldwToyptzZ0CLW6CoLow04T8yubH-Ty-wLc836AmmhSARMhtQnkMqy2YPJJWHFT8x24X/s1600/showcase.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhknVsWGPeb3ThS4SquwOJTM_ABxiFzJJE1s7mbdpCzF3ARSZjMaWyYFLghuAbBUeotrq2Ou0gEldwToyptzZ0CLW6CoLow04T8yubH-Ty-wLc836AmmhSARMhtQnkMqy2YPJJWHFT8x24X/s640/showcase.png"> </a> </div></div>