Cara Membuat Halaman Profil Blogger ala KompiAjaib

Membuat Mudah Halaman Profil Blogger ala KompiAjaib | Sudah maklum di dunia blogger bahwa sebuah blog tidak hanya memiliki postingan yang bagus, tapi juga harus memiliki halaman penting (static page) seperti kontak, daftar isi, profil dan lain-lain untuk memberikan pengalaman yang baik terhadap pengunjung.

Membuat halaman profil itu sangat mudah karena bisa berisi apa saja tentang kita dan blog itu, namun alangkah baiknya jika halaman tersebut juga di desain dengan bagus seperti yang pernah dibuat oleh mas Adhy Suryadi dalam postingannya tema profil blogger yang mengharuskan kita membuat blog baru khusus profil.

Karena itulah saya berinisiatif untuk membuat halaman profil itu tanpa membuat blog baru, saya membuat di halaman statis seperti profil yang digunakan blog ini seperti gambar diatas.

Tutorial ini ada 2 cara tergantung template yang anda gunakan, AMP atau Non AMP. Gimana ingin mencobanya? ikuti langkah berikut ini;

1. Blog AMP HTML

Masuk ke Edit HTML lalu paste kode berikut ini diatas </style>

.halaman-profil .name{z-index:7;position:relative;text-align:center;font-size:28px;font-weight:700;color:#000}.halaman-profil .description p{font-size:20px;line-height:1.3;padding:0;font-weight:400;color:#000;bottom:-200px;left:50%;text-align:center}.halaman-profil .name:after,.name:before{content:"";height:3px;bottom:-5px;margin-left:-100px;left:50%}.halaman-profil .name:before{width:200px;background:#999;position:absolute;z-index:1}.halaman-profil .name:after{width:40px;background:#ff5722;position:absolute;z-index:2}.halaman-profil .logo{display:block;width:300px;height:300px;position:relative;left:50%;margin-left:-150px;text-align:center;border:12px solid #f9f9f9;border-radius:50%;z-index:8;overflow:hidden}.halaman-profil .story{font-size:22px;font-weight:700;color:#000;margin:30px 0 20px;padding:25px 0 0;border-left:none;border-top:1px solid #ddd;position:relative;text-align:center;background:none;}.halaman-profil .story:after,.story:before{content:"";height:3px;position:absolute;bottom:-5px;left:50%;margin-left:-90px}.halaman-profil .story:before{width:180px;background:#999;z-index:1}.halaman-profil .story:after{width:40px;background:#ff5722;z-index:2}.halaman-profil .columns{word-break:break-word;overflow-wrap:break-word;padding:0 16px;text-align:justify}.halaman-profil .columns p{padding:10px 0;margin:0;font-size:18px;font-weight:400;line-height:1.6;color:#000}.halaman-profil .columns p a{color:#ff5722;font-weight:700}

Masuk ke menu Halaman Blogger, lalu buatlah halaman baru (jika belum ada). Kemudian paste kode berikut di mode HTML (bukan compose)

<div class='halaman-profil'>

<div class='logo'>

<amp-img alt='Profil' height='300' src='URL-IMAGE' width='300'/>

</div>

<h2 class='name'>NAMA-PROFIL</h2>

<div class='description'>

<p><span>DESKRIPSI</span>

</p>

</div>

<h3 class='story'>Sekelumit Cerita</h3>

<div class='columns'>

<p>paragraf</p>

<p>paragraf</p>

<p>paragraf</p>

<p>paragraf</p>

</div>

</div><br/>

<amp-iframe frameborder='0' height='400' layout='responsive' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' src='EMBED-MAPS' width='700'></amp-iframe>
<br/><br/>

lalu silahkan ganti yang bertanda kuning, untuk membuat paragraf gunakan tag <p>

2. Blog Non AMP

Untuk blog non AMP lebih mudah lagi karena tak perlu masuk ke Edit HTML, langsung paste semua kodenya di halaman baru pada mode HTML.

<style>

.halaman-profil .name{z-index:7;position:relative;text-align:center;font-size:28px;font-weight:700;color:#000}.halaman-profil .description p{font-size:20px;line-height:1.3;padding:0;font-weight:400;color:#000;bottom:-200px;left:50%;text-align:center}.halaman-profil .name:after,.name:before{content:"";height:3px;bottom:-5px;margin-left:-100px;left:50%}.halaman-profil .name:before{width:200px;background:#999;position:absolute;z-index:1}.halaman-profil .name:after{width:40px;background:#ff5722;position:absolute;z-index:2}.halaman-profil .logo{display:block;width:300px;height:300px;position:relative;left:50%;margin-left:-150px;text-align:center;border:12px solid #f9f9f9;border-radius:50%;z-index:8;overflow:hidden}.halaman-profil .story{font-size:22px;font-weight:700;color:#000;margin:30px 0 20px;padding:25px 0 0;border-left:none;border-top:1px solid #ddd;position:relative;text-align:center;background:none;}.halaman-profil .story:after,.story:before{content:"";height:3px;position:absolute;bottom:-5px;left:50%;margin-left:-90px}.halaman-profil .story:before{width:180px;background:#999;z-index:1}.halaman-profil .story:after{width:40px;background:#ff5722;z-index:2}.halaman-profil .columns{word-break:break-word;overflow-wrap:break-word;padding:0 16px;text-align:justify}.halaman-profil .columns p{padding:10px 0;margin:0;font-size:18px;font-weight:400;line-height:1.6;color:#000}.halaman-profil .columns p a{color:#ff5722;font-weight:700}

</style>


<div class='halaman-profil'>

<div class='logo'>

<img alt='Profil' height='300' src='URL-IMAGE' width='300'/>

</div>

<h2 class='name'>NAMA-PROFIL</h2>

<div class='description'>

<p><span>DESKRIPSI</span>

</p>

</div>

<h3 class='story'>Sekelumit Cerita</h3>

<div class='columns'>

<p>paragraf</p>

<p>paragraf</p>

<p>paragraf</p>

<p>paragraf</p>

</div>

</div><br/>

<iframe frameborder='0' height='400' layout='responsive' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' src='EMBED-MAPS' width='700'></iframe>
<br/><br/>