Cara Mudah Membuat Kotak Author (Author Box) Keren Dilengkapi Dengan Tombol Jejaring Sosial

cara membuat kotak author keren dilengkapi dengan tombol jejaring sosial

Cara Membuat Kotak Author (Author Box) Keren Dilengkapi Dengan Tombol Jejaring Sosial - Apa itu Kotak Author ? Kotak Author atau Author Box adalah sejenis kotak atau kadang juga persegi panjang yang biasanya diletakkan di bawah atau di atas postingan suatu blog, yang isinya tentang informasi diengkapi dengan foto dari penulis blog tersebut.

Tujuannya ? Ya tentu, tujuannya adalah untuk menginformasikan kepada pengunjung blog tentang identitas penulis juga biasanya untuk menyampaikan sebuah pesan kepada pengunjung blog. Misalnya, pada umumnya, kebanyakan blogger termasuk saya menulis pesan di kotak author "Terimakasih telah berkunjung semoga apa yang anda baca pada postigan ini bisa bermanfaat bagi anda?" atau "Jika ingin meng-copypaste artikel ini mohon untuk mencantumkan sumber dengan link aktif dari postingan ini".

Keuntungannya ? Keuntungannya adalah membuat blog anda lebih menarik dan visitor blog anda juga bisa mengenal lebih jauh tentang anda, selain itu blog terkesan informatif dan komunikatif serta terlihat lebih profesional.

Contoh Kotak Author (Author Box)

Nah, kali ini sharehovel akan membagikan kepada anda cara membuat kotak author atau author box keren dengan mudah, dlengkapi dengan tombol jejaring sosial didalamnya yaitu Facebook, Twitter, Google+, Feedbunner. sehingga pengunjung blog anda bisa menemukan anda diluar blog. Jangan khawatir tentang blog anda lalod atau lemot karena kotak author yang saya bagikan ini terkesan ringan dan tidak membuat blog anda berat. Baiklah, langsung saja ikuti lagkah dibawah jika anda tertarik membuat Author Box di blog anda.

Cara Mudah Membuat Kotak Author Keren Dilengkapi Dengan Tombol Jejaring Sosial

STEP 1
Login ke blog anda dan masuk di menu Template kemudian silahkan backup dulu template anda, setelah selesai mem-backup template anda, silahkan klik tombol Edit HTML

STEP 2
Kemudian carilah kode <Head> (gunakan Ctrl + F untuk memudahkan pencarian).

STEP 3
Setelah menemukan kode <Head>, silahkan copy kode di bawah ini, dan letakkan (paste) tepat di bawah kode <Head> tadi

<style>
.mdauthor_info{
float:left;
width:590px;
padding:10px;
border:1px solid #ccc;
margin-bottom:10px;
margin-top:10px;
background:#fff;color:#000;
}
.mdauthor_info:hover{
background:#fff;
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);
}
.mdauthor_info h3{
color:#000;
margin-bottom:10px;
}
.mdauthor_info 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);
}
.mdauthor_photo{
float:right;
margin:0 0 0 10px;
}
.mdauthor_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;
}
.mdauthor_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(-1deg);
-moz-transform:rotate(-1deg);
-ms-transform:rotate(-1deg);
-o-transform:rotate(-1deg);
transform:rotate(-1deg);
}
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/AVvXsEjURHpGBQWlc3u9UqelKsufPFnKeQJ_jNyzLJctYiRKTczHmzq40V7VkKA47VY7_eCPWcO-0WcsJoaNCu1Dvac3PaEoRM18dBpGRP264j0Gk4mg8OxqzwjrLiAHxZ8JPNREE05SSpjzrbFw/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;
}
</style>

Catatan : Kode yang ditandai dengan warna merah (590) diatas adalah ukuran kotak author, silahkan anda ubah dan sesuaikan dengan ukuran blog anda.

STEP 4
Selanjutnya cari lagi kode <div class='post-footer-line post-footer-line-1'>, jika anda sudah menemukannya, silahkan copy kode dibawah ini dan letakkan (paste) tepat di bawah kode <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == "item"'>
<div class='mdauthor_info'>
<div class='mdauthor_photo'>
<img alt='author' height='120' src='Masukkan URL/Link Foto Anda Disini' width='120'/>
</div>
<h2 style='font-size:16px'>Ditulis oleh: Tulikan Nama Anda.</h2>
<p>Silahkan Masukan Teks Anda Disini</p>
<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=not', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='not'/>
<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/User Name FeedBunner Anda'>Rss</a>
</li><li class='twicon'>
<a href='http://twitter.com/http://twitter.com/http://twitter.com/User Name Twitter Anda'>Twitter</a>
</li><li class='fbicon'>
<a href='http://facebook.com/User Name Facebook Anda'>FaceBook</a>
</li><li class='gicon'>
<a href='https://plus.google.com/116574253515367930225'>Google +</a>
</li>
</ul>
</div>
</b:if>

Catatan :

Jika anda menemukan 2 atau lebih kode <div class='post-footer-line post-footer-line-1'>, silahkan pastekan kode diatas tepat dibawah kode yang kedua.
Kode yang ditandai dengan warna ungu (120) diatas adalah kode ukuran foto pada kotak author (Height=Tinggi dan Width=Lebar), silahkan ubah sesuai selera anda.
Kode yang ditandai dengan warna kuning (Masukkan URL/Link Foto Anda Disini) diatas silahkan diganti dengan url foto anda yang akan ditampilkan pada kotak author.
Kode yang ditandai dengan warna hijau (Tulikan Nama Anda) diatas silahkan ganti dengan nama anda.
Kode yang ditandai dengan warna Pink (Silahkan Masukan Teks Anda Disini) diatas silahkan ganti dengan teks yang anda ingin tulis.
Kode yang ditandai dengan warna orange (User Name FeedBunner Anda) diatas silahkan diganti dengan username Feedbunner anda.
Kode yang ditandai dengan warna biru muda (User Name Twitter Anda) diatas sialahkan diganti dengan username Twitter anda.
Kode yang ditandai dengan warna biru tua (User Name Facebook Anda) diatas silahkan ganti dengan ussername Facebook anda.
Kode yang ditandai dengan warna merah (116574253515367930225) diatas silahkan ganti dengan ID Google+ anda.

Nah jika sudah sekarang klik tombol Save Template dan lihat hasilnya, untuk contohnya silahkan lihat kotak author blog saya di bawah postingan ini.

Baiklah, sampai sini dulu postingan kali ini, semoga bermanfaat bagi anda. Jika anda bingung atau yang ada ingin ditanyakan tentang Cara Mudah Membuat Kotak Author (Author Box) Keren Dilengkapi Dengan Tombol Jejaring Sosial ini, silahkan berkomentar ditempat yang telah disediakan dibawah. Ok terima kasih atas kunjungannya, Wassalam

Original by : idseoblog