Cara Membuat About Me Keren Di Blog

Membuat about Me di blog

 

Hallo sobat. Selamat datang kembali dalam artikel catatan Nurul Huda. Pada kesempatan kali ini saya ingin berbagi tips cara membuat about me keren di blog. Selain membuat about me dengan widget bawaan blog, kita juga bisa membuat about me di blog sesuai dengan keingan kita. Dengan memasukan sedikit bumbu-bumbu css kita akana membuat sebuat about me yang cantik :)  Halaman about me yang akan kita buat di sini kurang lebih nya seperti gambar di bawah ini.

Terdiri dari bingkai kotak yang dalam nya terdapat foto vektor avatar dan di bawahnya beberapa deskiripsi tentang diri kalian. Kenapa hanya beberapa deskripsi ? tentu, karena about me yang akan kita buat adalah widget about me. Tentang penjalasan lebih detail tentang data diri kalian akan di lanjutkan menggunakan tombol "Read More" untuk melanjutkan ke halaman about me yang sudah di buat sebelumnya. Di bawah deskripsi data diri kita taruh pemanis seperti tombol untuk menghubungkan ke media sosial. Untuk cara nya silahkan di simak pada setiap step pembuatan about me di bawah ini.

Cara membuat widget about me keren di blog.

Lankah pertama persiapkan bahan gambar avatar.

1. Persiapkan terlebih dahulu gambar avatar yang akan di tampilkan pada widget about me. Jika belum punya bisa silahkan download dulu di sini.

2. Di sini saya menggunakan gambar yang menurut saya bagus yang saya download dari link di atas. Untuk pilihan gambar silahkan pilih sesuka anda. :) Sekedar saran untuk pemilihan gambar dengan format PNG.

3. Setelah gambar terdownload silahkan upload gambar pada halaman blog. Dan salin link address gambar yang sudah ter-upload dengan cara klik kanan > copy url address picture.

 Lankah kedua salin source code widget about me.

1. Salin semua kode di bawah ini dan taruh pada tata letak blog anda. Untuk posisinya saya menaruh pada posisi bawah blog. Silahkan anda sesuaikan tata letak penempatan aboutme sesuai dengan keinginan anda. Biasanya kebanyakan blogger menaruh widget about me di bagian sisi kanan blog.

 <div class="separator" style="margin-bottom:2px; clear: both; text-align: center;">  
   <img border="0" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV8ZFkZDlfcChALGDs_IgfPk1cZ5Lr9ZqlXjfR3r8p0sCrXyhNuFghFSVgQty155XFWEaAR-seQOnwFFSYP2AL6lZDZdeRTsgPBgY9-i3ImHRkmD_Y45A8Skx7NVQnlfS2GkraBxTdUvY/s1600/student.png" width="100%" /></div>  
   <div style="margin-bottom:2px; text-align: center;">  
   <b><span style="font-size: large;"></span></b></div>  
     <div style="margin-bottom:3px; text-align: justify;">  
       Hanya seorang pemula yang ingin berbagi pengalaman. Kebetulan background pekerjaan bekerja di bidang network jaringan dan sedang menempuh kuliah jurusan IT. Lewat Blog inilah saya ingin berbagi pengalaman apa yang sudah saya ketahui :) Mudah-mudahan apa yang saya sharing dalam setiap artikel bisa bermanfaat dan bisa menambah pahala untuk saya..hehe .&nbsp;<br/><div style="text-align: right;"><a href="http://www.nurul-huda.ga/p/about-me.html" 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./-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./--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./-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./-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./-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./-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./-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./-21d4bn_reVE/WBK6gd-RgdI/AAAAAAAAGx8/KKxqaNVtCzYYQXs6igNbeG_94X0VsOx7ACLcB/s1600/tumblr.png" style="border: medium none; position: relative;" / /></a>  
     </div>  
   </div>  

2. Pada tag img di atas silahkan ganti url link address gambar yang sudah kalian upload sebelumnya.

3. Dan untuk keterangan deskripsi bisa kalian edit sesuai dengan data diri kalian tentunya :)

4. Untuk tombol media sosial bisa kalian hubungkan dengan url media sosial pada tag a href di atas.

Cukup sampai di sini pembuatn widget about me sudah selesai. Bagaimana teman-teman ? cukup keren bukan :) Jika ada langkah yang mungkin menurut kalian masih bingung bisa silahkan di tanyakan pada kolom komentar di bawah. Terimakasih sudah berkunjung dan membaca :)