For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Cara membuat Author Box dibawah postingan blogger otomatis

Hello sobat desain kali ini saya akan memberikan informsi seputar desain web dalam membahas mambuat atau mempercantik lagi tampilan author box Profile didalam sebuah blog di blogger

Nah sobat desain jika akmu tidak mengaktifkan fitur berbagi Profile pada pengaturan akun blogger kamu, maka meskipun kamu mmebuat kotak author box, Kotak author tersebut tidak akan muncul atau menampilkan fungsinya

Mengaktifkan Bagikan Profile

Jadi jika kamu ingin menampilkan kotak profil secara otomatis maka perhatikan beberapa langkah yang bisa kamu ikuti :

  • Pergi keakun blogger kamu
  • Kemudian centang bagikan Profile saya
  • dan simpan

Didalam pengaturan akun blogger kamu bisa menyetel nama, deskripsi, Biodata kamu, photo kamu, hobi serta minat kamu, dan lain sebaginya untuk ditampilkan didalam blog

Dibawah postingan

Langkah berikutnya untuk menampilkan Author box Profile didalam postingan blog secara otomatis, kamu harus mengaktifksn salah satu fitur didalam Menu Tata letak :

  • Pergi keakun Blogger kamu
  • Kemudian pergi lagi ke menu Tata letak
  • Kemudian lihat Widget Blog klik edit disamping (dibawah/diatas) nya
  • Centang Tampilkan Profil saya dibawah postingan
  • Kemudian Simpan

Cara penerapan

Setelah kamu mengaktifkan semua langkah diatas, kemudian kita bisa membuat Tampilan Author box profile nya, oke 👌

Untuk memulainya salin dan tempelkan kode CSS berikut ini diatas kode ]]></b;skin> atau sebelum kode ]]></b;skin>

/* Author profil ~ by Icloudice (don't remove ok) */
.rah-author-profil{overflow:hidden;background:#fefefe;padding:15px;margin:30px 0;line-height:1.5}
.rah-follow-profil{float:left;margin-right:15px}.rah-follow-profil a{display:block;font-size:14px;text-align:center;}
.rah-author-profil .writer-rah-name{font-weight:bold;color:#f80000;font-size:18px}
.rah-author-profil .writer-rah-name:hover {color:#f80000;}
.writer-rah > span {display:block;margin-top:5px;font-size:15px;opacity:0.8;overflow:hidden}

Ganti kode Author Defeult

Kemudian kamu bisa mengganti kode HTML Author Box Defeult nya, maksudnya kode HTML Author box yang sudah ada didalam templatenya

⚠️ Setiap template memiliki Tata letak yang berbeda beda, cari saja kode html tersebut

Saya akan memberikan kode html author box sebagi contoh lihat kode berikut ini

<b:includable id='authorbox' var='post'> 
<!-- Sampai kode -->
</b:includable>

Setelah ketemu ganti semua kode tersebut dengan kode HTML dibawah ini

<b:includable id='authorboxresponsif' var='post'>
<!-- Author Box Profile ~ by Icloudice.com -->
<b:if cond='data:post.authorAboutMe'>
<div class='rah-author-profil' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<div class='rah-follow-profil'>
<b:if cond='data:post.authorPhoto.url'>    <img expr:src='data:post.authorPhoto.url' itemprop='image' width='90px'/> 
</b:if>
<a href='/' rel='nofollow noopener' target='_blank' title='Ikuti Blog'>Hubungi</a>  </div>
<div class='writer-rah'> <a class='writer-rah-name' href='/' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'>
<data:post.author/>
</span></a><svg style='width:16px;height:16px' viewBox='0 0 24 24'><path d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z' fill='#f80000'/></svg>
<span itemprop='description'>
<data:post.authorAboutMe/>
</span>
</div>
</div>
</b:if>
</b:includable>

Nah sobat bisa mengkreasikan sendiri tampilan Author box nya agar semakin keren dan menarik, tatapi dengan kode author box yang saya bagikan juga sudah keren dan responsif pastinya 😊

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.