SOLUTION: HTML5 Alignment Iframe vs. deprecated "Scrolling=No" "Marginheight" and "Marginwidth" syntax

0

Finally... (after several days of study) I have discovered how to embed iframes into an html5 document and to avoid the validation errors, the scroll bar which inevitably presents itself, the issue with the deprecated "scrolling=no" and "marginwidth="0" and "marginheight=0" syntax.

Part One: Turning off the Scrolling Bar

First, I read a page on the web, (this page) which explained to prevent scrolling.. EDIT the file or (plural) FILE(S) which are embedded and load inside the frame, to turn off scrolling. It is futile to edit the main page itself. You do this:

That syntax "overflow: hidden" is necessary to place in each html file which will be embedded and loaded inside an iframe.

<style type="text/css">html {overflow:hidden} body {scrollbar-arrow-color: #ffffff; font-family: verdana; scrollbar-darkshadow-color: #000000; scrollbar-base-color: #050f2d; background-color: #00000} a {color: #535dcd; text-decoration:none}</style>

Once done, your html will not display a scroll-bar inside the iframe.


Part Two: Setting the margins for the iframe syntax to align iframes.

I have blogger to thank for the rest. When I uploaded an image earlier today, I took a second look at the syntax and thought it might work for embedding iframes too. I played with the code and re-wrote it to work to use in an html5 document. It worked, and I got my HTML5 validation scan to give the code a 100% valid rating.

Below, I have plucked a large section out of a web page I have been working on that includes FIVE iframes... each of them are coded slightly differently, for their position and different sizes. I am leaving in the end of the <tr> and <td> markers so its possible to get an idea how the iframe is positioned in correlation to the rest of the html and other iframes.

/snipped....

<tr>
<td colspan="2" style="width:500px">
<div class="separator" style="text-align: middle">
<iframe src="http://example.com/folder/example-01.html" style="margin-bottom: 0em; margin-left: 0em; margin-right: 0em; height:780px; width:520px; border:0px;"></iframe></div>
</td>
</tr>

</table>

</td>

<td style="vertical-align:top; width: 300px">

<div class="separator" style="text-align: center; width: 325px">
<iframe src="http://example.com/folder/example-02.html" style="margin-bottom: 0em; margin-left: 0em; margin-right: 20px; height:960px; width:260px; border:0px;"></iframe></div>

<hr style="float:center; padding:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<div class="separator" style="text-align: middle">
<iframe src="http://example.com/folder/example-03.html" style="margin-bottom: 0em; margin-left: 5px; margin-right: 0em; height:100px; width:310px; border:0px;"></iframe>
</div>
<hr style="float:center; margin-top:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />

<div class="separator" style="text-align: middle">
<iframe src="http://example.com/folder/example-04.html" style="margin-bottom: 0em; margin-left: 0em; margin-right: 0em; height:720px; width:300px; border:0px;"></iframe></div>

<div class="separator" style="text-align: middle">
<iframe src="http://example.com/folder/example-05.html" style="margin-bottom: 0em; margin-left: 0em; margin-right: 0em; height:1080px; width:300px; border:0px;"></iframe></div>

</td>
</tr>
</table>

/snipped...

Generated by CSE HTML Validator Lite v15.06 (https://www.htmlvalidator.com/)

1. Comment: Congratulations! There were no errors or warnings. NOTE: Checking is limited compared to paid editions. Visit freehtmlvalidator.com for more information.

2. Comment: HTML5 document detected.

3. Comment: 0 errors, 0 warnings, 0 messages, 3 comments.

This is not saying you won't have to tweak your iframe with more relevant syntax, it's contents or something.. but I worked with the code where it is "good enough" that all my iframes are now working by following those two steps. I suppose I could try stripping the whole table structure back down to the bone, and double-checking the measurements (i.e., the pixels mathematically adding up perfectly) then re-writing the site all over again, which I'm not doing due to time constraints, but on Firefox and Chrome, and my 4.4.2 Kitkit Android, the frames work, and there's no scrolling bars. Good luck!


Days Earlier...

First I'll uptrack on to the solution I found for alignment of iframes during my attempt at achieving a perfect HTML5 document that passes the validator.

I could not get my iframes to align properly, at all. Needless to add (if reading over the other problems which HTML5 pointed up in my coding which I had to correct), but the HTML5 syntax doesn't allow the same methods (i.e., <center>coding</center> as in times past.

My frame was not perfectly aligned center or would not align to the left more to make it even out as it was supposed to do. I was not taking into consideration the PIXEL WIDTH of the <td> or other frames in that <td> cell.

<td style="width:300px">

The cell was marked to accomodate frames no bigger than "width:300px". My frame was "width:260px". Therefore, it was getting thrown off, and aligning far to the right. I tried several attempts at re-coding that did not work to align it evenly. It was aligned far to the right.

After some web surfing, reading, taking notes and experimenting, this code seems to work for my problem.

NOTE: I just mentioned how the <td> cell and other frames in it were "width:300px" but this odd frame out was only 260px... which is 40 pixels short of the measurement. Therefore, I am compensating with the margins. See below:

<td style="vertical-align:top; width: 300px">

<div style="float: middle; width:300px; height:960px; background: #000000; font-size: 11px; border: 0px #000818 solid; overflow:hidden">
<iframe src="http://example.com/folder/testing260pixelwidthiframe.html" marginheight="0" marginwidth="0" scrolling="no" style="height:960px; width:260px; margin-left:20px; margin-bottom:0px; margin-top:0px; margin-right:0px; overflow:hidden; padding:0px; border:0px; float:middle"></iframe>
</div>

<hr style="float:center; padding:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<iframe src="http://example.com/folder/300pixelwidthiframenoproblem.html" marginheight="0" marginwidth="0" scrolling="no" style="background: #000000; height: 100px; width: 300px; padding: 0; margin: 0 auto; border: 0; float: center; overflow: hidden"></iframe>
<hr style="float:center; margin-top:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />

</td>

Cell width=300 pixels minus the 260 pixels of my oddly sized iframe. That left 40 pixels falling short.. half (20) of the number on the left alignment and half (20) of that number on the right alignment should align it correctly. So I added 20 pixels to the "margin-left:20px;" syntax. All I know is, it finally solved my problem aligning an iframe with HTML5.

Here's a screenshot when I set the "margin-left:60" to 60 pixels... the frame went way off on the right. The red arrow is pointing that out. So I reduced the frame's "margin-left:60px" value to 20pixels and it aligned center in the frame.

Here's the same frame properly aligned, 20 pixels on the right margin and 20 pixels on the left margin, in a 300 pixel width <td> cell.


Earlier yesterday...

I'm upgrading my old html pages to html5 standards and could not figure out how to get the iframe to align, until resorting back to the outdated and obsolete marginheight="0" marginwidth="0" and "scrolling="no" syntax which is still supported in most browsers, thankfully ... but not recommended.

The coding is suppose to be corrected through a CSS file, which I really did not want to do, and have not yet attempted to remedy, but even when adding those elements other issues arose with HTML5 syntax and how it displays in Firefox.
Namely, I've tinkered with the coding for many hours on two of my old html pages and when I edited, and made all the <div> the same width, the margins seemingly finally fell together and displaying on Firefox as though the margins tightened up with a more seamless display.

Here are my two test pages (One) and (Two). I wanted to align them perfectly where changes between pages would reflect the same proportions but nada.

I've been at this for hours surfing the web and trying to find some example to go by (either the CSS coding example and then an example demonstrated with sample HTML) so that I might actually go about properly aligning iframes within HTML5 compliant standards... but nada.
So I've been forced to wing it the best I can, here.

It seems to have finally aligned correctly, at least on Firefox within the allotted <td>'s and Chrome shows it working as well.

Here's what I've ended up with and I'm fully aware it has errors in the code according to the HTML5 compliant Validator

<td style="vertical-align:top; float: middle">
<div style="float: middle; width:300px; height:960px; background: #000000; font-size: 11px; border: 0px #000818 solid; overflow:hidden">
<iframe src="http://example.com/folder/abc3.html" marginheight="0" marginwidth="0" scrolling="no" style="height:960px; width:260px; margin-left:40px; margin-bottom:0px; margin-top:0px; margin-right:0px; overflow:hidden; padding:0px; border:0px; float:middle"></iframe>
</div>

<hr style="padding:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<iframe src="http://example.com/folder/abc3.html" marginheight="0" marginwidth="0" scrolling="no" style="background: #000000; height: 100px; width: 300px; padding: 0; margin: 0 auto; border: 0; float: left; overflow: hidden"></iframe>
<hr style="margin-top:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />

<div style="float: center; width:300px; height:720px; background: #000000; font-size: 11px; border: 0px #000818 solid; overflow:auto; overflow-x:hidden">
<iframe src="http://example.com/folder/abc3.html" marginheight="0" marginwidth="0" scrolling="no" style="width: 300px; height: 720px; padding: 0; margin: 0 auto; border: 0; float: left; overflow: hidden"></iframe>
</div>

</td>

On the overall, this: receiving a minimal number of warnings and errors whilst transitioning my old HTML pages over to HTML5 compliant syntax isn't that bad... I'm down to about four, which I understand now "why" I'm getting the errors. I'm using the free version of CSE Validator Lite. It scans the document and makes recommendations for coding that should be used under HTML5 compliant standards. Thanks to fixing numerous issues, it began detecting the document as an "HTML5 document". Not bad.
When I recently downloaded the newest version of Validator, (being accustomed to good old fashioned 2000 era HTML coding) the onslaught of "warnings" and "errors" looked pretty Greek to me, but I decided I might better brush up on my HTML5 coding skills.

HTML Validation Services are also available at these links which I also used to test errors and warnings on my coding (same thing the CSE HTML Validator was telling me all in all) :

http://validator.w3.org/

If you want to be made to feel completely awful about coding skills, just drop your web-based URL into this validator and watch as scores of coding errors flow forth in the results. Nice.
http://htmlhelp.com/tools/validator/

Or, try this one who verifies if your document is valid for all practical purposes:
http://www.freeformatter.com/html-validator.html

And lastly, try this validator for a thorough analysis of source code.
https://html5.validator.nu/

Validator message export
Generated by CSE HTML Validator Lite v15.06

1. Warning in line 21 at character 2: This table doesn't appear to have the same number of columns in each of its 2 rows. Number of columns in each row (starting with the first row): 2 (line 22), 1 (line 174). Note that for the purposes of this message, a table cell with a "colspan" or "rowspan" value greater than 1 is considered to be multiple cells.

2. Error in line 154 at character 65: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.

3. Error in line 160 at character 59: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.

4. Error in line 164 at character 59: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.

5. Error in line 168 at character 65: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.

6. Comment: HTML5 document detected.

7. Comment: This document contains tables nested to 5 levels. Too many nested tables may cause significant performance problems and may reduce the ability of browsers to render and display the document properly. This message appears when there are nested tables more than 3 levels deep.

8. Comment: 4 errors, 1 warning, 0 messages, 3 comments.


UPDATE

I've been reviewing my code for possible tweaks I can make, i.e., replacing some of the "nested tables" with divs, and my errors are down to these issues ... and, the frame is now aligning correctly in both pages.

Generated by CSE HTML Validator Lite v15.06 (https://www.htmlvalidator.com/)

1. Error in line 150 at character 65: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.

2. Error in line 161 at character 59: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.

3. Error in line 165 at character 59: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.

4. Error in line 169 at character 65: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.

5. Comment: HTML5 document detected.

6. Comment: This document contains tables nested to 4 levels. Too many nested tables may cause significant performance problems and may reduce the ability of browsers to render and display the document properly. This message appears when there are nested tables more than 3 levels deep.

7. Comment: 4 errors, 0 warnings, 0 messages, 3 comments.


UPDATE

I removed all the elements contained within the HTML section by section and stripped down the coding to reveal the table structure by itself. I saw several improvements that could be made and implemented those. Now, all the table related errors are gone and the pages appear to be validated HTML5 documents.

Generated by CSE HTML Validator Lite v15.06 (https://www.htmlvalidator.com/)

1. Error in line 151 at character 65: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.

2. Error in line 164 at character 59: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.

3. Error in line 168 at character 59: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.

4. Error in line 172 at character 65: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.

5. Comment: HTML5 document detected.

6. Comment: 4 errors, 0 warnings, 0 messages, 2 comments.

Read More »

Collapsing Div Menu

0

1. I'm saving the div as an html file and using a frame to insert the div element into the sidebar of a blog, like this:

I have used a <div> to provide a thin border around it.


2. Here's a sample of the "publication-list.html" file script, and the active html to the right of it.

 


3. Here's an alternate footer using the same script, but in a different format

Again, I saved my <div> as an html on a server, and inserted into the blog using an iframe.

Here's the active iframe

Here's the code:

Read More »

Blogger Posts with Preview

0

From an article "How to create Magazine Style with Post Summaries and Thumbnails on Blogger".

Very good article.

The code I use is as follows.


1. Perform a search for the following line in the blogger template.

The second search hit is the one you will search for:

 

 

Original

<data:post.body/>

Modified

<data:post.body/>

2. Over-write <data:post.body/> with the following code:

 

Original

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'> <span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Modified

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

3. Now, locate the following text in the template:

 

Original

<b:include data='post' name='post'/>

Modified

<b:include data='post' name='post'/>

4. Replace <b:include data='post' name='post'/> with the following script:

 

Original

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if> <div class='first-body'>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary1" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb1("summary1<data:post.id/>");</script>
<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read More »</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Modified

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary1" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb1("summary1<data:post.id/>");</script>
<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read More »</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

5. Locate </head>. Paste the following code just above the </head> tag.

 

Original

<script type='text/javascript'>
posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 580;
first_thumb_sum = 450;
img_thumb_height1 = 145;
img_thumb_width1 = 165;
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = first_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="first-post-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
summ = first_thumb_sum;
}

var summary1 = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}

//]]>
</script>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.first-post-thumb {
margin-right: 10px;
}

.summary {
height: 100%;
}

#first { /* Styles for the First Post Container */
width: auto;
height: 250px;
float: left;
margin-bottom: 10px;
background-color: #F4F4F4; /* background color for the first post */
border: 1px solid #E5E5E5; /* border for the first post */}

.first-body { /* Style for the First Post summary */
color: #545454;
font-size: 13px;
text-align: justify;
padding: 5px 10px;
line-height: 1.5em;
}

#first h3 a, #first h3 a:visited { /* Style for the First Post Title*/
border-bottom: 2px solid #DFDFDF;
color: #515151;
font-size: 20px;
display: block;
margin: 10px auto;
width: 95%;
font-size: 20px;
padding: 0px 0px 4px 0px;
font-weight: bold;
text-align: left;
line-height: 1.4em;
background: none;
}

#first h3 a:hover { /* Color on mouseover for the First Post Title */
color: #1061A1;
}

.post { /* Styles for the small posts container */
float: left;
margin: 0px 6px 2% 5px;
width: 46%;
height: 230px;
padding: 0px 5px 5px 5px;
background: #FCFCFC; /* background color for the small posts */
border: 1px solid #E5E5E5; /* border for the small posts */
overflow: hidden;
}

.posts-thumb { /* Style for the small posts thumbnails */
margin-right: 10px;
}

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
background: none;
border: none;
box-shadow: none;
padding: 0;
}

h3.post-title a{ /* Style for the small posts titles */
font-size: 14px;
color: #747474;
text-transform: uppercase;
}

h2.date-header { /* Hide the post date */
display: none;
}

.post-footer {
display: none;
}

h3.post-title {
margin: 0px;
}

.readmorebutton {
margin-top: 5px;
}

.readmorebutton a { /* Styles for the Read More link */
color: #767676;
border: 1px solid #E1E1E1;
background: #EAEAEA; /* Background color for the Read More link */
text-decoration: none;
padding: 3px 5px;
font-weight: bold;
font-size: 11px;
float: right;
position: relative;
}

.post-comment-link { /* Style for the comment bubble of posts below */
position: absolute;
top: -35px;
right: -10px;
display: block;
border: 1px solid #E1E1E1; /* border for the comment bubble */
background: #EAEAEA; /* background color for the comment bubble */
font-size: 11px;
position: absolute;
}

#first .post-comment-link { /* Style for the comment bubble of first post */
position: absolute;
top: 10px;
right: 0px;
}

.post-comment-link a { /* Link color for the comments bubble*/
padding: 10px;
color: #6A6A6A;
text-decoration: none;
font-weight: bold;
}

#blog-pager {
clear: both;
}
</style>
</b:if>
</b:if>

Modified

<script type='text/javascript'>
posts_no_thumb_sum = 500;
posts_thumb_sum = 400;
img_thumb_height = 145;
img_thumb_width = 145;
first_no_thumb_sum = 500;
first_thumb_sum = 400;
img_thumb_height1 = 145;
img_thumb_width1 = 145;
</script>


<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = first_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="first-post-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
summ = first_thumb_sum;
}

var summary1 = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}

//]]>
</script>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.first-post-thumb {
margin-right: 10px;
}

.summary {
height: 100%;
}

#first { /* Styles for the First Post Container */
width: auto;
height: 200px;
float: middle;
margin-bottom: 0px;
background-color: #000000; /* background color for the first post */
border: 1px solid #000000; /* border for the first post */}

.first-body { /* Style for the First Post summary */
color: #cccccc;
font-size: 16px;
text-align: left;
padding: 5px 10px;
line-height: normal;
}

#first h3 a, #first h3 a:visited { /* Style for the First Post Title*/
border-bottom: 2px solid #000000;
color: #535dcd;
font-size: 16px;
display: block;
margin: 10px auto;
width: 95%;
font-size: 16px;
padding: 0px 0px 4px 0px;
font-weight: normal;
text-align: left;
line-height: normal;
background: #000000;
}

