المشاركات

Plus UI templat other Customization | Scroll Menu and profile icons etc. by The Ice Tech

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

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.

Plus UI template other Customization | Scroll Menu and profile icons etc. by Ice Tech 

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 &lt;= 12'>
          <li>
            <b:tag class='l' expr:data-text='data:link.name' expr:name='data:link.target != &quot;#&quot; and data:link.target != data:blog.url.canonical ? &quot;a&quot; : &quot;span&quot;'>
              <b:attr cond='data:link.target != &quot;#&quot; and data:link.target != data:blog.url.canonical' expr:value='data:link.target' name='href'/>
              <b:attr cond='data:link.target != &quot;#&quot; 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 

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.