Code Author with light shadow

Memasang kode Author with light shadow
Code ini menggunakan CSS dan HTML. Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru, buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template
ganti dengan kode blank template, yang tersedia pada sumber berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

 <style class="Mys2010-styles">
body {background-image: url
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwHy3bSUmgCTWLhhYIWL-iLwvu-Ks4pcu76gryPSjKEW_0VPYfklp71SouJr30SYzdQxBKLGCSu4oiGbsneRVDuTwMBUMgCoFWi4UnM-A01H3ObfFCSjTNzojAr_ITJhofoddWykaI2vSN/s1600-r/Darkwood-mys2010.jpg)
;color:red;height:100%;overflow:hidden;}

header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #222;
  border-bottom: 3px solid #006B6B;
}

/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: #111;
border-top: 2px solid #f0f;
z-index: 9999;
}

/*box shadow*/
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#container{ 
  position:absolute;
          transform:translate(-20%,-20%);
  left:32%; top:  150;
  width:610px;
  height:366px;
  box-shadow:0px 0px 30px 0px #fff; 
  border: solid 6px aqua;
}

/*BOX AUTHOR*/
.boxauthor{position:relative;border:1px solid #000;background:#aaa;box-shadow:0 0 115px #555 inset;margin:-1px 0 15px;padding:10px}
.boxtitle h3{color:#000;font:bold 14px Electrolize;background:#aaa;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:#aaa;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:#ddd;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}</style>

<header> 
<div class="Top Title Header">
<div align="center">
<font size="1" color="green"face="arial"><a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html" target="_blank" title="Myscript2010"><b>LET'S STUDY</b></a>
</div>
</header>

<div id='container'>
<div class='boxauthor'>
<div class='boxauthor_photo'>
<a href="https://sites.google.com/site/fileblogfor/code/Code-Author-mys2010.css" target="_blank" title="Download Code Author"><img alt='Myscript2010' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha0B5pl3QXOjTn4hHHEn16P7qzhqKTRf-LZUxvkDmkPf5SeBXwbLuFoPvVOff7H2mmj5fwmljsvPgBIk33Ffmq0b1d9KdbYHfUk6RoD2xSxYBZuj6OKGGafpxgxjC_RjEW_F1hjEsqSeI/s1600-r/Hearts-icon_mys2010.png' title='Get in the Code Author'/>
</div>
<div class='boxtitle'>
<h3>
Author : <a expr:href='data:post.authorProfileUrl' rel='author' target='_blank' title='Myscript2010'><data:post.author/></a></div>
<font size="4" color="brown"face="vivaldi"> 
&nbsp;&nbsp;<b>Myscript2010</b>
</font> <font size="2" color="#800080"face="arial">
&nbsp;&nbsp; Terimakasih telah berkunjung ke my webblogg, 
&nbsp;&nbsp; semoga artikel yang ada pada webblog dapat menambah pengetahuan, 
<div class='boxcontent'>
<p align="center">
<textarea class="input" cols="70" onclick="javascript:this.select();" readonly="true" rows="8" style="background: pink;"> 
<a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Mari Belajar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrjn8iTN7rj-5VmW9bGueqFYkdoNsLF6ibHHLtZBY2Ib5b0KvS1mqlb1nJzSC5tDbjfeVrDshxgYuabN9C28hgJiS3Ozp4pMu1SESiBIvvknYCeClWk8b-rJv0tFkN2Km7H0SCH4HjXKI/s1600-r/backlink_mys2010.gif" alt="Mari Belajar" /></a></textarea>
</center>
</div>
<div class='boxsocial'>
<div class='boxsocialtitle'>
MARI BELAJAR
</div>
<div class='boxfb'>
<a href="https://www.facebook.com/learn.editing.myscript2010" target='_blank' title='My FB'>Facebook</a>
</div>
<div class='boxtwit'>
<a href="https://twitter.com/myscript2010s" target='_blank' title='My Twitter'>Twitter</a>
</div>
<div class='boxgplus'>
<a href="https://plus.google.com/u/0/101254379497511200564/posts" target='_blank' title='My Google+'>Google+</a>
</div>
<div class='boxltsme'>
<script>//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.stumbleupon.com/stumbler/Mys2010/lists/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' target='_blank' title='My Stumbler'>Stumbler</a>");
//]]>
</script>
</div>
</div>
</div>

</div>
</div>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<p>
<a href="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html" target="_blank" title="Home Page">
Cibeber Cimahi</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9mZwE1hxxBIz-tWksu-19Ci_bDAev9Twjk2s3_RJ3Y3DqPeaPkqWJ3nwDgTJ40UNr7AfkjNcUrMrZyk7sjM5SW9zZawfYM2izL8G7E0tKNBQtsGXomZXySgY_AFT2HEx818p1SNdjUrLt/s1600-r/Loading-Mys2010.gif" name="e902" border="0" width="28" height="29" /></a>

Penjelasan :
Ganti Link Gambar, Link Title dan code backlink

Sources by. All Sources
Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Author light shadow

Category: Code Author with light shadow

Tweet

Related Posts : Code Author with light shadow

Mys2010 on Codepen

POPULAR

Blog Archive