Memasang kode Animated Popup Author
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
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
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style type="text/css">
/*Top Title Header*/
body {background-image: url
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdSM1r2pEjYlKghEhPQndc0L03LlBjIQCzUGLf0gXGznARJcgEBBvZK4xkUTPhUCfRIjy54CiIWc_nxH9I2JxmmQEArfG_uPDrgUPpiQyXsvX6hL-QAbltBaMYIPfF4uuZzyEETwWT1ODi/s1600-r/tr-mys2010.jpg)
;color:red;height:100%;overflow:hidden;}
html {
font: 10px 'Open Sans', 'Helvetica', Sans-serif;
}
header {
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
padding: 7px 0;
position: fixed;
top: 0;
width: 100%;
background: #FF0000;
border-bottom: 3px solid #dad;
}
/*box popup*/
h1 {
color: #fff;
font-weight: 200;
text-align: center;
position: absolute;
top: 45%;
width: 100%;
}
h2 {
color: #9400D3;
font-weight: bold;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
margin-bottom: 15px;
}
p {
color: #001818;
}
.wrap {
position: absolute;
overflow: hidden;
top: 10%;
right: 10%;
bottom: 85px;
left: 10%;
padding: 20px 50px;
display: block;
border-radius: 4px;
transform: translateY(20px);
transition: all 0.5s;
visibility: hidden;
}
.wrap .content {
opacity: 0;
}
.wrap:before {
position: absolute;
width: 1px;
height: 1px;
background: #000;
content: "";
bottom: 10px;
left: 50%;
top: 95%;
color: #fff;
border-radius: 50%;
-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrap.active {
display: block;
visibility: visible;
box-shadow: 2px 3px 16px red;
transition: all 600ms;
transform: translateY(0px);
transition: all 0.5s;
}
.wrap.active:before {
height: 2000px;
width: 2000px;
border-radius: 50%;
top: 50%;
left: 50%;
margin-left: -1000px;
margin-top: -1000px;
display: block;
-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrap.active .content {
position: relative;
z-index: 1;
opacity: 1;
transition: all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
a.button {
padding: 11px 11px 13px 13px;
outline: none;
border-radius: 50%;
background: #00008B;
color: #fff;
font-size: 24px;
display: block;
position: fixed;
left: 50%;
bottom: 20px;
top: auto;
margin-left: -25px;
transition: transform 0.25s;
}
a.button:hover {
text-decoration: none;
background: #2198ff;
}
a.button.active {
transform: rotate(135deg);
transition: transform 0.5s;
}
/*box author*/
.Mys2010{ width:auto; background:#2F4F4F; border:2px solid #333; margin:30px 0 10px 0; display:block; font-family:"Mys2010"; color:#48D1CC; } .Mys2010.kontainer{padding:5px;} .Mys2010 h4{ background: #800080 ; border:none; border-bottom:1px solid #fff; color:#fff; font-family:".Mys2010"; text-shadow:0 1px 0 rgba(0, 0, 0, 0.4); padding:5px 30px; margin:0 0 0 0; display:block; } .Mys2010 h4 a{color:#fff;} .Mys2010 img{ background:#444; width:103px; height:116px; border:1px solid #444; margin:3px 10px 0 0; float:right; padding:2px; box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none; }
</style>
<a class='button glyphicon glyphicon-plus' href='#'></a>
<header> <div class="Top Title Header"> <p align="center"> <a href="http://demoshow-mys2010.blogspot.co.id/2016/02/3d-images-gallery1.html" title="Myscript2010">♥ ♥ ♥</a> </header>
<font size="3" color="green"face="Bernard MT Condensed"> <h1> ANIMATED POPUP AUTHOR</h1> <div class='wrap'> <div class='content'> <h2> Well Hello!</h2> </font> <div class='Mys2010'> <h4> Author : </b> Myscript2010</h4> <div class='truck'> <img alt='Myscript2010' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu4m8sO_Jt139j3rN1duCuwhPXWd_zjF_JXEUA1fHm4qCOewiMHEBOHiT64mCXjzpHCUiYDWjDIWiWlzpQ4jtlpPI33avuCjvZIbGgoAis7FZZqTMxX7obl8Ef2TdbIVOmtEdVtjoRQlI/s1600-r/Mys2010-logo-Blogg.png'/> <font size="3" color="green"face="Agency FB"> LINK EXCHANGE </font> <font size="3" color="#BFE3FE"face="vivaldi">Mari kita Jalin Persahabatan antar sesama web</font> <textarea onclick="input" cols="88"this.focus();this.select()" onfocus="this.select()" onmouseover="this.focus()" readonly="readonly" rows="3" style="background:#2F4F4F;color:#fff;border-bottom:4px solid #2F4F4F;border-right:4px solid #2F4F4F;border-top:4px solid #2F4F4F;border-left:4px solid #2F4F4F;line-height:1.5em;padding:5px;"> <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> <div class='Mys2010'> <p align="left"> <font size="3" color="#00FFFF"face="Agency FB"> Terimakasih telah berkunjung ke my web blog, semoga artikel yang ada pada web blog dapat menambah pengetahuan. </a></div>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'> <script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script>$('a').on('click', function () {
$('.wrap, a').toggleClass('active');
return false;
});
</script>
Penjelasan :
Ganti Link Gambar, Teks, Link Title dan code backlink
Ganti Link Gambar, Teks, Link Title dan code backlink
