How to Make Blogger Layout Codes
Blogger is a popular Web logging, or blogging, platform used by individuals writing on topics of all kinds.
Creating your own code for a Blogger layout, or template, design involves the use of a graphics editor for creating your background images, sidebars and other graphics; a text editor for writing your code and some knowledge of the HTML programming language as well as Cascading Style Sheets (CSS).
The most important step to creating a Blogger layout is to have some type of mental vision of what you would like to create. Your goal will be to translate that mental image into code.
Other People Are Reading
Instructions
-
-
1
Create the graphics for your Blogger layout using a graphics editor for your choice. Though graphics are not required, you may wish to create a background image, post header or sidebar graphic.
-
2
Open a text editor of your choice and begin by creating your CSS framework. The CSS portion of the layout will govern basic visual elements such as font type, size and color.
Here's an example of what the CSS code for your Blogger layout may look like:
body[ background-color: #000000; margin: 0 auto; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;}
#title [ font-size: 24px; color: #055; }
The above code creates 12-point, Trebuchet MS font that is black for the main body, and 24-point turquoise font for the Blogger title. See the Resources section for a tutorial on how to create CSS.
-
-
3
Tie the CSS you configured together in HTML.
Here's an example of how you might achieve this:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1′ locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
Remember to reference Blogger templates that contain widgets you wish to include in your layout. Widgets are an important part of your blogger layout as they contain the features you want your layout to include. For more on Blogger widgets, please see the Resources section.
-
4
Configure your widgets. This final step is perhaps the most time-consuming portion of your Blogger layout code creation.
Here's an example of what your widget configuration code may look like:
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1′><span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span> <span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.URL'>
<a class='timestamp-link' expr:href='data:post.URL' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span> <span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1′>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span> <span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<span class='email-post-icon'> </span>
</a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> </p>
<p class='post-footer-line post-footer-line-2′><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.URL' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span> </p>
The above code defines controls for the footer, author and time display, labels, comment links and more.
You may choose to copy another layout's widget template and edit it instead of writing your own from scratch. To do this, click the "Expand Widget Templates" link in another Blogger layout, highlight and copy.
-
1
References
- Photo Credit Thinkstock Images/Comstock/Getty Images
