Cara Membuat Author Profil Blog Responsive + Media Sosial di Bawah Posting Cara Membuat Author Profil Blog Responsive + Media Sosial di Bawah Posting - mizipediacom mizipediacom: Cara Membuat Author Profil Blog Responsive + Media Sosial di Bawah Posting

KATEGORI










LIVE TV

Iklan Semua Halaman

Cara Membuat Author Profil Blog Responsive + Media Sosial di Bawah Posting

Friday, April 28, 2017



Cara Membuat Author Profil Blog  Responsive + Media Sosial di Bawah Posting
Pada kali ini saya akan share tentang cara Membuat Kotak Profil Blogger di Bawah postingan, caranya sangat mudah khususnya bagi yang sudah paham sering utak atik kode css maupun Html di blogger. 

kalau seperti saya mungkin agak susah lah berhubung masih newbie, hehe.
Untuk Demo nya anda bisa melihat di atas gambarnya.
Untuk Kelebihan Blogger Author Bio Box yang satu ini adalah:
  • Responsive 
  • Simple
  • Elegan 
  • Keren pasti
  • Plus Akun Media Sosial
  • Nyambung langsung ke Google Plus
  • Fast Loading
  • Tanpa Javascript jadi ringan
  • Menampilkan Multiple Author (lebih dari satu penulis blog).


Cara Membuat Kotak Profil Author 



1. Anda login terlebih dahulu ke akun blogger milik anda atau klik disini
2. Kemudian anda klik Theme ==> Edit HTML
3. Lalu anda Copas kode CSS dibawah ini letakan di atas kode ]]></b:skin> atau </style>
.authorboxwrap{Font-family: Open Sans;background:#f3f3f3;margin:10px auto 20px;padding:20px;overflow:hidden;border:1px solid #fafafc;}
.avatar-container {float:left;margin-right:20px;border: 1px solid silver;padding: 3px;} 
.avatar-container img{width:110px;height:auto;} 
.author_description_container h4{font-family:Open Sans; font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px} 
.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:95%;margin-bottom:8px;font-family: Open Sans;} 
.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;}
4. Dan anda Copas kode HTML di bawah ini, ke,udian di letakan di bawah kode <data:post.body/> kedua dari yang terakhir. tes satu persatu Atau Bisa juga dipasang 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-twitter'/></a>
<a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>
</a> <div class='clr'/> </div> </div> </div> </div> <div style='clear:both'/> </b:if>
Note: anda Isi atau ganti tanda pagar (#) dengan link akun medsos Anda.
5. Jika sudah maka anda klik Save Template.

Tahapan selanjutnya sekarang kita akan menampilkan kotak profil author blogger.

6. Anda klik Layout ==> Edit widget "Blog Posts" ==> Centang kotak "Show Author Profile Below Post"
tampilkan kotak author profil blogger

7. Lalu anda Edit deskripsi profil di kolom "Introduction" di akun Google Plus Anda. Klik "About" dan Edit bagian "Story".


8. Terakhir anda klik simpan/ Save.
Karena ikon media sosial kotak profil author blogger responsive ini menggunakan awesome font, pastikan di template Anda ada link ke Awesome Font. 

Demikian penjelasan kali ini semoga bermanfaat dan selamat mencoba.
Lihat Juga