Text Shadow dan Tooltip

Memasang kode Text Shadow dan Tooltip
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

body {background-image: url(http://orig05.deviantart.net/e28f/f/2012/057/7/b/dark_wood_texture_by_drsela-d4r0ger.jpg);color:red;height:100%;overflow:hidden;}
#tooltip-image {width:410px;float:left;border-radius:50%}
.container {
  width:110px;height:110px;margin:0 0 30px 10px;
  position:relative;border-radius:60px; 
  background:rgba(255,255,255,.2);
  box-shadow:3px 3px 5px rgba(0,0,0,.2); 
  transition:all .5s; overflow:hidden}

.photo {
  width:90px;height:90px;margin:8px;
  border-radius:50%;position:absolute;left:0px;
  overflow:hidden;top:0;border:2px solid white}

.pic{max-width:100%}
.buttonLogo:hover {border:3px solid #5ca321}}
.buttonLogo { 
  width:60px;height:60px;position:absolute;
  right:20px;top:25px;border-radius:50%;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxWFzFsPjPC4nesKOSPCUWZJPVVr1NJqzf-rHuH6Ev13x0LQXDoALj_nQbAzR9BBNaeJ4YVpei8Xb99wPFvU50FGaliJOmCgn0N8jun3vwqxRXc3IO1YK-M4UnBZu5CK_rsJB_eiAKD1k/s1600-r/Mari-belajar-mys2010.png) no-repeat center center;
  box-shadow:0 0 0 1px rgba(0,0,0,.3),0 0 0 5px rgba(255,255,255,.3),0 0 0 6px rgba(0,0,0,.3);
  transition:all .5s;cursor:pointer}

.name{
  height:60%;width:180px;position:absolute;
  right:80px;padding:20px;font:25px arial;
  color:white;  opacity:0;
  transition:all .5s .5s;top:0;
  text-shadow:1px 2px 3px #111}

.small {font-size:14px; display:block; margin-top:10px; }
.comment {
  width:370px;position:relative;padding:15px;
  font-size:16px;color:rgba(0,0,0,.7);
  border-radius:10px;background:rgba(255,255,255,.4);
  box-shadow:3px 3px 5px rgba(0,0,0,.2);
  opacity:0;transition:all 1s;border-bottom:2px solid #080}

.container:hover{width:400px}
.container:hover .name,.container:hover + .comment{opacity:1}
.comment:before {
  content:'';width:0;height:0;position:absolute;
  bottom:100%;left:2%;
  border-bottom:15px solid rgba(255,255,255,.4);
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  border-top:15px solid transparent}

/*shadow*/
p {
  margin: 55px auto 0 auto;
  font-size:150px;
  font-weight:bold;
  font-family: Serif;
  text-align:center;
  color:rgba(0,0,255,0.1);
  text-shadow: 0 1px 0 #000,
               0 2px 0 #111,
               0 3px 0 #222,
               0 4px 0 #333,
               0 5px 0 #444,
               0 6px 1px rgba(0,0,0,1),
               0 12px 2px rgba(0,0,0,1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15),
               0 3px 8px rgba(255,255,255,.2);

}

.illuminated
{
    color: rgba(100,100,255,0.3);
    text-shadow: 0 1px 0 #000,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15),
               0 0px 6px rgba(255,255,255,.3),
               0 8px 8px rgba(255,255,255,.6),
               0 16px 16px rgba(255,255,255,.3),
               0 0 150px rgba(255,255,255,.4),
               0 0 500px rgba(255,255,255,.2);
}

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: #444;
  border-bottom: 3px solid #dad;
}
/* 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: Aqua;
background: #222;
border-top: 2px solid #f0f;
z-index: 9999;
} /* GRADIEND end */

<p class="illuminated" id="lbl">
Myscript2010</p>
<div id="tooltip-image">
<div id="tooltip-image">
<div class="container">
<a class="buttonLogo" 
expr:href="data:blog.homepageUrl"></a>
<div class="name">
Myscript2010
<span class="small">Cibeber Cimahi</span> 
</div>
<div class="photo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHLd904FR7TGg2PjSfTLxV-lG75Ijksy73gOgv4AZQiewbIua8_HEjr_ru1VmALqyqHZqgCvY9i7sp8kCkidIGQQXApUJDWN5bx7hGaXT__iV3if5riTOdo2bm6HHeRQ2eS3A6TKaRSm4/s1600-r/Mys2010.jpg" alt="Sule" class="pic">
</div>
<div class="photo">
<img src="https://sites.google.com/site/zudantaufiq/logo-bng-glass.png" alt="Mys2010" class="pic">
</div>
</div>
<p class="comment">
<font size="3" color="green"face="vivaldi"> 
Mari Belajar</font>
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<span style="color: #ddaadd; font-family: &quot;arial&quot;; font-size: x-small;"><a href="https://sites.google.com/site/fileblogfor/code/Logo-Hover-Mys2010.css"title="Myscript2010s"><b><font size="2" color="aqua"face="arial">GET IN THE CODE</a></b>
</div>
</header>
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<p>
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>

<script>
function flicker()
{
  $("#lbl").removeClass("illuminated");
  setTimeout(function()
  {
    $("#lbl").addClass("illuminated");
  },50);
}

function triggerFlicker()
{
  //var times = Math.floor(Math.random()*4);
  //for(var i=0; i<times; i++)
  //{
    setTimeout(flicker,/*i**/100);
  //}
  setTimeout(triggerFlicker,Math.floor(Math.random()*2000)/*+(times*100)+(250)*/);
</script>

Penjelasan :
Ganti Link Gambar, Teks dan Link Title Sesuai Keinginan

Sources by. All Sources
Edited by. Mys2010 on Codepen

DEMOSHOW

Category: Text Shadow dan Tooltip