Clean Arrow Underline Menu For Blog

This menu uses the nifty CSS Triangles technique to create a clean horizontal UL menu with a thick arrow border applied to the currently active menu item. It uses no images nor any extranous markup (thanks to CSS generated content) to accomplish the effect, and as a bonus, the menu can be easily aligned "left", "center", or "right' on the page. 

Demo

How To Add In Blogspot
Step 1:-

• Go To Your Blogger Dashboard.
• Click On Template -->> Edit HTML -->> Proceed.
• Then press CTRL + F To Find ]]></b:skin> Code.
• Then Paste The Below CSS Code Above/Before ]]></b:skin>. 
• Then Click On Save Template.

CSS Code

Click Here To Select All Code
<style> ul.arrowunderline{ list-style-type:none; margin:0; padding:0; text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */ font: bold 16px Georgia; } ul.arrowunderline li{ display:inline; margin-right:25px; /* spacing between each menu item */ } ul.arrowunderline li a{ position:relative; color:black; padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */ text-decoration:none; } ul.arrowunderline li a:hover{ border-bottom:3px solid purple; /* style of arrow underline */ } ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */ content:''; width:0; height:0; position:absolute; left:50%; margin-left:-5px; /* value should match border-width below */ bottom: 0; border-width:5px; /* value should match margin-left above */ border-style:solid; border-color: transparent transparent purple transparent; /* create up arrow */ } </style>

Step 2:-

• Go to Your Blogger Dashboard.
• Now Select Layout.
• Then press Add a Gadget.
• Now look for “ADD HTML/JAVASCRIPT” in the list.
• And now paste the Below code inside it.

HTML Code

<ul class="arrowunderline">

<li><a href="http://Yoururl">Home</a></li>

<li><a href="http://Yoururl">New</a></li>

<li class="selected"><a href="http://Yoururl">Select1</a></li>

<li><a href="http://Yoururl">Select2</a></li>

<li><a href="http://Yoururl">Select3</a></li>

<li><a href="http://Yoururl">Select4</a></li>

</ul>

Note:-

• Change All Blue With Your Links.
• Change All Red With Your Text.