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




Cara Membuat Author Profil Blog  Responsive + Media Sosial di Bawah Posting
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.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect