blogspot post customization code snippets
Some things that I could think of (and found the code for at various places) that all relate to modifying the appearance of your posts. All sorts of things from post and post title background colors, to post title icons, to initials. This is a long and somewhat messy looking post, so I am going to ask you to very kindly take a little jump break and... :-)
Whatever is marked up in black is what you will need to change. Remember that you can do most of the stuff that applies to the entire blog (and not just a single post) in the Custom CSS box of the advanced tab of the template designer. This will allow you to see your changes as you tweak the code:
Whatever is marked up in black is what you will need to change. Remember that you can do most of the stuff that applies to the entire blog (and not just a single post) in the Custom CSS box of the advanced tab of the template designer. This will allow you to see your changes as you tweak the code:
Changing the background color and padding of a single post:
Place this line inside the HTML tab of the post editor, in the beginning, add your text, close with the slashed div tag:
<div style="background:#your hex value; padding:Xpx;">Your text goes here....
</div>
Changing the background image of a single post
Place this line inside the HTML tab of the post editor, in the beginning, add your text, close with the slashed div tag:
<div style="background:url(URL of your picture) no-repeat;">Your text goes here....
</div>
(Note: If you have an image which you would like to repeat, just change the word "no-repeat" to "repeat", or you can also remove the whole thing from the code altogether).
Centering the post title on the whole blog:
The code for this will vary from template to template, however what you need to do is this: Find the line which says h3.post-title in the HTML editor. Then place text-align:center; underneath that line and just above the }
Adding a small icon before the post title on the whole blog:
Find the first line of code below in the HTML editor, then add the second line, with your image URL:
<b:if cond='data:post.url'><a expr:href='data:post.url'><img src="Your image URL" style="border-width:0px"/><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
(Note: You can also place the icon in different locations, above and below or to the right of your post title. Read more about this here:
Adding a picture to the background of post titles on the whole blog
Find the first line of the below code in the HTML editor, then play with all the values highlighted in black:
h3.post-title {background: url(URL of your picture); background-repeat:no-repeat;
height:Xpx;
margin:.Xem 0 0;
padding:Xpx Xpx Xpx;
font-size:X%;
font-weight:normal;
line-height:Xem;
color:$titlecolor;
}
Adding color to the background and borders of post titles on the whole blog
Find the first line, then play with the values highlighted in black:
h3.post-title {background:#your hex code;
border:Xpx inset #your hex code;
margin:Xem 0 0;
padding:Xpx Xpx Xpx;
font-size:X%;
font-weight:normal;
line-height:Xem;
color:$titlecolor;
}
And if you want your post title to be underlined (like I did on this blog) use this line in the code above:
border-bottom:Xpx solid #your hex code;
Getting big dropcaps initials/or a big first letter in a single post
Go to the HTML tab in the post editor and place this code around the letter that you wish to have drop, play with the stuff highlighted in black:
<span style="float:left;color:#000000;font-size:Xpx;line-height:Xpx;padding-top:Xpx;font-family: Times, serif, Georgia;">your letter</span>
This one below for the initial you wish to go upwards:
<span style="font-family:Georgia,;color:#000000;
font-size:Xpx;font-weight:X;line-height:X%;letter-spacing:Xpx;">your letter</span>
All that I can think of for now folks. Maybe more will follow at some point... ;-)
