Cara Membuat Author Box Responsive

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Halo sobat, Kali ini saya akan share Cara Membuat Author Box Responsive. Setelah saya coba merangkai kode akhirnya saya bisa membuat author box ini, Meskpun ini masih V0.1 saya sangat semangat untuk mengupdatenya kalo ada waktu. Sudah melihat gambarnya? Pastinya sudah dong. Langsung aja ke tutorialnya gan.

STEP BY STEP:

• Masuk ke Blogger
• Klik Template > Edit HTML
• Cari kode ]]><
• Kemudian pastekan kode dibawah ini tepat diatas kode ]]><

/*BOX AUTHOR*/.boxauthor{position:relative;border:1px solid #000;background:#eee;box-shadow:0 0 5px #444 inset;margin:25px 0 15px;padding:10px}.boxtitle h3{color:#000;font:bold 14px Electrolize;background:#eee;width:103.3%;display:block;position:relative;border:1px solid #000;box-shadow:0 0 5px #444 inset,0px 0 5px #000;margin:0 0 0 -22px;padding:7px 0 7px 25px}.boxtitle h3:before{content:&#39;&#39;;position:absolute;bottom:-10px;left:0;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px}.boxtitle h3:after{content:&#39;&#39;;position:absolute;bottom:-10px;right:0;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}.boxauthor_photo{float:right;background:#eee;position:relative;z-index:999;box-shadow:0 0 5px #000;margin:-21px 0 5px;padding:30px 5px 5px}.boxauthor_photo:before{content:&#39;&#39;;position:absolute;top:0;right:135px;width:0;height:0;border-color:transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}.boxauthor_photo:after{content:&#39;&#39;;position:absolute;top:0;right:-10px;width:0;height:0;border-color:transparent transparent #333;border-style:solid;border-width:0 10px 10px 0}.boxauthor_photo img{width:120px;height:120px;border:2px solid #444}.boxcontent{font:12px/18px Electrolize,sans-serif;text-align:justify;color:#000;float:left;top:5px;left:0;display:block;position:relative;width:420px}.boxsocial{background:#eee;margin-left:-22px;width:100%;overflow:hidden;border:1px solid #000;box-shadow:0 0 5px #444 inset,0px 0 5px #000;padding:5px 5px 5px 40px}.boxsocial :before{content:&#39;&#39;;position:absolute;bottom:0;left:-12px;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px}.boxsocial :after{content:&#39;&#39;;position:absolute;bottom:0;right:-12px;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}.boxsocial a{text-align:center;background:#111;display:block;color:#fff!important;font:bold 12px Electrolize,sans-serif;text-decoration:none;border:1px solid #000;transition:all 1s ease;box-shadow:2px 2px 0 0 rgba(51,51,51,1)inset;padding:7px 0}.boxsocial a:hover{box-shadow:0 0 5px #000;border:1px solid #fff}.boxsocial div{float:left;margin-right:6px;width:88px}.boxsocial .boxsocialtitle{font:bold 12px Electrolize,sans-serif;text-align:center;text-transform:uppercase;display:block;width:107px;border:1px solid #000;box-shadow:0 0 5px #444 inset;padding:7px 22px}

• Lalu cari kode <data:post.body/> 
• Kemudian Copy dan Peste kode dibawah ini tepat diatas kode <data:post.body/> . Biasanya ada  2-4 

<div class='boxauthor'>
<div class='boxauthor_photo'>
<img alt='Rifky Umami' src='https://lh3.googleusercontent.com/-DSg_EBm7Qqs/AAAAAAAAAAI/AAAAAAAAAmg/4IHpfm3-Lb8/s120-c/photo.jpg' title='Rifky Umami'/>
</div>
<div class='boxtitle'>
<h3>Author : <a expr:href='data:post.authorProfileUrl' rel='author' target='_blank' title='Rifky Umami'><data:post.author/></a></h3></div>
<div class='boxcontent'>
Terimakasih, telah membaca artikel mengenai <b><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></b>. Semoga artikel tersebut bermanfaat untuk Anda. Mohon untuk memberikan 1+ pada <a href='https://plus.google.com/+Rifkyumami24?rel=author' rel='author' target='_blank' title='Google+'>Google+</a>, 1 Like pada <a href='https://www.facebook.com/rifky212' rel='me' target='_blank' title='Facebook'>Facebook</a>, dan 1 Follow pada <a href='https://twitter.com/Rifkyumami24' rel='me' target='_blank' title='Twitter'>Twitter</a>. Jika ada pertanyaan atau kritik dan saran silahkan tulis pada kotak komentar yang sudah disediakan.
</div>
<div class='boxsocial'>
<div class='boxsocialtitle'>
Share Artikel
</div>
<div class='boxfb'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'>Facebook</a>
</div>
<div class='boxtwit'>
<a expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'>Twitter</a>
</div>
<div class='boxgplus'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'>Google+</a>
</div>
<div class='boxltsme'>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' target='_blank' title='Share ke Lintasme'>Lintasme</a>");
//]]>
</script>
</div>
</div>
</div>

• Simpan dan lihat hasilnya. 

Note: 

1. Ganti kode yang berwarna MERAH dengan nama kalian.

2. Ganti kode yang berwarna BIRU dengan URL gambar kalian.

3. Ganti kode yang berwarna HIJAU dengan ID Google Plus kalian.
4. Ganti kode yang berwarna ORANGE dengan ID Facebook kalian.

5. Ganti kode yang berwarna UNGU dengan ID Twitter kalian.