Lalu saya mencari-cari blog yang memasang widget seperti ini dan akhirnya menemukanya kemudian saya mencoba untuk redesign/membuatnya, yang kemudian saya pasang di blog saya ini
ika kamu tertarik untuk memasang widget about me di blog yang menurut saya keren, kamu bisa mengikuti tutorial yang akan saya bagikan berikut ini. Kelebihan dari widget tentang penulis ini adalah tidak membebani loading blog karena tidak menggunakan Java Script
Hanya menggunakan kode CSS dan pelengkap ikon menggunakan font awesome, tampilanyapun cukup rapi dan simplle. Widget ini dilengkapi Foto profile author, Alamat, Keahlian yang dikuasai, Ikon sosial media facebook, instagram, dan youtube bisa juga ditambah atau dikurangi dan tampilan bisa di edit sedemikian rupa tergantung selera dan kebutuhan
Cara membuat widget About Me responsive dan keren di blog
Langkah pertama kamu harus Login blogger
Kemudian pilih menu Tatat Letak
Tambah Gadget pilih HTML/Java Script
Copi paste kode dibawah ini
<div id="LpAuthor"><img src="di isi alamat url gambar author" alt="Lare Pacitan"/>
<br/>
<h2>Author : kimlp</h2>
<h3>From : Pacitan, Jawa Timur</h3>
<i>Kota 1001 Goa</i>
<br/>Paradise Of Java Indonesia
<hr />
<b>SHORT RESUME</b>
<center><table style="text-align:left;font-size:11px">
<tr>
<td width="50px">Blogger</td>
<td><i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star-half-empty'></i></td>
<td style="width:65px;padding-left:5px">Design</td>
<td><i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star-half-empty'></i>
<i class='fa fa-star-o'></i></td></tr>
<tr><td>Redesign</td> <td><i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star-half-empty'></i>
</td>
<td style="padding-left:5px">Edit Foto</td>
<td><i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star-o'></i>
<i class='fa fa-star-o'></i></td></tr>
<tr><td>Optimasi</td> <td><i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star-half-empty'></i>
<i class='fa fa-star-o'></i></td>
<td style="padding-left:5px">Edit video</td> <td>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star-o'></i>
<i class='fa fa-star-o'></i></td></tr>
</table></center>
<a class="showcase2" style="width:100%" title="Follow">Follow Me</a>
<br/>
<div class="medsos">
<a class="facebook tooltip" data-tooltip="Facebook" href="https://www.facebook.com/Lare-Pacitan-218369272329787/" rel="nofollow" target="_blank"><i class="fa fa-facebook-square"></i></a>
<a class="instagram tooltip" data-tooltip="Instagram" href="https://www.instagram.com/kimlp_/" rel="nofollow" target="_blank"><i class="fa fa-instagram"></i></a>
<a class="youtube tooltip" data-tooltip="Youtube" href="https://www.youtube.com/c/LarePacitan/" rel="nofollow" target="_blank"><i class="fa fa-youtube-play"></i></a>
</div>
</div>
Sebelum disimpan pastikan terlebih dahulu kamu mengganti tulisan yang saya tandai warna biru dengan alamat url foto profil/author yang ukuranya persegi bisa 200x200 atau 100x100 dan sterusnya. Kalau punya saya menggunakan foto ukuran 100x100 dan saya rasa itu sudah cukup maksimal
Langkah selanjutnya plih menu Tema
Edit HTML
Dan copy paste kode dibawah ini letakkan diantara kode CSS blog kamu
/* Css Author */
#LpAuthor {text-align:center;background-color:#fff;color:#333;line-height:20px;padding:0 10px 10px 10px}#LpAuthor img {border-radius:100px; max-width:100px;margin-bottom:10px}#LpAuthor hr {border:none; height:1px; background-color:#FF5A00; width:80%; margin:10px auto}.medsos a{display:inline-block;text-align:center;margin-right:3px;color:#fff;border-radius:1px;opacity:.9;}.medsos a i{font-family:Fontawesome;width:85px;height:40px;line-height:40px;display:block}.medsos a:hover{transform:rotate(360deg);}.medsos .facebook{background:#3a579a}.medsos .youtube{background:#cc181e}.medsos .instagram{background:linear-gradient(45deg, #7C4B9E, #EB233F, #FAB850)}
a.showcase2{display:block;background:#fff;color:#333!important;font-weight:900;font-size:16px!important;margin:0;padding:10px;text-align:center;border-radius:1px;}
Kemudian simpan dan lihat hasilnya, owiya jika tampilanya kurang menarik atau kamu mau mengubah bagian-bagian tertentu, atau ingin menambahkan ikon sosial media lainya kamu bisa melakukan perubahan sendiri dengan otak-atik kode css dan juga kode yang ada didalam widget
Blog yang cocok memasang widget abaut me di sidebbar wrapper
Pasti kalian pernah mengunjugi berbagi blog namun kamu tidak menemukan widget yang berisi tentang penulis seperti punya saya, memang menurut saya widget about me hanya cocok dan kelihatan menyatu jika dipasang pada blog personal/blog pribadi
Blog/situs besar biasanya hanya memasang about sekilas yang berada di bawah footer, nah tapi untuk blog personal blog pribadi saya sering melihat widget ini terpasang di sidebbar sebelah kanan atas dan itu pas banget menurutku
Namun itu semua tergantung selera pilik blog masing-masing, mau dipasang di bagian sebelah mana. Dan itu aja postingan artikel kali ini semoga bermanfaat jika punya pertanyaan silahkan tingalkan di kolom komentar.