Cara Memasang Author Box di Bawah Setiap Postingan


Cara Memasang Author Box di Bawah Setiap Postingan

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 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





Pencinta teknologi, yang hobi memotret dan berselancar di internet. Mencari dan mempelajari hal yang baru adalah suatu yang sangat disukainya dalam mengisi waktu.

Share this

---

Previous
Next Post »

2 komentar

komentar
Tue Jun 06, 02:50:00 AM 2017 delete

Ketemu juga caranya. Tapi jadi pusing 😅

Reply
avatar
Wed Jun 07, 10:14:00 PM 2017 delete

Koq malah jadi pusing? Bukannya tinggal copy paste saja?

Reply
avatar

Terimakasih buat rekan-rekan yang telah meluangkan waktu untuk memberi komentar.
Tapi maaf, saya moderasi terlebih dahulu, untuk menghindari spam