#first h3 a:hover { /* Color on mouseover for the First Post Title */
color: #535dcd;
}

.post { /* Styles for the small posts container */
float: middle;
margin: 0px 6px 2% 5px;
width: 95%;
height: 220px;
padding: 0px 5px 5px 5px;
background: #000000; /* background color for the small posts */
border: 1px solid #000000; /* border for the small posts */
overflow: hidden; }

.posts-thumb { /* Style for the small posts thumbnails */
margin-right: 10px;
}

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
background: none;
border: none;
box-shadow: none;
padding: 0;
}

h3.post-title a{ /* Style for the small posts titles */
font-size: 16px;
color: #535dcd;
text-transform: none
}

h2.date-header { /* Hide the post date */
display: none;
}
.post-footer {
display: none;
}

h3.post-title {
margin: 0px;
}

.readmorebutton {
margin-top: 5px
}

.readmorebutton a { /* Styles for the Read More link */
color: #535dcd;
border: 1px solid #000000;
background: #000000; /* Background color for the Read More link */
text-decoration: none;
padding: 3px 5px;
font-weight: normal;
font-size: 16px;
float: right;
position: relative;
}

.post-comment-link { /* Style for the comment bubble of posts below */
position: absolute;
top: -35px;
right: -10px;
display: block;
border: 1px solid #000000; /* border for the comment bubble */
background: #000000; /* background color for the comment bubble */
font-size: 16px;
position: absolute;
}

