Hello friends, I hope you liked my last two posts, and you must have learned something better through those posts and implemented them in your blog.
In today's article, we are going to customize the scroll menu and profile icon. I hope these codes will be very useful for you.
1. Scroll Menu
This time we will add Shadow in the Scroll Menu, Copy and find this code in your template <!--[ Scroll Menu ]--> Below this code you will find the SVG code, Then replace the given Code with my provided code.
<nav class='navS scrlH' style='box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.10);'> <div class='secIn'> <ul> <b:loop index='s' values='data:links' var='link'> <b:if cond='data:s <= 12'> <li> <b:tag class='l' expr:data-text='data:link.name' expr:name='data:link.target != "#" and data:link.target != data:blog.url.canonical ? "a" : "span"'> <b:attr cond='data:link.target != "#" and data:link.target != data:blog.url.canonical' expr:value='data:link.target' name='href'/> <b:attr cond='data:link.target != "#" and data:link.target != data:blog.url.canonical' expr:value='data:link.name' name='aria-label'/> <b:class cond='data:link.target == data:blog.url.canonical' name='a'/> </b:tag> </li> </b:if> </b:loop> </ul> </div> </nav>
You can change the shadow property and color by changing properties on this code (style='box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.10)).
2. Author Profile Icon
To change the profile icon size in your post, replace this code .pInf .im{width:28px;height:28px} to .pInf .im{width:35px;height:35px}, you can also adjust the px value according to your choice.
3. Share Icon
Lastly, we are going to give a bold look to the share icon. Copy and find this code in your template <b:includable id='share-icon'> Below this code you will find the SVG code, Then replace the given Code with my provided code.
<svg class='line' viewBox='0 0 24 24'><path d='M16.44 8.8999C20.04 9.2099 21.51 11.0599 21.51 15.1099V15.2399C21.51 19.7099 19.72 21.4999 15.25 21.4999H8.73998C4.26998 21.4999 2.47998 19.7099 2.47998 15.2399V15.1099C2.47998 11.0899 3.92998 9.2399 7.46998 8.9099' stroke-width='2'/><path class='svgC' d='M12 15.0001V3.62012' stroke-width='2'/><path class='svgC' d='M15.35 5.85L12 2.5L8.65002 5.85' stroke-width='2'/></svg>
That's It, guys I hope this article was valuable for you. If you have any Query, do not forget to leave a Comment