Cara Saya Membuat Widget About Me Keren Di Blog | Lare Pacitan

Blog personal yang berisi artikel bisnis online

Latest Update
Fetching data...

Cara Saya Membuat Widget About Me Keren Di Blog

Cara yang saya lakukan untuk membuat sebuah widget About Me responsive dan keren di blog, lengkap dengan foto author, alamat, keahlian dan juga icon sosial media. Demo seperti yang terpapar pada widget paling atas sebelah kanan dari blog ini

Saya tertarik membuat tutorial atau cara membuat widget Tentang penulis/pemilik blog ini karena berawal dari yang saya lakukan search google tutorial membuat widget about me keren dan sepertinya saya tidak menemukan yang saya harapkan

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

Baca juga :  Cara membuat widgte subscribe email di blog

Nah jika 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

Widget About Me Keren Di Blog

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

Baca juga : 8 Rekomendasi tempat untuk membeli dan download template blog terbaik

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.

Add your comment
EmoticonEmoticon