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 :
- New Icon Look To Your Social Icons
- Change Your Old Social Icons To This New Look
- 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.