 |
| Membuat Icon Social Media Efek Neumorphism di Blogger |
Icon Social Media Neumorphism
Bagaimana cara membuat icon social media dengan efek Neumorphism di halaman atau postingan Blogger
Tutorial
1 : Masuk ke Dashboard Blogger
2 : Buat halaman post/page baru
3 : Editor tampilan HTML
4 : Salin dan Tempel kode script di bawah ini,
5 : Pratinjau
6 : Publikasikan
<!----Icon Social Media Efek Neumorphism--->
<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>
Demikian semoga bermanfaat.