Recommend For You: Getting Help For Your Blog On Blogger
If you want to design your own blogger template then you need to start from start. Today, learn about simple code that will turn your test Blog's XML structure into a plain, empty template with no widgets. The blog posts section itself is a giant widget that can be styled in different ways. I always try to make things useful and simple for you so, I will share today how to create a blank HTML Page out of a Blogger Template.
How To Install The Static Theme:
- Go To Blogger Dashboard
- Create a New Blog For Demo
- Choose a Title and Address For New Blog
- Choose The Simple Template and Not Dynamic Views
- Next Navigate to Template > Edit HTML > Proceed
- Replace Whole Template Code With The Following Code:
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html><html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><head><meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/><b:if cond='data:blog.isMobile'><meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/><b:else/><meta content='width=1100' name='viewport'/></b:if><b:include data='blog' name='all-head-content'/><title><data:blog.pageTitle/></title><b:skin><![CDATA[/*-----------------------------------------------********STATIC HTML THEME**************CODED BY : Gagan Masoun ***********DOWNLOAD FROM: www.BlogsDaddy.com ****
----------------------------------------------- */#navbar-iframe { height:0px; visibility:hidden; display:none }body {font: $(body.font);color: $(body.text.color);background: $(body.background);padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);$(body.background.override) margin: 0;padding: 0;}]]></b:skin></head><body><b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'><b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/></b:section><div style='margin-top:400px; '><!--Please keep the Credits intact--><center><p><a href='http://www.blogsdaddy.com'>Blogs Daddy</a>© 2012.</p></center></div></body></html>
7. Click Save and When Asked About The Following Error:
Warning: Your new template does not include the following widgets:
BlogArchive1 Profile1 Attribution1 Header1 Blog1
Click On Delete Widgets and Its All Done!
Important Things:
- While creating widgets, you will add the JavaScript just below <head> or above</head>
- You will add the CSS code inside the <b:skin><![CDATA[/* and ]]></b:skin>
- And you will add the widget data or HTML code inside the two yellow body tags
How to Create a Blog Post Widget
Add the following code just above </body> (Yellow Highlighted) to make the Post widget function on your Static HTML Theme.
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
Save your template and then go to the layout page again. You can see the Post widget and you can now easily edit its formatting options. Go and create a new post and visit your blog to see it working just fine.Please visit the following link to understand the core basics of data tags.
- Read Here: Layouts Data Tags
Can I Create A HTML Website Now?
Now, you can now easily create HTML web pages. Showcase your portfolio, promote your other blogs by designing a list page for your other blog and do whatever you want!
My wish is improving your skills so that you may become a better designers, developers and bloggers. If you need any help, you can ask any time via comments. Stay Blessed and Love You All!
Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.
Useful tips Gagan, One can also hide the latest post and make a any blogger template by just hiding the Blog1 and any such applicable widget.
ReplyDeleteExample can be found here :
http://about.ksnworld.com/
Glad to know that you liked it..
DeleteEnjoy....
Nice and informative post pal. Thanks.
ReplyDeleteUSEFUL TRICKS
Thanks for comment @Abhishek
Deletecan I import css and js files that I have stored on cloud service? If so how and where to I put them?
ReplyDeleteYou can use them by giving source link to the css or js files. You can directly paste css code in blogger template.
ReplyDeleteGreat thank you I got that now but when I create a new page and type in the text i want it does not show up it is just a blank page with the template itself. Is there a widget or something i need to add? http://budsemporium.blogspot.com/
DeleteIt seems like your css is missing.
Delete