Cara Membuat Widget About Me Keren | Halo sobat, kembali lagi dengan admin GudangTutorial yang selalu update postingan setiap harinya. Pada pagi yang cerah ini, admin akan membagikan sebuat tutorial atau cara untuk membuat widget About Me yang keren. Widget ini sudah admin edit sedemikian rupa agar menarik untuk dilihat dan pastinya fast loading.
Widget yang admin bagikan ini berbeda dengan widget About Me standar buatan/bawaan blogger. Widget About Me ini istimewa. Sobat bisa lihat di sidebar blog ini, bagus bukan? Tenang aja, admin akan bagikan untuk sobat semua. Widget ini sudah responsive dan pastinya fast loading. Widget About Me yang admin bagikan ini juga sudah dilengkapi dengan tombol media sosial. Sangat lengkap bukan? Cara pemasangan juga mudah kok sobat.
Sebagai foto profil, sobat membutuhkan gambar atau foto dengan ukuran persegi atau bulat agar lebih menarik. Sebenarnya, tidak perlu buat gambar bulat, cukup persegi saja nanti akan terpotong menjadi lingkaran dengan sendirinya. Oke sobat, mungkin sudah tidak sabar ya. Langsung aja ke TKP!
- Cara Membuat Widget About Me Keren -
1. Login ke Blogger.com > Tata Letak (Layout)
2. Scroll ke sidebar dan klik Tambahkan Gadget (Add Gadget) maka akan muncul pop up baru. Lalu klik + pada HTML/Javascript.
3. Isi judul sidebarnya dengan About Me atau apapun yang sobat mau. Jika sudah, copy dan paste kode di bawah ini ke kotak di bawahnya.
<img alt="Yahya Abdillah" title="Yahya Abdillah" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIbTO6uQaYXfyLGtOkYkRwZgBtzdxx4XAD4EahDpeSmNqzMChyMgiQSvFXoWjv1WVnLo8zwSYduaEgj_wHywXEpoNJ3oV2_7mUcUVKTioTw0sZlo5qu70JwgyR1RzFJk8vBB7LdssM2ld6/s1600/topeng%25252Banonymous.jpg" width="75" height="75" style="float:right;margin:0 0 10px 15px;border-radius:50%;overflow:hidden" />
<span style="font-size:0.9em">Yahya Abdillah | Hanyalah seorang blogger biasa yang bercita-cita tinggi dan berusaha mencari hal yang baru.</span>
<div class="clear"></div>
<a title="themeforest" target="_blank" href="https://themeforest.net/user/usename"><img alt="envato" title="themeforest" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/envato.svg" /></a>
<a title="behance" target="_blank" href="https://www.behance.net/username"><img alt="behance" title="behance" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/behance.svg" /></a>
<a title="dribbble" target="_blank" href="https://dribbble.com/username"><img alt="dribbble" title="dribbble" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/dribbble.svg" /></a>
<a title="twitter" target="_blank" href="https://twitter.com/username"><img alt="twitter" title="twitter" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/twitter.svg" /></a>
<a title="google" target="_blank" href="https://plus.google.com/111623490883914426836"><img alt="google" title="google" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/google.svg" /></a>
<a title="instagram" target="_blank" href="https://instagram.com/username"><img alt="instagram" title="instagram" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/instagram.svg" /></a>
<div style="clear:both"></div>
<span style="font-size:0.9em">Yahya Abdillah | Hanyalah seorang blogger biasa yang bercita-cita tinggi dan berusaha mencari hal yang baru.</span>
<div class="clear"></div>
<a title="themeforest" target="_blank" href="https://themeforest.net/user/usename"><img alt="envato" title="themeforest" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/envato.svg" /></a>
<a title="behance" target="_blank" href="https://www.behance.net/username"><img alt="behance" title="behance" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/behance.svg" /></a>
<a title="dribbble" target="_blank" href="https://dribbble.com/username"><img alt="dribbble" title="dribbble" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/dribbble.svg" /></a>
<a title="twitter" target="_blank" href="https://twitter.com/username"><img alt="twitter" title="twitter" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/twitter.svg" /></a>
<a title="google" target="_blank" href="https://plus.google.com/111623490883914426836"><img alt="google" title="google" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/google.svg" /></a>
<a title="instagram" target="_blank" href="https://instagram.com/username"><img alt="instagram" title="instagram" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/instagram.svg" /></a>
<div style="clear:both"></div>
Keterangan warna:
- Ganti pink dengan judul widget About Me sobat. Bisa nama atau terserah sobat.
- Ganti warna hijau dengan link/URL gambar milik sobat.
- Ganti warna á’–ungu dengan deskripsi sobat.
- Ganti warna merah dengan link/URL media sosial sobat.
4. Setelah selesai, save kode tersebut.
Sekarang, sobat bisa cek blog sobat. Hasilnya akan seperti ini:
5. Selamat, sobat telah berhasil membuat "Widget About Me Keren"
Cukup sekian artikel tentang cara membuat widget About Me keren. Jangan lupa tinggalkan komentar dan share artikel ini. Selamat mencoba dan semoga bermanfaat.
0 comments:
Post a Comment