Skip to main content
FANCYBLOGGERTRICKS

follow us

How to Change First Word Color of Sidebar Widget Titles

Changing the text color of the first word of a title or heading is another way to beautify your blog template design. The main point of this trick is to change the color of every first word and this is mostly used on the sidebar widget title and heading tags on the blog.

After applying this trick, our widget titles will be styled in two different colors, as the first-word color will be changed and the next word will inherit the default color.

How to Change First Word Color Of Sidebar Widget Title


Follow the below step by step guide to change the color of the first word of your sidebar widgets and headings.


Before starting, the first thing is to ensure that the jQuery Library code is included in the template if it is, then no need to add it again. If it's not, add the below jQuery code in your template codes.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js' type='text/javascript'></script>

1. Login to your blogger dashboard, click on Templates then, Edit HTML
2. Now copy the below CSS and paste it just above the </style> tag

.FirstWord{color:#ce0a46;}

3. Also in your HTML codes search for the code </body> or &lt;!--</body>--&gt;&lt;/body&gt; then copy and post the below javascript code above it.

<script type='text/javascript'>
//<![CDATA[
$('#sidebar-wrapper h2').each(function(){var text = $(this).text().split(' ');if(text.length < 1)return;text[0] = '<span class="FirstWord">'+text[0]+'</span>';$(this).html( text.join(' ') );});
//]]>
</script>
4. Finally, Save Template and View your blog to see the changes.

Customization

- The #ce0a46 in Step 2 represents the text color you want your first-word widget title to have, so you change this to your desired color. Here is a link to a color palette tool.
- In Step 3, we used the sidebar widget ID or CLASS which is sidebar-wrapper, in some templates it might be different so replace the above tag with the correct sidebar widget id used in your blogger template.
- We just changed our sidebar widget title color, but to change widget text color of other parts like Header titles and Post heading titles, then just find and add each ID or CLASS of them accordingly into the jQuery code below. An example is written below.

<script type='text/javascript'>
//<![CDATA[
$('#sidebar-wrapper h2, #header h1, .post h2, .post-body h2').each(function(){var text = $(this).text().split(' ');if(text.length < 1)return;text[0] = '<span class="FirstWord">'+text[0]+'</span>';$(this).html( text.join(' ') );});
//]]>
</script>
- Lastly, using the above jQuery code to customize sidebar widget color will disable the link function on the title. So don't apply this on titles that usually carries links/URLs, like the post titles.

Conclusion

Our focus is to keep improving our blog design, therefore changing of first word color of sidebar widget title or customizing widget text color will beautify our blog and make it more attractive to visitors. Are you having problems changing widget background color? Contact me through the comment section and ill be happy to help you out.

You Might Also Like:

Comment Policy: Please write your comments in accordance with the topic of this page post. Comments that contain links will not show up before they are approved
Open Comment