You can make free website in the blogger platform which is hosted by Google. Many of blogger engaged in this platform because you don't need to invest even single penny to create your website in this platform where you can make your own landing page, portfolio website, newspaper website, technolody website , health website etc as well as you can make your niche related website in this platform.
Along with the website it is essential part to desing your website eyecatching that assist you to increase the users engagement in your website. Users hate visiting ugly website without responsive layout. So, it is very important to design your website look attractive , simple and beautiful.
If you owned the website in the blogger platform then in this post i will tell you to the some basic ideas to how you can make your blog more dynamic , responsive and attractive. Before we start i recommend all of you that you must have basic knowledge of HTML , CSS and (XML[optional]). Let's have look down to get started.
Viewport : Your blogger website must have meta viewport that makes your website responsive , you can use the following code inisde your <head> tag.
Use Google Fonts : There are plenty of google fonts are available and which are totally free to use. You can goto this Link to see available fonts. Some fonts are Poppins, Roboto, Ubuntu, Montserrat, Nunito etc. You can use the google fonts with this following tag.
FontAwesome Icons : You can use fontawesome icons in menu, footer and etc. you can use link tag to link the fontawesome in your blogger website.
You can use the icon for free, you can cheak all the item in the fontawesome official website. to use fontawesome icon use the i tag or span tag.
Body background : Change the body background with your own desired color, in the following format of css.
Logo width, height : You can set the height or width of you logo, for that you need to add the following css.
Sidebar h2 : To modify all the h2 inside sidebar use the following code of css.
b:if conditions : Your can add b:if conditions to your items and add the styles as your wish separetly.
Breadcrumbs : You can style the breadcrumbs you can use the following tips.
Variables : You can use and set variable inside <b:skin> for ease use. It will make your task faster.
To utilize it you must use this way and it must in used inside the tag <b:skin>
Blog Title : You can print blog title without writting it's full link how to do that? see below.
If you like to anchor link then you can use :
There are still some other tips but as a begginer you can use the above mentioned tips to amendment your blogspot website. The more tips are commig soon , if you like to design your own template.
 |
| Blogger ideas to redesign |
Along with the website it is essential part to desing your website eyecatching that assist you to increase the users engagement in your website. Users hate visiting ugly website without responsive layout. So, it is very important to design your website look attractive , simple and beautiful.
If you owned the website in the blogger platform then in this post i will tell you to the some basic ideas to how you can make your blog more dynamic , responsive and attractive. Before we start i recommend all of you that you must have basic knowledge of HTML , CSS and (XML[optional]). Let's have look down to get started.
Ideas to revamp your blogger website
If you owned the website in the blogger platform then here is the essential ideas to amendment the your website. Check the what's the ideas are in the post below.Viewport : Your blogger website must have meta viewport that makes your website responsive , you can use the following code inisde your <head> tag.
<meta content='viewport' content='width=device-width, initial-scale=1'/>
Use Google Fonts : There are plenty of google fonts are available and which are totally free to use. You can goto this Link to see available fonts. Some fonts are Poppins, Roboto, Ubuntu, Montserrat, Nunito etc. You can use the google fonts with this following tag.
<link href='//fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Open+Sans:300,400,500,700|Poppins:300,400,600,700|' rel='stylesheet' type='text/css'/ >
CSS
{font-family:'Roboto',sans-serif}
replace roboto with your own desired font name. FontAwesome Icons : You can use fontawesome icons in menu, footer and etc. you can use link tag to link the fontawesome in your blogger website.
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
You can use the icon for free, you can cheak all the item in the fontawesome official website. to use fontawesome icon use the i tag or span tag.
<i class='fa fa-home'/>
<span class='fa fa-home'/>
<span class='fa fa-home'/>
Body background : Change the body background with your own desired color, in the following format of css.
body {background: #f3f3f3}
Logo width, height : You can set the height or width of you logo, for that you need to add the following css.
#Header1 #header-inner a img {width:160px;height:auto}
#Header1 .title-wrapper h1 { // css here } or
] #Header1 .title-wrapper h1 a { // css here }
#Header1 .title-wrapper h1 { // css here } or
] #Header1 .title-wrapper h1 a { // css here }
Sidebar h2 : To modify all the h2 inside sidebar use the following code of css.
for widget :
.sidebar .widget { // your css code here }
for h2
.sidebar .widget h2 { // css here }
.sidebar .widget { // your css code here }
for h2
.sidebar .widget h2 { // css here }
b:if conditions : Your can add b:if conditions to your items and add the styles as your wish separetly.
for index or homepage Url :
<b:if cond='data:blog.pageType=="index"'>
// your items here
</b:if>
<b:if cond='data:blog.homepageUrl'>
// your items here
</b:if>
if it is blog post :
<b:if cond='data:blog.pageType=="item"'>
// your items here
</b:if>
if it is page :
<b:if cond='data:blog.pageType=="static_page"'>
// your items here
</b:if>
<b:if cond='data:blog.pageType=="error_page"'>
// your items here
</b:if>
<b:if cond='data:blog.pageType=="index"'>
// your items here
</b:if>
<b:if cond='data:blog.homepageUrl'>
// your items here
</b:if>
if it is blog post :
<b:if cond='data:blog.pageType=="item"'>
// your items here
</b:if>
if it is page :
<b:if cond='data:blog.pageType=="static_page"'>
// your items here
</b:if>
<b:if cond='data:blog.pageType=="error_page"'>
// your items here
</b:if>
Breadcrumbs : You can style the breadcrumbs you can use the following tips.
.breadcrumbs { // your css here }
Variables : You can use and set variable inside <b:skin> for ease use. It will make your task faster.
<Variable name="maincolor" description="Color Theme" type="color" default="#01579b" value="#01579b"/>
To utilize it you must use this way and it must in used inside the tag <b:skin>
body {background: $maincolor }
Blog Title : You can print blog title without writting it's full link how to do that? see below.
This will show the blog title
<data:blog.title/>
<data:blog.title/>
If you like to anchor link then you can use :
<a expr:href='data:blog.homepageUrl'><data:blog.title/>
There are still some other tips but as a begginer you can use the above mentioned tips to amendment your blogspot website. The more tips are commig soon , if you like to design your own template.
0 Comments