How to Change Post Body Font Size, Color & Style

Tweet

Share

From http://www.betatemplates.com

You can customize post body font in any expect like color, size, style or family. First, you should know what is the default CSS code for post body and then we'll customize it according to our own taste. Go to Layout | Edit HTML and find this code:

The default code of posts!

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Understand the default code!

1- margin:.5em 0 1.5em; is defining spacing between post and other elements in the blog like sidebar and header.

2- border-bottom:1px dotted $bordercolor; it very descriptive. It creates a dotted border at the bottom of the post with width 1px.

3- padding-bottom:1.5em; causes some space between posts and other elements at the bottom. The other elements could be labels, comments or date.

Make changes in the default code!

Now, I've given you some idea about the post body style definitions. By default, the font properties are not defined specifically for posts but we can easily do this by applying some simple CSS techniques.

1- How to change font size in post body!

You need to add font-size:15px; property in the default CSS code:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-size:15px;
}

Tip: Try increasing or decreasing 15px to increase or decrease font size.

2- How to change font color in post body!

You need to add color:#FFFFFF; in the default definitions:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
color:#FFFFFF;
}

Tip: #FFFFFF is the hex code for white color, you can capture any color you see on your computer or on web and get the hex code of that color through a free utility ColorPic.

Remember: This property will not effect hyperlinks (?) in the post body, I'll tell you about hyperlinks customization later in this article.

3- How to change the font family in post body!

Font family means that you can control which font will be used to display post body. You can have Arial, Times New Roman, Georgia, Serif and many many more. So, you'll need to apply font-family:"Times New Roman",Georgia,Serif; property for this purpose.

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-family:"Times New Roman",Georgia,Serif;
}

Tip: I've added 3 fonts in font-family:"Times New Roman",Georgia,Serif;property, why? Because my user might not have Times New Roman installed on his/her computer then the second font Georgia will be used and similarly Serif can also be used.

Tip: See following article about CSS font family properties for information.

http://www.w3schools.com/css/pr_font_font-family.asp

4- How to change the style of post body font!

Remember: You might not need this property but this is useful for better understanding of your fonts.

By style, I mean you can make your font italic through font-style:italic; property.

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-style:italic;
}

Remember: If you'll not add this property in default definitions then your post body font will be displayed normal.

Tip: Blogger post editor provides an easy way to make specific part of text italic. When creating a post, select your text and click the i icon which is the second icon on toolbar.

How to apply these properties on hyperlinks in the post body!

Some of the above described properties will not effect hyperlinks (?) in the post body and there are no definitions in default Blogger CSS for hyperlinks (?) so lets add our own definitions.

This is the deafault code:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Add some more juice in it:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}

Now, I'll explain all 3 properties added in .post a {} tag.

1- color:#FF0000; is the hex code for red color, you can hex code of some other color to change it.

2- text-decoration:underline; will make your post hyperlinks (?) underlined, you can change this to text-decoration:none; if you don't want to apply it.

3- text-transform:uppercase; will change your hyperlinks (?) to transform to uppercase. You can change it to text-transform:lowercase; if you want your hyperlinks to display in lowercase or you can change it to text-transform:none; to nullify this effect.

How to customize the hyperlinks for mouse over event (hover effect)!

You can also further customize the font appearance when mouse comes over your hyperlinks. For example you might want to change the color of your hyperlinks on mouse over or make it underlined or maybe change the font size.

This is our default CSS + hyperlinks CSS we added in the previous steps:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}

Add even more juice in it:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}
.post a:hover {
color:#0000FF;
text-decoration:none;
text-transform:lowercase;
}

Now, I'll explain some changes I've made.

Note: All the properties in .post a:hover {} will be visible only when you'll move mouse over the link.

1- The color will change to blue (#0000FF).

2- There will be no decoration of text. Previously, we applied text-decoration:underline; property to make our hyperlinks underlined but when mouse will come over, it will not be underlined.

3- On mouse over, our hyperlinks will become lowercase.

How to Remove Attribution Widget on Blogger

Tweet

Share

Another blogger tip I learn today from http://simple-blogger-tips.blogspot.com

How to remove attribution on Blogger?
How to remove copyright widget on Blogspot?
How to remove line at the bottom of blog?

If you're using a template by Blogger's Template Designer, most of them have an attribution widget at the bottom of the blog.

Take a look and it's something like this...

You're able to modify only the "Copyright" statement from the widget.

If you want to remove this Attribution widget at Design > Page Elements, you see that it can be edited...

But unlike the other normal widgets, you won't be able to remove the Attribution widget because it doesn't have a "Remove" button.

If you insist on removing the widget, here are the steps to remove the attribution widget on Blogger. It's pretty easy and understandable.

1) First, go to Design > Edit HTML > Tick "Expand Widget Templates". Search for the word "attribution".

2) When you see the Attribution widget code (refer to image above), change the "true" onlocked to "false".

3) Go back to Design > Page Elements.

4) Since the lock function is disabled (by changing the code to "false"), it's movable and can be removed as well. Click on "Edit" on the Attribution element.

5) And now with the "Remove" button available, you can finally remove the Attribution widget for good.

Done!

Changing "Newer Posts" and "Older Posts" in Blogger?

Tweet

Share

Last Saturday, an idea came to my mind. Instead of OLDER POST, i wondered if i could change it to MORE TRAVEL PACKAGES so that our blog would look more like a website. So today I searched on google and found that it really can be done. Here is the way to do it. From http://introblogger.blogspot.com

Here is a small tutorial about customizing the default Blogger pager link texts, "Newer Posts" and "Older Posts" at the bottom of every page. First, log into Blogger then go to Design > Edit HTML. Tick the "Expand Widgets Templates" checkbox at the top right corner of the code-containing box.


 1. To change NEWER POSTS. 

Search for <data:newerPageTitle/> using CTRL+F. This <data:newerPageTitle/>  tag is used to name the button which links to the Newer Posts. To modify the text, just delete this tag and write what you want.

2. To change the OLDER POSTS .

Search for <data:olderPageTitle/>  and replace it with the text with you want to appear.

3. To change the HOME text. 

Search for <data:homeMsg/> and replace the tag with the desired text. 

Update: 

If you want to show images/icons instead of text, all you have to do is just replace the tags highlighted above with the images.

<img alt='...' border='0' src='...'/>

Thousands of these icons are available on net. Simply google for them. The final result will look like this. 

Singapore Free & Easy Package

Tweet

Share

Wonderful skycrapers, vast shopping malls, beautiful gardens, sumptuous culinary, mesmerizing nightlife, funtastic entertainment - all these and more await you in Singapore. Discover how a small fishing village has turned into one of the most bustling tourist destination in the world. Visit Singapore!

PACKAGE INCLUDES

▪ Hotel accommodation 

▪ Daily breakfast

▪ Roundtrip airport transfer

▪ Half-day city tour

HOTEL CHOICES & RATES

Hotel	3days/2 nights
Fragrance Crystal	5,150.00
Fragrance Pearl	5,150.00
Fragrance Sapphire	5,350.00
Fragrance Imperial	6,850.00
Supreme Hotel	7,950.00
All rates are quoted in PhP per person

OPTIONAL TOURS

▪ Sentosa (am)  -  US$68;

▪ Sentosa (pm til sunset) - US$75
▪ Night Safari  -  US$55
▪ Jurong Bird Park  -  US$48
▪ Zoo or  Singapore Flyer  -  US$50 (done after CITY TOUR)
▪ Universal Studio
    - w/ OW transfer US$75(wkday) / US$80 (wkend);
    - w/ RT transfers US$93 (wkday) / US$99 (wkend/peak)/ US$103 (blackout)

ITINERARY

Day 1  -  Arrive, meet & transfer to hotel      

Day 2  -  Meet at the hotel lobby for transfer to start the Singapore city tour

Day 3  -  Free time until transfer to airport

REMARKS

▪ Rates are subject to change without notice
▪ Rates are valid until December 2012
▪ Rates are valid for Filipino passport holders only
▪ Bookings are NON-ENDORSABLE, NON-REBOOKABLE, NON-REFUNDABLE

Tweet

Share

• Tab1
• Tab2
• Tab3

Tab 1 content goes here

Tab sample

Tab 3 ctest

+ Grab this