Programming Log: Edit Blogger HTML Settings

This is blog is technical detail I did in 2007. I wrote this technique long time ago. It is truth that this is only required to do only once. However, when I create another blogger account, I would like to repeat it again. Now I think it is better to take detail notes of steps so that I may need to reuse it again.

Here is the example I edited HTML for my Chinese blog.

Backup HTML

It is important to backup your Blogger HTML settings before doing any updates. Here is the place to find the HTML settings and make the complete copy of HTML before any updates.

Copy My CSS Settings

The following CSS codes are used by my blog. Insert the CSS definitions into header section. Here I copied it to end of </b:skin>

<b:skin><![CDATA[/*-----------------------------------------------
...
/* David Inserted styles */
/* Use these styles as class ID for a box for some blocks such as div, p */
.outlinebox {
  width: 435px;
  border-width: 1px;        /* sets border width on all sides */
  border-style: solid;
  border-color: #666666;
  padding: 5px
  }

.outlineterminalbox {
  width: 850px;
  border-width: 1px;        /* sets border width on all sides */
  border-style: solid;
  border-color: #C0C0C0;
  font-family:monospace, prestige;
  background-color: #080808;
  color: #FFFF00;
  padding: 5px
  }

.outlinebox4wrappercodes {
  width: 444px;
  border-width: 1px;        /* sets border width on all sides */
  border-style: solid;
  border-color: #666666;
  margin: 0px auto;
  }

.outlineboxterminal4wrappercodes {
  width: 444px;
  border-width: 1px;        /* sets border width on all sides */
  border-style: solid;
  border-color: #080808;
  color: yellow;
  margin: 0px auto;
  }

/* code settings with following 2 outline Withbackclr. Generated in VIM TOhtml cmd */
.Type { color: #60ff60; }
.Comment { color: #80a0ff; }
.Identifier { color: #40ffff; }
.PreProc { color: #ff80ff; }
.Constant { color: #ffa0a0; }
.Statement { color: #fbf204; }
.Special { color: #fb8000; }

.outlinebox4wrappercodesWithbackclr {
  width: 444px;
  border-width: 1px;        /* sets border width on all sides */
  border-style: solid;
  border-color: #666666;
  margin: 0px auto;
  background-color: #000000;
  color: #cccccc;
  }

.outlineboxterminal4wrappercodesWithbackclr {
  width: 444px;
  border-width: 1px;        /* sets border width on all sides */
  border-style: solid;
  border-color: #080808;
  color: yellow;
  margin: 0px auto;
  background-color: #000000;
  color: #cccccc;
  }
 
.wrappercodes {
  width: 435px;
  padding: 5px;
  overflow: auto;
  }
 
.wrappercodesWithHeight {
  width: 435px;
  height: 300px;
  padding: 5px;
  overflow: auto;
  }

.wrappercodesWithHeightNowrap {
  width: 435px;
  height: 300px;
  padding: 5px;
  overflow: auto;
  white-space:nowrap;
  }

.nowrappercodes {
  width: 435px;
  padding: 5px;
  overflow: auto;
  white-space:nowrap;
  }

.nowrappercodesinner {
  width: auto;
  padding: 5px;
  overflow: auto;
  white-space:nowrap;
  }

.nowrappercodesWithHeight {
  width: 435px;
  height: 300px;
  padding: 5px;
  overflow: auto;
  white-space:nowrap;
  }
 
/* code style */
span.kwrd {
  color: rbg(0, 0, 255);
  }

span.defType {
  color: rgb(43, 145, 175);
  }
 
span.errorcode {
  color: rbg(255, 0, 0);
  }
 
span.highlight
{
color: white;
background-color: rgb(0, 100, 200);
}

/* Code Colors copied ccs from http://forums.asp.net/utility/colorcode.css for code colors */
/* Use asp.net forums on-line post to generate codes with these ccs class */

.coloredcode .cmt      { color: #00D502; }
.coloredcode .cmtg      { color: #666; }
.coloredcode .st           { color: #f00; }
.coloredcode .kwdt      { color: #666; }
.coloredcode .kwd      { color: #00f; }
.coloredcode .attr      { color: #f00; }
.coloredcode .attrv      { color: #00f; }
.coloredcode .ec           { color: #00f; }
.coloredcode .tag      { color: #800000; }
.coloredcode .dir    { color: #000; background: #FEFF22; }
.coloredcode .sel    { color: #800000; }
.coloredcode .val    { color: #00f; }
.coloredcode .unit      { color: #800000; }
.coloredcode .sqlcmt { color: #008080; }
.coloredcode .sqlkwd { color: #00f; }
.coloredcode .sqlkwd2 { color: #f0f; }
.coloredcode .sqlkwd3 { color: #999; }
.coloredcode .sqlkwd4 { color: #800000; }
.coloredcode .num      { color: #00f; }
.coloredcode .sqlst  { color: #008000;}
.coloredcode .classInterface { color: #1E90FF;}
.coloredcode b      { font-weight: normal; color: #008080; }
.coloredcode          { font-size: small !important; }
.row-set-descriptor {
  border-bottom: 1px solid #F60;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #F60;
  clear: left;
  color: #E55C00;
  font-size: 140%;
  margin: 0px 20px 0.5em 0px;
  margin-top: 0px;
  margin-right: 20px;
  margin-bottom: 0.5em;
  margin-left: 0px;
  padding: 1em 0px 0.2em 0em;
  padding-top: 1em;
  padding-right: 0px;
  padding-bottom: 
}

 /* End of Code Colors */
 /* End of David inserted styles */

]] > </b:skin>

Copy Scripts

Immediately after about </b:skin>, add Javascript codes.

<b:skin>
  ...
]] > </b:skin>
<script type='text/javascript'>
function toggleIt(id) {
  var post = document.getElementById(id);
  if (post.style.display != &#39;none&#39;) {
    post.style.display = &#39;none&#39;;
  }
  else {
    post.style.display = &#39;&#39;;
  }
}

function showFullPost(id) {
  var post = document.getElementById(id);
  var spans = post.getElementsByTagName(&#39;span&#39;);
  for (var i = 0; i != spans.length; i++) {
    if (spans[i].id == &quot;fullpost&quot;)
      spans[i].style.display = &#39;inline&#39;;
    if (spans[i].id == &quot;readmore&quot;)
      spans[i].style.display = &#39;none&#39;;
  }
}

function showFull(id) {
  var post = document.getElementById(id);
  var spans = post.getElementsByTagName(&#39;span&#39;);
  for (var i = 0; i != spans.length; i++) {
    if (spans[i].id == &quot;fullpost&quot;)
    spans[i].style.display = &#39;inline&#39;;
    if (spans[i].id == &quot;showlink&quot;)
      spans[i].style.display = &#39;none&#39;;
    if (spans[i].id == &quot;hidelink&quot;)
      spans[i].style.display = &#39;inline&#39;;
  }
}

function hideFull(id) {
  var post = document.getElementById(id);
  var spans = post.getElementsByTagName(&#39;span&#39;);
  for (var i = 0; i != spans.length; i++) {
    if (spans[i].id == &quot;fullpost&quot;)
      spans[i].style.display = &#39;none&#39;;
    if (spans[i].id == &quot;showlink&quot;)
      spans[i].style.display = &#39;inline&#39;;
    if (spans[i].id == &quot;hidelink&quot;)
      spans[i].style.display = &#39;none&#39;;
  }
  post.scrollIntoView(true);
}

function checkFull(id) {
  var post = document.getElementById(id);
  var spans = post.getElementsByTagName(&#39;span&#39;);
  var found = 0;
  for (var i = 0; i != spans.length; i++) {
    if (spans[i].id == &quot;fullpost&quot;)
      found = 1;
    if (spans[i].id == &quot;showlink&quot;)
      if (found == 0)
        spans[i].style.display = &#39;none&#39;;
  }
}
</script>

Insert Script Function Calls in Body Section

MODIFYING BLOG POSTS CODES

First find the line: <div class='post-header-line-1'/>

Insert the following codes after it:

<div class='post-body'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <p><data:post.body/></p>
    <div style='clear: both;'/>
  <b:else/>
    <style>#fullpost {display:none;}</style>
    <p><data:post.body/></p>
    <span id='showlink'>
      <p>
        <a expr:onclick='&quot;javascript:showFull(\&quot;post-&quot; + data:post.id + &quot;\&quot;);&quot;'
        href='javascript:void(0);'>读详细内容（Read More）...</a>
      </p>
    </span>
    <span id='hidelink' style='display:none'>
      <p>
        <a expr:onclick='&quot;javascript:hideFull(\&quot;post-&quot; + data:post.id + &quot;\&quot;);&quot;'
        href='javascript:void(0);'>Collapse...</a>
      </p>
    </span>
    <script type='text/javascript'>
      checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
    </script>
  </b:if>
</div>

NOTE: I found there is a duplicate post when the title of the post is clicked. The reason is that there is another div after the above codes:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

delete this section of div to avoid duplications.

NOTE: remove two tags: <div class="post-header"> ... </div> to avoid the content of post content in grey.

CODE FOR THE INCLUDABLE

Find the code: <b:includable id='feedLinksBody' var='links'>
Insert the following codes above it:

<b:includable id='PeekABooPost' var='post'>
  <div class='post uncustomized-post-template'>
    <table><tbody>
      <tr><td>
        <h3 class='post-title'><a expr:href='data:post.url'
        title='View this post only (comments visible).'><data:post.title/></a></h3>
      </td></tr>
      <tr><td>
        <a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;'
          href='javascript:void(0)'
          style='text-decoration:none'
          title='Expand/collapse this post (comments not visible)'>[+/-] 显示内容（Show/Hide This Post）.</a><br/>
        <a expr:href='data:post.url' target='_blank'>
          <i><font size='-2'>See/leave comments for this post in another window/tab.</font></i></a>
      </td></tr>
    </tbody></table>
    <div class='post-body' expr:id='data:post.id' style='display:none'>
       <p><data:post.body/></p>
       <div style='clear: both;'/>
    </div>
  </div>
</b:includable>
<b:includable id='feedLinksBoday' var='links'>

INCLUDE THE INCLUDABLE IN THE POSTS WIDGET

Find the code: <b:includable id='main' var='top'>
In this section find: <b:include data='post' name='post'/>
Change it to:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:include data='post' name='PeekABooPost'/>
  <b:else/>
    <b:include data='post' name='post'/>
  </b:if>
<b:else/>
  <b:include data='post' name='post'/>
</b:if>

Copy HTML Back to Blogger HTML Settings

After the change, copy the content of HTML from your local file back to blogger HTML settings.

REFERENCE

This feature of shrink and expend bloggs is based on this blog.

Programming Log

Friday, June 17, 2011

Edit Blogger HTML Settings

Backup HTML

Copy My CSS Settings

Copy Scripts

Insert Script Function Calls in Body Section

Copy HTML Back to Blogger HTML Settings

0 comments:

Blog Archive

Categories by Labels

About Me

Programming Log

Friday, June 17, 2011

Edit Blogger HTML Settings

Backup HTML

Copy My CSS Settings

Copy Scripts

Insert Script Function Calls in Body Section

Copy HTML Back to Blogger HTML Settings

0 comments:

Blog Archive

Categories by Labels

Subscribe To

About Me