cara membuat author box di halaman blog

Author box pada halaman blog berguna untuk menampilkan identitas penulis artikel halaman blog. Cara membuat Author Box ini tidak termasuk rumit hanya saja anda harus lebih tepat untuk menempatkan Author Box ini di halaman postingan. Menempatkan Author Box pada halaman postingan dapat anda sematkan di bawah SOSIAL MEDIA SHARE, atau bisa saja anda sematkan di bawah RELATE POST. Setelah anda pasang CSSnya anda dapat memasang tag htmlnya dibawah code widget yang telah diberitahukan diatas. pada tutorial kali ini saya menempatkan Author Box ini dibawah widget SAHRE SOSIAL MEDIA. Jadi untuk menempatkan tag html Author Box ini dihalaman tepat dibawah setelah kode penutup SHARE SOSIAL MEDIA. Untuk lebih jelasnya silahkan lihat penjelasan dibawah ini, kita menuju TKP.

Untuk DEMO silahkan " KLIK DISINI " Lihat Kotak yang bertuliskan AUTHOR BOX

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

/*****************************************
Author Box Rivai Silaban
******************************************/
.Rivai-PostAuthor {
font-size:12px;
margin:0 auto;
padding:10px;
width:600px; //UKURAN LEBAR BOX
text-shadow:1px 0 0 #fff;
background:#F7F7F7; //LATAR BELAKANG BOX
border-radius:5px;
border: 1px #BBBBBB solid;
-moz-box-shadow: 0px 0px 5px #BBB;
-webkit-box-shadow: 0px 0px 5px #BBB;
box-shadow: 0px 0px 5px #BBB;
min-height:170px; //TINGGI BOX
margin-right: 10px;
}
.Rivai {
padding:10px 10px 0 0;
margin:0;
font-size:12px;
float:left;
width:110px;
text-align:center;
}
.Rivai img {
border:2px solid #888;
background-color: #FFFFFF;
padding:2px;
margin:0px 5px 0px 5px;
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;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.Rivai:hover img {
border:2px solid #ccc;
cursor:pointer;
opacity: 1;
-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;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
.Rivai-text {
float:right;
width: 78%; //LEBAR TEXT PROFIL
font:14px Trebuchet MS,sans-serif; //UKURAN HURUF/JENIS
text-align:justify;
color:#111; //WARNA TEXT
margin:0;
padding:0 0 0 10px;
border-left:1px #c4c4c4 solid;
}
.Rivai-footer{
padding:10px 0;
font:bold 12px Trebuchet MS;
}
.button a{
background-color:#666666;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
text-align: center;
border: solid #0066FF 1px;
padding: 5px 10px;
margin-right: 5px;
border-color: #CCCCCC;
}
.button a:hover{
background-color:#333333;
color: #FFFF00;
text-decoration: none;
border: solid #0066FF 1px;
text-shadow: 0 1px #999;
border-color: #000000;
box-shadow: 0 0px 5px #666;
}
.more a{background-color:#F7F7F7;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
text-align: center;
border: solid #0066FF 1px;
padding:2px 10px;
margin-right: 5px;
border-color: #DBDBDB;}
.more a:hover {background-color:#F3F3F3;
color: #0000;
text-decoration: none;
border: solid #0066FF 1px;
text-shadow: 0 1px #999;
border-color: #CCCCCC;
box-shadow: 0 0px 2px #999;}

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• untuk pemasangan kode htmlnya yang saya sematkan dibawah widget SOSIAL MEDIA SHARE seperti pada DEMO, saya menempatkan kode tg HTML dibawah ini tepat dibawah widget sosial media share setelah kode media share penutup.
  
• Save template anda dan lihat hasilnya, selamat berkreative.

<!--BLOG DESIGN author box START-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='Rivai-PostAuthor'>
<div class='Rivai'>
<a href='http://rivai-silaban.blogspot.com' target='_blank'>
<img alt='Rivai Silaban' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqBLKAguWnUy5g089y9_93TxXnsMOaW01fL5EdHCAS87bygvKR54w-jQHAikltjtwjb0DdqqdXoj-0Cn-EheOSZm8zW3PeShahwl28aoyX1piUCJurh-AMJbag345TxD765s1o4SLb6bo/h120/rivai.jpg' width='100' title="my image"/>
</a>
<div style='font-family: Geneva, Arial, Helvetica, sans-serif; padding:3px 10px; border:solid #0000FF 1px; background-color:#00CCFF; margin-top:7px; text-align: center; border-color: #0066FF; border-radius:3px; color:#000000; text-shadow: NONE;'>
<b>
Rivai Silaban </b> </div>
</div>
<div class='Rivai-text'>
<span style='font-size: large;'>
<b>
<span style='font-family: Trebuchet MS,sans-serif; color: #990000;'>
My Profil </span> </b> </span>
<br/>
<div style='font-family: Trebuchet MS,sans-serif;border-top: dashed #999 1px;border-bottom: dashed #999 1px;'>
Saya adalah seorang yang suka dengan photografi dan berbagai dunia maya lainnya, saya suka
Bloging dan memiliki ilmu sedikit tentang Design Grafis, Buat sohib sohib yang suka dengan bloging mari sama sama membangun ikatan persaudaraan diantara bloger Indonesia.
<br/>
Salam bloger....!!
<br/></div>
<div class="button" style="margin-top:5px;">
<div style='float:left;text-align:left;'>
Join Me On:
<a class="button" href='link facebook ' rel='nofollow' target='_blank' title="facebook">
Facebook
</a>
<a class="button" href='link twitter ' rel='nofollow' target='_blank' title="twitter">
Twitter
</a>
<a class="button" href='link gplus ' rel='nofollow' target='_blank' title="Gplus">
Google Plus
</a>
<a href='http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA' rel='nofollow' target='_blank' title="join to blog">
Join to Blog
</a> </div>
</div>
<div class="more" style='float:right;text-align:right;margin-top:18px;'>
<a href='link PROFIL GPLUS ANDA ' rel='nofollow' target='_blank' title="Profil">
&gt;&gt; Read More
</a>
</div>
</div>
</div>
<div style='clear:both;'/>
</b:if>
<!--BLOG DESIGN author box END-->

Keterangan Code

• Untuk kode CSSnya sesuaikan tampilan dengan kreative anda sendiri, silahkan anda edit lebar dan tingginya sesuai dengan yang tertulis pada code.
• Tulisan warna Hijau ganti dengan link gambar anda.
• Tulisan yang berada di kotak HITAM ganti dengan tulisan tentang anda.
• Tulisan kode warna MERAH ganti sesuai dengan link sosial media yang telah dituliskan di kode tersebut.
• Untuk ID Blog silahkan ganti sesuai dengan ID blog anda bila anda belum mengetahui ID blog anda silahkan kunjungi tutorial cara mengetahui ID BLOG KLIK DISINI

Kesimpulan

Untuk menyematkan kode HTMLnya anda dapat memasangnya dibawah media share, atau langsung dibawah tulisan artikel postingan, bisa juga di bawah widget relate post. tergantung dengan kebutuhan anda.

Edit semua kode sesuai dengan keperluan halaman blog anda, bila ada kekurangan dan kesalahan kode silahkan hubungi saya atau share dengan saya dibawah ini pada form komentar blog, dengan senang hati saya akan membantu anda.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 6:40 PM