Template is the source code of a blog, it contains all CSS codes, gadget codes, settings, theme and everything so if you want to make any changes in your blog you need to edit template of your blog. Its very easy to edit template in blogger but those who are new to blogging are not familiar with it. Although gadgets can be added from layout by clicking on add a gadget but some gadgets are added by editing template so its very important for a blogger to know how to edit template.
A blogger should know how to edit blog template not because it is required for adding some gadgets but also if he wants to customize an existing gadget, increasing or decreasing width of sidebar, making cool effects in images, adding effects in header/logo of blog such as flipping effect and so on. This post is for those who don't know how to edit template in blogger. To edit template of your blog simply follow below steps:
Step 1: Go to blogger dashboard.
Step 2: Select template in menu and click on edit Html.
Step 3: Now you are on the Html page, if you want to search some thing click inside the code and use Ctrl+F on your keyboard, type inside the search box and hit enter.
Note: Click inside the code as shown in below image before searching something or else page search box will be opened which will not search for code you are looking for, it will search only things out of Html code.
Step 4: Click on save after making changes and you are done.
If you are adding a CSS code in your blog search for ]]></b:skin> and paste CSS code just above it.
If you are adding a javascript code search for </head> and paste your code below it, make sure that the code you are adding it closed by </script> for example if the code is like below code:
My javascript code
then it must be closed by </script> and opened by <script> similar to below code:
<script>My javascript code</script>
If you want to add any ads or gadget at bottom of blog search for </body> and paste your code above it.
Create backup:
Always create a backup before editing code because sometimes unexpected things goes and codes are deleted by mistake which causes problem in template and blogger doesn't accept code when save template is clicked. So always create a backup before editing template, if you don't know how to create a backup in blogger then click here.
Searching gadget codes in blogger template:
As I said blogger template is source code of a blog so it contains all gadget codes, sometimes gadget codes are searched in template for customizing them like hiding or displaying them in some pages, showing them on mobile phone devices or anything else but it becomes a problem to search gadget codes in template as it has so many codes. There are two ways to search a gadget code in blogger template one is to use Ctrl+F and the other is to jump to the widget. Using Ctrl+F is easy way but it is useful only if you have named the gadget while adding it otherwise you can't find it and jumping to the widget is also a good way to search a gadget but for that you must know ID of certain widget. How to find ID of a gadget in blogger? click here.
If you don't know how to jump to a widget in blogger template then follow the below steps:
Step 1: Go to blogger dashboard and select template in the menu.
Step 2: Click on Edit Html and on the Html page click on jump to widget beside save template.
Step 3: When you click on Jump to widget it will show list of gadgets you have added in your blog, use the ID of widget which you are looking for, for example Html 1, Html 2, Html 3, Html 4, Html 7, FollowbyEmail etc.
Step 4: Click the gadget ID and you are done.
If you haven't created a backup before editing template of your blog and you have made changes in template and now you want to undo the changes then simply click on revert changes above the template and all changes will be reverted.
If you want to revert all changes which have made in widgets to default then click on revert widget templates to default beside Revert change.
Recently blogger has updated the template and some new features are added to like Preview template which lets you to preview changes you make in your template, so now you don't have to view blog after making every change just make changes and click on preview template.
Thanks for visiting 101Helper, I hope you like this post. Share it with others and help 101Helper grow. Follow and subscribe to get instant news about blogging.
Search tags: How to edit template in blogger, blogging help, how to search a gadget in blogger, find gadget code in blogger template, how to search a code in blogger, how to create backup in blogger, 101Helper blogging tips and tutorials.
Note: Click inside the code as shown in below image before searching something or else page search box will be opened which will not search for code you are looking for, it will search only things out of Html code.
Step 4: Click on save after making changes and you are done.
If you are adding a CSS code in your blog search for ]]></b:skin> and paste CSS code just above it.
If you are adding a javascript code search for </head> and paste your code below it, make sure that the code you are adding it closed by </script> for example if the code is like below code:
My javascript code
then it must be closed by </script> and opened by <script> similar to below code:
<script>My javascript code</script>
If you want to add any ads or gadget at bottom of blog search for </body> and paste your code above it.
Create backup:
Always create a backup before editing code because sometimes unexpected things goes and codes are deleted by mistake which causes problem in template and blogger doesn't accept code when save template is clicked. So always create a backup before editing template, if you don't know how to create a backup in blogger then click here.
Searching gadget codes in blogger template:
As I said blogger template is source code of a blog so it contains all gadget codes, sometimes gadget codes are searched in template for customizing them like hiding or displaying them in some pages, showing them on mobile phone devices or anything else but it becomes a problem to search gadget codes in template as it has so many codes. There are two ways to search a gadget code in blogger template one is to use Ctrl+F and the other is to jump to the widget. Using Ctrl+F is easy way but it is useful only if you have named the gadget while adding it otherwise you can't find it and jumping to the widget is also a good way to search a gadget but for that you must know ID of certain widget. How to find ID of a gadget in blogger? click here.
If you don't know how to jump to a widget in blogger template then follow the below steps:
Step 1: Go to blogger dashboard and select template in the menu.
Step 2: Click on Edit Html and on the Html page click on jump to widget beside save template.
Step 3: When you click on Jump to widget it will show list of gadgets you have added in your blog, use the ID of widget which you are looking for, for example Html 1, Html 2, Html 3, Html 4, Html 7, FollowbyEmail etc.
Step 4: Click the gadget ID and you are done.
If you haven't created a backup before editing template of your blog and you have made changes in template and now you want to undo the changes then simply click on revert changes above the template and all changes will be reverted.
If you want to revert all changes which have made in widgets to default then click on revert widget templates to default beside Revert change.
Recently blogger has updated the template and some new features are added to like Preview template which lets you to preview changes you make in your template, so now you don't have to view blog after making every change just make changes and click on preview template.
Thanks for visiting 101Helper, I hope you like this post. Share it with others and help 101Helper grow. Follow and subscribe to get instant news about blogging.
Search tags: How to edit template in blogger, blogging help, how to search a gadget in blogger, find gadget code in blogger template, how to search a code in blogger, how to create backup in blogger, 101Helper blogging tips and tutorials.
Comments
Post a Comment