×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Widget Author Box Profile Blogger

December 31, 2019   • 4 Comments

Haii teman teman blogger, pada postingan ini saya akan membagikan bagaimana caranya membuat Author Box Profile Ala Anirocksite. Author Box Profile berfungsi sebagai pengenal atau bio seorang penulis yang ada diblog tersebut. Author Box Profile biasanya diletakkan di akhir postingan atau bawah postingan, jika kamu bosan dengan tampilan author box profile yang biasa biasa aja atau bawaan dari template tersebut, kamu dapat mengikuti Tutorial diArtikel ini.

Author box profile ini sangat banyak manfaatnya, dengan memasang author box profile pastinya blog akan terlihat lebih menarik dan lebih lengkap, para senior senior blog juga menggunakan author box profile agar para pembaca mengetahui siapa penulis dan pendiri dari situs blog tersebut, Selain itu menggunakan widget Author box profile akan terlihat professional oleh karena itu pentingnya memasang widget tersebut.

Sebenarnya tiap template sudah memiliki widget author box profile dan kamu hanya perlu memasangnya dan jika tampilan author box profile dilihat kurang menarik maka kita hanya perlu melakukan desain. Nah jika kamu ingin mendesain author box ini langsung saja Terapkan tutor dibawah ini.
Penting Untuk Melakukan Backup apabila terjadi kesalahan pada saat melakukan penyettingan HTML

Cara Membuat Author Box Profile

  1. Pertama login dulu ke Blogger,
  2. Masuk ke menu Tema > Edit HTML,
  3. Copy kode CSS dibawah ini dan letakkan tepat diatas kode </b:skin>,
    .anirock-Author{text-align:center;margin-top:20px;border-top:2px solid #efefef;}
    .anirock-Author .top{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:flex-start;justify-content:center;}
    .anirock-Author .bottom{background-color: #ffcce6;text-align:center;margin-top:-35px;padding:45px 15px 15px;border-radius:5px}
    .anirock-Author img{width:50px;height:50px;border:5px solid #fff;border-radius:100px;}
    .anirock-Author .author-name{font-size:20px;font-weight:700;margin-bottom:7px;}
    .anirock-Author .author-name a{color:#333333;font-weight:500}
    .anirock-Author .author-name a:hover{color:#ff69b4;}
    .anirock-Author .author-desc {color: #656565;font-family: 'Google Sans',sans-serif;overflow: hidden;line-height: 1.6em;font-size:14px}
    .anirock-Author .author-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;}
    .anirock-Author .author-desc a:hover {color:#ff69b4;}
    .anirock-Author .author-desc li {display : inline-block}
    
  4. Kemudian cari kode <b:includable id='postauthorbox' var='post'>, dan Hapus semua kode yang ada didalamnya, kodenya seperti dibawah ini (Untuk template selain Viomagz silahkan cari sendiri kode author boxnya),
    <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. Setelah dihapus kemudian ganti dengan kode dibawah ini 
    <b:if cond='data:post.authorAboutMe'>
    <div class='anirock-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/1601347072632005256' rel='author' title='Miradeviluke Rock'>
    <span itemprop='name'><data:post.author/></span>
    </a>
    </div>
    <div class='author-desc'><data:post.authorAboutMe/>
      <br/>
      <li><a href='https://www.facebook.com/rahman.arcadia' title='Facebook'>Facebook</a></li>
    <li><a href='https://www.twitter.com/@rahmannm3' title='Twitter'>Twitter</a></li>
      <li><a href='https://www.instagram.com/rahman.n19' title='Instagram'>Instagram</a></li>
    </div>
    </div>
    </div>
          </b:if>
    </b:includable>
    
    Pada teks yang saya beri highlighter pink ganti dengan punya kalian
  6. Terakhir simpan template.
Untuk memunculkannya dibawah postingan masuk ke Tata Letak > Widget Posting Blog > Edit > Tampilkan Profil Pengarang Dibawah Post. 

Sekian tutorial bagaimana cara membuat author box profile, untuk DEMOnya kalian dapat melihat diakhir postingan ini. Jika kalian rasa tampilan author box yang saya bagikan ini ada yang kurang kalian dapat memodifikasinya menjadi semenarik mungkin. 

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

4 Responses to "Cara Membuat Widget Author Box Profile Blogger"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

  1. Permisi, saya kok nggak bisa ya? Sudah saya klik berkali2 tombol SIMPAN di EDIT HTML, tapi gabisa. Apakah ada yg salah kode atau gimana ya? Semua cara2nya sudah saya ikuti. Mohon bantuannya Min... :(

    ReplyDelete
    Replies
    1. Kodenya Work kok, udah banyak yg make juga, silahlan dicoba lagi

      Delete

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright 2020 Anirock Site - All Rights Reserved Created With