• THGI N B E W

    ويب نايت | الافضل لكم
  • تصميم افضل القوالب

    اطلب تصميم قالبك الان !
  • عنواننا الابتكار والتميز

    كن دائما معنا
  • نتمنى ان تقضي افضل الاوقات

    تخيل تبدع تصمم تحترف

1050+

عدد المتابعين

22+

عدد الاعمال المنجزة

7000+

عدد التعليقات

89+

عدد المواضيع

نشر في
كتب بواسطة
عدد التعليقات
14 التعليقات
NIGHT WEB

http://www.web3-night.net/2015/02/header-ar1web.html

كيفية اضافة هيدر مدونة عرب ويب

السلام عليكم ورحمة الله وبركاته اليوم موضوع طلبه الزوار وهوكيفية اضافة هيدر مدونة عرب ويب
تابعوا الطريقة ولاتحرمونا من تعليقاتكم المشجعة


كيفية اضافة الهيدر


    1. اذهب للتخطيط
    2. تم القالب 
    3. وبعدها تحرير html
    4. واضف الكود التالي فوق <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='#'>&#8801; ملحقات التصاميم</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='#'>&#8801; ملحقات الويب</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='#'>&#8801; بلوجر</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='#'>&#8801; قوالب عامة</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='إغلاق'>&#215;</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==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' 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'>&#10006;</div>
</div>
</div>
</div>


    1. وبعدها اختر اي كود تريد اي الهيدر الاحمر ام الاسود 
    2. وبعد ان تختار ضع الكود فوق </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=&#39;#00ffffff&#39;, endColorstr=&#39;#00ffffff&#39;,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 &gt; ul &gt; li{float:right;margin:0 0;list-style:none;position:relative;right:203px;font-family: Electrolize,ge_dinar_oneregular;font-size: 12px;}
#nav_header &gt; ul &gt; li &gt; a{color:#fff;padding:14px 24px;display:block;position:relative;border-left:1px solid #232323;}
#nav_header &gt; ul &gt; li &gt; .selected:after{content:&quot;&quot;;border-bottom:3px solid #483353;position:absolute;bottom:0px;z-index:100;width:100%;right:0;}
#nav_header &gt; ul &gt; li &gt; a:hover{color:#F3F0F0;background: #2A2A2A;transition: all 0.3s linear;}
#nav_header &gt; ul &gt; li &gt; .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:&quot;&quot;;position:absolute;top:-14px;right:0px;width:100%;height:18px;}
ul.dropdown:after{position:absolute;top:-13px;right:3px;content:&quot;&quot;;border:7px solid #fff;border-right-color:transparent;border-top-color:transparent;border-left-color:transparent;}
 .fa-lightbulb-o:before {content: &quot;\f0eb&quot;;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: &quot;&quot;;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:&#39;Open Sans&#39;;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 &gt; ul.menux{visibility:visible;opacity:1;top:45px;}
#menutop a.dutt{padding:0 14px 0 27px}
#menutop a.dutt::after{content:&quot;\f0d7&quot;;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:&quot;\f0d7&quot;;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: &quot;\f0e0&quot;;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: &quot;\f003&quot;;
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  &gt; ul  &gt; li{float:right;margin:0 0;list-style:none;position:relative;right:203px;font-family: Electrolize,ge_dinar_oneregular;font-size: 12px;}
#nav_header  &gt; ul  &gt; li  &gt; a{color:#fff;padding:14px 24px;display:block;position:relative;border-left:1px solid #D64839;}
#nav_header  &gt; ul  &gt; li  &gt; .selected:after{content:"";border-bottom:3px solid #483353;position:absolute;bottom:0px;z-index:100;width:100%;right:0;}
#nav_header  &gt; ul  &gt; li  &gt; a:hover{color:#F3F0F0;background: #D64839;transition: all 0.3s linear;}
#nav_header  &gt; ul  &gt; li  &gt; .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 &gt; 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>

اتمنى من الجميع بدعمنا بالتعليقات وتحفيزنا والانضمام للمدونة حتى لايفوتك افضل اعمالنا التي نقدمها لكم اتمنى لكم قضاء اوقات سعيدة بالمدونة ويب نايت - مع تحياتي اسامة عبد الرضا
price_مجانا

تعليقات الموضوع

14 التعليقات

avatar

اضافة رائعة اخى اسامة
شكرا لك

avatar

شكرا لمرورك الطيب

avatar

:)شكرا لمرورك الطيب:)

avatar

كيف اغير العرض وما هى اكواد الالوان لتغير لونه

avatar

كلمني من الفيسبوك
https://www.facebook.com/osama.barcelona.26

avatar

حلوووو منور

avatar

شكرا لمرورك الطيب

avatar

من يريد أزرار مدونة عرب ويب لمدونته بلوجر الرجاء يتفضل والله حقيقة
http://th3gladiator.blogspot.com/2015/03/buttons-ar1web-for-blogger.html
والله والله حقيقة :)

avatar

تمت الشروط يرجى الأرسال
mr4764339@gmail.com

avatar

كيفية تغيير عرضه ليتناسب مع المدونه

avatar

ابحث عن .topwrapper {width:998px; وغير 998px الى اي عرض يناسبك

avatar

شكرا لك
مدونة القرش ويب
http://kersh-web.blogspot.com/

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية

عبّر عن تعليقكالإبتسامات
تابع مدونة ويب نايت +
Join on this site

كن احد متابعي المدونة