Cara Membuat Kotak About Me Di Blog




Cara membuat Kotak About me dengan mudah dan keren pada blog,Pada postingan kali ini akan membahas seputar Blogging lagi ,yang berkaitan dengan pembuatan Info About me pada Blog menggunakan Html.

Pada setiap blog yang sangat populer,Pasti akan Memasangkan sebuah data diri berupa Kotak dengan lampiran foto,Tentang atau tulisan singkat,Alamat yang menuju ke akun media sosial seperti facebook twitter Google dan juga youtube.

Sebenarnya kalian juga bisa membuat kotak About Me pada blogger dengan menggunakan fitur yang telah di sediakan oleh Blogger.

Namun terkadang hasil nya yang kurang keren dan juga kurang bagus,Hmm.
Jika kalian ingin melihatnya silahkan saja buat sebuah kontak About Me dari blogger dengan cara:
  • Buka Dasbhord blogger
  • Pilih layout
  • Klik add widget
  • dan pilih Profil
  • Lihatlah hasilnya ,apakah begitu menarik atau tidak
Jika kalian menganggapnya kurang menarik atau kurang keren,kalian juga bisa membuat sebuah kontak about me dengan menggunakan tambahan atau Kode HTML tertentu,

Nah pada postingan kali ini ,Bloginjase akan mencoba menguraikan kode HTML yang dapat kalian gunakan untuk membuat kotak about me yang lebih keren dan sangat mudah tentunya.

Cara Membuat Kotak About Me Keren Dan Mudah Pada Blogspot
Ingin tahu caranya?
Cara nya hanyalah menambahkan kode html ,dan mengedit kode HTML tersebut pada bagian seperti ulr alamat yang menuju ke akun media sosial kalian dan lain sebagainya,Berikut ini adalah kode HTML yang dapat kalian gunakan untuk membuat kotak about me yang menarik.

<div class="separator" style="margin-bottom:2px; clear: both; text-align: center;">
<img border="0" height="auto" src="https://4.bp.blogspot.com/-gl7kG-_7tIs/WBK9y-6WH_I/AAAAAAAAGzc/2Xh5ppp-fwo1tEQIA20EGB__b1_YcxIEgCLcB/s320/heru-arya-avatar.png" width="100%" /></div>
<div style="margin-bottom:2px; text-align: center;">
<b><span style="font-size: large;">HERU ARYA</span></b></div>
<div style="margin-bottom:3px; text-align: justify;">
Hanya seorang alumni Sarjana Pertanian. Sekarang sedang fokus menikmati hidup sambil mengisi waktu untuk ngeblog.&nbsp;<br/><div style="text-align: right;"><a href="https://tulisanwortel.com/about/" target="_blank"><b>Read more &gt;</b></a>
</div>
<div style="margin-bottom:5px; border-bottom: 2px solid #ff9900; padding: 3px; text-align: center;">
</div>
<div style="text-align: center;">
<a href="URL Facebook (akun fanspage atau pribadi)" target="_blank" title="Like/Follow"><img border="0" src="https://2.bp.blogspot.com/-5xI5g1PAIqE/WBK8lJoT7hI/AAAAAAAAGy8/X9IvZ81hlEsch6tnZ6SHQkD8UTN6-SMYACLcB/s1600/facebook.png" style="border: medium none; position: relative;" / /></a>
<a href="URL Twitter" target="_blank" title="Follow Me"><img border="0" src="https://1.bp.blogspot.com/--joAGzKe9aw/WBK8mG7HAMI/AAAAAAAAGzM/ZfPlo-vm0_c9ITw-tCZMtJnnRep2B_dbQCLcB/s1600/twitter.png" style="border: medium none; position: relative;" / /></a>
<a href="URL Google +" target="_blank" title="Follow Me"><img border="0" src="https://4.bp.blogspot.com/-eV-8gKAEpPQ/WBK8lL35yyI/AAAAAAAAGy0/pw6rw0MDKzMDijgXPpl_7E0d5Jti60yEwCLcB/s1600/google-plus.png" style="border: medium none; position: relative;" / /></a>
<a href="URL Instagram" target="_blank" title="Follow Me"><img border="0" src="https://4.bp.blogspot.com/-b-Iffdd6CVo/WBK8lhXYojI/AAAAAAAAGzA/eJUm3xnxru4O93DynqA9Ktfz1cxMu6FZgCLcB/s1600/instagram.png" style="border: medium none; position: relative;" / /></a>
<a href="URL Youtube" target="_blank" title="Subscribe"><img border="0" src="https://1.bp.blogspot.com/-SRzFNqRsWWs/WBK8mUgvG9I/AAAAAAAAGzQ/UJtn2k4fsmI8F7xURmB3dHI6hzRXYrK4gCLcB/s1600/youtube.png" style="border: medium none; position: relative;" / /></a>
<a href="URL AskFM" target="_blank" title="Ask Me"><img border="0" src="https://3.bp.blogspot.com/-OmOCIFhzD2o/WBK8lHlnu_I/AAAAAAAAGy4/_6B5eQXm2PUgjcfNJMxFde6KbJ8rv4L6ACLcB/s1600/ask-fm.png" style="border: medium none; position: relative;" / /></a>
<a href="URL Pinterest" target="_blank" title="Follow"><img border="0" src="https://1.bp.blogspot.com/-JWxdMPrCVfA/WBK8l2nYw8I/AAAAAAAAGzI/83GGnKVuphIYoCsTxXOOGsu9gu4Nc2s6gCLcB/s1600/pinterest.png" style="border: medium none; position: relative;" / /></a>
<a href="URL Tumblr" target="_blank" title="Visit"><img border="0" src="https://1.bp.blogspot.com/-21d4bn_reVE/WBK6gd-RgdI/AAAAAAAAGx8/KKxqaNVtCzYYQXs6igNbeG_94X0VsOx7ACLcB/s1600/tumblr.png" style="border: medium none; position: relative;" / /></a>
</div></div>


