Hi There!
I want to resize my html font size in ‘Blogger.com’. One day I upload a new template to change my ‘Blogger’ default template.
I have done all works perfectly.
After applying the new template, when I click to view my site then I see that my blog text is too smaller than before.
How to change html font size in blogger? So I need help.
HTML font resize and editing option
Hi Javier, I really like blogging because I can express what I want to say and post it on my blog website and share it the readers. Sometimes I get frustrated when the font and font size is not the way I want. I will show you where to change the font size in your blog.
-
Go to the website blogger.com
-
Log-in using your username and password
-
Go to the dashboard and an editor window should come up > Look for an font icon and you can change the size of the text, adjust and set the way you want. This should be the steps to do so.
HTML font resize and editing option
If you're a newbie and don't want much codes, you can use a widget to change your font size in blogger dynamically. You will just need to type in the text that you want to resize and you can be able to make it bigger or smaller just by clicking on some links in your widget. But if you are an advanced user, follow the steps below to change your font size in Blogger:
1. Go to Design>Edit HTML and then click the "Download full template" to backup your template. When done with the backup, expand the blogger template and search for this code: <div class='post-body entry-content'>
2. Simply add id=wrap-content with the div tag above. It should look like this: <div class='post-body entry-content' id='wrap-content'>
3. Save the template and go to the Design>Page Elements page.
4. Select "Add a Gadget>HTML/JavaScript". And then paste the codes in the text document on the pop up window. Add a title to the widget or just leave it blank then paste the codes on the content area:
<span style="padding: 2px 5px; background-color: #DDD; float: center;"><a href="javascript:void(0);" onclick="resizeText(1)" id="plustext">Make text bigger</a> | <a href="javascript:void(0);" onclick="resizeText(-1)" id="minustext">Make text smaller</a></span>
<script type="text/javascript"> var c = document.getElementById("wrap-content"); function resizeText(multiplier) { if (c.style.fontSize == "") { c.style.fontSize = "1.0em"; } c.style.fontSize = parseFloat(c.style.fontSize) + (multiplier * 0.2) + "em"; } </script>
<script charset='utf-8' type='text/javascript'>
$("plustext").addEvent("click", function() {resizeText(1);});
$("minustext").addEvent("click", function() {resizeText(-1);});
</script>
5. Save your work and you are done.
