Southern Listeners

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

Tuesday, April 16, 2013

Blogger's New HTML Editor

Spoken by at 4:17 PM

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!
Labels:

48 comments:

  1. Pretty GlossApril 16, 2013 at 7:05 PM

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

    Sarah
    PrettyGloss - beauty, makeup & a lil life

    ReplyDelete
    Replies
    1. YoboyApril 17, 2013 at 12:36 AM

      Deep down inside, I still prefer the old editor..

      Delete
    2. Joyce Cortes - Dragonfly Creative Design StudioApril 25, 2013 at 2:57 PM

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

      Delete
  2. Yen KinApril 17, 2013 at 3:09 PM

    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. YoboyApril 17, 2013 at 5:25 PM

      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. joyful.maraApril 18, 2013 at 2:39 PM

    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. YoboyApril 18, 2013 at 5:35 PM

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

      Delete
  4. MeganApril 23, 2013 at 8:09 AM

    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. YoboyApril 24, 2013 at 1:32 AM

      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. FscoMiscApril 23, 2013 at 11:17 PM

    What use is this change in dynamic views? thanks

    ReplyDelete
  6. Mikailah Autumn April 26, 2013 at 6:36 AM

    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. YoboyMay 1, 2013 at 1:04 AM

      Like everything Blogger, you'll get used to it, eventually :)

      Delete
  7. AnonymousMay 1, 2013 at 10:39 PM

    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. ckalexandridisMay 5, 2013 at 5:37 PM

    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. YoboyMay 10, 2013 at 2:35 AM

      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. ckalexandridisMay 11, 2013 at 1:41 AM

      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. YoboyMay 12, 2013 at 12:35 AM

      This should fix it:

      body{
      background-attachment: fixed !important;
      }

      Cheers..

      Delete
    4. ckalexandridisMay 13, 2013 at 2:13 AM

      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. YoboyMay 15, 2013 at 11:18 PM

      Nice to meet you Christos Alexandridis :)

      Delete
  9. Milly Me®May 10, 2013 at 6:25 PM

    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. YoboyMay 11, 2013 at 11:58 PM

      Interesting.. Thanks for sharing Milly :)

      Delete
  10. Nicole PylesMay 12, 2013 at 2:43 AM

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

    ReplyDelete
    Replies
    1. YoboyMay 15, 2013 at 10:34 PM

      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. ElisaMay 23, 2013 at 2:48 PM

    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. YoboyMay 25, 2013 at 2:24 PM

      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. ElisaMay 25, 2013 at 3:04 PM

      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. YoboyMay 25, 2013 at 4:37 PM

      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. ElisaMay 25, 2013 at 8:50 PM

      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
    5. YoboyMay 26, 2013 at 2:26 AM

      Don't worry about it :)

      Delete
  12. zemeeJune 17, 2013 at 12:49 AM

    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. YoboyJune 23, 2013 at 12:40 AM

      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. TracyJuly 8, 2013 at 3:16 AM

    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. YoboyJuly 12, 2013 at 8:54 PM

      I know that feeling! :P
      Glad you got it sorted :)

      Delete
  14. UnknownJanuary 6, 2014 at 3:13 AM

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

    ReplyDelete
    Replies
    1. YoboyJanuary 16, 2014 at 6:42 AM

      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. Srikar ReddyFebruary 20, 2014 at 6:45 PM

    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. YoboyFebruary 21, 2014 at 5:04 AM

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

      Delete
    2. Srikar ReddyFebruary 22, 2014 at 3:56 PM

      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. YoboyFebruary 24, 2014 at 6:08 AM

      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. Srikar ReddyFebruary 24, 2014 at 1:53 PM

      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. YoboyFebruary 25, 2014 at 3:52 AM

      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. Srikar ReddyFebruary 25, 2014 at 1:56 PM

      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. GouravJuly 11, 2014 at 10:49 PM

    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. YoboyJuly 13, 2014 at 5:11 PM

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

      Delete
  17. GouravJuly 13, 2014 at 10:13 PM

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

    ReplyDelete
  18. Mueeid SoomroMay 9, 2017 at 2:55 PM

    For example, in the past, you needed to set up offices or recruit associates in different countries if you want to penetrate these markets. StartPoint Hastings

    ReplyDelete

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

Subscribe to: Post Comments (Atom)