Kode html di atas dapat kalian ganti di beberapa bagian seperti Tapi sebelumnya ,copy terlebih dahulu kode di atas dan edit menggunakan Notepad dan Sublime txt.
  1. Ganti teks warna Merah pada URL gambar,Dapat kalian ganti dengan URL gambar kalian,yang akan di jadikan sebagai Foto profil pada kotak about me kalian nantinya.
  2. Ganti teks yang berwarna Kuning HERU KARYA dengan nama dan deskripsi singkat tentang kalian.
  3. Ganti teks yang berwarna Putih ,jika kalian ingin tampilan deskripsi yang sejajar di tengah
  4. Ganti teks yang berwarna yang berwarna Hijau dengan URL yang mengarah ke halaman about me kalian di blogger.
  5. Ganti teks yang berwarna Orange  dengan dengan Center ,Jika kalian menginginkan Read more berada di tengah.
  6. Dan terakhir ganti semua Url yang menuju ke Url profil sosial media kalian,seperti URL facebook.,Google + url instagram ,Url Youtube,Url AskFm ,Url piterest, URL Tumblr.
  7. Dan terakhir cara memasangnya pada Blog,Buka Dasbord,Klik layout dan pilih tambah widget,Pilih HTML/JavaScript ,paste kode diatas dan save.
Nah di atas adalah kode untuk membuat kotak about me yang keren untuk blog blogger atau Blogspot kalian,Sangat mudah banget kan geng.!!

Jika kalian ingin melihat hasilnya,Maka seperti di bawah ini adalah hasilnya untuk kotak about me dan kode html di atas.


Gambar di atas adalah tampilan dari widget blog yang berada di sebelah kanan isi konten blog,Cukup lumayan keren,Jika kalian menginginkannya ,kalian bisa menggunakan kode html yang sudah ada di atas,Jangan lupa untuk di edit juga untuk masalah Url nya,Agar kompatibel dan lengkap.

Cukup mudah kan geng ..!!


Artikel Terkait

Postingan populer dari blog ini

Begini Cara Memasang iklan penelusuran bersponsor google adsense Di Blog

Cara Menampilkan Traffic Data Koneksi Internet Pada Laptop

Membuat Related Post Grid Untuk Template AMP Blogger

Cara Mengatasi Gagal Install Driver VGA Pada windows 7 All version

Cara Membuat Akun Google Adsense Hosted Terbaru

Download Template Igniel versi premium Gratis

Cara membuat Link Model no follow dan Do follow

Tutorial Full Flash Smartphone OPPO A37 ,Lupa Pola

Cara Membuat Artikel Terkait DiBawah Postingan Blogger

Cara Parse Kode Java Scritp Google Adsense