Cara Memasang Author Box di Bawah Setiap Postingan

Tabel of Content [View]
Agar blog terlihat profesional kita bisa menambahkan Author Box dibawah setiap postingan. Cara memasang Author Box di bawah setiap postingan cukup mudah. Anda tinggal mengikuti tutorial ini step by step.

Cara Memasang Author Box di Bawah Setiap Postingan

CARA PERTAMA

1. Masuk ke Dashboard >> Template >> Edit HTM
2. Cari kode dibawah ini (tekan Ctrl+F)
]]></b:skin> 
3. Letakkan kode di bawah ini  sebelum kode di atas
/*  Author Box START   */

 div#MBG-About-Box:before {
content: "  \f007   About Author  ";
background: ;
font-family: Lobster, FontAwesome;
color: #ffffff;
padding: 17px 10px 26px 10px;
position: relative;
overflow: hidden;
z-index: 10;
top: 53px;
right: px;
transition: .3s;
}
div#MBG-About-Box .wrap-me {
margin: 0 auto;
display: block;
padding: 30px 20px;
background-color: ;
box-shadow: 1px 1px 2px 2px #444444;
border-top: 55px solid ;
color: #444444;
box-sizing: border-box;
background:  url('' )no-repeat 0px 0px;
padding: 10px 5px 10px 5px;
clear: both;
text-align: center;
display: block;
margin: 10px 0;
height: auto;
}
.MBG-About-Credit {
text-align: right;
padding-right: 10px;
padding-bottom: 10px;
color: #CAFFFD;
font-size: 10px;
font-family: Lobster, FontAwesome;
margin-top: 7px;
}
.MBG-About-Text {
margin-left:10px;
margin-right:10px;
text-align: justify;
color: #005196;
font-size: 16px;

 line-height: 1.5em;
margin-top: 7px;
margin-bottom: 4px;
}
#about-opacity {opacity: 0.5;
-moz-transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; 
-webkit-transition: all 0.5s ease-out; 
-ms-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out;

 zoom: 1; 
margin-right:14px;
margin-left:10px;
margin-top:8px;
margin-bottom:4px;
                          }
#about-opacity:hover{
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg); 
-o-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); 
-ms-transform: rotate(0deg); 
transform: rotate(0deg); 
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
margin-right:14px;
margin-left:10px;
margin-top:8px;
margin-bottom:4px;
-moz-box-shadow:  #000;
-webkit-box-shadow:  #000;
box-shadow:  #000;
                          }
.about-picture{
border:#ccc;
cursor:pointer;

 /*  Author Box END   */
4. Cari kode di bawah ini
<data:post.body/>
5. Letakkan kode di bawah ini tepat di bawah kode di atas
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id="MBG-About-Box"><div class="wrap-me">
<img align='left' class='about-picture' height='100px' id='about-opacity' src='Your Image URL Here' width='100px'/><div id='about'></div>
<div class="MBG-About-Text">Write Something About Author<p><a href='http://twitter.com/mustzain' rel='nofollow' target='_blank'><font color='#00aced'>Twitter</font></a> | <a href='http://www.facebook.com/mustzain' rel='nofollow' target='_blank'><font color='#3b5998'>Facebook</font></a> | <a href='http://plus.google.com/+mustzain' rel='nofollow'><font color='#dd4b39'>Google Plus</font>
</a></p>
</div></div></div></b:if>
Ganti kode yang diberi warna berbeda pada kode di atas
  • Your Image URL Here : ganti dengan url gambar profile Anda
  • Write Something About Author : Ganti dengan tentang diri Anda
  • http://twitter.com/mustzain : Ganti dengan account twitter Anda
  • http://www.facebook.com/mustzain : ganti dengan account facebook Anda
  • http://plus.google.com/+mustzain : ganti dengan account gPlus Anda
6. Cari kode </head> dan letakkan kode di bawah ini sebelum </head>
<link href='https://fonts.googleapis.com/css?family=Oswald|Lobster:400' rel='stylesheet' type='text/css'/>
7. Simpan template Anda
Author Box

CARA KEDUA

1. Masuk ke Dashboard >> Template >> Edit HTM
2. Cari kode dibawah ini (tekan Ctrl+F)
]]></b:skin> 
3. Letakkan kode di bawah ini  sebelum kode di atas
/*Author Box CSS Code*/
.about-author {
width : 750px;
overflow : hidden;
margin:10px 0px;
border:0px;
    background: #f2f2ef;
    margin: 0 0 30px 0;
    padding: 10px;
    border: 1px solid #EAEDEF;
    overflow: hidden;
    color: #333333;
    font-size: 14px;
    font-family: Georgia, Tahoma, Verdana;
    line-height: 24px;
}
.about-author img {
display: block;
width: 90px;
height: 90px;
margin: 0 1.2em 0 0;
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 999em;
-moz-border-radius: 999em;
border-radius: 999em;
border: 2px solid #ddd;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.about-author h3{
font-family:georgia !important;
font-size:18px !important;
margin:9px 0px !important;
color:#666 !important;
border-bottom:2px solid #666 !important;
border-top:0px !important;
}
.about-author p {
margin:0px;
text-align:justify;
color:#666;
} 
/*Author Box CSS Code*/
4. Cari kode di bawah ini
<data:post.body/>
5. Letakkan kode di bawah ini tepat di bawah kode di atas
<div class="about-author">
<h3>About Author:</h3>
<img align="left" src="Your Image URL Here"/><p>Write Something About Author</p><br/>
<p>Let's Get Connected: <a href="http://twitter.com/mustzain" rel="nofollow" target="_blank"><font color="#00aced">Twitter</font></a> | <a href="http://www.facebook.com/mustzain" rel="nofollow" target="_blank"><font color="#3b5998">Facebook</font></a> | <a href="http://plus.google.com/+mustzain" rel="nofollow"><font color="#dd4b39">Google Plus</font>
</a></p>
</div>
Ganti kode yang diberi warna berbeda pada kode di atas
  • Your Image URL Here : ganti dengan url gambar profile Anda
  • Write Something About Author : Ganti dengan tentang diri Anda
  • http://twitter.com/mustzain : Ganti dengan account twitter Anda
  • http://www.facebook.com/mustzain : ganti dengan account facebook Anda
  • http://plus.google.com/+mustzain : ganti dengan account gPlus Anda
6. Simpan template Anda


Keterangan : 

  • Cara Pertama Responsive
  • Cara Kedua tidak Responsive