Two Things Blogger Does On Its Own That Annoys Me and Their Simple Fixes

Sunday, May 15, 2016

Paper Bindings - Two Things Blogger Does On Its Own That Annoys Me and Their Simple Fixes : "Out of the four of us here at Paper Bindings, I am the one with the most HTML/CSS knowledge. So I am the one called upon to save the post whenever the coding goes astray."


Out of the four of us here at Paper Bindings, I am the one with the most HTML/CSS knowledge. So I am the one called upon to save the post whenever the coding goes astray.

Which happens a lot.

Because Blogger has a tendency to do whatever it wishes with the coding while you work in the 'compose' screen

Personally, I tend to write my posts in the html section for this reason.

For me, writing in html it is also:
  • Faster because I do not have to go back and fix as many (if any) html issues.
  • Simpler because what I type is what I get.
  • Easy because that is the way my mind works when I am trying to design a post in my head.

RELATED: HTML All Book Bloggers Need To Know In Order To Be Successful // How To Use CSS To Rock Your Posts Even If You Don't Understand Coding Well


Blogger Bugs Me When...

If you are not like me, and simply cannot think in code, then you have encountered the top two things blogger does with coding that annoys me the most.



Image Issues

When you upload an image it automatically does this:

Paper Bindings - Two Things Blogger Does On Its Own That Annoys Me and Their Simple Fixes

That's okay, right?

Is that all you wanted it to do, sit in the middle of the page by itself? Yes? Then yes, it is okay.

Did you wanted to have multiple images beside each other with no spaces between them, and have them not be center aligned, like I do in my biweekly recaps? Then no, it is not okay.

Because blogger adds in some extra coding to get that image perfectly centered and separate.


It takes this:
<img border="0" src="http://i1056.photobucket.com/albums/t362/onceuponadreambooks/Blog%20Images/Miscellaneous/upload%20image.jpg">

Paper Bindings - Two Things Blogger Does On Its Own That Annoys Me and Their Simple Fixes

And turns it into this:
*exact coding copied and pasted from first image above*

<div class="separator" style="clear: both; text-align: center;">
<a href="http://i1056.photobucket.com/albums/t362/onceuponadreambooks/Blog%20Images/Miscellaneous/upload%20image.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i1056.photobucket.com/albums/t362/onceuponadreambooks/Blog%20Images/Miscellaneous/upload%20image.jpg" height="188" width="320" /></a></div>

So if you aren't code friendly, how can you fix it?

Easily.

You can upload the image like normal, but you do have to do the correction work in the html screen.

(1) First We Correct The Center Coding:
*Assuming you wanted it centered. If not, just delete it.

This: 
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i1056.photobucket.com/albums/t362/onceuponadreambooks/Blog%20Images/Miscellaneous/upload%20image.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i1056.photobucket.com/albums/t362/onceuponadreambooks/Blog%20Images/Miscellaneous/upload%20image.jpg" height="188" width="320" /></a></div>

Becomes:
<div class="text-center">
<a href="http://i1056.photobucket.com/albums/t362/onceuponadreambooks/Blog%20Images/Miscellaneous/upload%20image.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i1056.photobucket.com/albums/t362/onceuponadreambooks/Blog%20Images/Miscellaneous/upload%20image.jpg" height="188" width="320" /></a></div>

RELATED: Nosegraze's Guide To Properly Center Text *Even if you don't add any CSS to your blog, you should add this one.


(2) Second, We Delete Unnecessary Coding:

This:
<div class="text-center">
<a href="http://i1056.photobucket.com/albums/t362/onceuponadreambooks/Blog%20Images/Miscellaneous/upload%20image.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i1056.photobucket.com/albums/t362/onceuponadreambooks/Blog%20Images/Miscellaneous/upload%20image.jpg" height="188" width="320" /></a></div>

Becomes:
<div class="text-center">
<a href="http://i1056.photobucket.com/albums/t362/onceuponadreambooks/Blog%20Images/Miscellaneous/upload%20image.jpg"><img border="0" src="http://i1056.photobucket.com/albums/t362/onceuponadreambooks/Blog%20Images/Miscellaneous/upload%20image.jpg" height="188" width="320" /></a></div>

**The imageanchor="1" addition is something Blogger automatically adds to every image. "We currently use this markup internally to control the post editing experience." (Quoted from the Blogger Developer Group Help Forum.)

But it can be deleted, and many people remove it. I was always taught not to have excess coding on the page. If you aren't using it, then don't keep it.


(3) Third, Change Height And Width As Desired.

And you are left with this:
Paper Bindings - Two Things Blogger Does On Its Own That Annoys Me and Their Simple Fixes


Congratulations, you did it.



All That Unnecessary Coding:


Maybe you drafted your post in word on your home computer, or maybe you wrote a group post in Google Documents and now need to upload it to a new post in your blog.

So you copy and paste it.

And your precious preset font settings get distorted and overwritten.

Why?

Because every since piece of coding you don't see that tells that document all the font settings, colors, alignments, headings, etc., gets transferred as well.

This:
  • 12) Best Films adapted from books
  • Harry Potter
  • Hunger Games
  • The Perks of Being a Wallflower
  • The Deep End of the Ocean
  • Tuck Everlasting
  • LOTR
  • The Princess Bride
  • Gone Girl
  • Atonement

Becomes:
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: #674ea7; font-family: Arial; font-size: 13.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: disc; margin-left: 48px; text-decoration: line-through; vertical-align: baseline;"><span style="color: black; font-size: 13.3333px; line-height: 1.38; white-space: pre-wrap;">12) Best Films adapted from books</span></li>
</ul>
*continues on forever*

So how do you fix it and start over?

(1) You Highlight All The Text That Needs To Be Reverted.


Paper Bindings - Two Things Blogger Does On Its Own That Annoys Me and Their Simple Fixes
(2) You Click The Magical 'Remove Formatting' Button At The Top Of The Page.

This will remove every single piece of coding connected with the text.

**You could go line by line in the HTML screen and remove all the extra coding, but it will take a whole lot longer.**


This:
  • 12) Best Films adapted from books
  • Harry Potter
  • Hunger Games
  • The Perks of Being a Wallflower
  • The Deep End of the Ocean
  • Tuck Everlasting
  • LOTR
  • The Princess Bride
  • Gone Girl
  • Atonement

Becomes:

12) Best Films adapted from books


Harry Potter


Hunger Games


The Perks of Being a Wallflower


The Deep End of the Ocean


Tuck Everlasting


LOTR


The Princess Bride


Gone Girl


Atonement


(3) Then You Have To Reformat The Text As You Desire.
You can do this on either the HTML or Compose screens.

This:

12) Best Films adapted from books


Harry Potter


Hunger Games


The Perks of Being a Wallflower


The Deep End of the Ocean


Tuck Everlasting


LOTR


The Princess Bride


Gone Girl


Atonement


Becomes:

Best Films Adapted From Books
  • Harry Potter
  • Hunger Games
  • The Perks of Being a Wallflower
  • The Deep End of the Ocean
  • Tuck Everlasting
  • LOTR
  • The Princess Bride
  • Gone Girl
  • Atonement

If I wanted, I could play around with the color or add some CSS to my list.


Don't Give Up

Don't be discouraged if coding isn't second nature to you yet, and you repeatedly have to go through these steps to get your posts looking the way you want them to. There have been plenty of times when I have had no clue why blogger added certain coding in and had to start the post design over. The more you work with HTML and CSS the better you will become.

2 comments:

  1. This is why I used Windows Live Writer to compose blog posts and pages when I was blogging. WLW is open source now, so I'm not sure what kind of changes were made to the program, but it was a godsend when I was using it. I avoided using Blogger to format blog posts/pages like the plague.

    ReplyDelete
    Replies
    1. I haven't heard of WLW before. But after googling it, I can certainly see why it would have been helpful.

      Thank you for stopping by.

      Delete

Thank you for visiting and taking the time to sharing your thoughts with us.

Related Posts Plugin for WordPress, Blogger...