Online Web Design Degree: Post

Showing posts with label Post. Show all posts

Saturday, 4 June 2011

blogspot stuff: adding a background color to the date header of the awesome.inc template

Find this code in the HTML editor (widgets expanded, of course):

.main-inner .widget h2.date-header span {
font: $(date.font);
display: block;
padding: .5em 15px;
border-left: $(date.border.size) solid $(date.border.color);
border-right: $(date.border.size) solid $(date.border.color);
}

Then replace that one with this one:
.main-inner .widget h2.date-header span {
font: $(date.font);
padding: 1px;
margin-left: 14px;
border-left: $(date.border.size) solid $(date.border.color);
border-right: $(date.border.size) solid $(date.border.color);
background: #yourhexcode
}

As you can see I have removed one line and also changed the padding. I also added a left margin in order to align stuff, your values may again be quite different than these. These are things that looked good with my particular design, you may want to go with other values or even keep the block display altogether, in which case the colored area will stretch across the width of the post as a bar.

.................................................................................................................................

Tuesday, 26 April 2011

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:

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:

(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:

http://www.blogbulk.com/2008/11/add-icon-or-picture-in-blogger-post.html)

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... ;-)

.................................................................................................................................

using the blogspot text widget (and the post editor) to make menus and thumbnail galleries

On the right hand column of this site you can see a section where I have put a menu with thumbnails for template downloads. It just occurred to me that I never got round to posting on this little trick which I figured out and which makes it very easy to make something like this by using the text widget and the regular post editor. Here's how it goes:

1) Start a regular post - except do not publish it but save it as a draft! (You can always go back and add to it later as well if you just keep the draft).

2) Put all your images and text in the post. (Your text will wrap automatically, however remember that your images will need to be sized to the width of the sidebar that you are planning to put the widget into).

3) I guess you could also add a background texture/color, or a border, or a bit of padding while you are still doing the post entry, as explained here >>>. I haven't tried this myself yet, but I am assuming that all of these attributes would show up on the text widget as well.

4) Select all the stuff on the HTML tab of the post editor and copy.

5) Start a new text widget, go to the HTML tab, then paste the code you got from the post editor into there.

6) Save! Done!

.................................................................................................................................

Monday, 18 April 2011

blogspot: separate boxes and timestamps for posts that were created on the same day

This is something which is much needed indeed! Furkan has spotted the solution at Southern Speakers where it is all explained very clearly here:

http://www.southernspeakers.net/2010/12/show-date-for-each-blogger-post.html

Thank you Furkan!

Southern Speakers seems to be hard to reach at times, so I am also copy pasting the code onto here. However, this is a really long bit of code, so to see it please take a jump break and

Find the first line of this code in the HTML editor:

<b:include data='top' name='status-message'/>

<data:defaultAdStart/>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.isDateStart'>

<b:if cond='data:post.isFirstPost == "false"'>

</div></div>

</b:if>

<b:if cond='data:post.isDateStart'>

</b:if>

<b:if cond='data:post.dateHeader'>

</b:if>

<b:if cond='data:post.isDateStart'>

</b:if>

<b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == "static_page"'>

<b:include data='post' name='comments'/>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<b:include data='post' name='comments'/>

</b:if>

</div>

<b:if cond='data:post.includeAd'>

<b:if cond='data:post.isFirstPost'>

<data:defaultAdEnd/>

<b:else/>

<data:adEnd/>

</b:if>

<data:adCode/>

</div>

<data:adStart/>

</b:if>

<b:if cond='data:post.trackLatency'>

<data:post.latencyJs/>

</b:if>

</b:loop>

<b:if cond='data:numPosts != 0'>

</div></div>

</b:if>

<data:adEnd/>

</div>

Select the code and very carefully scroll all the way to the end, making sure you do not miss anything or select anything extra. Then delete all of what you selected and insert this instead:

<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<div class="date-outer">
<h2 class='date-header'><span><data:post.timestamp/></span></h2>
<div class="date-posts">
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</div>
</div>
</b:loop>
<data:adEnd/>
</div>

