Cara Mengganti Tampilan Author Box Viomagz Menjadi Lebih Style

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Mengganti Tampilan Author Box Viomagz Menjadi Lebih Style dan enak untuk di pandang pengunjung blog kamu, author ini sangat banyak fungsinya untuk blog personal kamu salah satunya adalah untuk tanda pengenal blog atau bio yang mempunyai blog tersebut.


Nah, untuk kamu yang sudah bosan dengan tampilan author yang itu-itu saja, kamu bisa menggantikan author ya dengan yang lebih style untuk demonya seperti blog saya ini kamu bisa melihatnya dibawah artikel ini, jika kamu tertarik untuk menggantinya silahkan kamu ikuti tutorial berikut ini.

Cara Mengganti Tampilan Author Box Viomagz Menjadi Lebih Style

1. Silahkan kamu login ke blogger.com dengan menggunakan akun Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Silahkan kamu cari kode ]]></b:skin> dan paste kode dibawah ini tepat DIATAS kode tersebut.

.jagoan-Author{text-align:center;margin-top:20px;border-top:2px solid #efefef;}
.jagoan-Author .top{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:flex-start;justify-content:center;}
.jagoan-Author .bottom{background-color: #ffcce6;text-align:center;margin-top:-35px;padding:45px 15px 15px;border-radius:5px}
.jagoan-Author img{width:50px;height:50px;border:5px solid #fff;border-radius:100px;}
.jagoan-Author .author-name{font-size:20px;font-weight:700;margin-bottom:7px;}
.jagoan-Author .author-name a{color:#333333;font-weight:500}
.jagoan-Author .author-name a:hover{color:#ff69b4;}
.jagoan-Author .jagoan-desc {color: #656565;font-family: 'Google Sans',sans-serif;overflow: hidden;line-height: 1.6em;font-size:14px}
.jagoan-Author .jagoan-desc a {background: #ffcce6;padding: 4px 8px;color: black;border-radius: 100px;box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);-webkit-box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);font-family: 'Google Sans',sans-serif;font-size: 13px;!important;}
.jagoan-Author .jagoan-desc a:hover {color:#ff69b4;}
.jagoan-Author .jagoan-desc li {display : inline-block}

4. Selanjutnya cari kode berikut ini <b:includable id='postauthorbox' var='post'> dan hapus semua kode yang didalamnya untuk contoh kode viomagz seperti dibawah ini.

<b:includable id='postauthorbox' var='post'>
<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
  <b:if cond='data:post.authorPhoto.url'>
 <img expr:src='data:post.authorPhoto.url' itemprop='image' width='90px'/>
  </b:if>
  <div>
 <a class='g-profile' href='/' itemprop='url' rel='author' title='author profile'>
   <span itemprop='name'><data:post.author/></span>
 </a>
  </div>
  <span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if>
</b:includable>

5. Kalau sudah kamu hapus silahkan kamu ganti dengan kode dibawah ini.

<b:if cond='data:post.authorAboutMe'>
<div class='jagoan-Author'>
<div class='top'>
 <b:if cond='data:post.authorPhoto.url'>
    <img expr:src='data:post.authorPhoto.url' itemprop='image' width='90px'/>
  </b:if>
</div>
<div class='bottom'>
<div class='author-name'>
<a href='https://www.blogger.com/profile/2147224674861326099' rel='author' title='Jagoan Design'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<div class='author-desc'><data:post.authorAboutMe/>
  <br/>
  <li><a href='https://www.facebook.com/AhmdFebryan' title='Facebook'>Facebook</a></li>
<li><a href='https://www.twitter.com/jagoandzgn' title='Twitter'>Twitter</a></li>
  <li><a href='https://www.instagram.com/ahmdfbryan' title='Instagram'>Instagram</a></li>
</div>
</div>
</div>
      </b:if>
</b:includable>

6. Kalau sudah silahkan klik SIMPAN dan Selesai.

Untuk menampilkan author box tersebut silahkan kamu masuk ke menu Tata Letak > Widget Posting Blog > Edit > Tampilkan profil Pengarang Dibawah Judul.

Bagaimana mudah bukan untuk tutorial Cara Mengganti Tampilan Author Box Viomagz Menjadi Lebih style dengan mudah, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.
Seorang yang memiliki kepribadian yang menyendiri, tanpa mengenal dunia luar hanya melalui dunia online saja.
  • Facebook
  • WhatsApp
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    2 Komentar

    1. Mas mau tanya, kok semua nama author ikut terganti ya.. misal di bawah judul..

      BalasHapus
      Balasan
      1. itu CSSnya salah lho min bagian akhir..

        tepatnya di "jagoan-Author .jagoan-desc" harusnya ".jagoan-Author author-desc"

        betewe makasih atas kodenya..

        Hapus

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel