Add Horizontal Line Effects for Blogger Widgets Titles

To achieve the horizontal line across or strike through effect for Blogger widget titles, users are required to add CSS & HTML to the widget markup or codes.

Here we will be sharing the easiest ways without modifying your theme codes and by adding CSS styles using Blogger Theme Designer & adding dynamic HTML elements using Blogger HTML/Javascript widget.

If you are familiar with your Blogger theme codes, we also added a tutorial on how to manually add the additional HTML markup for widget titles.

Below is an example on how it will look like after proceeding with this tutorial. Notice the "Widget Title" text has a crossed horizontal line effect?

Widget Title

This is a widget content
This is a widget content
This is a widget content

Another Widget Title

This is a widget content
This is a widget content
This is a widget content

Add CSS for Horizontal Lines

• Go to Theme
• Click Customize
• Select Advanced
• Find & select Add CSS then add below..

.widget>h2, .widget>.title {
  display:block;
  position:relative;
  text-align:center;
  padding:0;
  margin-bottom: 20px;
}

.widget>h2:after, .widget>.title:after {
  content:'';
  width:100%;
  border-bottom: 1px solid black;
  height:1px;
  display: block;
  position: absolute;
  top:50%;
  left:0;
}

.widget>h2>span, .widget>.title>span {
  display:inline-block;
  padding: 5px 10px;
  background-color: white;
  position: relative;
  margin:0 auto;
  z-index: 1;
}

• Click Apply to Blog

Add Element to Widget Titles

There are several ways to achieve this, manually adding the element to the widget titles or add the elements dynamically using javascript.

Dynamically Add Element to Widgets Title

• Go to Layout
• Click +Add a Gadget
• Select HTML/Javascript gadget
• Add below:-

<script>
(function(d){
  var Widgets = d.querySelectorAll('.sidebar .widget');
  for( var i = 0; i < Widgets.length; i++){
    var Titles = Widgets[i].querySelector('h2');
    if( Titles === null ) return;
    var Text = Titles.innerHTML;
    Titles.innerHTML = '<span>'+Text+'</span>';
  };
})(document);
</script>

• Click Save widget
• Drag & drop widget to the bottom of theme Layout
• Click Save Arrangements.
• Refresh blog page & preview blog page changes.

If you require your sidebar widget titles to have this feature, you can use the codes as is. However, if you need to add the same styles for your footer widgets, then you can update highlighted green to look like below...

var Widgets = d.querySelectorAll('.sidebar .widget, .footer .widget');

Manually Add Element to Widgets Title

• Go to Theme
• Edit HTML
• find the widgets required these styles
• Expand widget codes
• Find widget titles & it should look like this...

<h2><data:title/></h2>

• Replace to below...

<h2><span><data:title/></span></h2>

• Continue to find other widget titles in your theme codes.
• Once you have changed all your widget titles, click Save Theme.
• Refresh blog page & preview blog page changes.

Use CSS added earlier to customize the positions & color of the horizontal line at the :after CSS styles. We have highlighted the element styles to show how it was referenced in CSS & HTML.