Cara Membuat Profil ‘Tentang Saya’ yang Keren di Blog

Rozak's Blog - Setiap blogger pasti ingin memiliki tampilan blog yang keren. Baik tiap item, maupun seluruhnya. Tak terkecuali tampilan profil pada widget blog. Singkatnya, para blogger memang sebaiknya menampilkan profil ringkas secara utuh pada widget blog untuk memberikan informasi siapa pemilik blog tersebut. Untuk profil lengkapnya bisa diletakkan pada laman blog.

Sebenarnya blogger dot com sudah memberikan pilihan profil default pada menu Tata Letak ‘Tambahkan Widget’. Sebut saja widget Profil Google Plus, atau perpaduan gambar dan teks. Tapi banyak blogger yang ingin tampilan profil singkatnya lebih keren. 

Menanggapi keinginan itu, artikel kali ini akan memberikan cara bagaimana membuat profil ‘Tentang Saya’ yang keren di widget blog. Jika cara ini diterapkan, setidaknya tampilan nantinya akan sama seperti profil blog saya. Yukk simak langkah-langkah di bawah ini:

Langkah Pertama
Silahkan masuk ke menu ‘Laman’ atau ‘Page’ pada Dasboard. Setelah itu, pilih ‘halaman baru’ atau ‘new page’, dan anda akan diarahkan pada halaman posting. Setelah itu, masukan gambar atau foto yang ingin dijadikan profil, lalu simpan dan publikasikan!

 

 

Langkah selanjutnya, kembali ke menu ‘Laman’, dan lihat laman baru yang anda buat tadi. Anda akan diarahkan pada postingan laman gambar yang anda masukan. Arahkan cursor / mouse pada gambar > klik kanan > lihat gambar. Nah, pada gambar di bawah ini, yang tunjukkan pada garis merah adalah URL gambar yang nantinya sebagai sumber foto profil.

 

 

Langkah Kedua
Langkah berikutnya ialah menyiapkan script HTML yang akan digunakan untuk membuat Profil. Sebelumnya, silahkan masuk ke menu ‘Tata Letak’ atau ‘Layout’ pada Dasboard. Setelah itu ‘tambahkan widget’ atau ‘gadget’ pada area yang ingin dipasang profil > lalu pilih HTML/JavaScript. Selanjutnya, copy dan paste kode di bawah ini pada lembar kerja.

 

<div class="about-widget-image">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0NOukNDWoye1xHFlVWfHbD0bYXGgvxWji7SB2q9lM21kuUm0R_l5EwhuRdI5K-oUXXUjZA8hkTVOSHXmhmFphWBMewxCXM5NlOAjtpTXtYUXv924EVM1EfOz-4LccYWpjrfIuQJxp1Tw4/s640/Rozak.png" oncontextmenu="return false;" alt="Tentang Saya" /></div>

<div style="text-align: justify">A.D. Rozak || Seorang blogger aktif sejak 2010, yang hingga saat ini telah memiliki lebih dari 10 blog. Selain blogger, Laki-laki berwajah sangar ini penulis buku yang belum terkenal, dan juga penulis di beberapa media.
<a href="#" style="
    text-decoration: underline;
">Selengkapnya →</a></div>

<style>
.about-widget-image {
max-height: 260px;
overflow:hidden;
margin-bottom: 15px;
}</style>

Keterangan kode Script
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0NOukNDWoye1xHFlVWfHbD0bYXGgvxWji7SB2q9lM21kuUm0R_l5EwhuRdI5K-oUXXUjZA8hkTVOSHXmhmFphWBMewxCXM5NlOAjtpTXtYUXv924EVM1EfOz-4LccYWpjrfIuQJxp1Tw4/s640/Rozak.png"

Kode yang berwarna merah merupakan link/sumber gambar. Anda bisa menggantinya dengan link gambar pada laman yang sudah dibuat tadi.

<div style="text-align: justify">A.D. Rozak || Seorang blogger aktif sejak 2010, yang hingga saat ini telah memiliki lebih dari 10 blog. Selain blogger, Laki-laki berwajah sangar ini penulis buku yang belum terkenal, dan juga penulis di beberapa media.

Kode berwarna merah merupakan deskripsi profil yang ingin ditampilkan. Anda bisa mengubahnya sesuai dengan deskripsi profil yang anda inginkan.

<a href="https://www.adrozak.web.id" style="
text-decoration: underline;
">Selengkapnya →</a></div>

Kode berwarna merah merupakan target link ketika teks 'Selengkapnya' diklik. Anda bisa mengubahnya dengan link profil lengkap pada blog anda.

Jika sudah dirasa sesuai, silahkan klik simpan dan lihat hasilnya. Selamat, tampilan profil ringkas pada blog anda sudah jadi keren. ^^

Share :