Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara Membuat Widget Animasi Album DVD dan CD Widget Dengan Label

by Irsyad Aslam , at 2/27/2013 , has 0 komentar
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://lh6.googleusercontent.com/-j4KCL66siz8/UONbAywfHWI/AAAAAAAAEOc/go15jf-etWA/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
Irsyad Aslam
About
Cara Membuat Widget Animasi Album DVD dan CD Widget Dengan Label - written by Irsyad Aslam , published at 2/27/2013, categorized as Widget . And has 0 komentar
0 komentar Add a comment

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger