Cara Memasang Widget Kotak Teks ala Studio 42 UHF Di Pojok Blog

Athallah (Seira Otoshiro)    1/19/2017 10:29:00 pm    Blogging , CSS , HTML , Widget    Comment   

Ini Nonton Paltv Studio 42 UHF Di Palembang. Ini Palembang Square Studio 42 UHF PALTV. Anda Ini PALTV Terus. Cara Memasang Widget Kotak Teks ala Studio 42 UHF Di Pojok Blog Apakah Judulnya Teks. Ini Palembang Sumatera Selatan Di PSx. Siapa Apakah Ini.

Cara Memasang Widget Kotak Teks ala Studio 42 UHF

1. Masuk Blogger
2. Jangan Lupa Font Oswald Klik Template
3. Terus Edit HTML
4. Tekan Key Ctrl + F Terus Ketik Cari </head> Untuk Google Font Gaya
5. Letakkan Kode Dibawah </head> Diatas Untuk Google Font Gaya

<link href="https://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet"/> 

6. Selesai Klik Simpan Template
7. Selanjutnya Klik Tata Letak
8. Terus Klik Tambahkan Gadget
9. Lanjut Klik HTML/Javascript
10. Letakkan Kode Dibawah Kotak Teks ala Studio 42 UHF

<style>
.kotakstudio42 {position: fixed;
    bottom: 30px;
    right: 30px;
    width: 120px;
    height: 120px;
    background-color:#37b1c9;
    color:#FFF;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    font-size: 20px;
    text-transform: uppercase;
    border-radius: 3px;
    line-height: 1.2;
    z-index: 15000;}
.wraps42{padding: 15px 5px 0px;}
.judulstudio42{color:#f6e85e}
.kotakstudio42 a {
    color: #FFF;text-decoration: none;}
.kotakstudio42 a:hover {
    color: #EEE;
}
</style>

<div class="kotakstudio42">
<div class="wraps42">
<a href="http://athallahtemplate-ma-ii.blogspot.com/2017/01/cara-memasang-widget-kotak-teks-ala.html" title="Get Widget Kotak Teks ala Studio 42"  target="_blank">
<span class="judulstudio42">Aikatsu</span> Idol Academy</a>
</div>
</div>

Perhatikan Berwarna Merah Ganti Warna  #37b1c9
Perhatikan Berwarna Biru Ganti Teks Jangan Hapus ini <span class="judulstudio42">
Untuk Smartphone dan Tablet Ini Sembunyi Anda Responsif

@media screen and (max-width:960px) {
.kotakstudio42{display: none;}
}

11. Selesai Klik Simpan
12. Lihat Hasil Blog

Animasi Kotak Teks

Animasi Putar Bergoyang

.kotakstudio42 {animation: anistudio42 2s linear 0s infinite alternate;}

@keyframes anistudio42 {
    from   {transform: rotate(-20deg);}
    to  {transform: rotate(20deg);}
}

Animasi Putar Bergoyang part 2

.kotakstudio42 {animation: anistudio42 2s linear 0s infinite alternate;}

@keyframes anistudio42 {
    from   {transform: skew(20deg, -20deg);}
    to  {transform: skew(-20deg, 20deg)}
}

Animasi Putar

.kotakstudio42 {animation: anistudio42 5s linear 0s infinite;}

@keyframes anistudio42 {
    from   {transform: rotate(0deg);}
    to  {transform: rotate(360deg);}
}
}

Animasi Putar 3D Y

.kotakstudio42 {animation: anistudio42 5s linear 0s infinite;}

@keyframes anistudio42 {
    from   {transform: rotateY(0deg);}
    to  {transform: rotateY(360deg);}
}

Animasi Putar Bergoyang Perspektif 3D Y

.kotakstudio42 {animation: anistudio42 3s linear 0s infinite;}

@keyframes anistudio42 {
    0%   {transform: rotatey(0deg) ;}
    25%   {transform: rotatey(20deg) perspective(100px);}
    50%   {transform: rotatey(0deg) ;}
    75%   {transform: rotatey(-20deg) perspective(100px);}
    100%   {transform: rotatey(0deg);}
}

Animasi Skala Lucu 1.5

.kotakstudio42 {animation: anistudio42 1s linear 0s infinite alternate;}

@keyframes anistudio42 {
    from   {transform: scale(1.5, 1);}
    to  {transform: scale(1,1.5)}
}

Animasi Skala Lucu 2

.kotakstudio42 {animation: anistudio42 1s linear 0s infinite alternate;}

@keyframes anistudio42 {
    from   {transform: scale(2, 1);}
    to  {transform: scale(1,2)}
}

Animasi Skala Putar 3D

.kotakstudio42 {animation: anistudio42 3.5s linear 0s infinite;}

@keyframes anistudio42 {
    0%   {transform: scale(1, 1);}
    25%   {transform: scale(1, -1);}
    50%   {transform: scale(-1, -1);}
    75%   {transform: scale(-1, 1);}
    100%   {transform: scale(1, 1);}
}

Animasi Skala Putar 3D Part 2

.kotakstudio42 {animation: anistudio42 3.5s linear 0s infinite;}

@keyframes anistudio42 {
    0%   {transform: rotateX(0deg);}
    25%   {transform: rotateX(180deg);}
    50%   {transform: rotateZ(180deg);}
    75%   {transform: rotateY(180deg);}
}

--- Segera ---

Selamat Mencoba, PALTV Studio 42 UHF