6 Easy Ways To Customize Heading Style In Blogger & Wordpress

6 Easy Ways To Customize Heading Style In Blogger & Wordpress – Customize Heading Tags

You must have observed the style of headings in my posts, it’s usually surrounded by two sky blue borders and have a text colour in sky blue. Styling the Headings gives an interesting and attractive look to your blog content. Readers find it more easy to locate a certain portion of your topic with the help of properly customized Headings. Further it will increase your search engine ranking because heading tags produces a really good impression on search engine robots. This tutorial is mainly for Blogspot users but some interesting styling can surely be added to Wordpress. Lets Start!

Customizing Heading Style Using Simple CSS – For Blogspot Users

I have six different Heading styles for you guys. Have a look at the video below,

Now to add one of the above Heading Style to your blogs, do the following,

Go To Blogger > Layout > Edit HTML

Search For ]]></b:skin> (Tip:- Press Ctrl + F )

Just above ]]></b:skin> paste one of the codes below,

For Heading Style with a bottom border, use this code,

.post h3

color:#0080ff;

border-bottom:1px solid #289728;

font-size: 12pt;

padding:2px;

For Heading Style with a border at top and bottom, use this code,

.post h3

color:#0080ff;

border-top:1px solid #289728;

border-bottom:1px solid #289728;

font-size: 12pt;

padding:3px;

For Heading Style surrounded by borders, use this code,

.post h3

color:#0080ff;

border:1px solid #289728;

font-size: 12pt;

padding:2px;

For Heading Style with Hover Effect, use this code,

.post h3

color:#0080ff;

border-top:1px dotted #289728;

border-bottom:1px dotted #289728;

font-size: 12pt;

.post h4:hover

border-top:1px dotted #0080ff;

border-bottom:1px dotted #0080ff;

background-color: #289728;

color:#fff;

For Heading Style surrounded by a Box, use this code,

.post h3

border-bottom: 1px solid #289728;

color:#0080ff;

font-size:12pt;

.post h3 span

position: relative;

left: -0.3em;

bottom: -0.6em;

padding: 1px 0.5em;

margin: 0;

border: 1px solid #289728;

background-color: #fff;

For Heading Style with a side Image & Hover Effect, use this code,

.post h3

background: #fff url(URL OF Side Image) top left repeat-y;

font-size: 12pt;

color: #0090ff;

padding:28px 0 0 44px ;

.post h3:hover

color: #289728;

Make Sure you replace URL OF Side Image with Image Link of your preferred side image. This image can be 45px by 45px in size or even smaller. I have used the following image in the video above –>

4. Now Finally save your template.

Customization and Implementation Of The CSS Code For Headings

Customization:-
All the CSS codes above use simple properties which are described below,
1.   For Changing border width, style and colour edit codes like this one,
border:1px solid #0080ff
Here 1px refers to border thickness/width and solid refers to border style and the six digit number refers to border colour. You can change border style from solid to dotted or dashed. I like border style to be dotted because it gives a light appearance.
You can use our CSS Colour Chart for getting the six digit number for your desired colour
2.    For Changing Font Size, edit codes like this one,
font-size:12pt
If you want the text size to increase or decrease than respectively increase or decrease this value 12pt
3.    To Change Font Colour, edit similar codes like this one,
color:#0080ff
You can use our CSS Colour Chart for getting the six digit number for your desired colour
Implementation:-
Now Whenever you write a heading in your post inside blogger editor, simply add the following pieces of codes next to your heading,

<h4> Your Heading Goes Here </h4>

See a screen shot below,
Update: In the image below I have mistakenly written

,

tag please convert it to

and

respectively.
example-image-for-heading-style

This can be done both in compose or HTML mode.
For Heading Style Surrounded By a Box you will need to add slightly different code as shown below,

<h4><span> Your Heading Goes Here </span></h4>

We only need to add an extra span tag (i.e:- <span>) for the box to appear.
That’s All!
Note:- Changes Will Not Appear inside Blogger Editor or on previewing. You will only see a bolded black text inside blogger editor. The styling will take effect only when the post is published.

Customizing Heading Style Using Simple CSS – For Wordpress Users

To be honest I really hate wordpress because it has nothing interesting for new web designers like me. It uses complex php script that few understands and also has a complex CSS editing option that has never went through my throat. If you are an expert wordpress user then you can use the blogspot method above to style headings in your wordpress template but if you find it difficult to edit wordpress style sheet like me then you can adopt a simple way as described below.
We can only apply three out of six Heading style methods to wordpress which are,

Heading Style with a bottom border

Heading Style with a bottom border and top border

Heading Style surrounded by borders

To apply any of the heading style above, do this in your Wordpress Editor,

In the visual mode of your Wordpress editor first write a heading

Now switch to the HTML mode and enclose your heading with the following code,

For Heading style with a bottom border, use this code,

<h3><div style="color:#0080ff; border-bottom:1px solid #289728;

font-size: 12pt; padding:2px;">Your Heading Goes Here</div></h3>

For Heading style with a bottom border and top, use this code,

<h3><div style="color:#0080ff; border-top:1px solid #289728;

border-bottom:1px solid #289728; font-size: 12pt; padding:3px;">Your Heading Goes Here</div></h3>

For Heading style surrounded by borders, use this code,

<h3><div style="color:#0080ff; border:1px solid #289728; font-size: 12pt; padding:2px;">Your Heading Goes Here</div></h3>

The green text is where your heading must lie and the bolded black text is the code that should surround your heading. Now once you have added the codes correctly, simply switch to the visual mode and you will see the heading style in action! See some screen shots below for heading style surrounded by borders,
First enclose your heading with html codes above in the html mode,
Update:
In the image below I have mistakenly written

,

tag
please convert it to

and

respectively.

wordpress-editor---html-mod

Then press the visual button to see the effect live!
wordpress-editor--visual-mo

To customize the styles read the customization guide for blogspot users
Hope it was clear :>>

13
comments

PLEASE NOTE:

We have Zero Tolerance to Spam.

Chessy Comments and Comments with
'Links'
will be deleted immediately upon our review.

