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 HTM2. Cari kode dibawah ini (tekan Ctrl+F)
]]></b:skin>3. Letakkan kode di bawah ini sebelum kode di atas
/* Author Box START */4. Cari kode di bawah ini
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 */
<data:post.body/>
<b:if cond='data:blog.pageType == "item"'> <div id="MBG-About-Box"><div class="wrap-me">Ganti kode yang diberi warna berbeda pada kode di atas
<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/memeiddotcom' rel='nofollow' target='_blank'><font color='#00aced'>Twitter</font></a> | <a href='http://www.facebook.com/AdityaZ404' rel='nofollow' target='_blank'><font color='#3b5998'>Facebook</font></a> | <a href='http://plus.google.com/112008710223456920062' rel='nofollow'><font color='#dd4b39'>Google Plus</font>
</a></p>
</div></div></div></b:if>
- Your Image URL Here : ganti dengan url gambar profile Anda
- Write Something About Author : Ganti dengan tentang diri Anda
- http://twitter.com/memeiddotcom : Ganti dengan account twitter Anda
- http://www.facebook.com/AdityaZ404 : ganti dengan account facebook Anda
- http://plus.google.com/112008710223456920062 : ganti dengan account gPlus Anda
<link href='https://fonts.googleapis.com/css?family=Oswald|Lobster:400' rel='stylesheet' type='text/css'/>7. Simpan template Anda
CARA KEDUA
1. Masuk ke Dashboard >> Template >> Edit HTM2. Cari kode dibawah ini (tekan Ctrl+F)
]]></b:skin>3. Letakkan kode di bawah ini sebelum kode di atas
4. Cari kode di bawah ini/*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*/
<data:post.body/>5. Letakkan kode di bawah ini tepat di bawah kode di atas
Ganti kode yang diberi warna berbeda pada 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/memeiddotcom" rel="nofollow" target="_blank"><font color="#00aced">Twitter</font></a> | <a href="http://www.facebook.com/AdityaZ404" rel="nofollow" target="_blank"><font color="#3b5998">Facebook</font></a> | <a href="http://plus.google.com/
112008710223456920062" rel="nofollow"><font color="#dd4b39">Google Plus</font></a></p>
</div>
- Your Image URL Here : ganti dengan url gambar profile Anda
- Write Something About Author : Ganti dengan tentang diri Anda
- http://twitter.com/memeiddotcom : Ganti dengan account twitter Anda
- http://www.facebook.com/AdityaZ404 : ganti dengan account facebook Anda
- http://plus.google.com/112008710223456920062 : ganti dengan account gPlus Anda
6. Simpan template Anda
Keterangan :
- Cara Pertama Responsive
- Cara Kedua tidak Responsive
Tidak ada komentar: