Cara Mudah Membuat Efek Neumorphism pada Ikon Media Sosial di Blogger

HTML and CSS Neumorphism Effect on Social Media Icons

Halo sahabat Blog Tutorial. Kali ini kami akan berbagi tutorial tentang Cara Membuat Efek Neumorfisme pada Ikon Media Sosial Di Blogger.

Kelebihan Efek Neumorphism

1. Ikon terlihat lebih indah.
2. Ubah ikon media sosial lama menjadi tampilan kekinian.
3. Mobile Friendly dan sangat Responsive.

Contoh Tampilan

Cara Membuat Efek Neumorphism

Berikut ini cara membuat ffek Neumorfisme pada Ikon Media Sosial di Blogger :

1. Buka Dasbor Blogger.
2. Buat postingan / halaman baru atau edit halaman / postingan yang sudah ada.
3. Pilih Tampilan HTML.
4. Selanjutnya salin kode di bawah ini, dan letakkan di dalam postingan / halaman tersebut.

<!--<title>Neumorphism Effect | https://blog.elzeno.id</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>

Menambahkan Ikon Media Sosial

Cara menambahkan ikon Media Sosial lain :

Salin contoh kode di bawah ini dan tempel untuk menambahkan ikon Media Sosial lain:

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

Cara Mengubah Ikon

1. Buka Font Awesome.
2. Cari ikon yang Anda inginkan dan pilih.
3. Anda akan mendapatkan kode ikon, salinlah.
4. Ganti kode icon anda pada kode HTML.

Contoh :

<i class=fa-brands fa-facebook"></i>

---

Demikian semoga bermanfaat dan selamat mencoba.

https://www.techydarshan.eu.org/2021/12/how-to-make-neumorphism-effect-on.html

Lanjut ke Link Tujuan

Anda mungkin tertarik artikel ini :

Terima kasih telah membaca artikel kami yang berjudul: Cara Mudah Membuat Efek Neumorphism pada Ikon Media Sosial di Blogger, jangan lupa + IKUTI website kami dan silahkan bagikan artikel ini jika menurut Anda bermanfaat. Simak artikel kami lainnya di Google News.

Dukung kami dengan memilih salah satu metode donasi di bawah ini:

Donasi via Saweria Donasi via Trakteer Donasi via PayPal

Dana / OVO / GoPay 0858 6878 6809