(function() {
var items = ['id': '5530953347809572635', 'body': 'now that was a pro tut mohammad. Thanks a lot. I am CSS student and am really impressed with the easy CSS properties above.', 'timestamp': '1258749835684', 'permalink': 'https://www.mybloggertricks.com/2009/11/change-heading-style-in-blogger.html?showCommentx3d1258749835684#c5530953347809572635', 'author': 'name': 'jacob', 'avatarUrl': '//img1.blogblog.com/img/blank.gif', 'profileUrl': '', 'displayTime': 'Nov 21, 2009, 1:43:00 AM', 'deleteclass': 'item-control blog-admin pid-842653091', 'id': '2738300054475939364', 'body': '@jacobx3cbr /x3ex3cbr /x3eI am honored with your visit. Thanks dear!', 'timestamp': '1258903114312', 'permalink': 'https://www.mybloggertricks.com/2009/11/change-heading-style-in-blogger.html?showCommentx3d1258903114312#c2738300054475939364', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggot5slWGpvs6tNYI0QV_ueCyhuL5rTNQC9X8z9BpYkqwcV5bxSRa3Hki39OryVlf2crGMZPWRdhv5TWdo-21scpi4m55gLRy-wTIJuWRxUTAfJGE8ItZ1umcfOmiwGlJu6Av_iotOSjs/s35/384304wl3ygq6tre.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Nov 22, 2009, 8:18:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '60843162118325927', 'body': 'thanks mohammad for including wordpress. Thumbs up!', 'timestamp': '1258914850275', 'permalink': 'https://www.mybloggertricks.com/2009/11/change-heading-style-in-blogger.html?showCommentx3d1258914850275#c60843162118325927', 'author': 'name': 'maria', 'avatarUrl': '//img1.blogblog.com/img/blank.gif', 'profileUrl': '', 'displayTime': 'Nov 22, 2009, 11:34:00 PM', 'deleteclass': 'item-control blog-admin pid-1902372052', 'id': '8045710062161547767', 'body': 'Worked a charm. Thanks!', 'timestamp': '1272117058311', 'permalink': 'https://www.mybloggertricks.com/2009/11/change-heading-style-in-blogger.html?showCommentx3d1272117058311#c8045710062161547767', 'author': 'name': 'Anonymous', 'avatarUrl': '//img1.blogblog.com/img/blank.gif', 'profileUrl': '', 'displayTime': 'Apr 24, 2010, 6:50:00 PM', 'deleteclass': 'item-control blog-admin pid-92458016', 'id': '5206823998163665932', 'body': 'How did you make this comment box with gray border and mouse effects with a query SPAMx3dTRASHx3cbr /x3ex3cbr /x3ei would like to keep for my blogger blog.can you help mex3cbr /x3ex3cbr /x3email : ananth2ananth@gmail.com', 'timestamp': '1285551294261', 'permalink': 'https://www.mybloggertricks.com/2009/11/change-heading-style-in-blogger.html?showCommentx3d1285551294261#c5206823998163665932', 'author': 'name': 'Ananth', 'avatarUrl': '//img1.blogblog.com/img/blank.gif', 'profileUrl': 'http://www.technotrends.in', 'displayTime': 'Sep 27, 2010, 6:34:00 AM', 'deleteclass': 'item-control blog-admin pid-4752390', 'id': '8081231350643904172', 'body': 'Thanks Mohammad!! :X', 'timestamp': '1286052206723', 'permalink': 'https://www.mybloggertricks.com/2009/11/change-heading-style-in-blogger.html?showCommentx3d1286052206723#c8081231350643904172', 'author': 'name': '♫ mary ♪', 'avatarUrl': '//3.bp.blogspot.com/_Z7EEILoq9CM/THWv01sU51I/AAAAAAAAAks/9w3mz0VzKjY/S45-s35/pika.gif', 'profileUrl': 'https://www.blogger.com/profile/11289600677061056134', 'displayTime': 'Oct 3, 2010, 1:43:00 AM', 'deleteclass': 'item-control blog-admin pid-1726197603', 'id': '5402872486012314313', 'body': 'Good post. Will be helpful for all bloggers who would love to increase their traffic. Keep up the good work.', 'timestamp': '1298032115827', 'permalink': 'https://www.mybloggertricks.com/2009/11/change-heading-style-in-blogger.html?showCommentx3d1298032115827#c5402872486012314313', 'author': 'name': 'Mangala', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/18286879905647882390', 'displayTime': 'Feb 18, 2011, 5:28:00 PM', 'deleteclass': 'item-control blog-admin pid-908901161', 'id': '4179601706951857528', 'body': 'How do you place this in your WLW program?', 'timestamp': '1311298968197', 'permalink': 'https://www.mybloggertricks.com/2009/11/change-heading-style-in-blogger.html?showCommentx3d1311298968197#c4179601706951857528', 'author': 'name': 'Hannah', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigU9Irkuvamdbpxgk98zminVJifua7LcOqZ1mOWLpKVqdouPpfws-pDIo-SvEdjifFa7M2sB5kFa1FNP5IWRBSy_B3zJXoTWiKPI0FvIDtPCYhmFty1oZfmU220KWBn6pWalPDPCq2s5E-/s35/girl.jpg', 'profileUrl': 'https://www.blogger.com/profile/15165967476661656865', 'displayTime': 'Jul 22, 2011, 6:42:00 AM', 'deleteclass': 'item-control blog-admin pid-1003040150', {'id': '3495404534844692407', 'body': 'assalamux26#39;alaikum Mohammad, Can I style post H2 on blog?x3cbr /x3eI want H2 on my blog with bottom Border, i try this tutorial, but dont work on my templates.. thanks for reply.x3cbr /x3ex3cbr /x3eI change into x3cbr /x3ex3cbr /x3e.post h2x3cbr /x3ebla bla bla...x3cbr /x3ex3cbr /x3esaveblogger.com', 'timestamp': '1322655672852', 'permalink': 'https://www.mybloggertricks.com/2009/11/change-heading-style-in-blogger.html?showCommentx3d1322655672852#c3495404534844692407', 'author': 'name': 'Saveblogger', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Yu5asJGuW7R7W1O23P3XAogpjiHSXN36H4DxurlQ7f8Qbg5G3VyWqaTvk5A4ck3e7tzcyrqBzuivl-BSHVD1qDZ4JTJ57wn_QKcAFO3bBdDivLxBqso2IRNlDxEQu78w0MU3Jg5lv4Si/s35/Eksperimen%25252B1.jpg', 'profileUrl': 'https://www.blogger.com/profile/09136245777381919300', 'displayTime': 'Nov 30, 2011, 5:21:00 PM', 'deleteclass': 'item-control blog-admin pid-1076872933', 'id': '7302147867462874026', 'body': 'its not working in my blog. pls help..', 'timestamp': '1328533958771', 'permalink': 'https://www.mybloggertricks.com/2009/11/change-heading-style-in-blogger.html?showCommentx3d1328533958771#c7302147867462874026', 'author': 'name': 'Eusuf Sheikh', 'avatarUrl': '//lh4.googleusercontent.com/-Y6z563eKCNA/AAAAAAAAAAI/AAAAAAAAAMs/RHncUOax-PQ/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/18307649520148662899', 'displayTime': 'Feb 6, 2012, 6:12:00 PM', 'deleteclass': 'item-control blog-admin pid-1178105457', 'id': '2630727561116245507', 'body': 'x3ca hrefx3dx22http://www.blogger.com/profile/11681339458447132019x22 relx3dx22nofollowx22x3eMohammad Mustafa Ahmedzaix3c/ax3e I am unable to use this and block quotes customization :(', 'timestamp': '1333731301444', 'permalink': 'https://www.mybloggertricks.com/2009/11/change-heading-style-in-blogger.html?showCommentx3d1333731301444#c2630727561116245507', 'author': 'name': 'TJ', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/16273233244903959008', 'displayTime': 'Apr 6, 2012, 9:55:00 PM', 'deleteclass': 'item-control blog-admin pid-836938054', 'id': '786996708168263876', 'body': 'It looks to me like all your custom CSS is for h3 and not for h4. I suppose this is the reason it is not working for so many users. I believe the solution should be to change either the CSS h3 entries to h4, or use h3 and /h3 tags to bracket the heading in the post.', 'timestamp': '1409331677421', 'permalink': 'https://www.mybloggertricks.com/2009/11/change-heading-style-in-blogger.html?showCommentx3d1409331677421#c786996708168263876', 'author': 'name': 'Alpine Queen', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaDoYY3RIzsqVtScrHUHS2-QTjS6CNJRI-HitOux8X9xCl0JBCd0avNxtH_4rhR0Mi7gEPTRRVahf4ohi3s9JnAVQE4LoyjA0tzlYkDVVOXv1jGQ85pIAuLJfq_0kXoQThRaEnbubXJgVc/s35/*', 'profileUrl': 'https://www.blogger.com/profile/05886625200401094991', 'displayTime': 'Aug 29, 2014, 10:01:00 PM', 'deleteclass': 'item-control blog-admin pid-1294237916', 'id': '6636794846400291465', 'body': 'Dear Sir, You have take a mistake, here it is ((Go To Blogger x26gt; Layout x26gt; Edit HTML )) your no 1 tag.', 'timestamp': '1456681339041', 'permalink': 'https://www.mybloggertricks.com/2009/11/change-heading-style-in-blogger.html?showCommentx3d1456681339041#c6636794846400291465', 'author': 'name': 'MD. NAHID KHAN', 'avatarUrl': '//lh5.googleusercontent.com/-Wz2F-a3ziWQ/AAAAAAAAAAI/AAAAAAAAAc0/7Y9RSVrLSGg/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/03351940362451360288', 'displayTime': 'Feb 28, 2016, 10:42:00 PM', 'deleteclass': 'item-control blog-admin pid-1017468462'];
var msgs = 'loadMore': 'Load more...', 'loading': 'Loading...', 'loaded': 'No more!', 'addComment': 'Add comment', 'reply': 'Reply', 'delete': 'Delete';
var config = 'blogId': '8193278726666811965', 'postId': '6114578887715327911', 'feed': 'https://www.mybloggertricks.com/feeds/6114578887715327911/comments/default', 'authorName': 'M. Mustafa Ahmedzai', 'authorUrl': 'https://www.blogger.com/profile/11681339458447132019', 'baseUri': 'https://www.blogger.com', 'maxThreadDepth': 2;
// 0)
cursor = parseInt(items[items.length - 1].timestamp) + 1;

var bodyFromEntry = function(entry)
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved')
return '' + entry.content.$t + '';

return entry.content.$t;

var parse = function(data)
cursor = null;
var comments = ;
if (data && data.feed && data.feed.entry)
for (var i = 0, entry; entry = data.feed.entry[i]; i++)
var comment = ;
// comment ID, parsed out of the original id format
var id = /blog-(d+).post-(d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array)
var auth = entry.author[0];
if (auth)
comment.author =
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
;

if (entry.link)
if (entry.link[2])
comment.link = comment.permalink = entry.link[2].href;

if (entry.link[3])
var pid = /.*comments/default/(d+)?.*/.exec(entry.link[3].href);
if (pid && pid[1])
comment.parentId = pid[1];

comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass')
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime')
comment.displayTime = entry.gd$extendedProperty[k].value;

comments.push(comment);

return comments;
;
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor)
url += '&published-min=' + new Date(cursor).toISOString();

window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length

jacobNov 21, 2009, 1:43:00 AM

now that was a pro tut mohammad. Thanks a lot. I am CSS student and am really impressed with the easy CSS properties above.

ReplyDelete

Mohammad Mustafa AhmedzaiNov 22, 2009, 8:18:00 PM

@jacob

I am honored with your visit. Thanks dear!

ReplyDelete

mariaNov 22, 2009, 11:34:00 PM

thanks mohammad for including wordpress. Thumbs up!

ReplyDelete

AnonymousApr 24, 2010, 6:50:00 PM

Worked a charm. Thanks!

ReplyDelete

AnanthSep 27, 2010, 6:34:00 AM

How did you make this comment box with gray border and mouse effects with a query SPAM=TRASH

i would like to keep for my blogger blog.can you help me

mail : ananth2ananth@gmail.com

ReplyDelete

♫ mary ♪Oct 3, 2010, 1:43:00 AM

Thanks Mohammad!! :X

ReplyDelete

MangalaFeb 18, 2011, 5:28:00 PM

Good post. Will be helpful for all bloggers who would love to increase their traffic. Keep up the good work.

ReplyDelete

HannahJul 22, 2011, 6:42:00 AM

How do you place this in your WLW program?

ReplyDelete

SavebloggerNov 30, 2011, 5:21:00 PM

assalamu'alaikum Mohammad, Can I style post H2 on blog?
I want H2 on my blog with bottom Border, i try this tutorial, but dont work on my templates.. thanks for reply.

I change into

.post h2{
bla bla bla...

saveblogger.com

ReplyDelete

Eusuf SheikhFeb 6, 2012, 6:12:00 PM

its not working in my blog. pls help..

ReplyDelete

TJApr 6, 2012, 9:55:00 PM

Mohammad Mustafa Ahmedzai I am unable to use this and block quotes customization :(

ReplyDelete

Alpine QueenAug 29, 2014, 10:01:00 PM

It looks to me like all your custom CSS is for h3 and not for h4. I suppose this is the reason it is not working for so many users. I believe the solution should be to change either the CSS h3 entries to h4, or use h3 and /h3 tags to bracket the heading in the post.

ReplyDelete

MD. NAHID KHANFeb 28, 2016, 10:42:00 PM

Dear Sir, You have take a mistake, here it is ((Go To Blogger > Layout > Edit HTML )) your no 1 tag.

ReplyDelete