Theme customisation in the Blogger website
Welcome back guys❤️.
So, in this post, I will guide you on theme customisation (small tour) in the Blogger website. Today we are going to see,
#1.How to change theme in blogger
First of all, we need to know why we need to change Theme: the default theme of Blogger doesn't have a good looking, SEO friendly theme, readymade widgets and so on. So we need to change it.
How to change Theme
Go to Theme section in the blogger dashboard. Then click the drop down arrow mark, and you will see an option to restore your theme. Click restore and select file, your file is uploaded soon.
#2.How to Hide widgets from home in blogger
Some widgets will increase your home page loading speed, so we should hide from home.
How to hide from home
First of all choose a widget, You will hide it and copy the widget name of it. Then go to your theme section in edit html mode and search your widget name (if it is recent posts widget search "recent posts").
Then scroll down until the widget section. If you don't know about widget, see the image below.
Then find the following line of code, you can see above image.
<b:includable id='main' var='this'>
Then paste following line of code just below it,
<b:if cond='data:blog.pageType == "item"'>Then find following closed code ,
</b:includable>
Then paste the following code just before it and save it.
</b:if>
Some more hiding methods are available,
Show widget only home
<b:if cond='data:blog.url == data:blog.homepageUrl'
Show widget post page
<b:if cond='data:blog.pageType == "item"'>
To hide widget post page
<b:if cond='data:blog.pageType!= "item"'>
Show widget to specific page
<b:if cond='data:blog.url == "URL of the page"'>
*Replace your url of it*
To hide widget to specific page
<b:if cond='data:blog.url != "URL of the page"'>
#3.Perfect way add Html, css and Javascript in blogger
Every website works with HTML, CSS and JavaScript, so we should know some basics.
Whenever you want to add any css code, you should paste just before the </head> tag.
Whenever you want to add any of Html code, you should paste within the <body> to </body> tag.
Whenever you want to add any of javascript code, you should paste just before the </body> tag.
You can paste HTML, CSS, and JavaScript in the html box of layout. But it will contain any code, this will also work fine.
#4.Enable add gadget button in blogger
It is very simple, go to blogger theme section under the edit html mode and select section as you want like header, blog post, sidebar, and footer.
Then find following code in your Template, it will differ based on section (like header, blog post, sidebar, and footer.) Now today I taken sidebar.
<div id='sidebar-wrapper'> <b:section class='sidebar common-widget' id='sidebar1' name='Sidebar Right (A)' showaddelement='no'>
Here you only change "no" into "yes". Then save it and go back to your layout check it.
#5.Enable and disable any widgets in blogger
It is very simple, go to blogger theme section under the edit html mode and select widget in header or blog post or sidebar or footer.
Then find title of widget(I Will take archive widget) you need to Enable and disable. You will see following line of code,
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive' version='2' visible='true'>
if want to change fiixed widget into removble widget, then change locked='false' into 'true'.
if want to change removble widget into fixed widget, then change locked='true' into 'false'.
#6.Change Theme colors and font in blogger
Go to blogger dashboard under the theme section and click customize. You will see option to change color and fonts.
#7.Disable comments on articles and pages
Go to blogger post where you want to hide comments. You have a post settings option in right corner. Click option settings in that change 'allow' into 'Do not allow, hide settings'.
Conclusion
Finally we successfully customised our theme in Blogger website.if you want anything notify to me. If you are facing any issues please comment it below, I am here to help you. If you like this post please share your social media profiles.
Thank you ❤️…
Comments