Membuat Widget About Keren, Simple, dan Responsive di Blogger

Description: Membuat Widget About Keren, Simple, dan Responsive di Blogger ~ Hello, kembali lagi di postingan tutorial disain. Kali ini saya akan share widget super keren, simple, dan responsive di blogger nih. Pasti di antara kalian ingin memasang widget ini di blog milik Anda agar terlihat keren dan elegant.

Widget ini sudah saya terapkan di blog ini, jika Anda ingin melihat demonya, Anda dapat melihatnya dibagian bawah blog ini (footer).

Widget About ini berfungsi untuk pengguna atau pengunjung melihat profil admin atau si pembuat blog agar lebih dikenal oleh pengguna atau pengunjung tersebut, kita lihat saja contohnya admin blog terkenal di luar sana.

Contohnya adalah Mbak Arlina, siapa si yang tidak tahu blog mbak Arlina, yaps pasti di antara Anda pasti tahu blog tersebut, dan kita contohkan lagi blog Kompi Ajaib, blog tersebut membagikan tutorial disain dan widget responsive buatan dia sendiri.

Membuat Widget About Keren dan Responsive di Blogger

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda taruh kode dibawah ini diatas kode ]]></b:skin atau </style>

/* Responsive Widget Disain by Lostcips */

#about-wrapper{font-family:'Roboto',Arial;padding:0 0 20px;background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);max-width:400px;color:#555;}

#about-wrapper .aboutimg{width:100%;height:130px;float:left;overflow:hidden}

img.profilex{width:60px;border-radius:100%;float:left;margin:-35px 20px 0;box-shadow:rgba(0, 0, 0, 0.2) 0px 8px 17px 0px, rgba(0, 0, 0, 0.188235) 0px 6px 20px 0px}#about-wrapper p{padding:0 20px}

a.linkx{color:#fff;background-color:#28343a;position:absolute;top:150px;right:30px;border-radius:100%;height:20px}

a.linkx:hover{background-color:#161e21;color:#fff}

#about-wrapper h4{line-height:3;font-weight:400;font-size:15px}

Langkah kedua :

Lalu Anda ke Tata Letak > Tambahkan Gadget. Lalu Anda copy kode dibawah ini dan taruh kode dibawah ini di kolom yang sudah disediakan disana

<div id="about-wrapper">

<div class="aboutimg">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHp6u8Mty1zClDgfLnMzEjTeJ0offVIlckpdzg5ESt_-G82ti1dXg04tNIKEZHXLWa6QKhGWMnc9bCCB8FqTj9STxRoIyPtMsDYcN0FVmZxpoeHOhRW4RgVKnCgkRvdt51eeHR-x2Zyuul/,00000000ffffffff/13754702_843274475805361_3856612576115581340_n.jpg" alt="Aulia Vivi" title="Aulia Vivi"/></div>

<img class="profilex" src="https://lh3.googleusercontent.com/-J6XerpE97Qk/AAAAAAAAAAI/AAAAAAAAAX8/KwPT40tab9Q/s60-p-no/photo.jpg" alt="Aulia Vivi" title="Aulia Vivi"/>

<h4>Aulia</h4>

<p>Adalah seorang anak TKJ yang ingin mengetahui &amp; mempelajari ilmu seputar blogger, SEO, template, internet, dan bisnis online.</p>

</div>

Biru : Ganti tulisan bewarna biru dengan URL Foto Profil dan Foto Sampul milik Anda
Merah : Ganti tulisan bewarna merah dengan Title foto Anda
Oren : Ganti tulisan bewarna oren dengan Nama Anda
Hijau : Ganti tulisan bewarna hijau dengan deskripsi atau biodata tentang Anda

Lalu Anda Save. Dan Anda lihat hasilnya, hasilnya sangat memuaskan.
Demikian tutorial hari ini, semoga bermanfaat, terimakasih telah berkunjung dan saya harap Anda tidak bosan berkunjung di blog saya.

Jangan lupa like dan share postingan ini ke teman - teman Anda untuk bertujuan berkembangnya blog ini kedepannya lebih baik lagi.