This article,Duong.ph'll instructions for your blog on google's blogspot platform. And, of course, will be 100% new design template.
A few things to note:
»Do not design at the background of your main blog. You should create another blog just for the design. After completion design bring a new template that applies to your main blog.
»In this tutorial I just wrote about the template structure. The css problems you see in this decent article.
»Before you design paper outlines the about your blog desired shape will look like. This will help you to shape yourself need to do is nothing romantic avoid not know where to start.
Start design
1.The basic structure 1 blog template takes the following form:
<?xml version="1.0" encoding="UTF-8" ?>
<html 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>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navigation bar ' type='Navbar'/>
</b:section>
</body>
</html>
First you go Design → Edit HTML, remove all the code inside it and paste the above code and save it. When you save will appear 1 warning. You select the item " Delete Gadgets".
On the home page you will see your Blog is white and there is nothing on it.
2.Insert Meta tags and Title to blog-template structure.
» Meta tags will be inserted under card <head> and on <b:skin> card
To your blog is search engines pay attention to this part is the most important part.
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<meta content='Description of the blog ' name='description'/>
<meta content='Keywords blog ' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + " - Description of the blog "' name='description'/>
<meta expr:content='data:blog.pageName + ", Keywords blog "' name='keywords'/>
</b:if>
Change the red line to suit your blog is all right.
» Css the attribute specified the blog module is inserted directly above the card: ]]></b:skin>
To understand the properties of CSS, you can read in This article.
» The blog's module display will is inserted inside : <body> Module displays on Blog </ body>
To learn how to set up the module, you can see in This article.
3. Sketch the layout of your blog on the paper.(This is the first and important step to create your own blog).
(For example illustrates)
» At the top of the page header.
» In the middle including 3 part, is one sidebar left (sidebar1), 1 right sidebar (sidebar2) and article content in the middle. (Post)
» At the end of the page is footer.
These are just the major modules. Inside the each major module will also be divided into smaller modules. Now you need create the initial module for the blog.
Declare some css properties for the module body to the front of the tag: ]]> </ b: skin>
as follows:
as follows:
body{
background: #FFFFFF; /* Blog background color (default is white)*/
font: 16px georgia; /* Font size for all Blog */
thuộc tính khác; /* Some attributes for all Blog */
...;
}
Note: You can find out more about the other attributes later in This article .I will not mention this again, everything related to the css property you on the article above.
Next create one module with ID: "box" located in the "body" and contains all the rest of the blog module.
Method: in between <body> and </ body> Add one code as below:
<div id='box'>
Blog Content
</div>
Continue to insert the css property to "ID box" by adding this code on the tag: ]]> </ b: skin>
#box{
Background:#3399bb; /* Background of Module box */
Width: 990px; /* The width of the Blogs */
Margin:0 auto; /* Balancing module in the middle of the page */
Property 1; /* Some other properties */
Property 2; /* Some other properties */
...;
}
Save your template and then on the home page you will see one new module is formed.
5.Split "module box" into 3 parts: header, main-outer, footer
Next is to create 3 main sections on the blog, as I mentioned above, including header, main-outer, footer.
How it is similar to calling "ID box" namely:
in between <div id='box'>and the tag closing </ div> of the "box". Add one code as below:
<div id='header'>
Blog Content
</div>
<div id='main-outer'>
Blog Content
</div>
<div id='footer'>
Blog Content
</div>
Continue to insert the css property for 3 id just created by adding its css code above tag :
]]> </ b: skin>
#header{
Background:#DDDDDD; /* Bacground of module header */
Property 1; /* Some other properties */
Property 2; /* Some other properties */
...;
}
#main-outer{
Background:#EEEEEE; /* Bacground of module main-outer */
Property 1; /* Some other properties */
Property 2; /* Some other properties */
...;
}
#footer{
Background:#BBBBBB; /* Bacground of module footer */
Property 1; /* Some other properties */
Property 2; /* Some other properties */
...;
}
6. Split Module main-outer 3: sidebar1, main, sidebar2.
Resume split module Main-outer to 3 small module : sidebar1, main and sidebar2. Similar you split mudule box above:
Note: Because the three "modules" on the attribute used to move the module to the left, then right to the bottom it needs more <div style='clear:both'/> to stop the displacement effect module.
Continue to insert the css property for 3 id just created by adding its css code above:]]> </ b: skin>
10. Adjust the blog footer.
Blog footer is usually where people put information on the template name. The design template (name I Zo immediately. Their own design) should you just put the common code that is okay.
Also there are some you'd like to add some utility to the footer. All you have to do is do the same as step 7 but rather word sbar1 into the foot is okay.
11. Other adjustments.
Blogspot template basically just how many there are. There is also nothing more.
Next you apply these tricks to create the distinctive look for your blog is all right.
Resume split module Main-outer to 3 small module : sidebar1, main and sidebar2. Similar you split mudule box above:
Specifically in between <div id='main-outer'> tag and the closing </ div> main-outer you add 1 to the code as shown below:
<div id='sidebar1'>
Content sidebar1
</div>
<div id='main'>
Content Post
</div>
<div id='sidebar2'>
Content sidebar2
</div>
<div style='clear:both'/>
Note: Because the three "modules" on the attribute used to move the module to the left, then right to the bottom it needs more <div style='clear:both'/> to stop the displacement effect module.
Continue to insert the css property for 3 id just created by adding its css code above:]]> </ b: skin>
#sidebar1{
Background:#DD0000; /* Background of module sidebar1 */
width:200px; /* Width of module sidebar1 */
float:left; /* Move module sidebar1 to the left */
Property 1; /* Some other properties */
Property 2; /* Some other properties */
...;
}
#main{
Background:#CC0000; /* Background of module main */
width:590px; /* Width of module main */
float:left; /* Move module main to the left */
Property 1; /* Some other properties */
Property 2; /* Some other properties */
...;
}
#sidebar2{
Background:#518643; /* Background of module sidebar2 */
width:200px; /* Width of module sidebar2 */
float:right; /* Move module sidebar2 to the right */
Property 1; /* Some other properties */
Property 2; /* Some other properties */ ...;
}
Note: Module generated by time Main-outer width is 990px (as specified above). The total width of 3 modules inside it is not larger than 990px if the total width of 3 sons 990px modules, sidebar2 will be pushed down.
And just by doing the above you can split module on your blog as much as you like. All you have to do is just insert the module into its correct position, and size regulations can apply the appropriate css for the module directly above : ]]> </ b: skin> is ok.
7.Adjust the sidebar (to create a Add blogspot gadget for sidebar)
Maybe the next thing you need to do is adjust the header before but so will have 1 second to adjust his little affair so instructions adjust sidebar ago, back adjust the header will add more.
As you well know in the Design --> Page Element. Utilities on the sidebar item Add to additional facilities for you necessary gadgets for the blog. And now I will guide you to create this item.
As on the original template I made it 2 1 sidebar on the left and one to the right. I will guide the left sidebar and you are similar to the sidebar on the right.
In the template you have created, sidebar left ID is sidebar1 as.
In between <div id='sidebar1'>and the tag closing </ div> of your sidebar1 insert the following code:
<b:section class='sbar1' id='sbar1' showaddelement='yes'/>
Save your template.
»Back to the page element you will find the banquet add-ons menu appears. Now it stays in the middle. But no, just leave it at that then it will automatically adjust.
»On the home page you'll see the Navbar bar at the top of the blog. If you do not want to use this navbar bar, insert the following code before ]]> </ b: skin> and then save and done.
8. Adjust header (same template blogspot)
As mentioned in Section 7. The next part is you need to adjust the header of the blog. Default header of the blog is a utility that allows you to change the title and description of the blog. and also allows you to change the banner for the header.
And now I will guide you to invoke this utility header.
Template (No expand widget templates). In this template the original header you created with ID header.
In between <div id='header'> tag and the closing </ div> of header you insert the following code:
»Back to the page element you will find the banquet add-ons menu appears. Now it stays in the middle. But no, just leave it at that then it will automatically adjust.
»On the home page you'll see the Navbar bar at the top of the blog. If you do not want to use this navbar bar, insert the following code before ]]> </ b: skin> and then save and done.
#navbar-iframe {height:0px;visibility:hidden;display:none}
Do the same with sidebar2.One thing to note is that remember transfer sbar1 in the code in sidebar1 into sbar2. If you do not move this template will error.
When creating two "sidebar" then you try to add a widget to your blog to see how it works.
It is easy to see that given the new title of the blog has been outstanding for a large above and below. To fix this you just need to insert the following code above the : ]]> </ b: skin> and then save is finished.
h2 {padding:0; margin:0}
8. Adjust header (same template blogspot)
As mentioned in Section 7. The next part is you need to adjust the header of the blog. Default header of the blog is a utility that allows you to change the title and description of the blog. and also allows you to change the banner for the header.
And now I will guide you to invoke this utility header.
Template (No expand widget templates). In this template the original header you created with ID header.
In between <div id='header'> tag and the closing </ div> of header you insert the following code:
<b:section class='head' id='head' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Title Blog)' type='Header'/>
</b:section>
Save your template. On the page you will find the add-on element of the header has been created.You just change the title and description for the blog or change banner for the blog. On the home page to check the results.
9. Adjust the post (main) (Display the contents of the blog post)
In this template I have for this article is located in the main ID. To display the contents of the blog post you just made as follows:
Template (NOT expand widget templates) in between <div id='main'> tag and the closing </ div> of your main insert the following code:
9. Adjust the post (main) (Display the contents of the blog post)
In this template I have for this article is located in the main ID. To display the contents of the blog post you just made as follows:
Template (NOT expand widget templates) in between <div id='main'> tag and the closing </ div> of your main insert the following code:
<b:section class='mainpost' id='mainpost' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts ' type='Blog'/>
</b:section>
Save your template.On the page you will see the add element blog posts appeared. You simply edit this utility to suit blog is ok.On the home page on the blog post also appear. So it's ok.
10. Adjust the blog footer.
Blog footer is usually where people put information on the template name. The design template (name I Zo immediately. Their own design) should you just put the common code that is okay.
Also there are some you'd like to add some utility to the footer. All you have to do is do the same as step 7 but rather word sbar1 into the foot is okay.
11. Other adjustments.
Blogspot template basically just how many there are. There is also nothing more.
Next you apply these tricks to create the distinctive look for your blog is all right.
By: Duong.Ph
Pass: duongnnx
ReplyDeleteVery good blog! Do you have any hints for aspiring writers?
ReplyDeleteI'm planning to start my own website soon but I'm
a little lost on everything. Would you suggest starting with a free platform like
Wordpress or go for a paid option? There are so many options
out there that I'm totally confused .. Any tips? Thank you!
My homepage - click the next internet site
Great post. I used to be checking continuously this blog and I'm impressed! Very helpful info specially the final section :) I take care of such info a lot. I was looking for this particular information for a very lengthy time. Thank you and good luck.
ReplyDeleteAlso visit my blog : good business ideas
Hi, its pleasant piece of writing regarding media print, we all know media is a enormous source of facts.
ReplyDeleteFeel free to surf my blog - refinance options for bad credit
My brother recommended I might like this web site.
ReplyDeleteHe was entirely right. This post actually made my day.
You can not imagine just how much time I had spent for this info!
Thanks!
Also see my site: uk Web hosting company
Hello, I enjoy reading all of your article. I like to write a little comment to support you.
ReplyDeleteHave a look at my blog ; kredite ohne schufa vergleich
Thanks you.
ReplyDeleteHello every one, here every person is sharing such know-how, thus it's good to read this webpage, and I used to pay a quick visit this blog daily.
ReplyDeleteLook at my web site :: student loan consolidation status
You can definitely see your enthusiasm within the work you write.
ReplyDeleteThe world hopes for even more passionate writers like you who aren't afraid to mention how they believe. Always follow your heart.
Also see my website :: private krankenversicherung vergleich test
Outstanding post however , I was wanting to know if you could write a litte more on this topic?
ReplyDeleteI'd be very grateful if you could elaborate a little bit more. Bless you!
Here is my site ... romantic Vacations
I'm extremely impressed with your writing abilities and also with the format in your blog. Is this a paid subject or did you customize it your self? Anyway stay up the excellent high quality writing, it is rare to peer a nice weblog like this one today..
ReplyDeleteFeel free to surf my page ... make money online today
I rarely write remarks, however i did a few searching and wound up here "Blogger template design guide "Separate"".
ReplyDeleteAnd I actually do have a couple of questions for you
if it's allright. Could it be only me or does it appear like some of the comments come across like left by brain dead folks? :-P And, if you are posting at other online social sites, I would like to keep up with anything new you have to post. Could you make a list of all of all your communal sites like your linkedin profile, Facebook page or twitter feed?
Feel free to visit my blog search engine optimization copywriting
wonderful submit, very informative. I'm wondering why the opposite experts of this sector don't notice
ReplyDeletethis. You must continue your writing. I'm sure, you have a huge readers'
base already!
Feel free to visit my weblog - grand cayman island vacation packages
I have been exploring for a bit for any high quality articles or blog posts
ReplyDeletein this kind of house . Exploring in Yahoo I ultimately stumbled upon this web site.
Studying this information So i'm happy to show that I've an
incredibly good uncanny feeling I came upon just what I needed.
I most definitely will make sure to don?t put out of your mind this
web site and provides it a glance regularly.
Look at my page; Gkv Pkv
Thank
ReplyDeleteThank
ReplyDeleteHello, I enjoy reading all of your post. I like to write a little comment to support you.
ReplyDeleteFeel free to visit my homepage: earn from clickbank
When someone writes an piece of writing he/she retains the idea of a user in his/her brain that how a user can be aware of it.
ReplyDeleteTherefore that's why this piece of writing is outstdanding. Thanks!
my web blog: business ideas for students
I have to thank you for the efforts you've put in penning this website. I really hope to view the same high-grade content by you later on as well. In fact, your creative writing abilities has inspired me to get my very own blog now ;)
ReplyDeleteMy web site :: cheapest hosting service
WOW just what I was looking for. Came here by searching for vergleich private krankenversicherung
ReplyDeleteFeel free to visit my blog; wechsel krankenkasse gesetzlich privat
Also see my page: wann private krankenversicherung
Interesting blog! Is your theme custom made or did you download it from somewhere?
ReplyDeleteA theme like yours with a few simple tweeks would really make my blog jump out.
Please let me know where you got your design.
Thank you
My webpage: Seo Expert Needed
hello there and thank you for your information –
ReplyDeleteI have definitely picked up anything new from right here.
I did however expertise a few technical issues using this
website, as I experienced to reload the website lots of times previous to I could get it to load
properly. I had been wondering if your hosting is OK?
Not that I'm complaining, but sluggish loading instances times will very frequently affect your placement in google and could damage your high-quality score if advertising and marketing with Adwords. Well I'm adding this RSS to my e-mail
and could look out for a lot more of your respective fascinating content.
Make sure you update this again very soon.
My weblog: affiliate marketing clickbank
I relish, lead to I found exactly what I was taking a look for.
ReplyDeleteYou have ended my four day lengthy hunt! God Bless
you man. Have a great day. Bye
My site: google ad sense
Good way of explaining, and pleasant article to obtain information regarding
ReplyDeletemy presentation subject matter, which i am going to present in academy.
My site - hosting a website
my web site :: affordable web Hosting plans
Excellent blog! Do you have any tips for aspiring writers?
ReplyDeleteI'm hoping to start my own site soon but I'm a little lost
on everything. Would you recommend starting with a free platform like Wordpress
or go for a paid option? There are so many options
out there that I'm totally confused .. Any ideas? Cheers!
Feel free to visit my webpage: Private Debt Consolidation Loans
Also see my web page > federal studen loans
Hello, i think that i saw you visited my website so i came
ReplyDeleteto “return the favor”.I am trying to find things to enhance my web site!
I suppose its ok to use some of your ideas!!
Also visit my page :: private krankenversicherung zusatzversicherung
I read this paragraph fully about the resemblance of newest and earlier technologies, it's awesome article.
ReplyDeleteAlso visit my web blog: island vacations and cruises
Way cool! Some extremely valid points! I appreciate you penning this article and the rest of
ReplyDeletethe site is extremely good.
Also visit my homepage :: home loans poor credit
fantastic post, very informative. I ponder why the other specialists of
ReplyDeletethis sector don't understand this. You should continue your writing. I am sure, you have a great readers' base already!
my website ... krankenkassenvergleich 2011
I was suggested this blog by my cousin. I'm not sure whether this post is written by him as nobody else know such detailed about my difficulty. You're amazing!
ReplyDeleteThanks!
Visit my website ... vergleich private gesetzliche krankenkasse
Your style is really unique in comparison to other people I have read stuff from.
ReplyDeleteI appreciate you for posting when you've got the opportunity, Guess I'll just bookmark this web site.
my blog: home mortgage bad credit
Hola! I've been following your site for a while now and finally got the courage to go ahead and give you a shout out from Porter Texas! Just wanted to mention keep up the great job!
ReplyDeleteCheck out my homepage - working from home jobs that are not scams
Hi, Neat post. There is an issue together with your web
ReplyDeletesite in web explorer, could check this? IE still is the marketplace chief and a big element of folks will
pass over your fantastic writing due to this problem.
Also visit my site - source
Good post. I will be dealing with a few of these issues as well.
ReplyDelete.
Take a look at my web blog: need to work from home
Fuck
ReplyDelete