.................................................................................................................................

Friday, 18 March 2011

playing around with (HTML) type

I haven't really been looking too carefully at the compose tab when I am entering a post, I guess. Just noticed now that (unlike wordpress) blogspot allows you to change the fonts and sizes of bits inside the text intuitively.

Great news! Means you can have custom designed block quotes on your posts, without having to write too much code! (The default block quote command does not look too clever since it pushes the text inside, so it is usually quite tough to get things correctly aligned with it).

Of course, one would need to be very careful when doing any of this because it might end up looking absolutely awful if you don't get it right. Still, I cannot resist and am trying one out right now. The body text on this blog is Arial so I will use Times New Roman to get a nice contrast between sans-serif and serif. Usually works very well - especially if serif is also set in italic:

______________________________

And now I will make this quite big, so that it really stands out from the body text.

______________________________

Since this is a special element, a strong color should be OK to use for type: So, I made this a dark blue for added accentuation. Now, I will go back to the regular font size/color and write some more, so that I have enough text to fill the post - a block quote needs a lot of text to nest inside properly. Notice that I also added lines to top and bottom to give it even more definition. While the body text is justified, the big text is flush left since at such a big size it would be very difficult to justify the type and not get "white rivers", which are the lines that run through and break up body text vertically. Very clumsy whenever that happens...

Although I started out on the compose tab I ended up tweaking the code in the HTML tab of the post editor quite a bit: Changed the font size from x-large to a pixel value, and also I changed the line height with an added <div> tag. So, here is what the code for this ended up looking like (the stuff that I added/tweaked is marked up in black):

<div style="line-height: 30px;"><i><span class="Apple-style-span" style="color: black; font-family: 'Times New Roman', serif; font-size: 38px;">And now I will make this quite big so that it really stands out from the body text.</span></i></div>

.................................................................................................................................

Saturday, 12 March 2011

perfectly clean images at all sizes for blogspot

A small but highly annoying problem comes along when you upload images from your computer to your blogspot blog. Linking images from other sites will not do this by the way, with that you don't have to worry at all. However when you upload directly from your computer, the code will look like this:

Your image will be 320 pixels wide. The height can change depending upon your image aspect ratio, but the width is always 320 - no matter what, even if the width of your post is 1000 pixels! This is the default state and should be fixed, of course. Which needs to be done by hand in the Edit HTML tab of your post editor:

The bits you need to tackle are highlighted in black in the above code snippets. You obviously change the height and width. However, there is another little thing you need to change also and unless you take care of it your images will look really bad and blurry. This is the s320, which needs to get changed to s1600. Don't ask me why, this is how you get it to work.

(Tip: Need to know how to get the correct measurements when you resize your images? You can of course do it in photoshop by going to Image > Image size and pretend that you are resizing the image from the pixel values on the top. And then you can also install the opensourced Faststone Image Viewer (greatest app in the universe - please make a donation!), right click on the image, and... )

.................................................................................................................................

Thursday, 10 March 2011

putting an image into the background of a post!

Verrry nice indeed! Here's how it works folks: Place this line of code at the very top of the post:

Fill your post with whatever - photos, text... Then, close the whole thing with </div> And you can do the same thing for the title of the post also if you would like that to have a background as well - different images too, if you want. Simply change the image URL and the padding value at the very end to 0.5em, so that the title and the text of the post align nicely. Easy Peasy - except for a minor bug: For some strange reason sometimes blogpost wants you to save the whole thing as a draft first. So, no big deal, you save as a draft (even if the post is already published), close, re-open and then get the preview and publish...

Oh, and - if you want a border around the post and/or the post title - then here is the additional bit of code for that (you can change the color to anything you like, of course):

The image on the background is only a little trial of course, but I have to say that my mouth is watering at all of the possibilities with this! :-D. And here is the blog where the original tip is coming from. Thank you so much Carissa Rogers!

.................................................................................................................................