Social Items

Search and Buy other Templates on IDNTHEME
cara memasang author box dibawah postingan - kali ini dwikidzgn akan memberikan tutorial cara memasang multi author box dibawah postingan blog. widget author box ini berfungsi sebagai memperkenalkan siapa penulis artikel yang di publish kepada pengunjung  blog. widget ini memiliki info sosial media si penulis..

Cara memasang Widget Author box dibawah postingan

1. Login ke akun blogger kamu > klik menu Tema > edit html lalu tempelkan kode dibawah ini tepat setelah <data:post.body/>

<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><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-instagram'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>

jangan lupa ganti simbol # dengan link social media sobat
2. Salin & tempel Kode Dibawah ini sebelum ]]></b:skin> atau </style>

/* CSS Multi Author Box */
.authorboxwrap{background:#fff;margin:0 auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}
.avatar-container {float:left;margin-right:20px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{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}
.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:2px;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. Setelah itu simpan template dan lihatlah hasilnya jika widget tidak keluar silahkan masuk ke menu tata letak > edit pada widget postingan blog centang tampilkan profil pengarang dibawah postingan itu dia cara memasang widget author box dibawah postingan blogger.

Cara Memasang Multi Author Box di bawah postingan pada Blogger

cara memasang author box dibawah postingan - kali ini dwikidzgn akan memberikan tutorial cara memasang multi author box dibawah postingan blog. widget author box ini berfungsi sebagai memperkenalkan siapa penulis artikel yang di publish kepada pengunjung  blog. widget ini memiliki info sosial media si penulis..

Cara memasang Widget Author box dibawah postingan

1. Login ke akun blogger kamu > klik menu Tema > edit html lalu tempelkan kode dibawah ini tepat setelah <data:post.body/>

<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><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-instagram'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>

jangan lupa ganti simbol # dengan link social media sobat
2. Salin & tempel Kode Dibawah ini sebelum ]]></b:skin> atau </style>

/* CSS Multi Author Box */
.authorboxwrap{background:#fff;margin:0 auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}
.avatar-container {float:left;margin-right:20px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{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}
.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:2px;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. Setelah itu simpan template dan lihatlah hasilnya jika widget tidak keluar silahkan masuk ke menu tata letak > edit pada widget postingan blog centang tampilkan profil pengarang dibawah postingan itu dia cara memasang widget author box dibawah postingan blogger.
Load Comments

Subscribe Our Newsletter