Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Tuesday, April 16, 2013

Blogger's New HTML Editor


This isn't a tweak - more like a guide on how to use Blogger's new 'Edit HTML' box to make tweaks to your blog. I'll get to the point. Most of the times, you do not care what's in the box. You go there when a tutorial sheet requires you to do so, and almost always, you'd use the Search Function in your browser (invoked by hitting Ctrl + F on your keyboard) to look for whatever it is you're looking for.

But with the new editor, you won't see the result that you want to see with this old way of doing things. The tweak is to..

Step 1:

Click anywhere on the 'Edit HTML' box first, and make sure your cursor is placed in the box.


Step 2:

Now, invoke the 'Integrated Search Function' (as they call it), by hitting Ctrl + F on your keyboard. You'd see a new Search Box appear just on top of the Edit HTML box.


Step 3:

Copy and Paste whatever you're finding for in this box, and hit Enter, and you'd find what you're looking for.


Cheers!

47 comments:

  1. This looks great, so much more convient than before.
    Thanks for sharing.

    Sarah
    PrettyGloss - beauty, makeup & a lil life

    ReplyDelete
    Replies
    1. Deep down inside, I still prefer the old editor..

      Delete
    2. Yoga - I agree with you! I really feel comfortable with the old editor.

      Delete
  2. Thanks for this tutorial! But I wonder how can I expand the widget templates? I can't seem to find that function in this new edit html editor...

    ReplyDelete
    Replies
    1. When you use the Integrated Search Function, it searches through expanded blocks as well. But if you prefer to just look at it, you need select the widget that you're looking for via the 'Jump to Widget' drop-down, and click on the black triangle that appears near the line number.

      There isn't a way to expand all widgets at one go, because Blogger doesn't think it is necessary anymore..

      Delete
  3. Thank you!!!! This was driving me crazy today! I was making changes last week with no trouble finding anything. Today I kept getting the annoying "error" sound...like nails on a chalkboard.

    ReplyDelete
    Replies
    1. Nails on a chalkboard.. I know how that feels :P

      Delete
  4. Can't get this to work in Safari. I have no problem in Firefox. When I open Edit HTML with Safari, I just get the loading screen. Why would this happen?

    Megan

    ReplyDelete
    Replies
    1. Good news: It's a known problem. The Blogger Team has been notified with the bug and (hopefully) they're working on it.

      Bad news: No known workaround for now, except for using an alternative browser until they get it fixed (Google Chrome is good and lightweight.)

      Delete
  5. What use is this change in dynamic views? thanks

    ReplyDelete
  6. ahh, thank you so much. i was sooo frustrated with the new html editor. ugh. :) thank you for this, though. this really helped, and saved me hours of frustration (although, i mean, how hard can it be? haha.) but thank you!

    {and i agree, though. i do prefer the old editor over the new one. but, whatever, i guess. :/}

    :)
    Mikailah

    ReplyDelete
    Replies
    1. Like everything Blogger, you'll get used to it, eventually :)

      Delete
  7. A good explanation of a couple things I overlooked in the HTML ''Template'' editor (please be more precise in your article titles). Like others, I think it is more a hinderance than a help... and you were more help than the new editor.

    ReplyDelete
  8. Hellow Yoga.

    Thank you for all your great posts. They've been really helpful.

    I got only one problem though... I have chosen the magazine dynamic view and I cannot find a way to limit the number of posts seen on my home page. Have a look for yourself http://bee-gin.blogspot.gr/

    Thanks again!

    ReplyDelete
    Replies
    1. Hi Χρήστος Αλεξανδρίδης,

      Posts in Dynamic templates are meant to be loaded dynamically, by design. I'm afraid there's nothing we can do to limit the number of posts shown, as this goes against the very structure of the template itself..

      Delete
    2. Then perhaps you could help me set up a standard background that stands still! This one moves as I roll down to see my posts and after a while the picture ends and my background becomes white!

      Thanks a lot!

      Delete
    3. This should fix it:

      body{
      background-attachment: fixed !important;
      }

      Cheers..

      Delete
    4. I can't thank you enough Yoga. It looks great now! Perhaps one of your next tutorials will be "Remove from your domain".

      Thanks again! Your blog is perfect!

      Btw my name is Christos Alexandridis and Im from Greece ;)

      Delete
    5. Nice to meet you Christos Alexandridis :)

      Delete
  9. The older editor can be found very easily. In mine I have to expand rule nr. 7. Try to locate and expand the following text: .... If you expand your editor here, the "older" html will expand and you can find, add and change anything like you used to do.
    Hope this will help to those who loved the old editor. To be honest: at first I was very upset, but now I think it easier to use.

    ReplyDelete
    Replies
    1. Interesting.. Thanks for sharing Milly :)

      Delete
  10. Hi!! How do you adjust the header size with this new layout?

    ReplyDelete
    Replies
    1. Hi Nicole,

      That depends on a lot of things. Usually we don't have to us the HTML Editor to adjust the header size. If you could point me to your blog, and specify how exactly you want your header to be resized, I'd be a better help :)

      Delete
  11. Hi Yoga,

    I have a problem with my blog. I would like to replace my "previous posts" and "newer posts" links with images, but I just can't make it happen. I have tried to put the links of the images to my HTML code, but for some reason it's not working. I think it's because I'm not quite sure which lines I should replace with the image URLs. Could you please help me? The address of my blog is in my profile. Thank you so much! :)

    ReplyDelete
    Replies
    1. Adjusting the HTML would be tedious. We can use CSS to assign images to these two links. Do you have the links of the images with you?

      Delete
    2. Yes, here they are:
      Previous posts: http://4.bp.blogspot.com/-GiJGKz3LXeY/UZ-mdmL6QPI/AAAAAAAAA7g/CzeBjuxkk5s/s1600/Previous.png
      Next posts: http://1.bp.blogspot.com/-qH2PgU9i2Xc/UZ-mdiq7FSI/AAAAAAAAA7c/XszEBCZDQec/s1600/Newer.png

      I did find few tutorials on how to replace the links with images, but for some reason my HTML code doesn't have the exact same lines than shown in the tutorials. However I tried to change the code and put the image URLs in, but the older/newer links on my blog remained the same.
      If this can be done by CSS, it would be great! Thank you :)

      Delete
    3. Here you go, add it to your CSS:

      .blog-pager-older-link b font, .blog-pager-newer-link b font{
      font-size: 0px !important;
      }
      #blog-pager-older-link a{
      display: block !important;
      width: 260px !important;
      height: 260px !important;
      background: transparent url(http://4.bp.blogspot.com/-GiJGKz3LXeY/UZ-mdmL6QPI/AAAAAAAAA7g/CzeBjuxkk5s/s1600/Previous.png) no-repeat !important;
      }
      #blog-pager-newer-link a{
      display: block !important;
      width: 260px !important;
      height: 260px !important;
      background: transparent url(http://1.bp.blogspot.com/-qH2PgU9i2Xc/UZ-mdiq7FSI/AAAAAAAAA7c/XszEBCZDQec/s1600/Newer.png) no-repeat !important;
      }

      Cheers :)

      Delete
    4. Excellent!! Thank you! :)

      (I now realized I should not have posted my question here... Next time I'll use the "Ask a Question -page :))

      Delete
  12. hi! i noticed that some people just removed "read more" under each post commonly must used in blogger.t please tell me and also you are not using labels some people like my blogger tricks.com suggest to add nofollow to labels please tell me the best one
    thanx

    ReplyDelete
    Replies
    1. Hi Zee Mee,

      I'm afraid I'm not quite following. Are you saying someone just modified your blog and removed your 'Read More' summaries? Or did this happen after a change of template (coz this feature is a third party one and doesn't come built-in with default templates)?

      Delete
  13. THANK you so much for this tutorial. I was driving myself crazy trying to figure out why the old way of using the Control + F wasn't finding my text. You're a life saver. :)
    -Tracy

    ReplyDelete
    Replies
    1. I know that feeling! :P
      Glad you got it sorted :)

      Delete
  14. hello yoga!
    im using macbook pro and when i press Ctrl F i get nothing! what should i do?

    ReplyDelete
    Replies
    1. Ah, Mac user.. Sorry it took me ages to reply to this.. You should go with 'Command + F', that'll work for you :)

      Delete
  15. Hi yoga,
    I tried to edit HTML by adding something above "body" and clicked on Save Template. I can't save new lines an error message popup like this.
    "You have unsaved changes that will be lost"

    What I have to do?

    ReplyDelete
    Replies
    1. Sounds like it is trying to exit instead of saving. Have you tried using a different browser?

      Delete
    2. I tried different browsers(Safari and IE) and It didn't work out. I'm encountering same problem. (I'm using Windows 8 OS).

      Delete
    3. This is quite strange, and I'm not sure what to suggest. Usually, clearing your cache or using a different browser will help. Have you tried using Chrome or Firefox? Is your blog functioning alright on a different machine?

      Delete
    4. I generally use chrome browser. This is my blog http://gsrikar.blogspot.com/
      I'm positive that it works and checked on this website http://ismyblogworking.com/ and it said working.

      Can you suggest few bloggers who might solve my issue.

      Delete
    5. You could try Blogger's Help Forum. But this looks like an isolated case, and it doesn't look like the problem is with your Blogger account. They're gonna ask you to try on a different machine anyway.

      Delete
    6. I did posts it on forums 3 days back, didn't get any reply. Here is that link.
      https://productforums.google.com/d/topic/blogger/zzPQFRw5Av8/discussion

      Where can I report the bugs in my blog directly to blogger developers?

      Delete
  16. How to add CODE button for so that it can quick insert while writing posts.i know i can do it manually for each post by editing HTML Code like this

    <..div> but i want it to show a button for this along with other HTML buttons like for bold,link,image etc

    ReplyDelete
    Replies
    1. Have you tried the post template? Go to Dashboard - Settings - Post and Comments - Post Template - Add

      Delete
  17. that helped me a little bit, but can't it possible to add new button for this on WYSIWYG.

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.