Desaign Ala AI untuk mempercantik dan memperganteng tampilan Tentang Saya (About US)

Salam teman langsung saja lah untuk mempercantik dan memperganteng tampilan About US blogger dari bantuan AI yang dapat teman teman kembagkan agar tampilannya jauh lebih elegan, modern, dan rapi. Menambahkan desain CSS modern dengan efek bayangan halus (soft shadow), tata letak yang bersih, foto profil berbentuk lingkaran, serta tombol media sosial berbentuk ikon bulat yang estetik.

Berikut adalah potongan kode bagian pertama untuk membuat widget profil penulis:

</> Bagian 1

<b:if cond='data:blog.pageType == "item"'>
  
  <div class='about-author' style='background: #000000 !important; border-radius: 12px !important; padding: 24px !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; color: #f0f0f0 !important; margin: 20px 0 !important; border: 1px solid rgba(255,255,255,0.05) !important; box-sizing: border-box !important;'>
    
    
    <h5 class='boxtitle' style='background-color: rgba(255,255,255,0.06) !important; color: #ffffff !important; display: inline-block !important; padding: 6px 14px !important; font-weight: 600 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin: 0 0 24px 0 !important; border-left: 3px solid #0084ff !important; border-radius: 0 4px 4px 0 !important; border-top: none !important; border-right: none !important; border-bottom: none !important;'>Tentang Saya</h5>
    
    
    <div class='authorbox' style='display: flex !important; align-items: flex-start !important; gap: 24px !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important;'>
      
      
      <div class='authorsocial-wrapper' style='display: flex !important; flex-direction: column !important; align-items: center !important; flex-shrink: 0 !important; min-width: 100px !important;'>
        
        
        <div class='author-avatar-frame' style='width: 90px !important; height: 90px !important; border-radius: 50% !important; overflow: hidden !important; border: 3px solid rgba(255,255,255,0.1) !important; box-shadow: 0 8px 16px rgba(0,0,0,0.4) !important; background: #000000 !important; padding: 0 !important; margin: 0 0 16px 0 !important; cursor: pointer !important;'>
          
          <img alt='Author Photo' expr:src='data:post.authorPhoto.url' onmouseout='this.style.transform="rotate(0deg)"' onmouseover='this.style.transform="rotate(360deg)"' style='width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border-radius: 50% !important; border: none !important; padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; max-width: 100% !important; max-height: 100% !important; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;'/>
        </div>
        
        
        <div class='authorsocial' style='display: flex !important; gap: 8px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important;'>
          
          <a href='https://facebook.com' rel='nofollow' style='width: 28px !important; height: 28px !important; background-color: #3b5998 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important;' target='_blank'>
            <svg style='width:12px !important; height:12px !important; fill:#ffffff !important;' viewBox='0 0 320 512'><path d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/></svg>
          </a>
          
          <a href='https://twitter.com' rel='nofollow' style='width: 28px !important; height: 28px !important; background-color: #1da1f2 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important;' target='_blank'>
            <svg style='width:12px !important; height:12px !important; fill:#ffffff !important;' viewBox='0 0 512 512'><path d='M389.2 48h70.6L305.6 224.2 487 464H345.8L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/></svg>
          </a>
          
          <a href='https://whatsapp.com' rel='nofollow' style='width: 28px !important; height: 28px !important; background-color: #25d366 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important;' target='_blank'>
            <svg style='width:12px !important; height:12px !important; fill:#ffffff !important;' viewBox='0 0 448 512'><path d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/></svg>
          </a>
          
          <a href='https://instagram.com' rel='nofollow' style='width: 28px !important; height: 28px !important; background-color: #e1306c !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important;' target='_blank'>
            <svg style='width:12px !important; height:12px !important; fill:#ffffff !important;' viewBox='0 0 448 512'><path d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM402.4 392c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/></svg>
          </a>
        </div>
      </div>

Dan berikut adalah potongan kode bagian kedua untuk melengkapi penutup strukturnya:

</> Bagian 2

<div class='authorinfo' style='flex: 1 !important; padding: 4px 0 0 0 !important; margin: 0 !important; background: transparent !important; border: none !important; display: flex !important; flex-direction: column !important; gap: 14px !important;'>
        <p style='font-size: 14px !important; line-height: 1.7 !important; color: #cccccc !important; margin: 0 !important; text-align: justify !important; background: transparent !important;'>
          Saya hanya blogger biasa yang ingin berbagi pengetahuan yang saya bisa. Semoga semuanya bermanfaat bagi khalayak dan banyak orang. Lahir di Pangkalpinang, 13 Agustus. Semoga blog ini dapat lebih baik dalam penerapan disetiap tulisan-nya. Amiin... Salam.,
          <a class='authorinfo' href='/p/about-us.html' style='padding: 6px 14px !important; background: #0084ff !important; color: #ffffff !important; font-size: 11px !important; border-radius: 6px !important; text-decoration: none !important; font-weight: bold !important; text-transform: uppercase !important; letter-spacing: 0.5px !important;' target='_blank' title='Tentang Saya'>
            Selengkapnya
          </a>
        </p>        
      </div>  
    </div>
  </div>
</b:if>

Untuk memperindah kode ini saja hampir 5 Jam bro and Sis.. ckkk.. dasar Ai terkadang menyesatkan lhoo.. tampilan semerawut jadi kitanya yang harus jadi Pilot biar sesuai keinginan kita ya saat bertanya di prompt Mode Ai. Silahkan di proses dan diterapkan di blog teman teman. Ganti apa yang perlu diganti dari kode diatas. Salam.. salam.

Desaign Ala AI untuk mempercantik dan memperganteng tampilan Tentang Saya (About US)

Posting Komentar

Formulir Kontak