Memasang Kode Tooltip
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 : * Get Blank Template. edit background warna sesuai keinginan klik simpan selesai.
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 : * Get Blank Template. edit background warna sesuai keinginan 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
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="M2010-styles">
body {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirQVAeELBFv0lzvxLWjN-oq68HQ4CLjCcAtOusXcyGGs9fP0J5Mxjd_yBEtsJYq0HJD4sjceR_aKrzHu0bLWeFPtnCuFSY2XIw3iCnW-WWCqFNctmn5ehdkQ-we5sp8RE9_aSdWf2VE2Sn/s1600/Transparent-M2010.png);color:red;height:100%;overflow:hidden;}
body {);color:red;height:100%;overflow:hidden;}
body {
background-color: #1f253d;
font: 100%/1 "Futura", sans-serif;
margin: 0;
padding: 0;
}
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%;
height:50px;
text-align: center;
font-size: 6px;
background: linear-gradient(270deg,#b27000, #0033ff, #b27000);
border-bottom:1px solid #111;
}
.ap {
position: fixed;
right: 0;
bottom:-23px;
left: 0;
height: 70px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size: 11px;
background: linear-gradient(270deg,#0033ff,#b27000,#0033ff );
border-top: 2px solid #f0f;
z-index: 9999;
}
h2 {
padding:15px;
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%);
background: linear-gradient(transparent 10%, #0a0 50%, transparent 90%);
}
#M-2010, #teks, #posisi, #dibawah {
position: absolute;
font-size: 11px;
margin: 2px
}
#M-2010, #teks div {
text-decoration: underline;
cursor: pointer
}
#teks, #posisi {
text-align: right;
right: 50px;
}
#teks, #dibawah {
text-align: left;
left: 50px;
}
#dibawah, #posisi {
bottom:35px;
}
#tooltip-image {width:410px;float:left;border-radius:50%}
.container {
width:110px;height:110px;margin:0 0 30px 10px;
margin-top:-130px;
left:190px;
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
margin-top:-130px;
left:190px;
}
.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
}
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);
}
img{
-webkit-filter: grayscale(1);
cursor: pointer;
transition: all .5s ease;
}
img:hover{
-webkit-filter: grayscale(0);
transform: scale(1.2,1.2);
}
@keyframes rotation{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}}
.klapklip {
-webkit-animation: fade-in 6.2s linear infinite alternate;
-moz-animation: fade-in 6.2s linear infinite alternate;
animation: fade-in 6.2s linear infinite alternate;
}
@-moz-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.klapklip {
font-family: 'Rye', cursive;
text-transform: uppercase;
text-align: center;
margin-top:80px;
font-weight: 400;
line-height: 1.5;
text-shadow: 1px 1px 0px white;
-webkit-transition: all 0.8s;
transition: all 0.8s; }
.klapklip {
padding: 10px;
font-size: 25.5em;
color: #f00; }
@media all and (min-width: 50em) {
.klapklip {
padding: 15px;
font-size: 4.5em; } }
</style>
<p class="illuminated" id="lbl">
Myscript2010</p>
<div class="klapklip">a WEB<br>DESIGNER</div>
</div></div>
<div id="tooltip-image">
<div class="container">
<a class="buttonLogo"
expr:href="data:blog.homepageUrl"></a>
<div class="name">
M-2010
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheb66-ruExEUMAvtdukc4QeS06_iwDlHuz1l59OtQbZKZVg_Z_4BeyYr7iVJ8UpWpJFOsWDPIIQGMyBAE7ql82rL6EPE80luKzQ8l6pPmGeTHC2F37X3pjbBSmaycBL9Jvu8A9hse7Ks8/s1600/Bloggers-M2010.png" alt="Mys2010" class="pic">
</div>
</div>
<p class="comment">
<font size="3" color="green"face="vivaldi">
Mari Belajar</font></p>
</div>
<header> <a href="http://Link Judul" target="_blank"title="Mari Belajar"> <h2> <span style="color:#000; font-size: 10pt">TOOLTIP</a> </h2> </a> </div> </header> <div class="ap" id="ap"> <div align="center"> <div id="dibawah"> <span style="font-family: arial ; font-size: 12px; color:#f00;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><span style="color: #FFFF00; font-size: 14px;"> M - 2010 </a> DOWNLOAD </a> </div> <div id="posisi"> <span style="font-family:arial;font-size:12px;color:#f00;"> COPYRIGHT <a href="http://tools-gradiend.blogspot.co.id/2017/02/building-bditor.html"target="_blank"title="Edit Code"><span style="color: #FFFF00; font-size: 14px;"> © - 2017 </a> EDITORS </a> </div> <h2> <div align="center"> <a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html" target="_blank" title="Visit Website"> <img class="expando" border="0" src="https://sites.google.com/site/code6916/file/M-2010.png" width="140"height="10"></h2> </a></div> </div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link href='http://fonts.googleapis.com/css?family=Rye' rel='stylesheet' type='text/css'>
<link<script>
function flicker(){
$("#lbl").removeClass("illuminated");
setTimeout(function()
{
$("#lbl").addClass("illuminated");
},50);}
function triggerFlicker(){
setTimeout(flicker,/*i**/100);
setTimeout(triggerFlicker,Math.floor(Math.random()*2000)/*+(times*100)+(250)*/);}
triggerFlicker();
</script> href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
If you want to directly copy and paste you canDownload Tooltip
