Membuat Author Box Dibawah Posting

Author box ini aku temukan di template mbak Arlina yang New Minima Colored, aku tertarik memasangnya pada template fastestmagz yang aku gunakan, dan kesudahannya berhasil juga hanya dengan copy beberapa cuilan aja, serta edit dikit jadi deh.

Author box ini aku temukan di template mbak Arlina yang  Membuat Author Box Dibawah Posting

Baiklah untuk Anda yang menginkan memasang Author Box ini, bisa mengikuti tutorial singkat aku berikut ini, dan bila anda mengalami kesulitan dalam pemasangan widged ini bisa berkomentar dan akan aku bantu sebisa dan semampu saya.

Pertama tambahkan CSS berikut ini diatas </head> pada edit HTML.
<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> /* CSS Multi Author Box By Arlina Design */ .authorboxwrap {   background:#f9f9f9;   margin:-15px 0 25px 0;   padding:20px;   overflow:hidden;   border:1px solid #e6e6e6; }  .avatar-container {   float:left;   margin-right:20px; }  .avatar-container img {   background:#fff;   width:90px;   height:auto;   padding:5px;   border:1px solid #ccc; }  .author_description_container {}  .author_description_container h4 {   font-weight:600;   font-size:16px;   display:block;   margin-bottom:10px; }  .author_description_container h4 a {   font-family:Oswald,arial;   border-bottom:1px solid #0099cc;   text-transform:capitalize;   color:#333; }  .author_description_container p {   font-size:12px;   line-height:1.6;   margin-bottom:15px; }  .authorsocial a {   display:inline-block;   text-align:center;   float:left;   margin-right:2px; }  .authorsocial a i {   width:30px;   height:30px;   padding:8px 9px;   display:block;   background:#E9E9E9 !important;   color:#555; } </style> </b:if>

Seperti biasa, aku niscaya sisipkan tag kondisional biar hanya terpanggil dibagian posting saja sehingga tidak akan membebani pada cuilan homepage. Dan selanjutnya Anda bisa mencari instruksi persis ibarat berikut :

<data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div>

Dan tambahkan instruksi berikut ini sempurna dibawah instruksi yang Anda temukan tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='authorboxwrap'> <div class='authorboxfull'> <div class='avatar-container'> <a expr:alt='data:post.author'> <img class='author_avatar img-circle' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='96' width='96'/></a></div> <div class='author_description_container'> <h4><a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'> <span itemprop='name'><data:post.author/></span></a></h4> <p> Hanya seorang blogger biasa yang gemar menulis dan curhat wacana pengalaman hidup, serta berguru segala hal yang bermanfaat, dan terus memperbaiki diri.        </p></div></div></div> </b:if> <!-- url : http://competitivgrace.blogspot.com Author box Simpel By Arlina Deign Share & Edited by Iwan Efendi -->

Selanjutnya Anda hanya perlu mengganti yang aku beri tanda merah itu dengan deskripsi yang anda inginkan. Sebenarnya dengan instruksi dari mbak Arlina telah di setting otomatis untuk deskripsinya, namun sebab kadang nggak muncul, aku lebih menentukan untuk memasukkannya secara manual sesuai harapan aku sendiri.

Baca Juga:  Submit a comment on the proposed Physician Payment Sunshine Act

Untuk yang lainnya sudah diset otomatis mengikuti profile g+ kita masing-masing. Setelah semuanya selesai Simpan Template kemudian lihat hasilnya. Sangat gampang bukan? Semoga bermanfaat.


Sumber https://www.iwanberbagi.com