DVD and CD CSS Widget for Blogger Entertainment Blogs

dvd-cd-album-widget-blogger
Are you running any entertainment blog on Blogger? Then this widget is really a beautiful and priceless gift for you. By using this widget, you can display music albums, movies and other media links in a unique design in your blog posts, pages, sidebar or any other section. If you provide downloads of media on your Blogger blog, then this is the widget for which you might dreamed ever. Before adding this cool and amazing widget to your blog, lets view its demo and see how it looks in action.

CD Widget Demo DVD Widget Demo

Liked it? I am sure that you loved it. Now lets add this widget to your blog. To do so, follow below simple instructions.

1. Log in to Blogger dashboard and choose your blog to which you want to add this fabulous widget
2. Scroll down to Template in your blog's dashboard and edit its HTML (View screenshot)
3. In HTML editor, find ]]></b:skin> by pressing Ctrl+F and paste below provided code just above ]]></b:skin>
#supportive-style {

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

    float: left;

    margin: 0 90px 40px 0;

    position: relative;

}

#supportive-style a {

    display: block;

    height: 250px;

    line-height: 0 !important;

    z-index: 100;

}

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

}

#supportive-style:hover h1 {

    color: #66bcff;

}

.supportive-dvd {

    background: url("https://lh5.googleusercontent.com/-9-FTiXdzzWk/USkUe16k2LI/AAAAAAAADn0/pAxXhugcuhg/s250/dvd-cover.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;

}
.supportive-cd {

    background: url("https://lh3.googleusercontent.com/-60ufoVI6Rlo/USkUeMtxvAI/AAAAAAAADns/k0Yb7GpBl2k/s250/cd-cover.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;

}

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

}

.supportive-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, #supportive-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, #supportive-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;

}

#supportive-style:hover .dvd-rol {

    right: -73px;

    transform: rotate(242deg);

    -moz-transform: rotate(242deg);

    -webkit-transform: rotate(242deg);

    -o-transform: rotate(242deg);

}
#supportive-style:hover .cd-rol {

    right: -73px;

    transform: rotate(242deg);

    -moz-transform: rotate(242deg);

    -webkit-transform: rotate(242deg);

    -o-transform: rotate(242deg);

}
4. Save your template and close the editor
5. To add this widget in any section of your blog (posts, pages, sidebar etc), use below HTML code. Make it sure to paste the code in HTML mode while writing posts and pages and add gadgets as HTML/Java Script. Here is the code for two different styles

For DVD Widget
<div id="supportive-style">     <span class="supportive-movie">         <img src="ImageLink" />     </span>     <h1>LabelText</h1>     <a href="#" class="supportive-dvd" target="_blank" rel="nofollow"></a>     <i class="dvd-rol"></i> </div>
For CD Widget
<div id="supportive-style">     <span class="supportive-movie">         <img src="ImageLink" />     </span>     <h1>LabelText</h1>     <a href="#" class="supportive-cd" target="_blank" rel="nofollow"></a>     <i class="cd-rol"></i> </div>
6. Replace ImageLink with link of image for album cover, LabelText with album label and # with file or page link which you want to make open on click. That's all!

Feel free to leave a response about the gadget that either you liked it or not. If you liked it, please don't forget to share it on social media. Thank you!

Labels: ,