Cara Membuat Efek Gelap Terang

Efek gelap terang merupakan efek yang dapat ditambahkan dalam suatu kotak dialog dan kotak widget. Efek ini akan berimplikasi pada perubahan cahaya dari gelap ke terang. Penambahan efek akan membuat tampilan blog menjadi lebih atraktif dan menjadi daya tarik tersendiri bagi tampilan blog anda. Kemudahannya efek ini hanya dibuat dengan css. Sekarang mari kita bahas cara membuat efek gelap terang. Ikuti langkah berikut.

Masuk blogger
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></b:skin>

.blogonol-lightdark-box{ position:relative;  display:block;  width:auto;  max-height:400px;  background:#fff;  color:#000;  overflow:auto;  padding:20px 15px;  margin:20px 5px;  border:2px solid #777;  border-radius:6px;  opacity:0.2;  filter:alpha(opacity=20);  transition:1s;  -o-transition:1s;  -moz-transition:1s;  -webkit-transition:1s}
.blogonol-lightdark-box:hover{ opacity:1.0;  filter:alpha(opacity=100)}

Klik Simpan Template
Selanjutnya bila anda ingin menambahkan efek gelap terang pada dialog box, pada saat menulis artikel masuk pada edit HTML di sebelah kiri atas samping Compose. Lihat gambar di bawah ini.

Berikan kode berikut pada tempat atau tulisan yang ingin anda berikan efek gelap terang.

<div class="blogonol-lightdark-box">

LETAKKAN TEXT, GAMBAR, DAN LAINNYA DI SINI

</div>

<p class="blogonol-lightdark-box">

LETAKKAN TEXT, GAMBAR, DAN LAINNYA DI SINI

</p>

Lihat contoh penggunaan di bawah ini.
<div class="blogonol-lightdark-box">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRP_n1Xeyw0Us8FRnvMeABFjAcBCKglKrSny2aSGG2creiXA5C6mNJTS8-rNXnfcXD94QCUWYCGQH6-96L0eKBG98hsyBeCUf65vttV6DP5jNHmPs6vqXkkuCCqW_nH2vMCkTKVvuDqvE/s1600/blogonol-edit-html-tool.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="91" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRP_n1Xeyw0Us8FRnvMeABFjAcBCKglKrSny2aSGG2creiXA5C6mNJTS8-rNXnfcXD94QCUWYCGQH6-96L0eKBG98hsyBeCUf65vttV6DP5jNHmPs6vqXkkuCCqW_nH2vMCkTKVvuDqvE/s640/blogonol-edit-html-tool.jpg" width="640" /></a></div>
</div>

<div class="blogonol-lightdark-box">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRP_n1Xeyw0Us8FRnvMeABFjAcBCKglKrSny2aSGG2creiXA5C6mNJTS8-rNXnfcXD94QCUWYCGQH6-96L0eKBG98hsyBeCUf65vttV6DP5jNHmPs6vqXkkuCCqW_nH2vMCkTKVvuDqvE/s1600/blogonol-edit-html-tool.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="91" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRP_n1Xeyw0Us8FRnvMeABFjAcBCKglKrSny2aSGG2creiXA5C6mNJTS8-rNXnfcXD94QCUWYCGQH6-96L0eKBG98hsyBeCUf65vttV6DP5jNHmPs6vqXkkuCCqW_nH2vMCkTKVvuDqvE/s640/blogonol-edit-html-tool.jpg" width="640" /></a></div>
</div>

<p class="blogonol-lightdark-box">

Efek gelap terang merupakan efek yang dapat ditambahkan dalam suatu kotak dialog dan kotak widget. Efek ini akan berimplikasi pada perubahan cahaya dari gelap ke terang.

</p>

Klik Publikasikan dan lihat hasilnya
Selamat mencoba dan sukses selalu.

"keep spirits and do the best"