Cara Membuat Kotak Profil Blogger Responsive di Bawah Postingan

Oleh admin

Minggu, 24 Januari 2016

Bagikan :

Tweet

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.

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"

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

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! (https://goglazculture.blogspot.com).*

Sumber

Tag : Desain Blog, Panduan Blogging