Stop turning blogger to website it will make you to pay zero

Convert blogger into simple website
Hi friends,
Is it possible to convert blogger into simple website with multiple pages?
The answer is yes.
1.Finally I turned blogger to full static and responsive website by doing some tweaks. I am not a pro designer but internet and friends encouraged me to create this concept .If you have a custom domain then blogger is more than enough to create a static website. Thanks to Muhammed Mustafa ahmedzai mybloggertricks.com and[ w3schools(They are awesome, friends.....) ].
2. What knowledge we needed to do this conversion?
Some basic html and css knowledge.
3. What things we need to do & remember before the conversion?
Steps Description
A. Try this trick in new blog We can create 100 free blogs in one blogger account.
B. Create pages in blogger
C. Convert blogger to blank HTML template Follow MBT guide in below link… http://www.mybloggertricks.com/2012/09/turn-blogger-to-blank-page.html
[Doc attached]
D. Get w3 schools css code and template.
[This is needed to design as simple site]
Docs attached

Get W3 schools css code link:
https://www.w3schools.com/w3css/w3css_downloads.asp
WebsiteTemplate Name I took from w3schools:
Start Page Template:
https://www.w3schools.com/w3css/tryw3css_templates_start_page.htm




 
Features of this conversion:
1.Multiple static pages can be created and we have 20 pages!!! . In the internet I think the tutorial for this concept was not yet available. And friends now I have shared with you .
2.If you have domain name you can use that too. And it worked for me!!!!. No need of hosting.
3.Responsive site.
Note:
i)Don’t try to upload the given template. Open the given template with wordpad and replace the url with your custom domain. Copy and paste in blogger html editor page.
ii) In the template google map was also made into responsive. Labnol tutorial helped me a lot in this .Thanks to labnol
iii)Must need to put .com in your domain if you have used blogspot sub-domain like http://example.blogspot.com . And not http://example.blogspot.in . There is no problem in using your own domain
clip_image001
3.B Create Pages in blogger
clip_image002
If you need the pages link for “about us “like example.com/p/about-us.html.
clip_image003Write the page name in notepad .Click “new page” and paste the page name and publish as fast as you can do.
4. Change your favicon as your wish.
5. Assuming now you have converted blogger to blank html template using MBT guide .Now Set NO in choose mobile template which can be found in template settings
clip_image005
6.Remove if mobile condition format in template coding part
clip_image007

 

Sample Coding Structure in blogger


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr: >
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
AA. (<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>)
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
BB.(navbar-iframe { height:0px; visibility:hidden; display:none } Must add this css code
body {code available in attached doc }; Must add this css code
w3-container,all w3 css code here{};/*W3.CSS codes*/)
]]></b:skin>
</head>
<body>
CC.(Header coding part
Home Page coding part
About-Us page coding part
Services page coding part
Footer coding part
Section tag of blogger –We must place here.
MBT credits)
</body>
</html>
[I already mentioned that assuming we have already converted blogger to blank html template ]
 
 

Body part outline structure in blogger

<body>
Menu bar/Header coding part
Home Page coding part
About-Us page coding part
Services page coding part
Footer coding part
Section tag of blogger –We must place here.
MBT credits
</body>
 
 
The above code little bit descriptive structure given below
<body>

Menubar/Header
[If you want to show common layout design+ content in top on all pages]
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Layout design Code +Content with code
</b:if>

<b:if cond='data:blog.url == &quot;http://example.blogspot.com/p/about-us.html&quot;'>
Layout design Code +Content with code
</b:if>

<b:if cond='data:blog.url == &quot;http://example.blogspot.com/p/services.html&quot;'>
Layout design Code +Content with code
</b:if>

<b:if cond='data:blog.url == &quot;http://example.blogspot.com/p/contact-us.html&quot;'>
Layout design Code +Content with code
</b:if>

Footer
[If you want to show common layout design+ content in bottom on all pages]
<!--Please keep the this red color code in this place.Don’t move anywhere-->
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'/>
<div>
<!--Please keep the Credits intact-->
<center>
<p><a href='http://www.mybloggertricks.com'>My Blogger Tricks </a>&#169; 2012.</p>
</center>
</div>







 
</body>
If we able to understand the above table, the concept of conversion is finished
 
Why we need to follow the above 2 structures ?
AA:
After <head> add the below codes
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>[This code helps to make the site responsive]
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>[font awesome icon link]
BB:
[The below codes are the css part where we are going to add w3 css codes to design our static website]
navbar-iframe { height:0px; visibility:hidden; display:none } Must add this css code
Because it removes the blogger’s default navbar
body {code available in attached doc }; Must add this css code
w3-container,all w3 css code here{};/*W3.CSS codes
Note:[Be sure your all css codes must placed just above ]]></b:skin> ]
clip_image002[5]
CC.
Now we are going to design the site in blogger .This is the first trick in blogger to site conversion.
Assuming the w3 schools start page template. In the given template I want menubar on all pages .
clip_image003[6]
The code must be placed in between gap of
<body>
Menubar coding part
Home Page coding part
Example:
Go to https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_start_page&stacked=h
.
I used start page template.The class name is the important thing here
clip_image005[6]
<body>
<!--Paste the Menu Bar Code Here -->
<div class="w3-bar w3-red w3-card-2 w3-left-align w3-large">
<a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
<a href="#" class="w3-bar-item w3-button w3-padding-large w3-white">Home</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 3</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 4</a>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 3</a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 4</a>
</div>
</div>
<!—javascript must placed immediately below to a code if it uses javascript -->
<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById(&quot;navDemo&quot;);
if (x.className.indexOf(&quot;w3-show&quot;) == -1) {
x.className += &quot; w3-show&quot;;
} else {
x.className = x.className.replace(&quot; w3-show&quot;, &quot;&quot;);
}
}
</script>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Next,
So friends just understand the class name and use the layout , sidebar or anything .Mostly the class name starts with w3-
If you want to design more,
Kindly goto https://www.w3schools.com/w3css/default.asp
take the css class and add it.
Home page coding part:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
“Home Page Layout design Code(W3 schools) +Content with code”
</b:if>
About us page coding part:
<b:if cond='data:blog.url == &quot;http://example.blogspot.com/p/about-us.html&quot;'>
“About-us Layout design Code +Content with code”
</b:if>
Services page coding part
<b:if cond='data:blog.url == &quot;http://example.blogspot.com/p/services.html&quot;'>
“Service page Layout design Code +Content with code”
</b:if>
Contact-us page coding part
<b:if cond='data:blog.url == &quot;http://example.blogspot.com/p/contact-us.html&quot;'>
“Contact-us Layout design Code +Content with code”
</b:if>
Footer page coding part
Footer code is placed in between
</b:if>
<div class='w3-container w3-black w3-center w3-opacity w3-padding-64'>
<h1 class='w3-margin w3-xlarge'>Quote of the day: live life</h1>
</div>
<!-- Footer -->
<footer class='w3-container w3-padding-64 w3-center w3-opacity'>
<div class='w3-xlarge w3-padding-32'>
<a class='w3-hover-text-indigo' href='#'><i class='fa fa-facebook-official'/></a>
<a class='w3-hover-text-red' href='#'><i class='fa fa-pinterest-p'/></a>
<a class='w3-hover-text-light-blue' href='#'><i class='fa fa-twitter'/></a>
<a class='w3-hover-text-grey' href='#'><i class='fa fa-flickr'/></a>
<a class='w3-hover-text-indigo' href='#'><i class='fa fa-linkedin'/></a>
</div>
</footer>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'/>
Important part section tag of blogger:
A small drawback in blogger template is we must add one section & one id attribute. But with some changes we can solve this .See below.
 
clip_image007[6]
 
Section tag of blogger –We must place here.
<!--Please keep this code in this place. Don’t move anywhere-->
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'/>
<div>
<!--Please keep the Credits intact-->
<center>
<p><a href='http://www.mybloggertricks.com'>My Blogger Tricks </a>&#169; 2012.</p>
</center>
</div>
</body>
</html>
That’s all friends .If you have doubts check the template.
 
Check created websites in blogger: http://song-hear.blogspot.com, http://slidercheck.blogspot.com






Print Friendly and PDF
SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

    Blogger Comment
    Facebook Comment

1 comments :