How to make blogspot look like a webpage
Make your blogspot page on blogger.com look like a webpage
This is how to use blogger.com to host your webpage and make it look
and feel like a webpage. Before you start, make sure to backup the
blog template in case you make a mistake and need to start over.
When you are done with these 5 easy steps, you too can have a blogspot webpage
on blogger.com. See our example:
Blogspot Blogger page look like webpage
Step 1 - Create a new blog: Choose a name and choose the first simple template.
(For this example, we made look-like-webpage.blogspot.com)
Step 2 - Remove Navbar: Go to Layout, click on edit under Navbar and
check Off to remove it.
Step 3 - Remove all the extras: Go to Template and choose edit HTML and
make the following changes:
Remove Powered by Blogger and title on pages by replacing:
<![CDATA[]]]]><![CDATA[></b:skin>]]>
with this:
<![CDATA[#Attribution1 {display: none;} ]]]]><![CDATA[></b:skin>
<b:if cond='data:blog.pageType == "static_page"'>
<style>.post-title.entry-title{ display: none;}
</style></b:if>]]>
Remove dotted line at the bottom by replacing:
<![CDATA[border-top: $(footer.bevel) dashed #bbbbbb;]]>
with this:
<![CDATA[border-top: $(footer.bevel) #bbbbbb;]]>
Remove Subscribe to: Posts (Atom) by removing the following line:
<![CDATA[<b:include data='feedLinks' name='feedLinksBody'/>]]>
Remove home link at bottom, white space on top and left of page, and No Post message by
adding the following above the </head> tag:
<![CDATA[<style type='text/css'>
#blog-pager{display:none !important;}
.content-inner
{ margin-top: -80px !important;
margin-left: -60px !important; }
.status-msg-wrap {display: none;}
</style>]]>
Remove Header by replacing:
<![CDATA[<b:widget id='Header1' locked='true'
title='Header' type='Header'>]]>
with this:
<![CDATA[<b:widget id='Header1' locked='false'
title='Header' type='Header'>]]>
Remove post-footer by replacing:
<![CDATA[.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;]]>
with this:
<![CDATA[.post-footer {
display:none;
margin: 20px -2px 0;
padding: 5px 10px;]]>
If you go to your blog now, all you should see is a completely white page.
Step 4 - Make a webpage: go to Pages and make a new page (don't forget to press publish).
After you do this, click on view page to get the URL.
We named the page blogger-webpage
and our URL is http://look-like-webpage.blogspot.com/p/blogger-webpage.html
Step 5 - Make your newly made webpage the default blogspot page by going back
to Template. Choose edit HTML and add the following after the <head> tag:
<![CDATA[<script>
if(window.location.href ==
'http://look-like-webpage.blogspot.com/?m=1'
|| window.location.href ==
'http://look-like-webpage.blogspot.com' ) {
window.location="http://look-like-webpage.
blogspot.com/p/blogger-webpage.html"; }
</script>]]>
Replace "look-like-webpage" with the name of your blog, and replace "blogger-webpage" with the name
of your page name from step 4 above.
PS. You may want to also go into template and choose: "No, show desktop template on mobile devices" so your newly
made webpage shows up on mobile devices, too.
You are done. Good job!
|
|
|
|
|
