Step 1 Log in to your Blogger account and Go to your Blogger Dashboard
Step 2 Go to your Layout tab.
Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Widget.
Step 4 Drag the Gadget below Header.
<style>/* Menu with peel effect by www.bloggerspice.com-----*/#BSmenu{width:100%;color:#666;font:12px/18px Tahoma, Arial, Helvetica, sans-serif;}#BSmenu ul{list-style:none;padding:5px;}#BSmenu li{list-style:none;display:block;float:left;height:37px;line-height:37px;text-align:center;margin:0 5px;}#BSmenu li a{display:block;float:left;font-weight:bold;color:#fff;text-decoration:none;padding:5px 35px;text-transform:uppercase;}#BSmenu li a:hover{text-decoration:none;}#BSmenu li a.red{background:#c40d0b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTOYZkoffF54dckCcMxhzVbitdDiKvLB9TEFdTtCY1KrIsI2lLF_xOnnCbvJoY-fFWmpYTJFFPUT1bLqL4tGAY4sAAXyY2q4B_elY-BWsRWtrf4yDmBvT49nRfsSQm_00HYlYmQxkyXkou/s1600/r_f.gif) no-repeat left top;}#BSmenu li a:hover.red{background:#c40d0b none;}#BSmenu li a.orange{background:#f26522 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrCxWDxHWNeycPe2FwYCRbm7nVtVX8jZuYb2lbkIg-5gTFIZYfAZlVyvgUYEdrpz1xQ1rMmtRC8I5wkJYwIR1z9k2h1HdPzT50NBMrerQIjfS1jhF4G2iwk2sktGP26zYHW11FzRc_YI3B/s1600/o_f.gif) no-repeat left top;}#BSmenu li a:hover.orange{background:#f26522 none;}#BSmenu li a.yellow{background:#e4c016 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMqvLBoGeUqDM5R5qFJ42LSlGrESELX9dAd1SJ0IDEfhVkVGwyPMXrLbBMI9jDnMhexiAKRKpIQukgJu2buH63_Qchtq-xKPbSXF9emCxJ6bhS8RYn0f5NYpTAk5RU6EvjLFeRjCz_zt4O/s1600/y_f.gif) no-repeat left top;}#BSmenu li a:hover.yellow{background:#e4c016 none;}#BSmenu li a.green{background:#219e0b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhUvg7syVpFl8qtIeIkn7qHJWKaSHa9Vac5ETlFXcmfpcjI1BcAaLYXzUkMvJtlrtXK3iM6qkNYWko28fYLqU3_3P8CVNyeBmm0svm9E97OG9BDdKCiYlV-IArKMpipYtUftCzXwhWgAPd/s1600/g_f.gif) no-repeat left top;}#BSmenu li a:hover.green{background:#219e0b none;}#BSmenu li a.blue{background:#2c88ce url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJvhEud55P2n73oClPbCgPB7FhA4jcNf5vIrs13tYVBeP0ab8jNW5E8RnVS0XBwyjM79M0iH2ulHp8HMOR0cHD45FVyN-DrsdqdnxHVs9JPFOfIy5s27E2mZl5GQk0uIRnQ6p_XX2VERR6/s1600/b_f.gif) no-repeat left top;}#BSmenu li a:hover.blue{background:#2c88ce none;}#BSmenu li a.grey{background:#939393 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEjjnyQU8OwvI-eGKnpQJzOc9kQMIFMvs3diGcdef6XJeWPqVvOz4nZTOLiikrkJ-o9LCFkNAEkFBIPPqQ6D_1RymxrUD3NVX54u7DqJqSO8r3y8CAv71C_az-FkYbrn0VUIrHgTqUuVH5/s1600/gr_f.gif) no-repeat left top;}#BSmenu li a:hover.grey{background:#939393 none;}/*menu end-------------------------*/</style>
<div id="BSmenu"><ul><li><a class="red" href="URL Here">Home</a></li><li><a class="orange" href="URL Here">About us</a></li><li><a class="yellow" href="URL Here">HTML</a></li><li><a class="green" href="URL Here">Widget</a></li>
<li><a class="blue" href="URL Here">Contact us</a></li>
<li><a class="grey" href="URL Here">Sitemap</a></li>
</ul>
</div>
Customization:
- Change all URL Here with your own links. And Save it.
