هيدر ازرق احترافي بأزرار متحركة

بسم الله الرحمن الرحيم

هيدر محول من استايل vb ازرق احترافي مع ازرار متغيره احترافية

تحويل : الرسام

______________________________

معاينة الكود :

هيدر ازرق احترافي بأزرار متحركة Uo_ouo10

https://i.servimg.com/u/f21/16/46/77/76/uo_ouo10.png

______________________________

تركيب الكود :

توجه نحو لوحة الادارة - مظهر المنتدى - التومبيلات والقوالب - ادارة عامة - قالب overall_header

ابحث عن الكود التالي

الكود:

{javascript}

نضع اسفله الكود التالي

الكود:

<style type="text/css">



body
{
   background: #f3f3f3;
   color: #033d50;
   font: bold 12pt Times New Roman;
   margin: 0px; 
   padding: 0px;
}
a:link, body_alink
{
   color: #00407f;
   text-decoration: none;
}
a:visited, body_avisited
{
   color: #00407f;
   text-decoration: none;
}
a:hover, a:active, body_ahover
{
   color: #ef8100;
}
.page
{
   background: #f3f3f3;
   color: #033d50;
   font: bold 12pt Times New Roman;
   margin: 0px; 
   padding: 0px;
   
}
.tborder
{
   background: #CCCCCC;
   color: #CCCCCC;
   border:#f4f4f4 solid 1px;
   
}
.tcat
{
   background: #2D81B8 url(http://i21.servimg.com/u/f21/16/46/77/76/s110.png) repeat-x top left;
   color: #FFFFFF;
   font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
   text-shadow: 1px 1px 0px #002a41;
}
.tcat a:link, .tcat_alink
{
   color: #ffffff;
   text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
   color: #ffffff;
   text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
   color: #ffcc00;
}
.thead
{
   background: #d0d0d0 url(http://i21.servimg.com/u/f21/16/46/77/76/a310.png) repeat-x top left;
   color: #00407f;
   font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
   text-shadow: 1px 1px 0px #ffffff;
   
}
.thead a:link, .thead_alink
{
   color: #00407f;
}
.thead a:visited, .thead_avisited
{
   color: #00407f;
}
.thead a:hover, .thead a:active, .thead_ahover
{
   color: #ef8100;
}
.tfoot
{
   background: #d0d0d0 url(http://i21.servimg.com/u/f21/16/46/77/76/a310.png) repeat-x top left;
   color: #033d50;
   font: bold 11px tahoma, arial, verdana, geneva, lucida, helvetica;
   text-shadow: 1px 1px 0px #FFFFFF;
   border:1px solid #c2c2c2;
   border-bottom:1px solid #808080;
   -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
.tfoot a:link, .tfoot_alink
{
   color: #033d50;
}
.tfoot a:visited, .tfoot_avisited
{
   color: #033d50;
}
.tfoot a:hover, .tfoot a:active, .tfoot_ahover
{
   color: #ef8100;
}
.alt1, .alt1Active
{
   background: #fafafb;
   color: #033d50;
   text-shadow: 1px 1px 0px #ffffff;
   
}
.alt2, .alt2Active
{
   background: #ffffff;
   color: #0f5065;
   text-shadow: 1px 1px 0px #ffffff;
   
}
.inlinemod
{
   background: #FFFFFF;
   color: #0f5065;
}
.wysiwyg
{
   background: #F5F5FF;
   color: #033d50;
   font: bold 12pt Times New Roman;
}
.wysiwyg a:link, .wysiwyg_alink
{
   color: #0f5065;
}
.wysiwyg a:visited, .wysiwyg_avisited
{
   color: #0f5065;
}
.wysiwyg a:hover, .wysiwyg a:active, .wysiwyg_ahover
{
   color: #ef8100;
}
textarea, .bginput
{
   font: bold 11px tahoma, arial, verdana, geneva, lucida, helvetica;
}
.bginput option, .bginput optgroup
{
   font-size: 11px;
   font-family: tahoma, arial, verdana, geneva, lucida, helvetica;
}
.button
{
   font: bold 11px tahoma, arial, verdana, geneva, lucida, helvetica;
}
select
{
   font: bold 11px tahoma, arial, verdana, geneva, lucida, helvetica;
}
option, optgroup
{
   font-size: 11px;
   font-family: tahoma, arial, verdana, geneva, lucida, helvetica;
}
.smallfont
{
   font: bold 11px tahoma, arial, verdana, geneva, lucida, helvetica;
}
.time
{
   color: #000033;
}
.navbar
{
   font: bold 11px tahoma, arial, verdana, geneva, lucida, helvetica;
   padding:3px;
}
.highlight
{
   color: #FF0000;
   font-weight: bold;
}
.fjsel
{
   background: #0f5065;
   color: #FFFFFF;
}
.fjdpth0
{
   background: #F7F7F7;
   color: #000000;
}
.panel
{
   background: #eaf2f6;
   color: #0f5065;
   font: bold 11px tahoma, arial, verdana, geneva, lucida, helvetica;
   padding: 10px;
   border-right:3px solid #09F;
   border-left:3px solid #09F;
   border-top:1px solid #CCC;
   border-bottom:1px solid #CCC;
   -moz-border-radius:9px;-webkit-border-radius:9px;border-radius:9px;
   
}
.panel a:link, .panel_alink
{
   color: #0f5065;
}
.panel a:visited, .panel_avisited
{
   color: #0f5065;
}
.panel a:hover, .panel a:active, .panel_ahover
{
   color: #000033;
}
.panelsurround
{
   background: #FFFFFF;
   color: #0f5065;
   font: bold 11px tahoma, arial, verdana, geneva, lucida, helvetica;
   padding: 5px;
   
}
legend
{
   background: #d0d0d0 url(http://i21.servimg.com/u/f21/16/46/77/76/a310.png) repeat-x top left;
   color: #0f5065;
   font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
   border:1px solid #888A99;
   -moz-border-radius:4px;-webkit-border-radius:4px;border-radius:6px;
   text-shadow:#fff 0px 1px 0px;
   padding-right:6px;
   padding-left:8px;
   padding-top:4px;
   padding-bottom:4px;
}
.vbmenu_control
{
   background: #42ABCA url(http://i21.servimg.com/u/f21/16/46/77/76/s111.png) repeat-x top left;
   color: #FFFFFF;
   font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
   padding: 3px 6px 3px 6px;
   white-space: nowrap;
   text-shadow: 1px 1px 0px #002a41;
}
.vbmenu_control a:link, .vbmenu_control_alink
{
   color: #FFFFFF;
   text-decoration: none;
}
.vbmenu_control a:visited, .vbmenu_control_avisited
{
   color: #FFFFFF;
   text-decoration: none;
}
.vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover
{
   color: #FDDF00;
   text-decoration: text-shadow:#fff 0px 1px 0px;;
}
.vbmenu_popup
{
   background: #dedede;
   color: #0f5065;
   font: bold 11px tahoma, arial, verdana, geneva, lucida, helvetica;
   border: 1px solid #aeaeae;
}
.vbmenu_option
{
   background: #f7f7f7;
   color: #0f5065;
   font: bold 11px tahoma, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
   white-space: nowrap;
   cursor: pointer;
   text-shadow:#fff 0px 1px 0px;
}
.vbmenu_option a:link, .vbmenu_option_alink
{
   color: #0f5065;
   text-decoration: none;
}
.vbmenu_option a:visited, .vbmenu_option_avisited
{
   color: #0f5065;
   text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover
{
   color: #FFFFFF;
   text-decoration: none;
}
.vbmenu_hilite
{
   background: #fff;
   color: #005068;
   font: bold 11px tahoma, arial, verdana, geneva, lucida, helvetica;
   white-space: nowrap;
   cursor: pointer;
   text-shadow:#fff 0px 1px 0px;
   border-right:3px #ff8200 solid;
   -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
}
.vbmenu_hilite a:link, .vbmenu_hilite_alink
{
   text-decoration: none;
}
.vbmenu_hilite a:visited, .vbmenu_hilite_avisited
{
   text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover
{
   text-decoration: none;
}
/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }

/* ***** small padding on 'thead' elements ***** */
td.thead, th.thead, div.thead { padding: 4px; }

/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }

/* ***** de-emphasized text */
.shade, a.shade:link, a.shade:visited { color: #777777; text-decoration: none; }
a.shade:active, a.shade:hover { color: #FF4400; text-decoration: underline; }
.tcat .shade, .thead .shade, .tfoot .shade { color: #DDDDDD; }

/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }
/*************** TRAIDNT STYLE BY : MooOOooN      ****************/
.exp {
    background-image:url(http://i21.servimg.com/u/f21/16/46/77/76/exp10.png);
   background-repeat:repeat-x;
   height:301px;
}
.rtla {
   background-image:url('http://i21.servimg.com/u/f21/16/46/77/76/tr-211.png');
   background-repeat:no-repeat;
   width:402px;
   height:14px;
   float:right;
}
.botton1 {background:url('http://i21.servimg.com/u/f21/16/46/77/76/home-b10.png') no-repeat ; height:41px; width:86px; float:right; background-position: 0px 0px; display: block;margin-top:14px;}
.botton2 {background:url('http://i21.servimg.com/u/f21/16/46/77/76/reg-b10.png') no-repeat ; height:41px; width:81px; float:right; background-position: 0px 0px; display: block;margin-top:14px;}
.botton3 {background:url('http://i21.servimg.com/u/f21/16/46/77/76/con-b10.png') no-repeat ; height:41px; width:82px; float:right; background-position: 0px 0px; display: block;margin-top:14px;}
.botton4 {background:url('http://i21.servimg.com/u/f21/16/46/77/76/msg-b10.png') no-repeat ; height:41px; width:100px; float:right; background-position: 0px 0px; display: block;margin-top:14px;}
.botton1:hover {background:url('http://i21.servimg.com/u/f21/16/46/77/76/home-b10.png') no-repeat ; height:41px; width:86px; float:right; background-position: 0px -41px; display: block;margin-top:14px;}
.botton2:hover {background:url('http://i21.servimg.com/u/f21/16/46/77/76/reg-b10.png') no-repeat ; height:41px; width:81px; float:right; background-position: 0px -41px; display: block;margin-top:14px;}
.botton3:hover {background:url('http://i21.servimg.com/u/f21/16/46/77/76/con-b10.png') no-repeat ; height:41px; width:82px; float:right; background-position: 0px -41px; display: block;margin-top:14px;}
.botton4:hover {background:url('http://i21.servimg.com/u/f21/16/46/77/76/msg-b10.png') no-repeat ; height:41px; width:100px; float:right; background-position: 0px -41px; display: block;margin-top:14px;}

.social {
   background-image:url(http://i21.servimg.com/u/f21/16/46/77/76/social10.png);
   background-repeat:no-repeat;
   height:49px;
   width:118px;
   float:left;
   margin-top:10px;
}
.search {
   background-image:url(http://i21.servimg.com/u/f21/16/46/77/76/search12.png);
   background-repeat:no-repeat;
   height:50px;
   width:243px;
   float:left;
   margin-top:10px;
}
.postion {

   float:left;
        position: absolute;
        top:70px;
        left:70px;
}

.text-search {background:url('http://i21.servimg.com/u/f21/16/46/77/76/space10.png'); position: absolute; border:0px; top:23px; left:69px; width:134px; height:22px; font-family:tahoma; font-size:12px; color:#00334d; text-shadow:#fff 0px 1px 0px; }
.searchsubmit {background:url('http://i21.servimg.com/u/f21/16/46/77/76/space10.png'); position: absolute; border:0px; top:15px; left:5px; width:58px; height:37px; cursor: pointer; }
.searchsubmit:hover {background:url('http://i21.servimg.com/u/f21/16/46/77/76/search11.png'); position: absolute; border:0px; top:19px; left:7px; width:54px; height:32px; cursor: pointer; }

.logo {
        background-image:url('http://i21.servimg.com/u/f21/16/46/77/76/logo11.png');
        background-repeat:no-repeat;
        width:403px;
        height:230px;
   float:right;
   margin-top:16px;
   }
</style>
</head>

<body>

<div class="exp">
<div class="rtla">
<a href="#"><div class="botton1"></div></a>
<a href="#"><div class="botton2"></div></a>
<a href="#"><div class="botton3"></div></a>
<a href="#"><div class="botton4"></div></a>
<div class="logo"></div>
</div>
<div class="search">

                <form method="get" class="searchform" action="/search">

                                        <input type="text" size="24" value="ادخل كلمة البحث ..." name="s" onfocus="if(this.value=='ادخل كلمة البحث...'){this.value=''};" onblur="if(this.value==''){this.value='ادخل كلمة البحث...'};" class="text-search"/>
                                      <input type="submit" title="ابدأ البحث" class="searchsubmit" value=""/>
                                </form>

</div>
<div class="social">
<map name="FPMap0">
   <area title="صفحتنا على الفيس بوك" coords="2, 5, 42, 47" shape="rect" target="_blank" href="http://www.facebook.com/"/>
   <area target="_blank" title="تابعنا على تويتر" coords="42, 7, 79, 48" shape="rect" href="http://www.twitter.com">
   <area target="_blank" title="التغذيات RSS" coords="80, 7, 116, 48" shape="rect" href="#"/>
   </map><img src="http://i21.servimg.com/u/f21/16/46/77/76/social11.png" usemap="#FPMap0"/>
</div>








</div>






</body>

</html>