January 24, 2016

Cara Membuat Kotak Profil Blogger Responsive di Bawah Postingan

January 24, 2016

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

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

3 comments on Cara Membuat Kotak Profil Blogger Responsive di Bawah Postingan

  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
  2. Thanks gun..sangat bermanfaat infonya..

    ReplyDelete
  3. gan mw tanya cara Edit deskripsi profil di kolom "Introduction" di akun Google Plus Anda. Klik "About" dan edit bagian "Story". adanya disebelah mana ya

    ReplyDelete

Contact Form

Name

Email *

Message *