Monday, September 27, 2010

How to center post title (customization)

If you want to center (or align left or align right) the post title, sign into Dashboard > DESIGN > EDIT HTML to open the template editor and search for .post h3 (use ctrl+F) or code that may look something like those below (code below for Minima template, yours may be slightly different):

Reminder: Always backup template and backup gadgets before editing the template.

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}


The just add this line text-align:center;

.post h3 {
text-align:center;
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}


preview and if OK, save template.

Update: Different template may define post title differently. For example, a commentator found that for her, it was
h3.post-title {


If you want to align the post title to the left or to the right, just substitute text-align:center; with either text-align:left; or text-align:right;

Note: If you can't find the relevant code, let me know what template you are using via my contact form

How to hide blog date header

Update: There is an easier way to do this without editing the template directly. See Blogger "Edit posts" options

I have tested "unticking" the date header by testing at Testing Blogger Beta without editing directing the template directly at Testing Blogger Beta and you can check a label page eg Label: Comments you would see that there are no date header. Also read the comment: puluth® has left a new comment on your post "How to hide blog date header":

Thanks. but how to remove it from blogger label page?


While blogs started as web logs or weblogs (chronological publication of personal thoughts or diary) and thus characteristically have a date header like the one above this post, but because blogs have now become a convenient way of putting content online, many have been using blogs for other purposes more like a typical website, many bloggers want to get rid of the typical date header.

That is not difficult to do. Sign into Dashboard > Design > Edit HTML to open the template editor and look for the block of code like the one below (for the Minima template, yours depending on your template may be slightly different):

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}


and just add this line: visibility:hidden; for example like below:

/* Posts
-----------------------------------------------
*/
h2.date-header {
visibility:hidden;
margin:1.5em 0 .5em;
}


and the date header will be gone.

Tuesday, September 21, 2010

Make images uploaded via Blogger unclickable

Many bloggers want their uploaded images not clickable probably because they don't want their images especially the enlarged version to be copied. Previous post How to make images not clickable (not enlarge) provided a method in varying circumstances may not work.

Here is a more efficient method and failsafe method. All one need to do is after uploading an image via Blogger image upload icon to switch to Edit HTML mode if one is not already in this mode.

Now depending on which post editor you had use, the HTML codes used to display images that Blogger generate upon uploading is different. We will deal with the old post editor (my preferred post editor) first as it is easier to explain and deal with the new updated post editor later:

CODES FOR THE OLD POST EDITOR:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_jizoPL28qCY/SpEIlvjfinI/AAAAAAAADBo/nYU8u4C1_6Q/s1600-h/BlogStar.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 178px; height: 67px;" src="http://1.bp.blogspot.com/_jizoPL28qCY/SpEIlvjfinI/AAAAAAAADBo/nYU8u4C1_6Q/s400/BlogStar.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5373085274943228530" /></a>

Please note that only the code in black is needed to display the image. Those highlighted in red are not needed to display the picture and can be removed safely leaving only
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 178px; height: 67px;" src="http://1.bp.blogspot.com/_jizoPL28qCY/SpEIlvjfinI/AAAAAAAADBo/nYU8u4C1_6Q/s400/BlogStar.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5373085274943228530" />.

Thus to make the image not clickable, all you need to do is just to delete those codes highlighted in red. I have tested that successfully over at Test to make images uploaded via Blogger not clickable.

New post editor

We will now deal with the new post editor which is not my preferred post editor. The codes to display the uploaded image generated by Blogger with the new post editor is as follows, again with the code to display the image in black while the codes in red are to make the image clickable to display an enlarged image. The codes in blue is to center the picture and can either be removed or left in place (note: center will be replaced by left or right if you had elected to float the image to the left or right but that will not affect the explanation to make the image not clickable):

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_jizoPL28qCY/TJd1Iv7emMI/AAAAAAAADiE/8aV0WwnWI4g/s1600/BlogStar.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_jizoPL28qCY/TJd1Iv7emMI/AAAAAAAADiE/8aV0WwnWI4g/s320/BlogStar.gif" /></a></div>

Again, only the code in black is needed to display the image while those in red are used to make the image clickable to enlarge the image while those in blue is meant to center the image. Thus if you want the image not clickable, just delete those highlighted in red (<a....> and </a>) and those highlighted in blue too leaving those in black intact and the image will still be displayed. Alternatively we can just delete those codes in red to make the image unclickable while leaving those in blue intact to center (or float) the image.

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics