Cara Membuat Widget Animasi Album DVD dan CD Widget Dengan Label

Widget Animasi ini adalah sebuah animasi widget album DVD dan CD yang berguna bagi anda yang mempunyai Blog music agar bisa menghiasi album dics. 

Widget ini juga bisa berguna untuk bisa mempromosikan Produk anda dengan animasi Dics. Bisa juga untuk lebih bergerak dan agar lebih tampil lebih berbeda. 

Widget ini memiliki ukuran 180x250 pixel dan tidak banyak memakan banyak tempat. keuntungan dari widget ini adalah berukutan 180x250 pixel, beranimasi, jika kursor yang diarahkan ke widget ini otomatis widget dengan sendirinya mengeluarkan dics DVD maupun CD, dan tidak membutuhkan waktu yang lama untuk memasangnya. 

Untuk bisa memasang widget ini ada perlu ikuti dua cara yaitu anda perlu menambahkan CSS pada Template anda, Dan perlu mambahkan Gadget HTML, utuk cara memasangnya berikut untuk caranya:

• Silahkan Login Ke Blogger Anda.
• Setelah itu, Klik Menu Template, --> Klik Tombol Edit HTML.
• Lalu, Cari Kode ]]></b:skin> dengan menekan CTRL+F atau dengan F3.
• Paste Kode Berikut ini diatas kode ]]></b:skin> :

/* DVD CD Animasi ----------------------------------------------- */

#YBB-style {

box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);

float: left;

margin: 0 90px 40px 0;

position: relative;

}

#YBB-style a {

display: block;

height: 250px;

line-height: 0 !important;

z-index: 100;

}

#YBB-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;

}

#YBB-style:hover h1 {

color: #66bcff;

}

.YBB-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;

}

.YBB-movie img {

max-height: 300px;

}

.dvd-rol {

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWOiMsgDCkak84Sgzg7NBxowUkRnsICCkwndn5CU-ZHrmOVbhiy2C-jJ8YjLGHPwmkiCCJKSfT63RvAQiBPDBO5_bYiUb59kPrS76yh_2PU3HoewJjUTddOXvhXKTkMGPRVp28BSe4IZVj/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, #YBB-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;

}

.cd-rol {

background: url("https://lh6.googleusercontent.com/-GqhunwDS3wI/USkJUVz7MSI/AAAAAAAADmY/dHN3S6IQBTM/s180/compact-disc.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;

}

.cd-rol, #YBB-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;

}

#YBB-style:hover .dvd-rol {

right: -73px;

transform: rotate(242deg);

-moz-transform: rotate(242deg);

-webkit-transform: rotate(242deg);

-o-transform: rotate(242deg);

}

#YBB-style:hover .cd-rol {

right: -73px;

transform: rotate(242deg);

-moz-transform: rotate(242deg);

-webkit-transform: rotate(242deg);

-o-transform: rotate(242deg);

}

• Setelah itu, Klik Tombol Simpan Template.
• Lalu, Klik Tata Letak, --> Add Gadget HTML.
• Paste Kode Berikut ini Pada Gadget HTML:

Untuk Widget DVD:

<div id="YBB-style"> <span class="YBB-movie"> <img src="URL Gambar Anda" /> </span> <h1>Judul Label Anda</h1> <a href="URL Blog Anda" class="YBB-dvd" target="_blank" rel="nofollow"></a> <i class="dvd-rol"></i> </div>

Untuk Widget CD:

<div id="supportive-style"> <span class="supportive-movie"> <img src="URL Gambar Anda" /> </span> <h1>Judul Label Anda</h1> <a href="URL Blog Anda" class="supportive-cd" target="_blank" rel="nofollow"></a> <i class="cd-rol"></i> </div>

Keterangan:

1.     Ganti Tulisan yang berwarna Merah dengan URL Gambar yang Anda mau.

2.     Ganti Tulisan yang berwarna Kuning dengan Judul Label yang Anda mau.

3.     Ganti Tulisan yang berwarna Hijau dengan URL Blog yang akan Anda tuju.

• Lalu, Klik Tombol Simpan.

Selamat Mencoba,

Salam Sukses.

Your-BelajarBLOG