Cách Tạo Profile Card Widget Làm Decor Cho Blogger Cực Chất

     Xin chào tất cả các bạn tôi đã quen, sắp quen và chẳng bao giờ quen, chào mừng các bạn đã đến với NMHRUBY, hôm nay NMHRUBY sẽ hướng dẫn các bạn cách Tạo Profile Card Widget cho Blogger làm decor cho Blog của các bạn được sinh động hơn, đẹp hơn nhé ^^

Banner Blogs by NMHRUBY

    Đây là một Widget được thiết kế đặt ở Sidebar của Blog bạn, nó giúp Decor cũng như một phần làm chỗ giới thiệu bản thân, skills, social network cực đẹp nữa. Phần này nó khá phổ biến nên mình xin phép vào luôn cách thực hiện cũng như hướng dẫn luôn nhé.

THỰC HIỆN

    Bước 1:  Đăng nhập vào Blog và chuyển đến phần Bố cục, chọn Sidebar và chọn Thêm tiện ích chọn vào Tiện ích HTML/Javascript.

    Bước 2: Sau đó dán đoạn Code sau vào Tiện ích HTML/Javascript mà bạn muốn hiện thị

<div class="card">
  <div class="profile-image">
    <img src="https://i.imgur.com/Epj6MvC.jpeg" alt="Profile Image" />
  </div>
  <div class="profile-info">
    <h2>
      Nguyễn Mạnh Hùng <i class="fa-solid fa-circle-check" style="color:#005eff"></i>
    </h2>
    <p>UI/UX,Web Developers</p>
    <p class="slogan">Hùng Developers,tên đầy đủ của mình là Nguyễn Mạnh Hùng,mình sinh năm 2006,sinh ra và lớn lên tại thành phố Hà Nội. Blogs này được mình tạo ra nhằm chia sẻ về cuộc sống cũng như những kiến thức hữu ích và mình tìm ra. Hãy theo dõi mình nhé,cảm ơn các bạn !</p>
    <div class="social-icons-by-nmhrubyv1-by-nmhrubyv1">
      <a href="https://facebook.com/NMHRUBY"><i class="fab fa-facebook-f"></i></a>
    </div>
  </link
></div>
</div>
<style>
  .card{background:#fff;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,0.1);overflow:hidden;text-align:center;padding:20px;transition:transform 0.3s ease}.card:hover{transform:scale(1.05)}.profile-image img{width:150px;height:150px;border-radius:50%;border:5px solid #e0e0e0}.profile-info h2{margin:20px 0 10px;font-size:20px}.profile-info p{color:#888;margin-bottom:10px}.profile-info{font-style:italic;color:#555;margin-bottom:20px}.slogan{font-style:italic;color:#a1a1a1;margin-bottom:20px;background-color:#f4f4f4;border-radius:10px;line-height:170%;letter-spacing:1px}.social-icons-by-nmhrubyv1{display:flex;justify-content:center;gap:15px}social-icons-by-nmhrubyv1 a{text-decoration:none;color:#555;font-size:20px;transition:color 0.3s ease}.social-icons-by-nmhrubyv1 a:hover{color:#007bff}@media (max-width:480px){.card{max-width:100%;padding:15px}.profile-image img{width:120px;height:120px}.profile-info h2{font-size:20px}.social-icons-by-nmhrubyv1 a{font-size:18px}}</style>

    Bước 3: Sửa các thông tin mình đã đánh dấu như "Your Avatar, Your Name, Your Slogan, Your Skill, Link Network" sau đó bấm lưu và Reload lại Trang và xem kết quả.

    Chỉ với 3 bước đơn giản như vậy thôi là anh em đã có một Widget Decor cực chất rồi. Cảm ơn các bạn đã theo dõi, NMHRUBY xin chúc tất cả anh em sức khoẻ, chúc anh em may mắn, chúc anh em bình an, chúc anh em 8386 nhé, anh em của NMHRUBY mãi đỉnh mãi đỉnh mãi đỉnh luôn :33