Home » » Cara Membuat Kotak Profil Blogger Responsive di Bawah Postingan

Cara Membuat Kotak Profil Blogger Responsive di Bawah Postingan

Menampilkan Kotak Profil Blogger (Author Bio) Responsive plus Media Sosial di Bawah Posting.

Cara Membuat Kotak Profil Blogger di Bawah Posting Blog sangat mudah. Tinggal memasukkan kode dan setting di widget Blog Posts.

Penampakannya bisa dilihat di bawah ini. Demonya bisa dilihat di CB Bloger Lab.

Kotak Profil Blogger

Banyak sekali kotak profil author yang sudah dibagikan para desainernya. Kelebihan Blogger Author Bio Box yang satu ini antara lain:
  • 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 Responsive di Bawah Postingan

1. Template > Edit HTML
2. Copas kode CSS berikut ini 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;}

3. Copas kode HTML berikut ini di bawah kode <data:post.body/> kedua dari yang terakhir. Bisa juga dipassang 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>

Isi atau ganti tanda pagar (#) dengan link akun medsos Anda.

4. Save Template!

Kini saatnya menampilkan kotak profil author blogger.

5. Layout > edit widget "Blog Posts" > Centang kotak "Show Author Profile Below Post"

tampilkan kotak author profil blogger


6. Edit deskripsi profil di kolom "Introduction" di akun Google Plus Anda. Klik "About" dan edit bagian "Story".

edit profil google plus


7. Save!

Note! 
Karena ikon media sosial kotak profil author blogger responsive ini menggunakan awesome font, pastikan di template Anda ada link ke Awesome Font. (Lihat: Cara Pasang Font Awesome)

Good Luck and Happy Blogging! (http://www.contohblog.com).*

Sumber

Thanks for reading & sharing Cara Membuat Kotak Profil Blogger Responsive di Bawah Postingan

Previous
« Prev Post

1 comments:

Comment Page:
  1. Terima kasih gan. Banyak membantu artikelnya. Apabila boleh, ane mau nanya bagaimana caranya membuat kolom komentar Disqus menyatu dengan komentar facebook Komentar ketiga di blog

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox