15 May 2022

Profil Card About Me Tema Dinamis CSS3

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Profil Card About Me Tema Dinamis CSS3

Profil Card sebagai identitas admin blog sudah menjadi menu wajib yang ada di blog yang sedang dikelola. Karena dengan data pribadi sang adminlah, kredibilitas sebuah blog/web patut diperhitungkan.

Biasanya menu widget Profil Card : About Me ini terpampang pada bagian sidebar blog, tapi ada juga blogger yang menaruhnya di sisi bawah postingan atau di footer. Tergantung kesukaan saja kalau soal peletakan widget ini.

Baca Juga : Ikon Whatsapp Terpasang di Pojok Atas Kanan Blog

Bentuk atau style dari About Me juga bermacam-macam tergantung dari kreasi para blogger yang mengkreasikannya. Ada yang bentuk oval, bulat, kotak dan juga ada yang membentuk setiap sudut menjadi melengkung. Sesuai selera kalau yang ini.

Kegunaan dari Profil Card ini tentu saja berguna untuk memberikan identitas dari sang penulis atau admin dari blog. Sehingga orang yang berkunjung ke blog akan tahu siapa gerangan dibalik desain dan artikel yang terpampang.

Baca Juga : Tooltip Keren Memperjelas Link Deskripsi pada Text Link

Kali ini saya akan memberikan tutorial tentang pembuatan Profil Card dengan CSS3 dan Javascript. Dengan dua bahasa pemrograman handal ini, Profil Card akan kita desain secara elegan sehingga akan tampil menarik bagi pengunjung blog kita.

Mulai saja ya tutorialnya.

Profil Card About Me Tema Dinamis CSS3


Langsung saja kalian masuk ke Template ya. Seperti biasa klik Tema kemudian pilih Sesuaikan : Edit HTML terus di dalam template tersebut temukan kode ]]></b:skin> dan tempelkan kode dibawah ini tepat di atas kode ]]></b:skin> itu
*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root{
    --theme-color: #ff1756;
}
body{
    background-color: #483D8B;
}
.container{
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}
.card{
    height: 420px;
    width: 320px;
    background: linear-gradient(
        to bottom,
        var(--theme-color) 110px,
        #ffffff 110px
    );
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(50,50,50,0.1);
    padding: 50px 0;
}
.card *{
    font-family: 'Poppins',sans-serif;
    text-align: center;
    letter-spacing: 0.5px;
    font-weight: 600;
}
img{
    display: block;
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 50%;
    margin: 0 auto;
    box-shadow: 0 0 0 8px #ffffff;
}
.card h4{
    color: var(--theme-color);
    font-size: 16px;
    margin: 15px 0 5px 0;
}
.card h5{
    color: #454545;
    font-weight: 400;
    font-size: 14px;
}
.details{
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
}
.details h2{
    font-weight: 400;
}
.details span{
    color: var(--theme-color);
}
.buttons{
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
}
.buttons button{
    width: 130px;
    padding: 8px 0;
    border-radius: 25px;
    border: 3px solid var(--theme-color);
}
.buttons button:first-child{
    background-color: var(--theme-color);
    color: #ffffff;
}
.buttons button:last-child{
    background-color: transparent;
    color: var(--theme-color);
}
.themes{
    background-color: #ffffff;
    box-shadow: 0 5px 15px rgba(50,50,50,0.1);
    padding: 20px;
    margin-top: 40px;
    display: flex;
    justify-content: space-around;
}
.themes button{
    height: 25px;
    width: 25px;
    border: 3px solid #dddddd;
    outline: none;
    border-radius: 50%;
    cursor: pointer;
}
.btn1{
    background-color: #3498db;
}
.btn2{
    background-color: #ff1756;
}
.btn3{
    background-color: #1cb65d;
}
.btn4{
    background-color: #8e44ad;
}
.btn5{
    background-color: #f4b932;
}


Kemudian tambahkan kode javascript dibawah ini tepat di atas kode </body>.
<script type='text/javascript'>
//<![CDATA[  
const theme = document.querySelector(':root');
const btns = document.querySelectorAll('.btn');

btns.forEach(function(btn){

    btn.addEventListener("click", function(e){

        const color = e.currentTarget.classList;

        if(color.contains("btn1")){
            theme.style.setProperty("--theme-color", "#3498db");
        }
        else if(color.contains("btn2")){
            theme.style.setProperty("--theme-color", "#ff1756");
        }
        else if(color.contains("btn3")){
            theme.style.setProperty("--theme-color", "#1cb65d");
        }
        else if(color.contains("btn4")){
            theme.style.setProperty("--theme-color", "#8e44ad");
        }
        else{
            theme.style.setProperty("--theme-color", "#f4b932");
        }
    });
});  
//]]>
</script>


Setelah itu letakkan kode terakhir dibawah ini di Tata Letak. Saya kira kalian sudah paham khan posisi Tata Letak dan Tambah HTML Javascript itu berada.
<div class="container">
<div class="card">
            <img src="URL gambar Logo Blog kamu" alt="profile_img">
            <h4>Alifacode</h4>
            <h5>Trik dan Tips Ngeblog</h5>
            <div class="details">
                <div class="column">
                    <h2>100K</h2>
                    <span>Pengikut</span>
                </div>
                <div class="column">
                    <h2>100</h2>
                    <span>Mengikuti</span>
                </div>
            </div>
            <div class="buttons">
                <button>Ikuti</button>
                <button>Pesan</button>
            </div>
        </div>
        <div class="themes">      
            <button class="btn btn1"></button>
            <button class="btn btn2"></button>
            <button class="btn btn3"></button>
            <button class="btn btn4"></button>
            <button class="btn btn5"></button>
        </div>
</div>


Catatan :
Untuk URL gambar logo diisi dengan URL gambar logo blog yang sudah kalian upload di blog googleusercontent ya. Tarus kodenya saja, img src tidak perlu. Usahakan ukurannya 100x100 px aja jangan lebih nanti kebesaran dan bisa keluar dari garis batas Profil Card.


Nah itu dia tutorial tentang membuat profil card yang elegan dan dinamis. Semoga dipraktekkan ya. Dan blog kalian bisa menampilkan About Me yang bagus. Terima kasih ya yang sudah mampir disini di artikel Profil Card About Me Tema Dinamis CSS3. Sampai jumpa di lain waktu. Selagi masih muda gunakan waktumu untuk investasi kepala ke atas.

Bagikan ke teman-teman kamu
Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Profil Card About Me Tema Dinamis CSS3 . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon