السلام عليكم ورحمة الله وبركاته اليوم موضوع طلبه الزوار وهوكيفية اضافة هيدر مدونة عرب ويب
تابعوا الطريقة ولاتحرمونا من تعليقاتكم المشجعة
كيفية اضافة الهيدر
- اذهب للتخطيط
- تم القالب
- وبعدها تحرير html
- واضف الكود التالي فوق <body>
<div class='topwrapper'>
<div id='dialogoverlay'/>
<div id='dialogbox'>
<div>
<div id='dialogboxhead'/>
<div id='dialogboxbody'/>
<div id='dialogboxfoot'/>
</div>
</div>
<div class='clear'/>
<header class='houssambaha' id='header-wrap'>
<div id='photo-cover'>
<div class='mygallery'>
<li>
<a href='/' title='الأفضل لكم'>
<img alt='' class='slimg' src='http://store1.up-00.com/2015-02/1423116353051.png'/>
</a>
</li>
<div class='clear'/>
</div>
</div>
<div class='header section' id='header'><div class='widget Header' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper' style='text-align:center;font:30px Electrolize,hacen_saudi_arabiaregular;font-weight: bold;text-shadow: 5px 5px 0 rgba(0,0,0,0.1);color:rgba(255, 255, 255, 1)'>
تجمع لأفضل القوالب والملحقات المتنوعة</div>
<div class='descriptionwrapper'>
<p class='description'><span>
</span></p>
</div>
</div>
</div></div>
<div class='innerhm'/>
</header>
<div id='menu-wrapper'>
<nav id='nav_header'>
<ul>
<li><a href='http://web3-night.blogspot.com/search/label/دروس وشروحات' title='دروس و شروحات'> دروس و شروحات</a></li>
<li><a href='#'>≡ ملحقات التصاميم</a>
<ul class='dropdown'>
<li><a href='http://web3-night.blogspot.com/search/label/خطوط عربية'>خطوط عربية</a></li>
<li><a href='http://web3-night.blogspot.com/search/label/خطوط أجنبية'>خطوط أجنبية</a></li>
<li><a href='http://web3-night.blogspot.com/label/ملحقات عامة'>ملفات مفتوحة</a></li>
</ul>
</li>
<li><a href='#'>≡ ملحقات الويب</a>
<ul class='dropdown'>
<li><a href='http://web3-night.blogspot.com/search/label/Css'>Css3</a></li>
<li><a href='http://web3-night.blogspot.com/search/label/Html'>HTML5</a></li>
<li><a href='http://web3-night.blogspot.com/search/label/Jquery'>jquery</a></li>
</ul>
</li>
<li><a href='#'>≡ بلوجر</a>
<ul class='dropdown'>
<li><a href='http://web3-night.blogspot.com/search/label/اضافات بلوجر'>اضافات</a></li>
<li><a href='http://web3-night.blogspot.com/search/label/قوالب بلوجر'>قوالب </a></li>
</ul>
</li>
<li><a href='#'>≡ قوالب عامة</a>
<ul class='dropdown'>
<li><a href='http://web3-night.blogspot.com/search/label/قوالب ووردبريس'>قوالب ووردبريس</a></li>
<li><a href='http://web3-night.blogspot.com/search/label/قوالب PSD'>قوالب PSD</a></li>
</ul>
</li>
<div id='contacts-forms'>
<div id='widget-contact'>
<h3 class='juduls'><i class='fa fa-envelope-o' title='راسلنا'/><yes>إتصل بنا</yes><a class='close' href='#' title='إغلاق'>×</a></h3>
<div class='kontaks section' id='kontaks'>
<div class='widget ContactForm' id='ContactForm1'>
<h2 class='title'>نموذج الاتصال</h2>
<div class='contact-form-widget'>
<div class='form'>
</div>
</div>
<div class='clear'/>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
</span>
</span>
<div class='clear'/>
</div></div>
</div>
<div id='area-overlay'/>
<div class='buka-contact'><i class='fa fa-envelope'/></div>
</div>
</ul>
<span class='clear'/>
<div class='search-icon' id='run' title='بحث'><i class='fa fa-search'/></div>
</nav>
</div>
<div id='box'>
<div id='search'>
<form action='/search' id='searchform' method='get' target='_blank'>
<input id='search-form' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='قالب ، إضافة ، ملحق ... إبحث'/>
<button class='search-button' title='بحث' type='submit'><img alt='search button' height='21' src='http://2.bp.blogspot.com/-2jHjDZuQt-Q/Uluj1K7q-AI/AAAAAAAAaPE/k2uOoGDyrjw/s1600/search.png' title='بحث' width='21'/>
</button>
</form>
<div class='close'>✖</div>
</div>
</div>
</div>
- وبعدها اختر اي كود تريد اي الهيدر الاحمر ام الاسود
- وبعد ان تختار ضع الكود فوق </head>
كود الهيدر باللون الاسود
<style type='text/css'>
/* 2013, May 28 - Experimental layout framework by Taufik Nurrohman (http://gplus.to/tovic) */
.clear{display:block;clear:both;}.status-msg-bg{display:none;}.quickedit{display:none;}#navbar-iframe {height:0px;visibility:hidden;display:none}
/* Header */
.topwrapper {width:1024px;margin:50px auto 0;padding:5px;background:#242424;box-shadow:0px 5px 12px rgba(0, 0, 0, 0.7);}
#header {
position: relative;
top: 100px;
padding: 5px 10px;
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.01) 1%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255, 255, 255, 0)), color-stop(1%,rgba(255, 255, 255, 0.01)), color-stop(50%,rgba(255, 255, 255, 0.5)), color-stop(100%,rgba(255, 255, 255, 0)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.01) 1%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.01) 1%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.01) 1%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.01) 1%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );}
#header-wrap{background:url(http://2.bp.blogspot.com/-G_x5WmPnIV8/VMKvmWOC0WI/AAAAAAAAHHk/JVRmAXXVp5o/s1600/papers.co-ab46-wallpaper-abstract-psychedelic-art-illust-1920x1080.jpg) no-repeat 0;background-size:cover;padding:10px;margin:auto 0;height:300px;position:relative;}
.innerhm {min-height: 297.9px ;position: relative;width: 995px;margin-right: -10px;margin-top: -54px;backgroundrgba(0,0,0,0.2) url(http://3.bp.blogspot.com/-sy8dAw3wA3U/VAKExLGnoeI/AAAAAAAAFaw/yJVzhdYiDEo/s1600/pattren.png) repeat;}
#header-wrap h1{color:#ECF0F1;text-shadow:0px 3px 1px #BDC3C7;font-size:45px;text-align:center;text-transform:uppercase;line-height:20px;}
#header-wrap h1 a{color:#ECF0F1;text-shadow:0px 3px 1px #BDC3C7;}
#header h1 a:hover{text-shadow:0px 2px 1px #AEB4B8;}
#header h1 a:active{text-shadow:0px 0px 1px #AEB4B8;}
#header-wrap .description{margin:0;padding:0;font-size:12px;color:#FFF;text-align:center;text-transform:uppercase;text-shadow:0 0 1px #FFF;}
#header-wrap img{}
#header-wrap:hover {opacity: 0.80;z-index: 10;}
.plus-menu{float:left;position:absolute;font-size:24px;color:#fff;width:50px;text-align:center;top:0;left:0;padding:5.3px 0 ;cursor:pointer;}
.plus-menu:hover {color:#CF3E2F;transition: all 0.3s linear;}
#search,.box-plusmenu {background: #F5F5F5;text-align:center}
#search-form {color:gray;width:50%;padding:6px 10px 6px 70px;font:14px Electrolize,ge_dinar_oneregular;transition: all 0.2s linear 0s;margin:0 0 10px;border:1px solid #ccc;border-radius:2px}
.search-button,.search-button:hover{background-color:#E74C3C;width:60px;padding:2px 1px;margin:7px -63px 0 0;top:4px;font-size:13px;cursor:pointer;border:none;position:relative;}
button.search-button:hover {background-color: #CC4031;}
#search-form:hover{border:1px solid #aaa}
#search-form:focus{border:1px solid #4D90FE;outline:none;color:black;}
#box,#box2{display:none;position:relative}
.close,.close2{float:right;position:absolute;font-size:18px;color:red;width:45px;text-align:center;top:0;left:0;padding:13px 0 10px;cursor:pointer}
.search-icon{float:right;text-decoration:none;font-size:15px;font-weight:700;line-height: 100%;vertical-align: middle;text-align: center;position:absolute;top:0px;left:5px;cursor:pointer;color:#fff;padding: 16px;}
.search-icon:hover {color:rgba(207, 55, 39, 0.84);transition: all 0.3s linear;}
.content-box2{color:#7C7979;font:13px droid arabic kufi;margin:0 auto;text-align:right;overflow:hidden;padding:10px}
#menu-wrapper{height:47px;width:100%;position:relative}
#nav_header{background:#333333;margin:9px auto 10px;position:relative;-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.1);-moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.1);box-shadow:0 0 2px rgba(0, 0, 0, 0.1);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;margin-top: -10px;}
#nav_header ul{margin:0;padding:0;}
#nav_header > ul > li{float:right;margin:0 0;list-style:none;position:relative;right:203px;font-family: Electrolize,ge_dinar_oneregular;font-size: 12px;}
#nav_header > ul > li > a{color:#fff;padding:14px 24px;display:block;position:relative;border-left:1px solid #232323;}
#nav_header > ul > li > .selected:after{content:"";border-bottom:3px solid #483353;position:absolute;bottom:0px;z-index:100;width:100%;right:0;}
#nav_header > ul > li > a:hover{color:#F3F0F0;background: #2A2A2A;transition: all 0.3s linear;}
#nav_header > ul > li > .selected{background:#6f5499;color:#ffffff;}
#nav_header li span{position:relative;top:2px;padding-left:5px;}
#nav_header li:hover ul.dropdown{display:block;}
ul.dropdown{position:absolute;top:48px;background:#222222;width:130px;z-index:10;border:1px solid #353535;padding:6px 0!important;display:none;}
ul.dropdown li{margin:0 0;list-style:none;}
ul.dropdown a{border:0;padding:7px;margin:5px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:block;transition: all 0.21s;}
ul.dropdown a:hover{background:#E74C3C;color:#fff;}
ul.dropdown:before{content:"";position:absolute;top:-14px;right:0px;width:100%;height:18px;}
ul.dropdown:after{position:absolute;top:-13px;right:3px;content:"";border:7px solid #fff;border-right-color:transparent;border-top-color:transparent;border-left-color:transparent;}
.fa-lightbulb-o:before {content: "\f0eb";position: absolute;top: 1px;right: -1px;font-size: 25px;line-height: 1.4em;padding-left: 10px;padding-bottom: 4px;padding-right: 10px;padding-top: 5px;color:#fff;background:#E74C3C;border-bottom-right-radius: 3px;box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.09),inset 0 -1px 0 #C73131;}
.fa-lightbulb-o:hover{color: #DD4637;}
/* CSS Menu Top */
#menutop{width:100%;max-width: 998px;margin:-60px auto 0;background:rgba(255, 255, 255, 0.98);position: fixed;z-index: 92;opacity: 0.98;margin-right: -0px;border-bottom-right-radius: 3px;border-bottom-left-radius: 3px;}
#menutop:before{content: "";background-image: url(http://2.bp.blogspot.com/-PZD7QpXAxCk/VMDRF2JosaI/AAAAAAAAHG8/f1ENqr-cGBw/s1600/shadow-top.png);
background-position: center top;background-repeat: no-repeat;height: 42px;position: absolute;top: 44px;width: 103%;z-index: 2;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:45px}
#menutop li{float:right;display:inline;position:relative;font-family:Electrolize,ge_ss_threeregular;font-size:12px;
font-weight:bold;}
#menutop a{display:block;line-height:45px;padding:0 16px;text-decoration:none;color:#938E8E;}
#menutop ul li:hover a{color:#7C7777;}
#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer}
#menutop label{font-family:'Open Sans';font-size:30px;font-weight:400;display:none;width:35px;height:45px;line-height:45px;text-align:center;}
#menutop label span{font-size:13px;position:absolute;right:35px}
#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#666}
#menutop ul li ul li a{color:#666;height:45px;line-height:45px;background:#fff;width:100%;}
#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#444;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:65px;transition:all 0.2s ease-in-out;}
#menutop li:hover > ul.menux{visibility:visible;opacity:1;top:45px;}
#menutop a.dutt{padding:0 14px 0 27px}
#menutop a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;left:10px;}
#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;left:10px;}
#menutop ul li ul li a:hover{background:rgba(231, 76, 60, 0.93);color:#fff;}
#menutop li.facebook {padding:0 5px;}
#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.linkedin{text-align:center;color:#666;float:left;transition:all 0.2s ease-in-out;}
#menutop li a.facebook:hover,#menutop li a.twitter:hover,#menutop li a.youtube:hover,#menutop li a.googleplus:hover,#menutop li a.linkedin:hover{color:#fff;}
#menutop li .facebook .fa.fa-facebook,#menutop li.twitter .fa.fa-twitter,#menutop li.youtube .fa.fa-youtube,#menutop li.googleplus .fa.fa-google-plus,#menutop li.linkedin .fa.fa-linkedin{color:#666;transition:all 0.2s ease-in-out;}
#menutop li.facebook:hover{background:#3b5998;color:#fff;}
#menutop li.twitter:hover{background:#57b5e2;color:#fff;}
#menutop li.youtube:hover{background:#e74c3c;color:#fff;}
#menutop li.googleplus:hover{background:#FA6B5C;color:#fff;}
#menutop li.facebook:hover .fa.fa-facebook,#menutop li.twitter:hover .fa.fa-twitter,#menutop li.youtube:hover .fa.fa-youtube,#menutop li.googleplus:hover .fa.fa-google-plus,#menutop li.linkedin:hover .fa.fa-linkedin{color:#fff;}
#menutop a ul li a:hover, #menutop a ul li.active a{color: #FF4444;}
#menutop li.buttonalert {font-size:16px;color:#D24747;padding:0 30px;cursor:pointer;margin-top: 12px;}
/* Css Photo Cover */
#photo-cover{-webkit-border-radius: 3px;-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .07);border: solid 4px #232323;display: block;right: 4px;bottom:-40px;position: absolute;height: 169px;width:161px;overflow:hidden;z-index:2;padding-left: 20px;padding-right: 10px;padding-bottom: 10px;}
.mygallery{position:relative;height: 100%;width:100%;margin-right: -57px;}
.mygallery img{margin-bottom:5px;padding: 0px;border: 0px;outline: 0px;height: 188px; width:280px;cursor: url(http://2.bp.blogspot.com/-IJ8uMvhlKVU/VFDoIGDIn3I/AAAAAAAAGio/K2vVTU7nX84/s320/chm.png),pointer;-moz-transition: all .3s ease 0s;margin-right:60px}
#contacts-forms{width:100%;margin-bottom:10px}
#widget-contact{position:fixed;top:15%;left:50%;width:400px;height:auto;z-index:1000;display:none;margin:0 0 0 -200px;background-color:#fff;border:4px solid #fff;}
#widget-contact h3.juduls{background:#E74C3C;color:#fff;font:normal 18px Electrolize,ge_ss_tvbold;position:relative;margin:0;padding:19px;text-transform:uppercase;text-align: right;}
#widget-contact h3.juduls:hover {background: #D13F30;}
#widget-contact h3.juduls a{position:absolute;left:15px;color:#fff;font-size:30px;text-decoration:none;cursor:pointer;top: 1px;font-weight: bold;}
#ContactForm1 h2{display:none}
#area-overlay{position:fixed!important;z-index:999;top:0;right:0;bottom:0;left:0;background-color:#000;display:none}
#ContactForm1_contact-form-email-message{width:355px;background:#FAFAFA;outline:none;border:1px solid #C7C7C7;overflow:hidden;height:150px;color:#444;margin:0 10px 10px;padding:7px}
#ContactForm1_contact-form-submit{font-weight:700;background:#E74C3C;position:relative;cursor:pointer;float:right;width:100px;outline:none;border:none;margin:0 10px 10px;padding:7px;color:#fff;font-family: Electrolize,ge_ss_tvbold;}
#ContactForm1_contact-form-submit:hover{background:#C0392B}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:250px;margin-top:10px;color: #444;}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:350px;background:#FAFAFA ;color:#444;outline:none;border:1px solid #C7C7C7;margin:0 10px 10px;padding:10px}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{border:1px solid #1e90ff}
.contact-form-widget p{margin:0}
.contact-form-widget{padding:5px;font: normal 18px Electrolize,ge_ss_threeregular;
line-height: 2em;
text-align: right;
font-weight: 600;}
.buka-contact{padding:16px 10px;color:#fff;font-size:14px;cursor:pointer;float:left;margin-left: 51px;padding-bottom: 0;}
.buka-contact hover:{background:#444}
.fa-envelope:before {content: "\f0e0";line-height: 4px;padding: 0 18px 0;padding-bottom: 12px;font-weight: 600;font-size: 22px;
}
.fa-envelope:hover{color: #CF3E2F;transition: all 0.3s linear;}
.fa-envelope-o:before {
content: "\f003";
padding-bottom: 23px;
background: #D14132;
padding-top: 23px;
padding-right: 21px;
padding-left: 21px;
margin-right: -19px;
}
yes { margin-right: 10px; }
</style>
كود الهيدر باللون الاحمر
<style type='text/css'>
/* 2013, May 28 - Experimental layout framework by Taufik Nurrohman (http://gplus.to/tovic) */
.clear{display:block;clear:both;}.status-msg-bg{display:none;}.quickedit{display:none;}#navbar-iframe {height:0px;visibility:hidden;display:none}
/* Header */
.topwrapper {width:998px;margin:50px auto 0;padding:5px;background:#FFF;box-shadow:0 0 3px 0px #BBB;}
#header {
position: relative;
top: 80px;
padding: 5px 10px;
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.01) 1%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255, 255, 255, 0)), color-stop(1%,rgba(255, 255, 255, 0.01)), color-stop(50%,rgba(255, 255, 255, 0.5)), color-stop(100%,rgba(255, 255, 255, 0)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.01) 1%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.01) 1%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.01) 1%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.01) 1%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );}
#header-wrap{background:url(http://2.bp.blogspot.com/-G_x5WmPnIV8/VMKvmWOC0WI/AAAAAAAAHHk/JVRmAXXVp5o/s1600/papers.co-ab46-wallpaper-abstract-psychedelic-art-illust-1920x1080.jpg) no-repeat 0;background-size:cover;padding:10px;margin:auto 0;height:280px;position:relative;}
.innerhm {min-height: 297.9px ;position: relative;width: 995px;margin-right: -10px;margin-top: -54px;backgroundrgba(0,0,0,0.2) url(http://3.bp.blogspot.com/-sy8dAw3wA3U/VAKExLGnoeI/AAAAAAAAFaw/yJVzhdYiDEo/s1600/pattren.png) repeat;}
#header-wrap h1{color:#ECF0F1;text-shadow:0px 3px 1px #BDC3C7;font-size:45px;text-align:center;text-transform:uppercase;line-height:20px;}
#header-wrap h1 a{color:#ECF0F1;text-shadow:0px 3px 1px #BDC3C7;}
#header h1 a:hover{text-shadow:0px 2px 1px #AEB4B8;}
#header h1 a:active{text-shadow:0px 0px 1px #AEB4B8;}
#header-wrap .description{margin:0;padding:0;font-size:12px;color:#FFF;text-align:center;text-transform:uppercase;text-shadow:0 0 1px #FFF;}
#header-wrap img{margin:0;padding:0;}
.plus-menu{float:left;position:absolute;font-size:24px;color:#fff;width:50px;text-align:center;top:0;left:0;padding:5.3px 0 ;cursor:pointer;}
.plus-menu:hover {color:#CF3E2F;transition: all 0.3s linear;}
#search,.box-plusmenu {background: #F5F5F5;text-align:center}
#search-form {color:gray;width:50%;padding:6px 10px 6px 70px;font:14px Electrolize,ge_dinar_oneregular;transition: all 0.2s linear 0s;margin:0 0 10px;border:1px solid #ccc;border-radius:2px}
.search-button,.search-button:hover{background-color:#E74C3C;width:60px;padding:2px 1px;margin:7px -63px 0 0;top:4px;font-size:13px;cursor:pointer;border:none;position:relative;}
button.search-button:hover {background-color: #CC4031;}
#search-form:hover{border:1px solid #aaa}
#search-form:focus{border:1px solid #4D90FE;outline:none;color:black;}
#box,#box2{display:none;position:relative}
.close,.close2{float:right;position:absolute;font-size:18px;color:red;width:45px;text-align:center;top:0;left:0;padding:13px 0 10px;cursor:pointer}
.search-icon{float:right;text-decoration:none;font-size:15px;font-weight:700;line-height: 100%;vertical-align: middle;text-align: center;position:absolute;top:0px;left:5px;cursor:pointer;color:#fff;padding: 16px;}
.search-icon:hover {color:rgba(207, 55, 39, 0.84);transition: all 0.3s linear;}
.content-box2{color:#7C7979;font:13px droid arabic kufi;margin:0 auto;text-align:right;overflow:hidden;padding:10px}
#menu-wrapper{height:47px;width:100%;position:relative}
#nav_header{background:#E74C3C;margin:9px auto 10px;position:relative;-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.1);-moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.1);box-shadow:0 0 2px rgba(0, 0, 0, 0.1);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;margin-top: -10px;}
#nav_header ul{margin:0;padding:0;}
#nav_header > ul > li{float:right;margin:0 0;list-style:none;position:relative;right:203px;font-family: Electrolize,ge_dinar_oneregular;font-size: 12px;}
#nav_header > ul > li > a{color:#fff;padding:14px 24px;display:block;position:relative;border-left:1px solid #D64839;}
#nav_header > ul > li > .selected:after{content:"";border-bottom:3px solid #483353;position:absolute;bottom:0px;z-index:100;width:100%;right:0;}
#nav_header > ul > li > a:hover{color:#F3F0F0;background: #D64839;transition: all 0.3s linear;}
#nav_header > ul > li > .selected{background:#6f5499;color:#ffffff;}
#nav_header li span{position:relative;top:2px;padding-left:5px;}
#nav_header li:hover ul.dropdown{display:block;}
ul.dropdown{position:absolute;top:48px;background:#fff;width:130px;z-index:10;border:1px solid #ddd;padding:6px 0!important;display:none;}
ul.dropdown li{margin:0 0;list-style:none;}
ul.dropdown a{border:0;padding:7px;margin:5px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:block;transition: all 0.21s;}
ul.dropdown a:hover{background:#D64839;color:#fff;}
ul.dropdown:before{content:"";position:absolute;top:-14px;right:0px;width:100%;height:18px;}
ul.dropdown:after{position:absolute;top:-13px;right:3px;content:"";border:7px solid #fff;border-right-color:transparent;border-top-color:transparent;border-left-color:transparent;}
.fa-lightbulb-o:before {content: "\f0eb";position: absolute;top: 1px;right: -1px;font-size: 25px;line-height: 1.4em;padding-left: 10px;padding-bottom: 4px;padding-right: 10px;padding-top: 5px;color:#fff;background:#E74C3C;border-bottom-right-radius: 3px;box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.09),inset 0 -1px 0 #C73131;}
.fa-lightbulb-o:hover{color: #DD4637;}
/* CSS Menu Top */
#menutop{width:100%;max-width: 998px;margin:-60px auto 0;background:rgba(255, 255, 255, 0.98);position: fixed;z-index: 92;opacity: 0.98;margin-right: -0px;border-bottom-right-radius: 3px;border-bottom-left-radius: 3px;}
#menutop:before{content: "";background-image: url(http://2.bp.blogspot.com/-PZD7QpXAxCk/VMDRF2JosaI/AAAAAAAAHG8/f1ENqr-cGBw/s1600/shadow-top.png);
background-position: center top;background-repeat: no-repeat;height: 42px;position: absolute;top: 44px;width: 103%;z-index: 2;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:45px}
#menutop li{float:right;display:inline;position:relative;font-family:Electrolize,ge_ss_threeregular;font-size:12px;
font-weight:bold;}
#menutop a{display:block;line-height:45px;padding:0 16px;text-decoration:none;color:#938E8E;}
#menutop ul li:hover a{color:#7C7777;}
#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer}
#menutop label{font-family:'Open Sans';font-size:30px;font-weight:400;display:none;width:35px;height:45px;line-height:45px;text-align:center;}
#menutop label span{font-size:13px;position:absolute;right:35px}
#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#666}
#menutop ul li ul li a{color:#666;height:45px;line-height:45px;background:#fff;width:100%;}
#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#444;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:65px;transition:all 0.2s ease-in-out;}
#menutop li:hover > ul.menux{visibility:visible;opacity:1;top:45px;}
#menutop a.dutt{padding:0 14px 0 27px}
#menutop a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;left:10px;}
#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;left:10px;}
#menutop ul li ul li a:hover{background:rgba(231, 76, 60, 0.93);color:#fff;}
#menutop li.facebook {padding:0 5px;}
#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.linkedin{text-align:center;color:#666;float:left;transition:all 0.2s ease-in-out;}
#menutop li a.facebook:hover,#menutop li a.twitter:hover,#menutop li a.youtube:hover,#menutop li a.googleplus:hover,#menutop li a.linkedin:hover{color:#fff;}
#menutop li .facebook .fa.fa-facebook,#menutop li.twitter .fa.fa-twitter,#menutop li.youtube .fa.fa-youtube,#menutop li.googleplus .fa.fa-google-plus,#menutop li.linkedin .fa.fa-linkedin{color:#666;transition:all 0.2s ease-in-out;}
#menutop li.facebook:hover{background:#3b5998;color:#fff;}
#menutop li.twitter:hover{background:#57b5e2;color:#fff;}
#menutop li.youtube:hover{background:#e74c3c;color:#fff;}
#menutop li.googleplus:hover{background:#FA6B5C;color:#fff;}
#menutop li.facebook:hover .fa.fa-facebook,#menutop li.twitter:hover .fa.fa-twitter,#menutop li.youtube:hover .fa.fa-youtube,#menutop li.googleplus:hover .fa.fa-google-plus,#menutop li.linkedin:hover .fa.fa-linkedin{color:#fff;}
#menutop a ul li a:hover, #menutop a ul li.active a{color: #FF4444;}
#menutop li.buttonalert {font-size:16px;color:#D24747;padding:0 30px;cursor:pointer;margin-top: 12px;}
/* Css Photo Cover */
#photo-cover{background: rgba(41, 49, 65, 0.16);-webkit-border-radius: 3px;-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .07);border: solid 4px #FFFFFF;display: block;right: 4px;bottom:-40px;position: absolute;height: 169px;width:161px;overflow:hidden;z-index:2;padding-left: 20px;padding-right: 10px;padding-bottom: 10px;}
.mygallery{position:relative;height: 100%;width:100%;margin-right: -57px;}
.mygallery img{margin-bottom:5px;padding: 0px;border: 0px;outline: 0px;height: 188px; width:280px;cursor: url(http://2.bp.blogspot.com/-IJ8uMvhlKVU/VFDoIGDIn3I/AAAAAAAAGio/K2vVTU7nX84/s320/chm.png),pointer;-moz-transition: all .3s ease 0s;}
#contacts-forms{width:100%;margin-bottom:10px}
#widget-contact{position:fixed;top:15%;left:50%;width:400px;height:auto;z-index:1000;display:none;margin:0 0 0 -200px;background-color:#fff;border:4px solid #fff;}
#widget-contact h3.juduls{background:#E74C3C;color:#fff;font:normal 18px Electrolize,ge_ss_tvbold;position:relative;margin:0;padding:19px;text-transform:uppercase;text-align: right;}
#widget-contact h3.juduls:hover {background: #D13F30;}
#widget-contact h3.juduls a{position:absolute;left:15px;color:#fff;font-size:30px;text-decoration:none;cursor:pointer;top: 1px;font-weight: bold;}
#ContactForm1 h2{display:none}
#area-overlay{position:fixed!important;z-index:999;top:0;right:0;bottom:0;left:0;background-color:#000;display:none}
#ContactForm1_contact-form-email-message{width:355px;background:#FAFAFA;outline:none;border:1px solid #C7C7C7;overflow:hidden;height:150px;color:#444;margin:0 10px 10px;padding:7px}
#ContactForm1_contact-form-submit{font-weight:700;background:#E74C3C;position:relative;cursor:pointer;float:right;width:100px;outline:none;border:none;margin:0 10px 10px;padding:7px;color:#fff;font-family: Electrolize,ge_ss_tvbold;}
#ContactForm1_contact-form-submit:hover{background:#C0392B}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:250px;margin-top:10px;color: #444;}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:350px;background:#FAFAFA ;color:#444;outline:none;border:1px solid #C7C7C7;margin:0 10px 10px;padding:10px}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{border:1px solid #1e90ff}
.contact-form-widget p{margin:0}
.contact-form-widget{padding:5px;font: normal 18px Electrolize,ge_ss_threeregular;
line-height: 2em;
text-align: right;
font-weight: 600;}
.buka-contact{padding:16px 10px;color:#fff;font-size:14px;cursor:pointer;float:left;margin-left: 51px;padding-bottom: 0;}
.buka-contact hover:{background:#444}
.fa-envelope:before {content: "\f0e0";line-height: 4px;padding: 0 18px 0;padding-bottom: 12px;font-weight: 600;font-size: 22px;
}
.fa-envelope:hover{color: #CF3E2F;transition: all 0.3s linear;}
.fa-envelope-o:before {
content: "\f003";
padding-bottom: 23px;
background: #D14132;
padding-top: 23px;
padding-right: 21px;
padding-left: 21px;
margin-right: -19px;
}
yes { margin-right: 10px; }
</style>
النهاية الان نتمنى ان يعجبكم الموضوع ولاتحرمونا من تعليقاتكم المشجعة وشكرا لمروركم نلتقي انشاء الله في تدوينة اخرى