#first .post-comment-link { /* Style for the comment bubble of first post */
position: absolute;
top: 10px;
right: 0px;
}

.post-comment-link a { /* Link color for the comments bubble*/
padding: 10px;
color: #cccccc;
text-decoration: none;
font-weight: normal;

}

#blog-pager {
clear: both;
}
</style>
</b:if>
</b:if>

SAVE AND EXIT THE TEMPLATE. Your blog should reflect the change, but will definitely require tweaking.


6. Go to "Advanced Settings" in blogger and tweak colors to suit your blog.

I recommend against trying to edit the template and using Advanced Settings at the same time as they will save and overwrite each other. Use one or the other at a given time.

Checking corresponding styles; font size, decoration, color. Note "Bold".

Checking corresponding styles for Link Color (Link, Visited and Hover).

#first { /* Styles for the First Post Container */
width: auto;
height: 320px; (hint: Value can be changed i.e., 250px or 350px. This will affect the height of the preview space.)
float: middle;
margin-bottom: 10px; (hint: affects distance between preview blocks)
background-color: #000000; /* background color for the first post */
border: 1px solid #000000; /* border for the first post */
} (hint: * if you do not want blocks with borders for your previews, as in the original script, change the whole post background in Advanced Settings to match color of the preview borders and background).

.first-body { /* Style for the First Post summary */
color: #cccccc;
font-size: 16px;
text-align: left; (hint: right, left, justify)
padding: 5px 10px;
line-height: normal; (hint: 1.5em)
}

