AndroidHow - To

Revamp to blogger website free basic tips

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.

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’/>

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 }

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 }

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>

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/>

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. 

Related Articles

Back to top button