<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]

Wednesday, September 19, 2012

Second Test for Blogger New Interface

This is another test.

[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][Block of Text][Block of Text][Block of Text][Block of Text][Block of Text][Block of Text][Block of Text][Block of Text]










I dragged the picture above using my mouse and the text started to 'wrap' it.  After a while, the dragging manage to leave just 1 blank line between the picture and the text below it.










The picture above is uploaded using Solution 2 (see above post) and moved by using the blue tool bar that appears when you click the picture in 'Edit Post' section.  I have to use [Backspace] to move the text below it and leave 2 lines of blank space.  It will only appear as 1 line in web browser.





test

test test
















test test

Images alignment problem in Blogger

The div layers where the pictures are placed messes up alignment. Have to manually delete div tags to achieve this:



Workaround:
In Edit Post section, select HTML mode then click 'Insert image'. Blogger will then open a window for you to upload a picture and select its layout. Select 'None' so that no div code will be generated to wrap the picture. This is a flaw; The upload options in both 'Insert Image' sections should be in one place.

Here's 4 pics uploaded using 'None' layout:


There are other workarounds I haven't tried. People who has some html code knowledge would be able to manipulate around these problems better too.

End of test.