Thursday, October 29, 2009

Updated post editor: remove image border




First thing to note is that with the Blogger updated post editor, you can only upload pictures in the compose mode. To remove border from uploaded photo, you will need to edit the HTML used to display the photo and that you can only do in the Edit HTML mode where in place of the photo, you will see this script:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/_jizoPL28qCY/Suj7U1LF3rI/AAAAAAAADL0/ZvBqjo6s6eg/s1600-h/kimchi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_jizoPL28qCY/Suj7U1LF3rI/AAAAAAAADL0/ZvBqjo6s6eg/s320/kimchi.jpg" /></a>
</div>
Now one would think that the attribute border="0" would ensure that the displayed picture would not have a border, but it does, as you can see in that photo of kimchi (Korean version of sauerkraut or fermented cabbage) above.

In order to make the border disappear you can add this attribute style="border:none;" to the <img> tag like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/_jizoPL28qCY/Suj7U1LF3rI/AAAAAAAADL0/ZvBqjo6s6eg/s1600-h/kimchi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="border:none;" border="0" src="http://3.bp.blogspot.com/_jizoPL28qCY/Suj7U1LF3rI/AAAAAAAADL0/ZvBqjo6s6eg/s320/kimchi.jpg" /></a>
</div>

and the result of that edit is this photo minus the border:




Update: As a result of test removing border from images uploaded via Blogger I have found out that the attribute style="border:none;" must be placed before src="photo URL" and not after.

Update 2: "Hi Peter, How about adding an image border? Simply changing border="0" to border="5" or "10" and making sure my colors were correct didn't cut it. Please help."

My response: Since Blogger add border to images as a default, I suppose one does not need to do anything to have border with images and to prove that, I uploaded 2 photos, first with the updated post editor, then with the old post editor, both without editing the codes. As you can see below, both are framed with a border:





Related posts:
Related posts:
Images and the Blogger updated post editor
New Blogger updated post editor - Birthday gift?

Wednesday, October 21, 2009

Images and the Blogger updated post editor


Previously with the old Blogger post editor, when you upload images, Blogger adds an alt="" tag for you to complete as seen in an example below:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_jizoPL28qCY/SD_AiGSnP8I/AAAAAAAABfk/F5OUlKXf57E/s1600-h/comments+blogger+tips+and+tricks.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_jizoPL28qCY/SD_AiGSnP8I/AAAAAAAABfk/F5OUlKXf57E/s400/comments+blogger+tips+and+tricks.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5206091386300350402" /></a>

Now with the updated post editor, you will only have the image upload icon in the COMPOSE mode and Blogger also inserts codes different from the above example to display the image (visible only in the Edit HTML mode) illustrated by the example below:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_1354hN3vRng/St5dV5-SaFI/AAAAAAAAAP8/FxEq55ak_GQ/s1600-h/kimchi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_1354hN3vRng/St5dV5-SaFI/AAAAAAAAAP8/FxEq55ak_GQ/s320/kimchi.jpg" vr="true" /></a>
</div>


The code which actually display the image is highlighted in green above. Although in this case, Blogger wasn't as considerate to add the alt tag for you, you can still add it in yourself together with the title tag if you wish like the example below:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_1354hN3vRng/St5dV5-SaFI/AAAAAAAAAP8/FxEq55ak_GQ/s1600-h/kimchi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_1354hN3vRng/St5dV5-SaFI/AAAAAAAAAP8/FxEq55ak_GQ/s320/kimchi.jpg" vr="true" alt="Kimchi, Korea's signature dish" title="Kimchi" /></a>
</div>


Note: You can switch between the old post editor and the updated post editor by signing into Dashboard, SETTINGS > BASIC and near the bottom of the page, you will see this for your selection:

selecting Blogger post editor

Related posts:
Blogger updated post editor: Removing image border
New Blogger updated post editor - Birthday gift?

Monday, October 12, 2009

How to delete own comments in other blogger's posts


A previous post described How to delete comments and another post was about a delete comment utility. However, "But I was thinking more in lines of my comment in another person's blog"

That is not difficult. All that is needed is that you be logged into your Blogger account when you surf over to the post where you have left comment you want to delete. You will then see a trash can icon at the bottom corner of your comment like in the screen shot below:

trashcan delete comment icon

All you need to do is to click the trashcan icon, confirm the deletion, and your comment will be (partially) deleted, leaving behind this:

deleted Blogger comment message

Related posts:
Delete comment utility
How to delete comments
How to delete comments Part 2

Saturday, October 10, 2009

How to center date header and change font size

"Do you know how centre the date?????"

Open the template editor by going to Dashboard > Layout > Edit HTML and look for these codes:
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}


and change it to

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


and if you also want to change the font size, add this line - font-size:200% or font-size:12px; or whatever values you wish, so that the codes become

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
text-align:center;
font-size:200%;

}

Friday, October 09, 2009

"Horizontal scrolling recent posts" for your blog


Found this hack to make a horizontal scrolling recent post at IdeasBubble, tested it at Star Home Improvements. Before you implement this, read this caution note.

If you want this horizontal scrolling "recent posts" just below your blog Header, first you got to add extra "Add a gadget" to the blog Header section (more specific instructions at Adding "graphic" to blog Header)

When you have this extra "Add a gadget" (gadget were previously called page element), sign into Dashboard, click LAYOUT then the "Add a gadget" in the Head section. Chose the HTML/Javascript gadget:

HTML/Javascript gadget

then copy-paste this script into the HTML/Javascript gadget:

<script style="text/javascript" src="http://dreamydonkey.googlepages.com/scrolling_blogger_posts.js"> </script><script style="text/javascript"> var nMaxPosts = 15; var sBgColor; var nWidth; var nScrollDelay = 175; var sDirection="left"; var sOpenLinkLocation="N"; var sBulletChar="•"; </script> <script style="text/javascript" src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"> </script>


Replace http://YOURBLOG.blogspot.com/ with you actual blog URL, preview, and if satisfied, save.

Caution

I tried varying some of the parameters (attributes) like changing

nScrollDelay = 175;
to
nScrollDelay = some number;

and got eratic results, among which were getting error messages when trying to access the edited blog like this one: Recreation and sport (blog only displayed by clicking OK in the error message. Would do more testing later if I find the time) (Update: managed to get rid of that irritating error message by changing templates, and finally by going to LAYOUT > EDIT HTML > click Revert widget template to default at the bottom of the page, publishing a few posts. Don't know exactly what cleared the problem. Will do somemore experimenting later)

Thursday, October 08, 2009

Make blog into book including photos

Many bloggers want to make their blog into a book and one possibility is Blog Collector. Unfortunately, Blog Collector cannot print photos.

Here is another possibility - Blog2print which can also print photos. Just give them the blog URL, set the date range, choose your book cover and add an acknowledgement or dedication if so desired, and Blog2print will generate a preview of your book including a table of content plus quote their prices.

If you are not prepared to foot out $24.95 for a 20 page hard cover book or $14.95 for soft cover, you can opt for PDF file for $7.95

Wednesday, October 07, 2009

How to delete Google Account


"This sounds weird, but how do I delete my google account?"

Strangely, I too had some problems when I first tested deleting a Google Account as it was not as straight forward as I thought. So here is a step-by-step instruction on how to delete your Google Account. Warning: Deleting your Google Account means you will not be able to access your Blogger account, gmail account or whatever Google Products you have signed up for. So be absolutely sure you don't ever want to access those accounts again later before you delete your Google Account.

First, sign into your Google Account. Then, next to My Products, click Edit.

Edit Google Products

At the next page, under Delete Account, click Close account and delete all services and info associated with it.

delete google account

At the next page, tick all the services and products shown and enter your password.

delete google account final step

Click Delete Google Account and your Google Account will be gone almost forever.

Related posts:
How to recover deleted Google Account (not fool proof)

Google Account deleted, cannot access Blogger.com, what to do

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