Template Blogger Premium DISINI
Beranda
Blogger

Kumpulan Widget Blogger Neumorphism

Kumpulan Widget Blogger Alert Box, Style Button, Icon social media dan Profil Card UI Neumorphism.
Harap tunggu 0 detik...
Selamat! Link Berhasil Dimuat.
Gulir ke Bawah dan klik Buka Link untuk membuka Link Tujuan
Kumpulan Widget Blogger Alert Box, Style Button, Icon social media dan Profil Card UI Neumorphism.

Pengertian Neumorphism

Neumorphism adalah gaya desain yang digunakan dalam antarmuka pengguna grafis. Hal ini biasanya diidentifikasi dengan tampilan yang lembut dan ringan, (yang kadang-kadang disebut juga sebagai Soft UI) dengan elemen yang tampak menonjol atau melekuk ke latar belakang seperti mengapung di atasnya.

Bersumber dari JustInMind, neumorphism adalah sebuah pendekatan baru dari desain skeuomorphism yang menggabungkan dengan konsep flat design.

Bisa dibilang, kata neumorphism berasal dari new dan skeuomorphism. Namun, berbeda dengan konsep skeuomorphism yang mengedepankan bentuk nyata dalam penerapan digital, neumorphism lebih berfokus pada kombinasi warna. Hal ini membuat tampilan antarmukanya seperti kamu sedang melihat kartu dengan tulisan timbul di dalamnya.

Tampilan desain neumorphism memerlukan penataan kontras, shadow, dan komponen yang tepat agar tetap enak dipandang.

Tak hanya itu, konsep ini juga membuat tampilan di layar smartphone-mu lebih hidup, dan terjadi interaksi langsung di dalamnya. Seakan-akan kamu menekan tombol asli, bukan animasi dalam smartphone.

Widget Alert Note Box Neumorphism

Note Block atau Note Box adalah fitur yang hadir secara default di beberapa template blogger seperti iMagz, Median Ui, Fletro pro dll. Note Block digunakan untuk menyoroti informasi penting, kalimat peringatan atau sorotan tahapan penting apa saja agar pengguna dapat membacanya dengan lebih mudah dan efisien.

Kelebihan Note Block

  1. Bisa ditambahkan di template Blogger
  2. Desain Neumorphism
  3. Tampilan unik, menarik dan dinamis
  4. Meningkatkan tampilan situs
  5. Dapat digunakan untuk menyorot Info Penting, kalimat peringatan atau langkah penting lainnya.
  6. Pengguna bisa lebih tertarik dan bisa membaca lebih efisien daripada teks biasa.

Cara Membuat Neumorphism Alert Boxes

Cara membuat Neumorphism Alert Boxes di Blogger, sebagai berikut.

a. Script CSS Neumorphism

  1. Pertama-tama Login ke Dashboard Blogger Anda.
  2. Pilih Tema.
  3. Klik icon panah ke bawah di sebelah tombol 'Sesuaikan'
  4. Klik Edit HTML, Anda akan diarahkan ke halaman pengeditan.
  5. Cari kode ]]></b:skin> kemudian salin script CSS dibawah ini, kemudian tempelkan di atas kode tersebut.
  6. Terakhir - Simpan.
 /* Neumorphism Alert Boxes by elzeno */
