Hello sahabat Asfarul, setelah kita belajar bagaimana cara Membuat Blog Manga dengan Manga Reader, kali ini kita akan belajar membuat animasi DVD dengan menggunakan CSS. Mungkin pada artikel sebelumnya juga kalian akan berfikir karena Blog Manga bisa dikatakan sulit menggunakan Blogger, begitu juga dengan halnya Animasi DVD menggunakan CSS. Dengan menggunakan Animasi DVD ini kalian dapat meletakkan pada blog kalian sebagai hiasan hingga bisa juga sebagai tombol download. Nah, jadi sangat cocok untuk sahabat asfar yang memiliki blog kumpulan film nih.

Panduan Membuat DVD Animation

Pertama-tama dan paling utama, sahabat asfar harus masuk ke Blogger terlebih dahulu. Kemudian ke Template -> Edit HTML.
Kalian harus memasukkan CSS berikut ini terlebih dahulu sebelum ]]></b:skin> atau </style>.

#movie-style {
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
    float: left;
    margin: 0 90px 40px 0;
    position: relative;
}
#movie-style a {
    display: block;
    height: 250px;
    line-height: 0 !important;
    z-index: 100;
}
#movie-style h1 {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 25px;
    color: #FFF;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    padding: 10px 0;
    position: absolute;
    text-align: center;
    width: 180px;
    z-index: 60;
    text-shadow: 1px 1px 0 #000;
}
#movie-style:hover h1 {
    color: #66bcff;
}
.mask-dvd {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYE0SHaYzesOXN252DN-qNCtUs9B854AosrfryetHsiLDI6kesh5IBTLGh_yYZtAdsQMVFi4OT6xjDgwBY_u8uwEdJfEzTg6AdupTKN3Z8Fd3Gq6yvvs_keaX-fXMz_7f7y07ChTZvZc6L/s1600/mask-dvd.png") no-repeat scroll 0 0 transparent;
    box-shadow: 2px 0 1px rgba(0, 0, 0, 0.2) inset;
    height: 250px;
    left: 0;
    position: absolute;
    top: 5px;
    width: 180px;
}
.corte-movie {
    border-bottom: 5px solid #222;
    border-radius: 3px 3px 3px 3px;
    border-right: 5px solid #222;
    border-top: 5px solid #222;
    float: left;
    height: 250px;
    overflow: hidden;
    position: relative;
    width: 180px;
    z-index: 50;
}
.corte-movie img {
    max-height: 300px;
}
.dvd-rol {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVEKO9cBV8jkzmN5ywNEhgB-iRVOI_u4sTmZlmU1doO5cW7RGz973QEuHtNrEIPNu6ikwyBjbOf9DnJBOyC5Ooi64srtakSP7S0wut5HqA4e37t12Xl5jIDp7XDuzyPQJ3fG8UFRxD4dyL/s1600/dvd.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 180px;
    position: absolute;
    right: 0;
    top: 50px;
    transform: rotate(100deg);
    -moz-transform: rotate(100deg);
    -webkit-transform: rotate(100deg);
    -o-transform: rotate(100deg);
    width: 180px;
    z-index: 10;
}
.dvd-rol, #movie-style h1 {
    transition: all 300ms ease-in-out 0s;
    -moz-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
}
#movie-style:hover .dvd-rol {
    right: -73px;
    transform: rotate(242deg);
    -moz-transform: rotate(242deg);
    -webkit-transform: rotate(242deg);
    -o-transform: rotate(242deg);
}

Masuk ke tahap penerapannya, sahabat tinggal membuat sebuah postingan lalu masukkan HTML dibawah ini.

<div id="movie-style">
    <span class="corte-movie">
        <img src="URL GAMBAR">
    </span>
    <h1>Judul DVD</h1>
    <a href="URL YANG DITUJU" class="mask-dvd"></a>
    <i class="dvd-rol"></i>
</div>