HOME ABOUT LINKIES STUFF NEWER OLDER FOLLOW

Angel's Diary


Dislaimer


Hello Visitor! My Name is Angel, welcome to my blog! In this blog, you can see Tutorial,Freebies, And Another! Enjoy!


Cbox

Put Your Code Cbox Here!

Credit

Skins By : Agna.

Owner : Angel

(Special 30 Followers) Tutorial Membuat Disclaimer #1


Haiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii!
Panjang amat?! Maafkan saia, saia memang tak jelas :'v . Oke, next aja buat tutonya.
Credit: Aizza Chan
Caranya:
  • Log in akun blog
  • Untuk Simple Template: Dashboard >> Tata Letak >> Add Gadget >> HTML/JavaScript
  • Untuk Blogskin: buat kolom sidebar baru
  • Copas kode di bawah ini

<link href="https://fonts.googleapis.com/css?family=Sniglet" rel="stylesheet" />
<style>
.view {
   width: 200px;
   height: 200px;
   margin: 10px;
   border: 7px dotted #F1BDBD;
   outline: 3px solid #F1BDBD;
   overflow: hidden;
   display:inline-block;
   position:relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #DDDDDD;
   -moz-box-shadow: 1px 1px 2px #DDDDDD;
   box-shadow: 1px 1px 2px #DDDDDD;
   background:url(https://media.giphy.com/media/aeADLHY5RlsgE/giphy.gif) repeat center center;
}
.view-four img {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.view-four .mask {
   background-color: rgba(255, 231, 179, 0.3);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-four h2 {
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   background: transparent;
   margin: 20px 40px 0px 40px;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   color: #333;
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-four p {
   color: #333;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-four a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-four:hover img {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-four:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-four:hover h2,.view-four:hover p,.view-four:hover a.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view .mask,.view .content {
   width: 200px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: none;
   text-align: center;
   position: relative;
   font: 12px 'Sniglet';
   padding: 40px;
   background: #F1BDBD;
   color: #000;
   margin: 25px 0 0 0;
opacity: .10;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 10px 10px;
   font:17px century gothic;
   background: #ff96aa;
   color: #FFFFFF;
   margin-top:50px;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #FF899C;
   -moz-box-shadow: 0 0 1px #FF899C;
   box-shadow: 0 0 1px #FF899C;
}
.view a.info:hover {
   -webkit-box-shadow: 0px 3px 13px #FF899C;
   -moz-box-shadow: 0px 3px 13px #FF899C;
   box-shadow: 0px 3px 13px #FF899C;
}
.nice {
height: 200px; padding: none; width: 200px;
}
</style>
<center>
<div class="view view-four">
<img class="nice" src="https://media.giphy.com/media/aeADLHY5RlsgE/giphy.gif" />
                    <br />
<br />
<div class="mask">
<h2>
YOUR TEXT HERE!</h2>
         
</div>
<br />
</div></center>

Hijau: Kata-kata kalian
Merah: Url background
Live preview:




YOUR TEXT HERE!


Byee!

Label: