1. Log in to your dashboard--> Design- -> Edit HTML
2. Click on "Expand Widget Templates"
3. Search "Ctrl+F" and find </head>. Right above him add the next one:
<script src='http://artistutorials.googlecode.com/files/dynamic-font-resize.js' type='text/javascript'/>
4. Find ]]></b:skin> and before it paste the next code:
#your-body, #your-body p, #your-body a, #your-body h1, #your-body h2, #your-body h3, #your-body h4, #your-body h5, #your-body li, #your-body li a,#your-body ul,#your-body ol li,#your-body ol li a {}
#resize-box {
background-color:#F0F0F0;
border:1px dashed #A0A0A0;
float:right;
margin:5px;
}
#resize-box:hover {
background-color:#E0E0E0;
}
#resize-box a {
color:#909090;
display:block;
float:left;
font-family:Arial,sans-serif;
font-size:16px;
padding:5px 10px;
text-decoration:none;
}
#resize-box a:hover {
color:#303030;
} 5. Now find <data:post.body/> and replace it with the following one:
<div id='your-body'><data:post.body/></div>
<b:if cond='data:blog.pageType == "item"'>
<div id='resize-box'>
<a href='javascript:increaseFontSize()' id='increase'><b>A<sup>+</sup></b></a>
<a href='javascript:decreaseFontSize()' id='decrease'><b>A<sup>-</sup></b></a>
</div>
</b:if>
NOTE: In this case the resizer box will be found on the post page at the bottom of the post, it will not be displayed on the home page. If you want to display it on the home page delete the red code.
Also if you want the box to appear top of the post just replace the code on step 5 with:
<b:if cond='data:blog.pageType == "item"'> <div id='resize-box'>
<a href='javascript:increaseFontSize()' id='increase'><b>A<sup>+</sup></b></a>
<a href='javascript:decreaseFontSize()' id='decrease'><b>A<sup>-</sup></b></a>
</div>
</b:if>
<div id='your-body'><data:post.body/></div>
Post a Comment
Post a Comment