Follow us to get updates regarding Latest posts Follow Now!

How To Make Neumorphism Effect on Social Media Icons In Blogger

In this post I have shared a tuotorial about How To Make Neumorphism Effect on Social Media Icons In Blogger . Hope you have liked it . Tell us about

In this article I have made a tutorial on How To Make Neumorphism Effect on Social Media Icons In Blogger

how-to-make-neumorphism-effect-on-social-media-icons-in-blogger-


Hello Guys ! Welcome to Techy DarshaN . Today in this post we are sharing tutorial about How To Make Neumorphism Effect on Social Media Icons In Blogger.

Pros : 

  1. New Icon Look To Your Social Icons 
  2. Change Your Old Social Icons To This New Look 
  3. Mobile Friendly And Very Responsive 
Let's Begin !

How To Make Neumorphism Effect on Social Media Icons In Blogger :


Step 1 : Go to Blogger's Dashboard
Step 2 : Create a new post/page or a edit a a existing page/post 
Step 3 : Select HTML View 
Step 4 : Now copy and paste the Give codes below
     <!----<title>Neumorphism Effect  | Techydarshan.eu.org</title>--->    <link href="style.css" rel="stylesheet"></link>    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"></link>   <div class="icons">    <a class="fb" href="#"><i class="fab fa-facebook-f"></i></a>    <a class="twitter" href="#"><i class="fab fa-twitter"></i></a>    <a class="insta" href="#"><i class="fab fa-instagram"></i></a>    <a class="git" href="#"><i class="fab fa-github"></i></a>    <a class="yt" href="#"><i class="fab fa-youtube"></i></a>  </div> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: 'Poppins', sans-serif; }  .icons a{   background: #fff;   position: relative;   height: 60px;   width: 60px;   margin: 0 10px;   display: inline-flex;   text-decoration: none;   border-radius: 50%;   transition: all 0.3s;   box-shadow: -3px -3px 7px #ffffff,               3px 3px 5px #ceced1; } .icons a:hover:before{   content: "";   position: absolute;   top: 0;   left: 0;   bottom: 0;   right: 0;   border-radius: 50%;   background: #ecf0f3;   box-shadow: inset -3px -3px 7px #ffffff,               inset 3px 3px 5px #ceced1; } .icons a i{   position: relative;   z-index: 3;   text-align: center;   width: 100%;   height: 100%;   font-size: 25px;   line-height: 60px; } .icons a:hover i{   transform: scale(0.9); } .icons a.fb i{   color: #4267B2; } .icons a.twitter i{   color: #1DA1F2; } .icons a.insta i{   color: #E1306C; } .icons a.git i{   color: #333; } .icons a.yt i{   color: #ff0000; }   </style>

How To Add An Extra Social Icon :

Step 1 : Copy the code given below and paste to add an extra Social icon

 
 <a class="twitter" href="#"><i class="fab fa-twitter"></i></a>

How To Change Icon :

Step 1 : Go to Font Awesome
Step 2 : Search your desired icons and select it 
Step 3 : You'll Get an icon code copy it . 
Example : <i class="fa-brands fa-facebook"></i>
Step 4 : Replace your icon code in the HTML code

Conclusion :

In this post I have shared a tuotorial about How To Make Neumorphism Effect on Social Media 
Icons In Blogger . Hope you have liked it . Tell us about the post and if have any questions you 
can ask it through the comments section or join our Telegram Group  for Discussion. 

Getting Info...

About the Author

Student | Developer | Blogger

3 comments

  1. Nice post bro...
    1. Thanks bro
  2. hope your blog grows soon 😍

    put me a friend link, i booked it for you

    link: https://www.honglamblog.xyz/
    name: Hong Lam Blog
    description: Share tips

    tks u <33
Techy DarshaN's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
Have a Cookie!
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
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.