Disclaimer Widget #2 (Disclaimer like me)

From: @Momo.izuka

Selamat Siang semuanyaaaaa~ Fathya mau posting tutorial membuat Disclaimer #2. Eh? 2? 1-nya mana dong? Disini >> Dislaimer Widget #1 << Nah.... lanjut yuk
Bagi yang belum tahu, apa itu Disclaimer, kalian bisa baca di >>https://f47hy4.blogspot.com/2019/09/how-to-make-disclaimer.html<<

• 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>

Note:

Hijau: kata-kata kalian
Merah: URL background
Credit: Here, and Here
Live preview:

YOUR TEXT HERE!