Membuat Author Box Keren Responsive di blog - Susah Tidur

Membuat Author Box Keren Responsive di blog

Membuat Author Box Keren Responsive di blog
Membuat Author Box Keren Responsive di blog - SusahTidur - Halo selamat datang di Susah Tidur. Pada kesempatan kali ini saya akan membagikan sebuah tutorial tentang cara membuat Author Box Keren Responsive di blog. Author Box atau Kotak Penulis adalah sebuah kotak yang biasanya berisi identitas atau bio sang penulis konten.

Di setiap template mempunyai gaya author box sendiri - sendiri. Sama halnya Author Box di template Viomagz, yang menurut saya simple dan elegan. Namun ada kalanya rasa bosan itu muncul, yang membuat saya atau mungkin sobat juga ingin mengganti gaya author box tersebut.

Cara Membuat Author Box Keren Responsive

  1. Jangan bosen masuk Dashboard blogger sobat
  2. Menu Tema > Edit HTML 
  3. Masukkan letakkan CSS berikut tepat di atas </b:skin>
    /* Setting Dark Mode - Author */
    .Night .susahtidur-Author .bottom{background:#363d49;background-image: linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));}
    /* Auto Author Box by susahtidur.my.id */
    .susahtidur-Author{text-align:center;margin-top:20px;}
    .susahtidur-Author .top{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:flex-start;justify-content:center;}
    .susahtidur-Author .bottom{text-align:center;margin-top:-35px;padding:45px 15px 15px;border-radius:5px;background:#7bbefa;
    background-image: linear-gradient(110deg,rgba(255,255,255,0.2) 16%,rgba(255,255,255,0.2) 17%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.1) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.1) 78%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.2) 84%,rgba(255,255,255,0.2));}
    .susahtidur-Author img{width:50px;height:50px;border:5px solid #fff;border-radius:100px;}
    .susahtidur-Author .author-name{font-size:20px;font-weight:700;margin-bottom:7px;}
    .susahtidur-Author .author-name a{color:#ffffff;font-weight:700}
    .susahtidur-Author .author-desc {color: #fff;font-family: 'Google Sans',sans-serif;overflow: hidden;line-height: 1.6em;font-size:14px}
    .susahtidur-Author .author-desc a {background: transperent; border:2px solid #fff;padding: 5px 8px;color: #fff;border-radius: 7.5px;font-family: 'Google Sans',sans-serif;font-size: 13px;!important: ;}
    .susahtidur-Author .author-desc a:hover {color:#fff;}
    .susahtidur-Author .author-desc li {display : inline-block;padding-top: 5px;}
    
    Lihat kode yang saya warnai di atas, itu adalah warna background Author Box, contoh punya saya biru
  4. Kemudian cari kode di bawah ini
    <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 class='lazy' expr:data-src='data:post.authorPhoto.url' itemprop='image' oncontextmenu='return false;' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII=' 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>
    dan ganti kode di atas dengan kode di bawah ini
    <b:if cond='data:post.authorAboutMe'>
    <div class='susahtidur-Author'>
    <b:if cond='data:post.authorPhoto.url'>
    <div class='top'>
    <img itemprop='image' expr:src='data:post.authorPhoto.url' width='90px'/>
    </div>
    </b:if>
    <div class='bottom'>
    <div class='author-name'>
    <a expr:href='data:post.authorProfileUrl' rel='author' expr:title='data:post.author'>
    <span itemprop='name'><data:post.author/></span>
    </a>
    </div>
    <div class='author-desc'><data:post.authorAboutMe/>
    <br/>
    <li><a href='https://www.facebook.com/URL-FB' title='Facebook'>Facebook</a></li>
    <li><a href='https://wa.me/NO-WA' title='WhatsApp'>WhatsApp</a></li>
    <li><a href='https://www.instagram.com/URL-IG' title='Instagram'>Instagram</a></li>
    </div>
    </div>
    </div>
    </b:if>
    Lihat kode kode yang saya warnai itu adalah URL Facebook, No Wa, dan URL Instagram, ganti ke url sobat
  5. Kemudian simpan


Selesai sudah tutorial cara membuat Author Box Keren Responsive di blog. Jika masih kurang paham silahkan berkomentar. Sekian dan terimakasih telah berkunjung ke SusahTidur
"Membuat Author Box Keren Responsive di blog"
Tampilkan Komentar
Sembunyikan Komentar

Belum ada Komentar untuk "Membuat Author Box Keren Responsive di blog"

Posting Komentar

Jangan malu bertanya!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel