Terkadang jika anda ingin dikenal banyak para pengunjung blog anda, sebaiknya memasang Author dibawah postingan. Tujuan dari pemasangan Author dibawah postingan adalah agar pengujung lebih mengenal anda, dan mengetahui nama anda, Tentang anda, dll. Author Box ini biasanya digunakan para Blogger pada halaman postingan dan menampilkan sedikit ringkasan atau penjelasan tentang penulis artikel tersebut.
Mengapa Harus Memasang Author Box?
Terkadang, pembaca atau pengunjung ingin tahu siapa dibalik yang menulis artikel atau konten-konten yang berkualitas yang sedang mereka baca itu. Kemungkinan mereka mengetahui lebih lanjut tentang diri anda. Author box banyak digunakan pada website yang memiliki banyak penulis. Hal ini sangat dibutuhkan karena sangat membantu pembaca untuk mengetahui siapa penulis yang sedang mereka baca. Pada kesempatan kali ini, saya akan membagikan
Author box Plus Subscribe Newsletter dibawah postingan.Screenshoot : Cara Membuat Author Box dibawah Postingan Plus Subscribe Newsletter
Cara Pertama : 1. Buka
Blogger - Kemudian login.
2. Dashboard - Kemudian Template.
3. Edit HTML.
Proses Pembuatan :
1. Temukan kode </syle> atau ]]></b:skin>
2. Copy&paste kode berikut ini, dan letakkan diatas kode </syle> atau ]]></b:skin>
.author-maycyberdownload{
float:left;
width:96%;
padding:15px;
border:1px solid #ccc;
margin-bottom:15px;
margin-top:15px;
background:#eee;
color:#000;
}
.author-maycyberdownload:hover{
background:#eee;
border:1px solid #ccc;
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
}
.author-maycyberdownload h3{
color:#000;
margin-bottom:10px;
}
.author-maycyberdownload h3:hover{
border : 1px solid #EEEEEE;
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
}
.author-photo{
float:right;
margin:0 0 0 10px;
}
.author-photo img{
border:1px solid #666;
-webkit-transition:-webkit-transform .15s linear;
-moz-transition:-moz-transform .15s linear;
-o-transition:-o-transform .15s linear;transition:transform .15s linear;
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);
box-shadow:0 3px 6px rgba(0,0,0,.25);
padding:5px 5px 5px 5px;-webkit-transform:rotate(+2deg);
-moz-transform:rotate(+2deg);-ms-transform:rotate(+2deg);
-o-transform:rotate(+2deg);transform:rotate(+2deg);float:left;
}
.author-photo img:hover{
background:#FFFFFF;
border : 1px solid #EEEEEE;
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
ul.mdsocial{
list-style:none;
margin:10px;
overflow:hidden;
}
.mdsocial li{
float:right;
background:none !important;
padding:0 !important;
margin:0 8px;
}
.mdsocial li a{
display:block;
width:40px;
height:40px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiG-ABe9VBmY-SRlct1-KSehGr5iNRT0bWrafz6SsDVF7zGHruJ_v850LRLN5NAjxCXpmfTVwtJT8LHZrduoTUXOYYsalX9ILKoWjk4S5tg8ktIS8RtIf6-884AjXp486NtgWMseW4qSat/s1600/social.png") no-repeat transparent;
text-indent:-99999em !important;
}
.mdsocial li a:hover{
padding:0 !important;
}
.mdsocial li.rssicon a{
background-position:0 0;
}
.mdsocial li.twicon a{
background-position:-50px 0;
}
.mdsocial li.fbicon a{
background-position:-100px 0;
}
.mdsocial li.gicon a{
background-position:-150px 0;
}
.mdsocial li.rssicon a:hover{
background-position:0 -50px;
}
.mdsocial li.twicon a:hover{
background-position:-50px -50px;
}
.mdsocial li.fbicon a:hover{
background-position:-100px -50px;
}
.mdsocial li.gicon a:hover{
background-position:-150px -50px;
}
.mdlinediv{
margin-top:25px;
height:0px;
clear:both;
display:block;
border-top:1px solid #fefefe;
border-bottom:1px solid #CCCCCC;
}
.mdemailbutton{
background:#f7f8f9;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1));
background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
}
.mdemailbutton:hover{
background:#f1f1f1;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1));
background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );
text-decoration:none !important;
}
.mdemail{
clear:both;
width:250px;
margin:10px 0;
float:left;
}
.mdemailform{
position:relative;
width:250px;
margin:0 auto;
}
.mdemailinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;border:1px solid #ddd;
-webkit-border-radius:4px;-moz-border-radius:4px;
border-radius:4px;font-family:georgia;
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}
.mdemailbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;
border-top-left-radius:0px;border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:0;
display:block;
line-height:16px;
}
.mdemailbutton{
padding:8px !important;
}
.mdemailform, .mdemailinput{
width:98% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
}
3. Jika sudah? Temukan kode
4. Copy&paste kode berikut ini, dan letakkan
<div class='author-maycyberdownload'>
<div class='author_photo'>
<!-- Author BIO Section -->
<img alt='author' height='150' src='
http://seconddance.ca/wp-content/plugins/penci-portfolio//images/no-thumbnail.jpg' width='150'/>
</div><!-- Change Author Info -->
<h2>
Nama Anda?</h2><!--EDIT THIS-->
<p>
Silakan isikan Ringkasan Tentang Diri Anda</p><!--EDIT THIS-->
<div class='mdlinediv'/>
<div class='mdemail'>
<small style='text-align:center;'>Get Free Email Updates to your Inbox!</small>
<form action='http://feedburner.google.com/fb/a/mailverify' class='mdemailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=
your_name, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='awesomev3'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mdemailinput' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input class='mdemailbutton' title='' type='submit' value='SignUp'/>
</form>
</div>
<ul class='mdsocial'>
<li class='rssicon'>
<a href='http://feeds.feedburner.com/mailverify?uri=
your_name'>Rss</a>
</li><li class='twicon'>
<a href='http://twitter.com/
your_name>Twitter</a>
</li><li class='fbicon'>
<a href='https://www.facebook.com/
your_name'>FaceBook</a>
</li><li class='gicon'>
<a href='https://plus.google.com/
your_name'>Google +</a>
</li>
</ul>
</div>
<div style='clear: both;'/> <!-- clear for photos floats -->
Baca Juga :
