Cara Membuat Widget Banner OPEN di Header

 

Hay sob, kali ini saya akan share cara membuat Widget Open di Header seperti yang ada di Header Sandy-Cyber. Langsung ajah nih Tutorialnya:

:: Copy kode dibawah diatas:]]></b:skin>:

#MAMZbanner1{width: auto;

height: auto;

float: right;

background: rgba(0, 0, 0, 0.4);

margin-right: -495px;

padding: 3px;

-webkit-animation:RZloading 3s;

-o-animation:RZloading 3s;

-moz-animation:RZloading 3s;

-ms-animation:RZloading 3s;

animation:RZloading 3s;

margin-top: 15px;

border-radius: 5px;

border: 5px solid #0101DF;

overflow: hidden;

z-index: 999999;

-moz-transition: all 0.7s ease-in-out;

-webkit-transition: all 0.7s ease-in-out;

-o-transition: all 0.7s ease-in-out;

-ms-transition: all 0.7s ease-in-out;

transition: all 0.7s ease-in-out;}

#MAMZbanner1 h2{display:none}

#MAMZbanner1 .widget-content{width:468px}

#MAMZbanner1 img{opacity:0.5;padding:0px;

-webkit-filter: saturate(0.0);

-moz-filter: saturate(0.0);

-ms-filter: saturate(0.0);

-o-filter: saturate(0.0);

filter: saturate(0.0);

-webkit-transition:all 1s ease-in-out;

-moz-transition:all 1s ease-in-out;

-ms-transition:all 1s ease-in-out;

-o-transition:all 1s ease-in-out;

transition:all 1s ease-in-out;}

#MAMZbanner1:hover{margin-right: 20px;border:5px solid #0101DF;}

#MAMZbanner1 img:hover{opacity:1;

-webkit-filter: saturate(1.1);

-moz-filter: saturate(1.1);

-ms-filter: saturate(1.1);

-o-filter: saturate(1.1);

filter: saturate(1.1);

-webkit-transition:all 0.1s ease-in-out;

-moz-transition:all 0.1s ease-in-out;

-ms-transition:all 0.1s ease-in-out;

-o-transition:all 0.1s ease-in-out;

transition:all 0.1s ease-in-out;}

#MAMZbanner1:before {content:"";position:absolute;width:150px;height:125px;background:transparent url(http://i.imgur.com/I3cM4IV.png) no-repeat center;margin-left:-110px;margin-top:10px;}

:: Lalu copy kode ini dibawah  <div id='header'> :

<div class='RzIllusion'/>

<div class='MAMZbanner1 section' id='MAMZbanner1'><div class='widget HTML' id='HTML3'>

<div class='widget-content'>

<a href='http://sandymufc09.blogspot.com/' target='_blank' title='Life Must Be Creative

'><img alt='Life Must Be Creative

' src='http://sadpanda.us/images/1688667-03IEI94.png'/></a>

<a href='http://pink-result.blogspot.com/' target='_blank'><img alt='Life Must Be Creative

' height='60' src='http://sadpanda.us/images/1688667-03IEI94.png ' title='Life Must Be Creative' width='468'/></a>

</div>

</div></div>

:: Simpan dan liat hasilnya. Semoga  Artikel ini bisa bermanfaat.
sumber:sandy