#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background: url(Paste the address of the pattern you uploaded in Step 2 here);
}#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background: url(http://www.dinpattern.com/tiles/indian-summer.gif);
}
<h4 id='comment-post-message'><data:postCommentMsg/></h4>If you can't find the above code then please contact me by writing a comment otherwise continue with the tutorial.
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}#comments h4 {
margin:1em 0;
font-weight: bold;
text-transform:uppercase;
letter-spacing:.2em;
color: #ffffff;
font-size:20px;
}
<script style="text/javascript">
function numberOfPosts(json) {
document.write('Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<font color="blue"><script src="http://bloggerfaqs.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
<script src="http://bloggerfaqs.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></font><ul style="font-style: italic;"><script style="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < 20; i++) {
var entry = json.feed.entry[i];
var ctlink;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
ctlink = entry.link[k].href;
break;
}
}
ctlink = ctlink.replace("#", "#comment-");
var ptlink = ctlink.split("#");
ptlink = ptlink[0];
var txtlink = ptlink.split("/");
txtlink = txtlink[5];
txtlink = txtlink.split(".html");
txtlink = txtlink[0];
var pttitle = txtlink.replace(/-/g," ");
pttitle = pttitle.link(ptlink);
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
document.write('<li style="text-align:left">');
document.write('<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>');
document.write(' on ' + pttitle);
document.write('<br>');
if (comment.length < 150) {
document.write(comment + '...<a href="' + ctlink + '"> (more)</a><br><br>');
}
else
{
comment = comment.substring(0, 150);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + ctlink + '"> (more)</a><br><br>');
}
}
document.write('</li>');
}
</script>
<script src="http://bloggerfaqs.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script></ul>
Remember: Backup your template before moving on.
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div><b:if cond='data:blog.pageType == "item"'>
<big><big><big> Share this post! </big></big></big>
<div class='spacer' style='margin-top:10px;margin-bottom:10px;border-top:solid 1px #DEDEDE;'/>
<div class='social-table'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td valign='top' width='50%'><table border='0' cellpadding='0' cellspacing='0' width='222'>
<tr>
<td height='24' width='24'><img border='0' height='16' src='http://lh3.ggpht.com/_TqPdHmAEwTM/SgxdHoRIprI/AAAAAAAAEC4/UOmW1Zfg04I/facebook.png' width='16'/></td>
<td height='24'><a expr:href='"http://www.facebook.com/share.php?u=" +data:post.url'><strong>Share on Facebook</strong></a>
</td>
</tr>
<tr>
<td height='24'><img border='0' src='http://lh4.ggpht.com/_TqPdHmAEwTM/SgxdH2E0JsI/AAAAAAAAEDE/HTXaxE7_KaU/twitter.png'/></td>
<td height='24'><a expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title'><strong>Share on Twitter</strong></a>
</td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh3.ggpht.com/_TqPdHmAEwTM/SgxiZxfvTGI/AAAAAAAAEDU/AvuLyM_PGa4/stumble.png' width='16'/></td>
<td height='24'><a expr:href='"http://www.stumbleupon.com/submit?url=" +data:post.url'><strong>Share on StumbleUpon</strong></a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh6.ggpht.com/_TqPdHmAEwTM/Sgxdp40mQUI/AAAAAAAAEDM/_Nee9ul6zpc/s128/delicious.png' width='16'/></td>
<td height='24'><a expr:href='"http://del.icio.us/post?url" +data:post.url'><strong>Share on Delicious </strong></a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh4.ggpht.com/_TqPdHmAEwTM/SgxjIHpTaiI/AAAAAAAAEDY/pZtBL9woxzw/reddit.png' width='16'/></td>
<td height='24'><strong><a expr:href='"http://www.reddit.com/submit?url=" +data:post.url'>Share on Reddit</a></strong>
</td>
</tr>
</table></td>
<td valign='top' width='50%'><table border='0' cellpadding='0' cellspacing='0' width='222'>
<tr>
<td height='24' width='24'><img border='0' height='16' src='http://lh4.ggpht.com/_TqPdHmAEwTM/SgxkjUlW8eI/AAAAAAAAEDc/iDE9H_-vX9w/digg.png' width='16'/></td>
<td height='24'><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><strong>Share on Digg </strong></a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh5.ggpht.com/_TqPdHmAEwTM/Sgx1uAMIp7I/AAAAAAAAEDk/UvMj9nzDyJI/design_float.png' width='16'/></td>
<td height='24'><a expr:href='"http://www.designfloat.com/submit.php?url=" +data:post.url'><strong>Share on DesignFloat</strong></a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh4.ggpht.com/_TqPdHmAEwTM/Sgxdp80sUoI/AAAAAAAAEDQ/3eYyxtWAGpM/s128/technorati.png' width='16'/></td>
<td height='24'><strong><a expr:href='"http://technorati.com/faves/?add=" +data:post.url'>Share on Technorati</a></strong></td>
</tr>
<tr>
<td height='24'><img alt='Feeds RSS' border='0' height='16' src='http://lh5.ggpht.com/_TqPdHmAEwTM/SgxdH0I91sI/AAAAAAAAEDA/cDcvpz3WJug/feed.png' width='16'/></td>
<td height='24'><a href='http://feeds2.feedburner.com/BloggerFAQs'><strong>Subscribe to Feeds RSS</strong></a>
</td>
</tr>
</table></td>
</tr>
</table>
</div>
<div class='spacer' style='margin-top:10px;margin-bottom:10px;border-top:solid 1px #DEDEDE;margin-bottom:10px;'/>
</b:if>
<div style='clear: both; height:30px;'/>
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}body {
.
.
.
Some Code Here
.
.
.
}background-image:url(URL of your image from step 2);
background-repeat: repeat;
background-attachment: fixed;body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-image:url(URL of your image from step 2);
background-repeat:repeat;
background-attachment: fixed;
}background-image:url(URL of your image from step 2);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-image:url(URL of your image from step 2);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
}background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;
Note: You can see the code only in Edit HTML mode of the post editor. You can find this mode at the top right of the editor.
Tip: Whenever you use a large image (width above 550px), you should use the overflow property. Don't worry if the image is small in width, it will not create a scroll bar.
button to create a new post.
mode.
icon to upload your image.
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd8qYsqXvsagea6tbfFTX2n_Fvx2qcezpqyuf4GkC34nV2RKAT_KYam7Jt9SBjWGJzw_iG7lGnddd1gpzLephJJgmdj7QFwsxfhdXB9qKSxXIKC5dM4DSWZEmIbi6vLsN6UwEqDy37VjM/s1600/add+new+picture+window.PNG"><img style="cursor:pointer; cursor:hand;width: 400px; height: 262px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd8qYsqXvsagea6tbfFTX2n_Fvx2qcezpqyuf4GkC34nV2RKAT_KYam7Jt9SBjWGJzw_iG7lGnddd1gpzLephJJgmdj7QFwsxfhdXB9qKSxXIKC5dM4DSWZEmIbi6vLsN6UwEqDy37VjM/s400/add+new+picture+window.PNG" border="0" alt=""id="BLOGGER_PHOTO_ID_5351602214730857826" /></a>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd8qYsqXvsagea6tbfFTX2n_Fvx2qcezpqyuf4GkC34nV2RKAT_KYam7Jt9SBjWGJzw_iG7lGnddd1gpzLephJJgmdj7QFwsxfhdXB9qKSxXIKC5dM4DSWZEmIbi6vLsN6UwEqDy37VjM/s1600/add+new+picture+window.PNGThis tutorial is also available in video format on my YouTube channel:
http://www.youtube.com/user/BloggerEngineer
http://www.bloggerfaqs.blogspot.com/feeds/posts/defaulthttp://www.bloggerfaqs.blogspot.com/feeds/posts/default?max-results=500<meta name="verify-v1" content="z6MLWEMxLvMFcoVNvGPKOMvAn1oJBKem+eTEpZ1F/DU=">feeds/posts/default?max-results=500http://www.bloggerfaqs.blogspot.com/feeds/posts/default?max-results=500
Tip: Whenever I download my template file, I rename it to the current date which makes it easy to find.
Tip: Whenever you work in Edit HTML section, make sure you always first download your template for backup.
<h2></h2>