#first h3 a, #first h3 a:visited { /* Style for the First Post Title*/
border-bottom: 2px solid #000000;
color: #535dcd;
font-size: 16px;
display: block;
margin: 10px auto;
width: 95%;
font-size: 16px;
padding: 0px 0px 4px 0px;
font-weight: normal; (hint: bold)
text-align: left; (hint: left, right, justify)
line-height: normal;
background: #000000;
}

#first h3 a:hover { /* Color on mouseover for the First Post Title */
color: #535dcd;

Be aware that if your blog front page loads with a mixture of "bold" and "normal" headline and text, or mismatched colors, check "Advanced Settings" in Blogger. Be certain that your template and advanced settings are given the same instructions
1) Font Size
2) Link Color; i.e., Hover, Visited Link
3) Bold or Normal text decoration

NOTE: In the original script this width was set to 46% to create rows with 2 blocks of post previews. I modified it to 95% and set older posts to align in the middle. To avoid lack of uniformity between the newest post and older posts, the text alignment was changed from "justify" to "left".

Original Script

.post { /* Styles for the small posts container */
      float: left;
      margin: 0px 6px 2% 5px;
      width: 46%;

Modified Script

.post { /* Styles for the small posts container */
      float: middle;
      margin: 0px 6px 2% 5px;
      width: 95%;

In the original script, 46% was designated to create previews in blocks. Like this:

To avoid variations in text (the newest post vs. older posts), I also modified all posts text alignment, set to the "left".

Original Script

.first-body { /* Style for the First Post summary */
      color: #545454;
      font-size: 13px;
      text-align: justify;
      padding: 5px 10px;
      line-height: 1.5em;

Modified Script

.first-body { /* Style for the First Post summary */
      color: #cccccc;
      font-size: 16px;
      text-align: left;
      padding: 5px 10px;
      line-height: normal;

NOTE: The template I have modified the code for is designed to work in the Travel template. Every template has variations and will have to be modified accordingly.


Again, the source for the original code is located at this link. And the preceding is my own modified code.

I have had to revise to suit my personal preference/blog style. To edit the blogger template:

Read More »