<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d8846132\x26blogName\x3dElena\x27s+Web+Journal\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dSILVER\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttps://elenalua.blogspot.com/search\x26blogLocale\x3den_US\x26v\x3d2\x26homepageUrl\x3dhttp://elenalua.blogspot.com/\x26vt\x3d6531032340018644675', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>
 

Elena's Web Journal

 

Thursday, September 20, 2012

Blogger New Interface Test

This is a Blogger new interface test.

I will now try to insert a picture among blocks of text in Compose mode. The following gibberish would be use to represent block of text at times: [block of text] [block of text] [block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text]

All these jewel designs are hand made by me.



















There would be some gaps in the front of the first word if u move the picture after it's uploaded.  This is because the text will start to wrap around the picture and to make it go under the picture, you'd press a lot of [Enter].  Layers (div tag) + a lot of empty lines (br tag) will create what you see here.  Apparently this problem doesn't affect Internet Explorer.

How to Avoid the Gaps-in-front-of-first-word Problem
Solution 1: Don't move the picture.
Pictures uploaded from your computer are centered by default. If you had moved the picture accidentally while editing, use the 'undo' button or Ctrl-Z to reverse the changes.  If you prefer to move the picture, use Solution 2 or 3.


Solution 2:
i) Leave a lot of blank lines between blocks of text
ii) Insert picture
   (Should still have blank lines left. If not, restart with more lines)
iii) Update post
iv) Edit post and Move picture
   (Click on picture and use options given to move)
v) Erase blank lines under picture till 2 are left

This may take some getting used to but once u do it would be like brushing teeth.

Solution 3: Switch to HTML mode
If you are familiar with HTML code. You can edit the code to your liking.  Blogger also allow you to choose layout (none, left, right, center) when you click the 'Insert image' option.  Why aren't the upload options in one place? *shrugs*


Solution 1 works but there's fat space under my picture.
I am using Windows 7 and Firefox browser.  I found that if I press [Delete] on my keyboard to move the block of text upwards to leave just 1 line of space between picture and text, Blogger doesn't recognise the change.  It only works when I press [Backspace].  Go figure?!!!  Here's the result:


[block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text][block of text]

0 Comments:

Post a Comment

<< Home