2 Cara Membuat Opacity Transition Box

Saya minta maaf karena saya sibuk dan tidak sempat update postingan. Langsung saja, saya ingin sharing sebuah trik cara membuat opacity transition Box widget. Opacity Transition Text Box ini berfungsi untuk membuat tampilan box tulisan atau java script menjadi lebih indah. Saat Opacity Transition Text Box ini disentuh maka akan berganti warna border dan warna background secara animasi. Ingin tahu caranya? ikuti step by step di bawah ini.

1. Login ke Blogger
2. Masuk ke Dashboard lalu ke Rancangan
3. Klik Edit HTML
4. Cari kode ]]></b:skin> lalu copy pastekan kode di bawah ini dan letakkan tepat diatas kode ]]></b:skin>

.boxwidget {
 height: 150px;
 overflow: auto;
margin: 20px 4px 10px;
padding: 15px 8px;
background: #000000;
color: #FFF;
border: 2px solid #FF0000;
border-radius: 3px;
-moz-border-radius: 3px;e -webkit-border-radius: 3px;
opacity: 0.4; filter:alpha(opacity=40);
-o-transition: all ease-in 1.2s; -moz-transition: all ease-in 1.2s; -webkit-transition: all ease-in 1.2s; }
.boxwidget:hover {
background: #FFFFFF;
color: #000;
border-radius: 7px;
-moz-border-radius: 7px; -webkit-border-radius: 7px;
border: 2px solid #B3B3B3;
opacity: 1.0; filter: alpha(opacity=100); }

5. Setelah itu, Simpan
6. Jika ingin menggunakan kode widget tersebut untuk postingan blog masukkan kode ini.

<div class="boxwidget"> Di sini widget atau Teks diletakkan!
</div>

7. Setelah selesai simpan. Mudah kan?

Screenshot : Yang saya Pakai pada kode CSS ]]></b:skin> tadi ya....
Cukup sekian postingan saya malam ini. Semoga trik ini berguna bagi anda yang memiliki blog dan pengunjung yang baik akan meninggalkan komentar yang baik pula.

Anda sedang membaca artikel tentang Cara Membuat Opacity Transition Box. Jika anda ingin mengcopy paste artikel ini harap mencantumkan Strit89.blogspot.com sebagai sumbernya.

Related Article: