Keep move on Blogger

Pusing mau mosting apaan, para developer sedang berlomba-lomba dalam pemberian jasa dengan kemudahan yang sangat membantu! Framework istilah orang bilang :D Okelah info ringan-ringan saja, dari pada tidak ngepost :P Jika sobat menemukan gambar dengan tampilan sedikit gelap, namun ingin jadi lebih terang tanpa mengedit gambar tersebut dengan tujuan mempertahankan size image, maka sobat bisa mencoba menggunakan trik & tips dari Andy Bell CSS filter image contrast. One good option dude ;)

Agar dalam belajar kita santai dan tenang, diharapkan anda memiliki W3Schools Offline Web Tutorials. Ada dua versi, yg di kompres/tidak. You can get in w3schools offline version free download or w3schools offline version download full website! This is a good for fun coy writing 'n bigpicture.js

Hajar bray!!!

Polaroid Memories - CSS only - Win8 Tiles Style - Day or Night Mode Toggler - Pure CSS Candle - Animated Scene - Quote Page - Teamy – a package with CSS animations for a team section - 3D Cube Menu (Full Page) - CSS3 Perspective Playground ✨ - Netflix style text animation with CSS - Multiple Shadows - Options Button - Responsive CSS Lightbox with No JavaScript - MOckup1 - Hello World! Popup (html, LESS) - CSS Modal

Ini mah ulangan saja sob, bagi yang mau memasang slide-show di blognya dengan kode yg minimalis bisa coba opsi fading slideshow berikut! Ada 3 varian...tinggal pilih :D

Fading Slideshow I

#stage {
margin: 1em auto;
width: 382px;
height: 292px;
}
#stage a {
position: absolute;
}
#stage a img {
padding: 10px;
border: 1px solid #ccc;
background: #fff;
width: 360px;
height: 270px;
}
#stage a:nth-of-type(1) {
animation-name: fader;
animation-delay: 4s;
animation-duration: 1s;
z-index: 20;
}
#stage a:nth-of-type(2) {
z-index: 10;
}
#stage a:nth-of-type(n+3) {
display: none;
}
@keyframes fader {
from { opacity: 1.0; }
to { opacity: 0.0; }
}

<script type="text/javascript">//<![CDATA[
  // Original JavaScript code by Chirp Internet: www.chirp.com.au
  // Please acknowledge use of this code by including this header.
  document.addEventListener("DOMContentLoaded", function(e) {
    var stage = document.getElementById("stage");
    var fadeComplete = function(e) { stage.appendChild(arr[0]); };
    var arr = stage.getElementsByTagName("a");
    for(var i=0; i < arr.length; i++) {
      arr[i].addEventListener("animationend", fadeComplete, false);
    }
  }, false);
//]]></script>

Fading Slideshow II

#stage2 {
margin: 1em auto;
width: 382px;
height: 292px;
}
#stage2 a {
position: absolute;
}
#stage2 a::after {
position: absolute;
left: 11px;
bottom: 11px;
padding: 2px 0;
width: calc(100% - 22px);
background: rgba(0, 0, 0, .5);
text-align: center;
content: attr(title);
font-size: 1.1em;
color: #fff;
}
#stage2 a img {
padding: 10px;
border: 1px solid #ccc;
background: #fff;
width: 360px;
height: 270px;
}
#stage2 a:nth-of-type(1) {
animation-name: fader;
animation-delay: 4s;
animation-duration: 1s;
z-index: 20;
}
#stage2 a:nth-of-type(2) {
z-index: 10;
}
#stage2 a:nth-of-type(n+3) {
display: none;
}
@keyframes fader {
from { opacity: 1.0; }
to { opacity: 0.0; }
}

<script type="text/javascript">//<![CDATA[
document.addEventListener("DOMContentLoaded", function (e) {
    var stage = document.getElementById("stage2");
    var fadeComplete = function (e) {
        stage.appendChild(arr[0]);
    };
    var arr = stage.getElementsByTagName("a");
    for (var i = 0; i < arr.length; i++) {
        arr[i].addEventListener("animationend", fadeComplete, false);
    }
}, false);
//]]></script>

Fading Slideshow III

#stage3 {
margin: 1em auto;
width: 360px;
height: 270px;
border: 10px solid #000;
overflow: hidden;
}
#stage3 a {
position: relative;
display: inline-block;
width: 360px;
height: 270px;
}
#stage3 a::after {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
text-align: center;
content: attr(title);
font-weight: bold;
font-size: 2em;
color: #fff;
text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 2px 2px 0 #333;
}
#stage3 a:nth-of-type(2) {
left: 360px;
top: -50%;
animation-name: slider;
animation-delay: 4s;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0, 1.5, .5, 1);
}
#stage3 a:nth-of-type(n+3) {
display: none;
}
#stage3 img {
max-width: 100% !important;
}
@keyframes slider {
from {
transform: translateY(-50%) rotate(30deg);
left: 360px;
}
to {
transform: translateY(-50%);
left: 0;
}

<script type="text/javascript">//<![CDATA[
document.addEventListener("DOMContentLoaded", function (e) {
    var stage = document.getElementById("stage3");
    var slideComplete = function (e) {
        stage.appendChild(arr[0]);
    };
    var arr = stage.getElementsByTagName("a");
    for (var i = 0; i < arr.length; i++) {
        arr[i].addEventListener("animationend", slideComplete, false);
    }
}, false);
//]]></script>

Source by: Fading slideshow with a touch of JavaScript

Bye :-h