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

Salam Ngerapik Blog, bagaimana kabar hari ini blog teman teman blogger semuanya, apakah masih full dan bersemangat menulis dan mengembangkan blog teman teman. Gimana juga kabar index google blog sobat semua apa sudah merosot anjlok 😅? Kalau saya ya pasti anjlok..hehehe😂. Kali ini saya akan mencoba mengulas widget mempercantik dan memperganteng tampilan Tentang Saya (About US), seperti nampak pada gambar dibawah. 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"'> <!-- Kontainer Utama Widget (Hitam Pekat Tanpa Semburat Abu-Abu) --> <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;'> <!-- Label Judul "Tentang Saya" --> <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> <!-- Tata Letak Struktur Kiri Kanan Pas --> <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;'> <!-- Sisi Kiri: Foto Profil Berputar & Sosial Media SVG --> <div class='authorsocial-wrapper' style='display: flex !important; flex-direction: column !important; align-items: center !important; flex-shrink: 0 !important; min-width: 100px !important;'> <!-- Bingkai Penjaga Bulat Mulus --> <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;'> <!-- Gambar Kucing Menggunakan Kode CSS Animasi Langsung Di Sini --> <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> <!-- Blok Ikon Sosial Media Menggunakan Grafis SVG Murni Langsung Diwarnai --> <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;'> <!-- Facebook --> <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> <!-- Twitter X --> <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> <!-- WhatsApp --> <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> <!-- Instagram --> <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

<!-- Sisi Kanan: Deskripsi Teks Biografi Bersih + Tombol Share Sistem Blogger --> <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. 

Demikianlah artikel singkat saya kali ini tentang "Desaign Ala AI untuk mempercantik dan memperganteng tampilan Tentang Saya (About US)" semoga dapat bermanfaat serta dapat diaplikasikan pada blog sobat blogger juga semuanya. Selamat mencoba untuk mempercantik dan memperganteng blog teman teman semua. Salam Ngerapik Blog.