Goals
- Create a blank shell for a blog
- Add a main blog content section
- Add in a sidebar with some blog widgets on the left of the main blog
- Style the blog
Blank Shell
To start with, we need a minimal shell. Blogger has some requirements, so I've put together a really minimal one. The code is here:
Looking at this, the important things for now are that I've added a custom .MainContent class in a style in the header, and I've added a div with that class in the body that contains a line saying 'Here is some text'. When you put this into your page, you should get that line centered at the top like below:
Now we have a blank shell to work with that we can apply custom styling to.
Save the theme, go to the Layout for the blog, hit refresh, and look at the Main section. You should now have a 'Blog Posts' gadget there in your main since you added it to the theme. You can customize your posts with that gadget and it's all quite simple. This logic works everywhere for your blog also. Just define a section that blogger recognizes (main, footer, etc.) in your theme, and you can customize it in the gadgets.
Add a couple of test posts to your blog now and try it out. You should get something like this:
Then, like before, save, go to layout, refresh, and see that you can add gadgets. Try adding a 'Blog Archive' gadget. If you view your page now, you should have something like this:
This works, but it's quite ugly so we can do a bit of styling before we're done.
<?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>
<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[/*
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>
<style>
.MainContent {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
</head>
<body>
<div class='MainContent'>
<b:section class='main' id='main' showaddelement='yes' />
<p>Here is some text</p>
</div>
</body>
</html>
Main Content Section
Now we can add a main blog post section. To do this, replace everything from the <b:section to the </p> in the above with this:
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
</b:widget>
</b:section>
Save the theme, go to the Layout for the blog, hit refresh, and look at the Main section. You should now have a 'Blog Posts' gadget there in your main since you added it to the theme. You can customize your posts with that gadget and it's all quite simple. This logic works everywhere for your blog also. Just define a section that blogger recognizes (main, footer, etc.) in your theme, and you can customize it in the gadgets.
Add a couple of test posts to your blog now and try it out. You should get something like this:
Add a Sidebar to the Left of Main Content
There are a few ways to do this. Since blogger provides a sidebar, I'll do it basically like we did the above and use the fact that we're starting from scratch to do the formatting with custom CSS. Above the <div class='MainContent'> line, add the following:
<div class='LeftContent'>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'/>
</div>
Then, like before, save, go to layout, refresh, and see that you can add gadgets. Try adding a 'Blog Archive' gadget. If you view your page now, you should have something like this:
This works, but it's quite ugly so we can do a bit of styling before we're done.
Styling Your Blog
Since we set this up from scratch, we can style this just like any other webpage. For this, I'll do the following:
- Separate the sidebar and main content with a border
- Add some color themes
- Format the Blog Archive gadget
To separate the sidebar and main content, I first need to get both of them on the same level vertically. To do that, we can simply make both of them float left since we set the widths to add up to 100% earlier. Then, since we want to add a border separating, we can just add a border-left to the MainContent class and use box-sizing on it.
Color themes are simple CSS styling. I'll go ahead and add a new background, default font, and link color in the style.
Thus, my CSS looks like this:
Finally, we can style the blogger gadgets in a number of ways, and I will walk through styling the way the year is displayed in the archive gadget the same way using two different methods.
First, you can do this in the theme itself. In the 'Blog Archive' section, there is a <b:widget-settings> field. Expand that, and there is a 'yearPattern' field. Expand that, and change it to 'yy'. Now, you should get '17' instead of '2017' in your 'Blog Archive' display for years.
Second, you can do this in the layout. Go to 'Layout' and click to edit the blog archive. In there, you can pick your year format. The options are '2006' and '06' which correspond to 'yyyy' and 'yy' in the the respectively.
And that's it. Here's the final result and the final template code for it:
Note that this code will not work if you just copy and paste it in since I removed all the inner bits that the widgets create so that it's easier to read.
To see the sample blog created here, go to http://examplecustomblog.blogspot.com/
Color themes are simple CSS styling. I'll go ahead and add a new background, default font, and link color in the style.
Thus, my CSS looks like this:
<style>
.MainContent {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
float: left;
border-left: 3px solid #F1F1F1;
box-sizing: border-box;
}
.LeftContent {
width: 20%;
margin: 0;
float: left;
}
body {
background-color: #212428;
color: #F1F1F1;
}
a {
color: #4464DD;
}
</style>
Finally, we can style the blogger gadgets in a number of ways, and I will walk through styling the way the year is displayed in the archive gadget the same way using two different methods.
First, you can do this in the theme itself. In the 'Blog Archive' section, there is a <b:widget-settings> field. Expand that, and there is a 'yearPattern' field. Expand that, and change it to 'yy'. Now, you should get '17' instead of '2017' in your 'Blog Archive' display for years.
Second, you can do this in the layout. Go to 'Layout' and click to edit the blog archive. In there, you can pick your year format. The options are '2006' and '06' which correspond to 'yyyy' and 'yy' in the the respectively.
And that's it. Here's the final result and the final template code for it:
<?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>
<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[
/*
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>
<style>
.MainContent {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
float: left;
border-left:3px solid #F1F1F1;
box-sizing: border-box;
}
.LeftContent {
width: 20%;
margin: 0;
float: left;
}
body {
background-color: #212428;
color: #F1F1F1;
}
a {
color: #4464DD;
}
</style>
</head>
<body>
<div class='LeftContent'>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>***
</b:widget>
</b:section>
</div>
<div class='MainContent'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>***
</b:widget>
</b:section>
</div>
</body>
</html>
Note that this code will not work if you just copy and paste it in since I removed all the inner bits that the widgets create so that it's easier to read.
To see the sample blog created here, go to http://examplecustomblog.blogspot.com/
Slot formula is a formula that gamblers use to play online slots. In order to make profits in gambling easier, which is the best slot formula Make money at these professional gamblers and various gamblers Widely chosen as this formula to make a profit for everyone. And it's a way to continue making lump sums easily. Although you may not have a lot of capital.
ReplyDelete