Assalamualaikum.wr.wbHush ....
I will discuss how to create a different view column posts on the home page. These tips specifically for magazine templates. We used clay for example:
1. Figure column posts on the home page:
2. Images after the click on the title post
na ... a difference ... In terms of size column postnya .. That's what we will discuss now ...
1. Log in blogger.com
2. Towards layout, Edit HTML ...
3. If you've looking for code ]]></ b: skin>
4. If you've met the following code Kopy pastekan just below the code ]]></ b: skin>
<style type='text/css'>4. You can add other code to decorate the display columns. Example in my template like this:
<b:if cond='data:blog.pageType != "item"'>
#main-wrapper {
width:372px;
float:left;
}
</b:if>
</style>
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
#main-wrapper {
width:372px;
float:left;
}
.post{
background:#FFF url(http://i422.photobucket.com/albums/pp302/bloggeracs/post-bg.gif);
background-repeat:repeat-x;width:337px;
margin: 0 0 8px 0px;
padding: 10px;
display:inline;
float:left;
overflow:hidden;
position:relative;
}
.post h3{font-size:12px;
font-family:arial;
font-weight: normal;
}
.post h3 {
color: #036791;
text-transform: capitalize;
margin: 0;
padding: 2px 0 10px 0;
text-align:left;
}
.post h3 a, .post h3 a:visited {
color: #036791;
text-decoration: none;
font-family:arial;
font-weight: normal;
}
.post h3 a:hover {
color: #034c6a;
}
.post-body img{
max-width:100px;
max-height:100px;
padding:1px;
float:left;
margin:0 5px 1px 0;
border: 0px solid #cadaef;
}
.post-timestamp,
.reaction-buttons,
.star-ratings,
.post-backlinks,
.post-icons, .post-labels{
display:none;
}
</b:if>
</style>
Info:
Code red is columnya position you can change the desired result. While that is a bold columnya size.
5. Save
wassalamualaikum.wr.wb
