Cara Menampilkan Profil Author Responsive di Bawah Postingan Blog

Cara Membuat Profil Author Responsive di Bawah Postingan Blog - Setelah kemarin saya membuat posting tentang cara membuat sticky widget pada blog, kali ini saya membagikan tentang cara membuat profil author yang responsive dan ada media sosialnya, kurang lebihnya seperti gambar di atas.

Kelebihan dari Profil author ini banyak sekali antara lain: Responsive, simple, elegan, keren, ada sosial medianya, fast loading, ringan karena tanpa javascript, multi author (lebih dari satu penulis blog).

Caranya sangat mudah, dan berikut adalah tutorial pembuatan Profil Author Responsive di Bawah Postingan:

1. Pergi ke Blogger.
2. Masuk ke Template.
3. Pilih Edit HTML
4. Copy kode CSS di bawah ini dan paste di atas kode ]]></b:skin>

 atau </style>

.authorboxwrap{Font-family: Sans Serif;background:#f8f8ff;margin:10px auto 10px;padding:10px;overflow:hidden;border:1px solid #fafafc;}
.avatar-container {float:left;margin-right:15px;border: 0px solid silver;padding: 3px;} 
.avatar-container img{width:110px;height:auto;} 
.author_description_container h4{font-family:Sans Serif; font-weight:700;font-size:20px;display:block;margin:0;margin-bottom:1px} 
.author_description_container h4 a{color:#ef4824} 
.author_description_container h4 a:hover{color:#404040} 
.author_description_container p{margin:0;color:#888;font-size:100%;margin-bottom:4px;font-family: Sans Serif;} 
.authorsocial a{display:inline-block;text-align:center;margin-right:10px} 
.authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:50%;transition:all .3s;} 
.authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;} 
.authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;} 
.authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;} 
.authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}

Kemudian copy juga kode HTML di bawah ini dan paste di bawah kode <data:post.body/> kedua dari yang terakhir. Atau juga bisa paste di atas kode  <div id='related-posts'>

b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='authorboxwrap'> <div class='authorboxfull'> <div class='avatar-container'>
<a href='#'> <img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/> </a> </div> <div class='author_description_container'>
<h4>Author <a href='#' rel='author'><data:post.author/></a></h4>
<p> <data:post.authorAboutMe/> </p>
<div class='authorsocial'>
<a class='img-circle1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram'/></a>
<a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube'/></a>
 <div class='clr'/> </div> </div> </div> </div> <div style='clear:both'/> </b:if>

Jangan lupa ganti tanda # dengan link sosial media sobat.

Save template dan lanjut ke tutorial selanjutnya.

Pergi ke blogger > Tata Letak > Edit widget Blog Posts.

 

 Beri tanda centang pada Tampilkan Profil Pengarang Di Bawah Pos.

Jika deskripsi pada akun Google Plus sobat belum di atur, maka sobat atur terlebih dahulu di Google Plus sobat, klik link berikut Google+, edit pada bagian Cerita > Perkenalan.

Jika sudah tekan Oke dan lihat hasilnya.

Saya kira cukup mudah asalkan sobat teliti. Cukup sekian posting yang saya buat tentang Cara Menampilkan Profil Author Responsive di Bawah Postingan. Terima kasih sudah berkunjung dan semoga ini bermanfaat bagi sobat semua.