.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}
.fa-bell:before{content:"\f0f3"}
.fa-exclamation-circle:before{content:"\f06a"}
.fa-fire:before{content:"\f06d"}
.fa-thumbs-up:before{content:"\f164"}
.far{font-weight:400}
.far,.fas{font-family:"Font Awesome 5 Free"}
.fas{font-weight:900}
.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
.alert{position:relative;padding:1rem 1.5rem;margin-bottom:1rem;border:0.0625rem solid transparent;border-radius:0.55rem}
.alert-heading{color:inherit}
.alert-link{font-weight:600}
.alert-secondary{color:#2c46b0;background-color:#3c59cb;border-color:#2c49bc}
.alert-secondary .alert-link{color:#223687}
.alert-success{color:#1a5a47;background-color:#296e58;border-color:#195e49}
.alert-success .alert-link{color:#0f3228}
.alert-info{color:#064f9f;background-color:#1362b8;border-color:#0352a9}
.alert-info .alert-link{color:#04376e}
.alert-danger{color:#94202d;background-color:#ae2f3c;border-color:#9f1f2d}
.alert-danger .alert-link{color:#6a1720}
.bg-primary{background-color:#e6e7ee!important}
[class*="shadow"]{transition:all 0.2s ease}
.shadow-soft{box-shadow:6px 6px 12px #b8b9be,-6px -6px 12px #fff!important}
.alert{padding:1rem 1.5rem;border:#44476a;font-size:0.875rem;border:0.0625rem solid #d1d9e6}
.alert .alert-inner--icon{font-size:1.25rem;margin-right:0.375rem}
.alert .alert-inner--text{display:inline-block}
.alert .alert-inner--text a{font-weight:600}
.alert-heading{font-weight:600;font-size:1.5rem}
.alert-secondary{background:#e6e7ee;color:#2d4cc8}
.alert-success{background:#e6e7ee;color:#18634b}
.alert-info{background:#e6e7ee;color:#0056b3}
.alert-danger{background:#e6e7ee;color:#a91e2c}

Font Awesome

Kemudian salin kode script di bawah, dan tempelkan di <head>

<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"><link/>

Script HTML Neumorphism

Terakhir, salin kode script HTML di bawah ini, dan letakkan sesuai dengan yang anda inginkan.

1) Style 1 - Alert Box Neumorphism
<div class="alert alert-secondary shadow-soft" role="alert"><span class="alert-inner--text">This is a secondary alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</span></div>

<div class="alert alert-success shadow-soft" role="alert"><span class="alert-inner--text">This is a success alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</span></div>

<div class="alert alert-info shadow-soft" role="alert"><span class="alert-inner--text">This is a info alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</span></div>

<div class="alert alert-danger shadow-soft" role="alert"><span class="alert-inner--text">This is a danger alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</span></div>
2) Style 2 - Alert Box Neumorphism
<div class="alert alert-secondary shadow-soft fade show" role="alert"><span class="alert-inner--icon"><span class="fas fa-exclamation-circle"></span></span> <span class="alert-inner--text"><strong>Warning!</strong> Better check yourself, you're not looking too good.</span></div>

<div class="alert alert-success shadow-soft fade show" role="alert"><span class="alert-inner--icon"><span class="far fa-thu s-up"></span></span> <span class="alert-inner--text"><strong>Well done!</strong> You successfully read this important alert message.</span> </div>

<div class="alert alert-info shadow-soft fade show" role="alert"><span class="alert-inner--icon"><span class="far fa-bell"></span></span> <span class="alert-inner--text"><strong>Heads up!</strong>This alert needs your attention, but it's not super important.</span> </div>

<div class="alert alert-danger shadow-soft fade show" role="alert"><span class="alert-inner--icon"><span class="fas fa-fire"></span></span> <span class="alert-inner--text"><strong>Oh snap!</strong> Change a few things up and try submitting again.</span> </div>


3) Style 3 - Alert Box Neumorphism
<div class="alert alert-secondary shadow-soft" role="alert"><span class="alert-inner--icon icon-lg"><span class="fas fa-exclamation-circle"></span></span> <span class="alert-heading">Warning!</span>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><p />
<p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div>

<div class="alert alert-success shadow-soft" role="alert"><span class="alert-inner--icon icon-lg"><span class="far fa-thumbs-up"></span></span> <span class="alert-heading">Well done!</span>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><p />
<p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div>

<div class="alert alert-info shadow-soft" role="alert"><span class="alert-inner--icon icon-lg"><span class="far fa-bell"></span></span> <span class="alert-heading">Heads up!</span>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><p />
<p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div>

<div class="alert alert-danger shadow-soft" role="alert"><span class="alert-inner--icon icon-lg"><span class="fas fa-fire"></span></span> <span class="alert-heading">Danger!</span>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><p />
<p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div>

Kustomisasi Neumorphism

  1. Ganti # in Style 1 dengan url-link anda.
  2. Ganti teks antara "p tags" ( <p> .......... </p> ), dengan teks yang anda inginkan.
  3. Ganti icon Font Awesome dengan icon yang anda sukai.

Widget Tombol Button Soft UI Neumorphism

Tombol Button Soft UI pada dasarnya menghilangkan sudut tajam antarmuka dan menjadikan sudut lembut untuk penampilan yang halus dan desain ikonik.

Kelebihan Tombol Button Soft UI

  1. Bersih dioptimalkan terlihat.
  2. Penampilan lembut secara keseluruhan.
  3. Desain UI yang lembut.
  4. Ubah tombol lama Anda ke gaya baru ini.
  5. Menambahkan nuansa tombol 3 Dimensi.

Cara Membuat Tombol Button Soft UI Neumorphism

Cara membuat Tombol Button Soft UI / Neumorphism di Blogger, sebagai berikut.

Script CSS Button

  1. Pertama-tama Login ke Dashboard Blogger Anda.
  2. Pilih Tema.
  3. Klik icon panah ke bawah di sebelah tombol 'Sesuaikan'
  4. Klik Edit HTML, Anda akan diarahkan ke halaman pengeditan.
  5. Cari kode ]]></b:skin> kemudian salin script CSS dibawah ini, kemudian tempelkan di atas kode tersebut.
  6. Terakhir, Simpan.
button{margin:20px}
.custom-btn{width:130px;height:40px;color:#fff;border-radius:50px;padding:10px 25px;font-family:'Lato',sans-serif;font-weight:500;font-size:16px;background:transparent;cursor:pointer;transition:all 0.3s ease;position:relative;display:inline-block;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),inset -7px -7px 10px 0 rgba(0,0,0,.1),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);text-shadow:2px 2px 3px rgba(255,255,255,.5),-4px -4px 6px rgba(116,125,136,.2);outline:none}
/* 1  */
.btn-1{color:rgba(0,3,255,.5);background-color:#b2d8ff;border:none}
.btn-1:hover{color:rgba(0,3,255,.7);background:linear-gradient(0deg,rgba(0,3,255,.5) 0%,rgba(2,126,251,.5) 100%)}
  
/* 2 */
.btn-2{background-color:#e8d1ff;color:rgba(96,9,240,.5);border:none}
.btn-2:before{height:0%;width:2px}
.btn-2:hover{box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.5),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.2)}
  
/* 3 */
.btn-3{color:rgba(2,126,251,1);background:rgba(118,174,241,1);width:130px;height:40px;line-height:42px;padding:0;border:none}
.btn-3 span{position:relative;display:block;width:100%;height:100%}
.btn-3:before,.btn-3:after{position:absolute;content:"";right:0;top:0;background:rgba(2,126,251,1);transition:all 0.3s ease}
.btn-3:before{height:0%;width:2px}
.btn-3:after{width:0%;height:2px}let's
.btn-3:hover{background:transparent;box-shadow:none}
.btn-3:hover:before{height:100%}
.btn-3:hover:after{width:100%}
.btn-3 span:hover{color:rgba(2,126,251,1)}
.btn-3 span:before,.btn-3 span:after{position:absolute;content:"";left:0;bottom:0;background:rgba(2,126,251,1);transition:all 0.3s ease}
.btn-3 span:before{width:2px;height:0%}
.btn-3 span:after{width:0%;height:2px}
.btn-3 span:hover:before{height:100%}
.btn-3 span:hover:after{width:100%}
  
/* 4 */
.btn-4{color:#03c8a8;background:#96e4df;line-height:42px;padding:0;border:none}
.btn-4:hover{background-color:#89d8d3}
  
/* 5 */
.btn-5{border:none;color:#ff84c1;background-color:#ffc1e0}
.btn-5:hover{color:#f0094a;background:transparent;box-shadow:none}
.btn-5:before,.btn-5:after{content:'';position:absolute;top:0;right:0;height:2px;width:0;background:#f0094a;box-shadow:-1px -1px 5px 0 #fff,7px 7px 20px 0 #0003,4px 4px 5px 0 #0002;transition:400ms ease all}
.btn-5:after{right:inherit;top:inherit;left:0;bottom:0}
.btn-5:hover:before,.btn-5:hover:after{width:100%;transition:800ms ease all}
  
/* 6 */
.btn-6{color:rgba(234,76,137,1);background:rgb(247,150,192);line-height:42px;padding:0;border:none}
.btn-6 span{position:relative;display:block;width:100%;height:100%}
.btn-6:before,.btn-6:after{position:absolute;content:"";height:0%;width:1px;box-shadow:-1px -1px 20px 0 rgba(255,255,255,1),-4px -4px 5px 0 rgba(255,255,255,1),7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3)}
.btn-6:before{right:0;top:0;transition:all 500ms ease}
.btn-6:after{left:0;bottom:0;transition:all 500ms ease}
.btn-6:hover{background:transparent;color:#76aef1;box-shadow:none}
.btn-6:hover:before{transition:all 500ms ease;height:100%}
.btn-6:hover:after{transition:all 500ms ease;height:100%}
.btn-6 span:before,.btn-6 span:after{position:absolute;content:"";box-shadow:-1px -1px 20px 0 rgba(255,255,255,1),-4px -4px 5px 0 rgba(255,255,255,1),7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3)}
.btn-6 span:before{left:0;top:0;width:0%;height:.5px;transition:all 500ms ease}
.btn-6 span:after{right:0;bottom:0;width:0%;height:.5px;transition:all 500ms ease}
.btn-6 span:hover:before{width:100%}
.btn-6 span:hover:after{width:100%}
  
/* 7 */
.btn-7{background:#ffbf7f;line-height:42px;color:darkorange;padding:0;border:none}
.btn-7 span{position:relative;display:block;width:100%;height:100%}
.btn-7:before,.btn-7:after{position:absolute;content:"";right:0;bottom:0;background:rgba(251,75,2,1);box-shadow:-7px -7px 20px 0 rgba(255,255,255,.9),-4px -4px 5px 0 rgba(255,255,255,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);transition:all 0.3s ease}
.btn-7:before{height:0%;width:2px}
.btn-7:after{width:0%;height:2px}
.btn-7:hover{color:rgba(251,75,2,1);background:transparent}
.btn-7:hover:before{height:100%}
.btn-7:hover:after{width:100%}
.btn-7 span:before,.btn-7 span:after{position:absolute;content:"";left:0;top:0;background:rgba(251,75,2,1);box-shadow:-7px -7px 20px 0 rgba(255,255,255,.9),-4px -4px 5px 0 rgba(255,255,255,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);transition:all 0.3s ease}
.btn-7 span:before{width:2px;height:0%}
.btn-7 span:after{height:2px;width:0%}
.btn-7 span:hover:before{height:100%}
.btn-7 span:hover:after{width:100%}
  
/* 8 */
.btn-8{background-color:#d9d0f5;color:#c797eb;line-height:42px;padding:0;border:none}
.btn-8 span{position:relative;display:block;width:100%;height:100%}
.btn-8:before,.btn-8:after{position:absolute;content:"";right:0;bottom:0;background:#c797eb;transition:all 0.3s ease}
.btn-8:before{height:0%;width:2px}
.btn-8:after{width:0%;height:2px}
.btn-8:hover:before{height:100%}
.btn-8:hover:after{width:100%}
.btn-8:hover{background:transparent}
.btn-8 span:hover{color:#c797eb}
.btn-8 span:before,.btn-8 span:after{position:absolute;content:"";left:0;top:0;background:#c797eb;transition:all 0.3s ease}
.btn-8 span:before{width:2px;height:0%}
.btn-8 span:after{height:2px;width:0%}
.btn-8 span:hover:before{height:100%}
.btn-8 span:hover:after{width:100%}
  
/* 9 */
.btn-9{border:none;transition:all 0.3s ease;overflow:hidden;color:#1fd1f9;color:#0cbcff}
.btn-9:after{position:absolute;content:" ";z-index:-1;top:0;left:0;width:100%;height:100%;background:#5fe0fd;transition:all 0.3s ease}
.btn-9:hover{background:transparent;box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3);color:#fff}
.btn-9:hover:after{-webkit-transform:scale(2) rotate(180deg);transform:scale(2) rotate(180deg);box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3)}
  
/* 10 */
.btn-10{background:lightblue;color:#60abf7;border:none;transition:all 0.3s ease;overflow:hidden}
.btn-10:after{position:absolute;content:" ";top:0;left:0;z-index:-1;width:100%;height:100%;transition:all 0.3s ease;-webkit-transform:scale(.1);transform:scale(.1)}
.btn-10:hover{color:#fff;border:none;background:transparent}
.btn-10:hover:after{background:#7fbfff;-webkit-transform:scale(1);transform:scale(1)}
  
/* 11 */
.btn-11{border:none;background:rgb(251,33,117);background:linear-gradient(0deg,rgba(251,33,117,1) 0%,rgba(234,76,137,1) 100%);background:#f7d0f5;color:rgba(251,33,117,.5);overflow:hidden}
.btn-11:hover{text-decoration:none;color:#fff}
.btn-11:before{position:absolute;content:'';display:inline-block;top:-180px;left:0;width:30px;height:100%;background-color:#fff;animation:shiny-btn1 3s ease-in-out infinite}
.btn-11:hover{opacity:.7}
.btn-11:active{box-shadow:4px 4px 6px 0 rgba(255,255,255,.3),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.2)}
@-webkit-keyframes shiny-btn1{0%{-webkit-transform:scale(0) rotate(45deg);opacity:0}80%{-webkit-transform:scale(0) rotate(45deg);opacity:0.5}81%{-webkit-transform:scale(4) rotate(45deg);opacity:1}100%{-webkit-transform:scale(50) rotate(45deg);opacity:0}}
  
/* 12 */
.btn-12{position:relative;right:20px;bottom:20px;border:none;box-shadow:none;width:130px;height:40px;line-height:42px;-webkit-perspective:230px;perspective:230px}
.btn-12 span{background:#7fbfff;color:#3b97f3;display:block;position:absolute;width:130px;height:40px;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);border-radius:50px;margin:0;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .3s;transition:all .3s}
.btn-12 span:nth-child(1){box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}
.btn-12 span:nth-child(2){-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}
.btn-12:hover span:nth-child(1){box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg)}
.btn-12:hover span:nth-child(2){background:transparent;color:transparent;box-shadow:none;text-shadow:none;-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);transform:rotateX(-90deg)}
  
/* 13 */
.btn-13{color:lightseagreen;background-color:#89d8d3;border:none;z-index:1}
.btn-13:after{position:absolute;content:"";width:100%;height:0;bottom:0;left:0;z-index:-1;border-radius:50px;background-color:#4dccc6;background-image:linear-gradient(315deg,#4dccc6 0%,#96e4df 74%);box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),inset -7px -7px 10px 0 rgba(0,0,0,.1),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);text-shadow:0 0 6px rgba(255,255,255,.3),-4px -4px 6px rgba(116,125,136,.2);transition:all 0.3s ease}
.btn-13:hover{}
.btn-13:hover:after{top:0;height:100%}
.btn-13:active{top:2px}
  
/* 14 */
.btn-14{background:#ffff9e;color:#ffb64d;border:none;z-index:1}
.btn-14:after{position:absolute;content:"";width:100%;height:0;top:0;left:0;z-index:-1;border-radius:50px;background-color:#ffff8a;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),inset -7px -7px 10px 0 rgba(0,0,0,.1),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);text-shadow:0 0 6px rgba(255,255,255,.3),-4px -4px 6px rgba(116,125,136,.2);transition:all 0.3s ease}
.btn-14:hover{color:#ffb64d}
.btn-14:hover:after{top:auto;bottom:0;height:100%}
.btn-14:active{top:2px}
  
/* 15 */
.btn-15{background:#c68eff;color:#a453f5;border:none;z-index:1}
.btn-15:after{position:absolute;content:"";width:0;height:100%;top:0;right:0;z-index:-1;background-color:#7f7fff;border-radius:50px;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);transition:all 0.3s ease}
.btn-15:hover{color:#4c4cf1}
.btn-15:hover:after{left:0;width:100%}
.btn-15:active{top:2px}
  
/* 16 */
.btn-16{border:none;color:#aaa}
.btn-16:after{position:absolute;content:"";width:0;height:100%;top:0;left:0;direction:rtl;z-index:-1;border-radius:50px;box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;transition:all 0.3s ease}
.btn-16:hover{color:#bbb}
.btn-16:hover:after{left:auto;right:0;width:100%}
.btn-16:active{top:2px}

Script HTML Button

Terakhir, salin kode script HTML di bawah ini, dan letakkan sesuai dengan yang anda inginkan.

<button class="custom-btn btn-1" onclick="window.open('#')">Read More</button>

Kustomisasi Button

Keterangan :

  1. Untuk merubah tombol style, ganti btn-1 dengan btn-2 ....btn-16
  2. Ganti tanda # dengan URL link anda.

Widget Profile Card Soft UI Neumorphism

Profil Card Soft UI Neumorphism adalah kartu profil dengan efek neomorphic. Kartu ini berisi gambar profil, tombol media sosial, dan beberapa info media sosial. Saat Anda mengarahkan kursor ke tombol media sosial tertentu, akan ditampilkan efek neomorfik.

Kelebihan Profile Card Soft UI / Neumorphism

  1. Tampilan Profil Baru.
  2. Penampilan lembut halus secara keseluruhan.
  3. Desain UI yang lembut.
  4. Responsif.

cara membuat Profile Card Neumorphism

Cara membuat Profile Card Soft UI / Neumorphism, tahapannya sebagai berikut.

Tutorial Profile Card

Buat halaman postingan baru atau edit halaman yang sudah ada, kemudian ikuti langkah-langkah pembuatannya sebagai berikut.

  1. Dalam tampilan editor pos, klik ikon di kiri bawah nama judul.
  2. Dua opsi akan muncul: 'Tampilan HTML' dan 'Tampilan menulis'
  3. Pilih' Tampilan HTML '.
  4. Salin dan tempelkan kode script di bawah ini.
  5. Pratinjau dan terakhir Publikasikan.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">  
  
<div class="wrapper">
    <div class="img-area">
      <div class="inner-area">
        <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqEtuue8m4dEBwfg_qMlMnwxHGOW9wVgOvsyBhZYN0RMy_DfYxB2-Wn_i8H1cY6L1ZTG1jr2-o1wbYQWqr2QaGOuipZxwCXGBVWbrTGYiNO039x7u3y_0-m2-CW8zoFa08YvYXM2rd5g/h120/Techy+DarshaN+%25281%2529.png" />
      </div>
    </div>
    <div class="icon arrow"><i class="fas fa-arrow-left"></i></div>
    <div class="icon dots"><i class="fas fa-ellipsis-v"></i></div>
    <div class="name">Nama</div>
    <div class="about">About</div>
    <div class="social-icons">
      <a class="fb" href="https://www.facebook.com/"><i class="fab fa-facebook"></i></a>
      <a class="twitter" href="https://twitter.com/"><i class="fab fa-twitter"></i></a>
      <a class="insta" href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a>
      <a class="yt" href="https://www.youtube.com"><i class="fab fa-youtube-square"></i></a>
    </div>
    <div class="buttons">
      <button><a href="&lt;a href=&quot;#&quot; class=&quot;yt&quot;&gt;">Message</a></button>
      <button><a href="&lt;a href=&quot;#&quot; class=&quot;yt&quot;&gt;">Subscribe</a></button>
    </div>
    <div class="social-share">
      <div class="row">
        <i class="far fa-heart"></i>
        <i class="icon-2 fas fa-heart"></i>
        <span>20.4k</span>
      </div>
      <div class="row">
        <i class="far fa-comment"></i>
        <i class="icon-2 fas fa-comment"></i>
        <span>14.3k</span>
      </div>
      <div class="row">
        <i class="fas fa-share"></i>
        <span>12.8k</span>
      </div>
    </div>
  </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}.wrapper,.wrapper .img-area,.social-icons a,.buttons button{background:#ffffff;box-shadow:-3px -3px 7px #ffffff,3px 3px 5px #ceced1}.wrapper{position:relative;width:350px;padding:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-direction:column}.wrapper .icon{font-size:17px;color:#31344b;position:absolute;cursor:pointer;opacity:0.7;top:15px;height:35px;width:35px;text-align:center;line-height:35px;border-radius:50%;font-size:16px}.wrapper .icon i{position:relative;z-index:9}.wrapper .icon.arrow{left:15px}.wrapper .icon.dots{right:15px}.wrapper .img-area{height:150px;width:150px;border-radius:50%;display:flex;align-items:center;justify-content:center}.img-area .inner-area{height:calc(100% - 25px);width:calc(100% - 25px);border-radius:50%}.inner-area img{height:100%;width:100%;border-radius:50%;object-fit:cover}.wrapper .name{font-size:23px;font-weight:500;color:#31344b;margin:10px 0 5px 0}.wrapper .about{color:#44476a;font-weight:400;font-size:16px}.wrapper .social-icons{margin:15px 0 25px 0}.social-icons a{position:relative;height:40px;width:40px;margin:0 5px;display:inline-flex;text-decoration:none;border-radius:50%}.social-icons a:hover::before,.wrapper .icon:hover::before,.buttons button:hover:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;border-radius:50%;background:#ffffff;box-shadow:inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1}.buttons button:hover:before{z-index:-1;border-radius:5px}.social-icons a i{position:relative;z-index:3;text-align:center;width:100%;height:100%;line-height:40px}.social-icons a.fb i{color:#4267B2}.social-icons a.twitter i{color:#1DA1F2}.social-icons a.insta i{color:#E1306C}.social-icons a.yt i{color:#ff0000}.wrapper .buttons{display:flex;width:100%;justify-content:space-between}.buttons button{position:relative;width:100%;border:none;outline:none;padding:12px 0;color:#31344b;font-size:17px;font-weight:400;border-radius:5px;cursor:pointer;z-index:4}.buttons button:first-child{margin-right:10px}.buttons button:last-child{margin-left:10px}.wrapper .social-share{display:flex;width:100%;margin-top:30px;padding:0 5px;justify-content:space-between}.social-share .row{color:#31344b;font-size:17px;cursor:pointer;position:relative}.social-share .row::before{position:absolute;content:"";height:100%;width:2px;background:#e0e6eb;margin-left:-25px}.row:first-child::before{background:none}.social-share .row i.icon-2{position:absolute;left:0;top:50%;color:#31344b;transform:translateY(-50%);opacity:0;pointer-events:none;transition:all 0.3s ease}.row:nth-child(1):hover i.fa-heart,.row:nth-child(2):hover i.fa-comment{opacity:1;pointer-events:auto}
</style>

Kustomisasi Profile Card

Keterangan :

  1. Ganti teks nama, about dengan teks yang anda inginkan.
  2. Ganti tanda # dengan URL link anda.

Demo Profile Card

Tampilan demo Profile Card Soft UI Neumorphism

elzeno.id
elzeno.id
Bisa Karena Biasa

Widget Icon Social Media Soft UI Neumorphism

Icon Social Media Soft UI Neumorphism adalah icon tombol media sosial (Facebook, Twitter, Instagram, Youtube, dan beberapa icon media sosial) dengan efek neomorphic. Saat Anda mengarahkan kursor ke tombol media sosial tertentu, akan ditampilkan efek neomorfik.

Demo Icon

Kode Script Icon

Kode script HTML dan CSS Icon Social Media Soft UI / Neumorphism, sebagai berikut.

Icon Social Soft UI

Demikian kami sajikan mengenai Kumpulan Widget Alert Box, Style Button, Icon Sosial dan Profil Card UI Neumorphism platform Blogger, semoga bermanfaat.

Source:
Techydarshan dan Wikipedia

Lanjut ke Link Tujuan
Anda mungkin tertarik artikel ini :

Terima kasih telah membaca artikel kami yang berjudul: Kumpulan Widget Blogger Neumorphism , 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
#Blogger

Posting Komentar

Cara Berkomentar bagi yang tidak memiliki blog:
1. Klik select profile --> pilih "Name/URL".
2. Isi nama Anda dan isi dengan alamat facebook Anda.
3. Klik "Lanjutkan".
4. Ketik komentar Anda.
5. Klik "Publish".
6. Centang "CAPTCHA" yang menyatakan bahwa Anda bukan robot.
7. Klik "Publish".
Cookie Consent
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.