تركيب هيدر مدونة نقطة إبداع الإحترافي

السلام عليكم احبائي متابعين وزوار مدونة نقطة إبداع

في تدوينة جديدة من تدوينات الرائعة والحصرية

وفي هذه التدوينة الحصرية سوف اقدم طريقة تركيب هيدر مدونة نقطة إبداع الاحترافي

طريقة التركيب

نضع الكود التالي  قبل  ]]></b:skin> 

/* CSS Header point-ebda3 */.blogouter-wrapper { background: #FFF; position: relative;  z-index: 100; padding-bottom: 5px;  border-bottom: 1px solid rgb(239, 239, 239);  padding: 4px; height: 40px;}.ct-wrapper {padding:0 20px;position:static;max-width:1100px;margin:0 auto;}.header-wrapper2 {margin:0 auto;padding:0}/* CSS Top Menu */.main-nav {display:block;margin:0 auto;float:right;padding:0;width: 100%;background:transparent;}  .main-nav ul {    display: block;  float: right;  padding: 0;  width: 100%;  background: transparent;  margin: 3px;}.main-nav li {list-style-type:none;float:right;padding:0;}.main-nav li a {  position: relative;  font-family: Electrolize,ge_ss_threeregular;  font-size: 12px;  font-weight: 400;  background: transparent;  color: #838888;  display: block;  margin: 0;  padding: 8px;  line-height: 100%;  margin-top: 3px;}.main-nav ul > li > a:after {content:"";position:absolute;width:0;right:0;left:0;margin:auto;bottom:-1px;height:3px;background:rgba(255, 255, 255, 0);opacity:0;visibility:hidden;transition:all 0.2s ease-out;}.main-nav ul > li > a:hover:after {opacity:1;visibility:visible;width:90%;}.main-nav ul li a:active, .main-nav ul li.highlight a {line-height:100%;text-decoration:none;}.main-nav ul li a:hover {color:#a1a9cd;text-decoration:none;}.main-nav a#pull {display:none;}.main-nav li.facebook,.main-nav li.twitter,.main-nav li.youtube,.main-nav li.googleplus,.main-nav li.linkedin{background:;text-align:center;color:#838888;float:left;transition:all 0.2s ease-out;}.main-nav li a.facebook:hover,.main-nav li a.twitter:hover,.main-nav li a.youtube:hover,.main-nav li a.googleplus:hover,.main-nav li a.linkedin:hover{color:#7076c5;}.main-nav li .facebook .fa.fa-facebook,.main-nav li.twitter .fa.fa-twitter,.main-nav li.youtube .fa.fa-youtube,.main-nav li.googleplus .fa.fa-google-plus,.main-nav li.linkedin .fa.fa-linkedin{color:#838888;transition:all 0.2s ease-out;}.main-nav ul li.facebook:hover .fa.fa-facebook,.main-nav li.twitter:hover .fa.fa-twitter,.main-nav li.youtube:hover .fa.fa-youtube,.main-nav li.googleplus:hover .fa.fa-google-plus,.main-nav li.linkedin:hover .fa.fa-linkedin{background:;color:#313131;}/* CSS Main Menu */#menu-wrap {  background: #313131;  height: 48px;  position: relative;}#menu, #menu ul {margin:0;padding:0;list-style:none;}#menu ul{height:48px}#menu {  background: #313131; color: #fff; height: 48px; width: 980px; margin-right: 12%;}#menu:before,#menu:after {content:"";display:table;}#menu:after {clear:both;}#menu li {float:right;display:inline;position:relative;font-family:Electrolize,ge_ss_threeregular;;font-size:18px;font-weight:500;text-transform:uppercase;margin:0;   height: 48px;}#menu a {display:block;line-height:48px;padding:0 9px;text-decoration:none;color:#cccccc;transition:all 0.2s ease-out;}#menu li:hover > a {background:#333;color:#fff;}#menu ul {margin:20px 0 0 0;visibility:hidden;opacity:0;height:auto;min-width:150px;background:#fff;position:absolute;z-index:99;top:50px;right:0;box-shadow:0 4px 5px -2px rgba(0,0,0,.2);transition:all 0.2s ease-out;}#menu li:hover > ul {opacity:1;visibility:visible;margin:0;}#menu ul ul {top:0;right:150px;margin:0 20px 0 0;box-shadow:0 4px 5px -2px rgba(0,0,0,.2);}#menu ul li {display:block;width:100%;font-family:Electrolize,ge_ss_threeregular;font-size:13px;font-weight:400;text-transform:none;}#menu a.ai{padding:0 14px 0 27px;}#menu li > a.ai::after {content:"\f107";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:48px;position:absolute;top:0;left:10px;color:#aaa;transition:all 0.2s ease-out;}#menu li > a.ai2::before,#menu li > a.ai3::before {content:"\f104";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:50px;position:absolute;top:0;right:10px;color:#ccc;transition:all 0.2s ease-out;}#menu li > a.ai:hover::after,#menu li > a.ai2:hover::before,#menu li > a.ai3:hover::before{color:#fff;}#menu ul a {padding:0 25px 0 20px;background:#fff;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all 0.2s ease-out;}#menu ul a:hover {background-color:#313131;color:#fff;}#menu ul li:first-child > a:after {content: '';position:absolute;right:20px;top:-6px;border-right:6px solid transparent;border-left:6px solid transparent;border-bottom:6px solid #fff;transition:all 0.2s ease-out;}#menu ul ul li:first-child a:after {right:-6px;top:50%;margin-top:-6px;border-right:0;border-bottom:6px solid transparent;border-top:6px solid transparent;border-left:6px solid #fff;transition:all 0.2s ease-out;}#menu ul li:first-child a:hover:after {border-bottom-color:#313131;}#menu ul ul li:first-child a:hover:after {border-left-color:#313131;border-bottom-color: transparent;}.no-transition {transition:none;opacity:1;visibility:visible;display:none;}#menu li:hover > .no-transition {display:block;}#menu .homers {line-height:50px;}#menu .homers a{background:#313131;color:#fff;padding:0 15px;}#menu .homers a:hover{opacity:0.9;background:#313131;color:#fff;}#menu .homers .fa.fa-home{text-align:center;color:#fff;}#menu-wrap input{display:none;margin:0;padding:0;width:80px;height:50px;opacity:0;cursor:pointer;}#menu-wrap label{font-family:Electrolize,ge_ss_threeregular;;font-size:30px;font-weight:500;text-transform:uppercase;display:none;width:35px;height:51px;line-height:51px;text-align:center;}#menu-wrap label span{font-size:13px;position:absolute;right:35px}#menu li.ranpost {cursor:pointer;float:left;}#menu li.ranpost a{padding:0 18px;font-size:16px;line-height:50px;}/* CSS Fixed Search Button */.minima3-search {position:relative;padding:0;height:0;margin:0 auto;}#menu li.searchbutton {background:#444;margin:0;padding:0 18px;display:inline-block;text-transform:Capitalize;height:48px;line-height:48px;cursor:pointer;z-index:93;float:left;}#menu li.searchbutton.active {background:#313131;color:#fff;}#menu li.searchbutton:after {content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;color:#fff;position:relative;}#menu li.searchbutton.active:after {color:#fff;}.search-form {display:none;position:relative;background:#fff;padding:0;width:96.5%;z-index:91;max-width:1100px;margin:0 auto;}.searchform {margin:0 auto;text-align:center;line-height:45px;}.searchbar {background:transparent;border:none;width:75%;padding:5px 10px;font-weight:400;font-size:20px;font-family:Electrolize,ge_ss_threeregular;color:#999;margin:0 auto;outline:none;line-height:45px;transition:background-color 1s ease-out 0s;}.searchbar:focus {color:#666;}.searchsubmit {right:0;top:0;bottom:0;position:absolute;background:#313131;border:none;outline:none;cursor:pointer;color:#fff;padding:0 25px;text-transform:uppercase;font-weight:500;font-size:16px;font-family:Electrolize,ge_ss_threeregular;line-height:45px;border-rad0ius:2px;transition:background-color 0.3s ease-out;}.searchsubmit:hover {background:#444;color:#fff;}.searchsubmit:active {background:#333;color:#fff;border:none;outline:none;}/* CSS Ads */.banner {margin:0 auto;text-align:center;overflow:hidden;margin-top:20px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnHKsdcheotESalhnSOSiVU5SbiVAVO-HKDsyZ0qCwUrqFjwCCk5zKb_xSxCiOmaUjuEGOsJzux8klyo6oqrOlEhvPw06IGlB0pHCBzr9jJb7Oh0mZR6Z0VWL_2YTdqUkV2eNG_2Kk_Fc/s1600/pattern-1.png);padding: 1px 10px;width: 730px;}.banner .widget {width:100%;max-width:100%;margin:0 auto;background:transparent;text-align:center;overflow:hidden;padding-top:5px;padding-bottom:5px;}.banner img, .banner iframe{display:block;margin:0 auto;text-align:center;}.banner2 {margin:0 auto;text-align:center;overflow:hidden;margin-bottom:20px;}.banner2 .widget {width:100%;max-width:100%;margin:0 auto;background:transparent;text-align:center;overflow:hidden;padding-top:5px;padding-bottom:5px;}.banner2 img, .banner2 iframe{display:block;margin:0 auto;text-align:center;}.ads-om{margin: 0 auto;text-align: center;overflow: hidden;margin-top: 20px;padding: 7px 7px 6px;margin-right: -7px;width: 638px;padding-top: 10px;border: 1px solid #E9E9E9;border-left: none;border-right: none;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilWGKzlGAHyNys6TtEHlcvr_hHvpwxVaYnXvXPyqGR_hkSHNdt5tmUiJN-SY9MDapNDqEd6v7ZetO878UwSmsYQB4S3MHT9n-MlLwVtNDv0U6cLIWmJfOT9UOuYFLNHHPhnXTWtUdHpNs/s1600/adshm2.jpg);}.ads-om img,{margin-left: 20px;display:block;margin:0 auto;text-align:center;}.ads-om1{margin: 0 auto;text-align: center;overflow: hidden;margin-top: 20px;padding: 7px 7px 6px;margin-right: -7px;width: 638px;padding-top: 10px;border: 1px solid #E9E9E9;border-left: none;border-right: none;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXjfEpbaNbEgZo9o_Sr_s9RP7bXXexlcv2pqZw5GrUKcxrav8OahYswokcR_v54Ycocva5P8zBAFf81u9Mfgh9ordiVsVvcDPjWdat95oAMRYhfVcVKj2lOSyheDV1zJ5ch51UI3afMRg/s1600/adshm1.jpg);}.ads-om1 img,{margin-left: 20px;display:block;margin:0 auto;text-align:center;}/* css Statu om */.status-msg-wrap a {color: #F73A3A;}.status-msg-wrap {padding: 8px;background: #312E2E;color: #fff;font-family: Electrolize,Electrolize,ge_ss_threeregular;border-left: 3px solid #e74c3c;}/* Header */.topwrapper {  width: 1359px;margin: 43px -2px 0px;padding: 2px;}#header-wrap{  height: 250px; background: #E7E7E7;  background-attachment: fixed;  background-repeat: no-repeat;  background-size: cover;  border-top: 1px solid rgb(229,229,229);  padding: 35px 0 100px;  width: auto;  margin: auto 0;  position: relative;}.innerom {min-height: 297.9px ;position: relative;width: 995px;margin-right: -10px;margin-top: -54px;}#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{ width: 359px;  float: right;  margin-top: -295px;  margin-right: 471px;}/* Outer Wrapper */#outer-wrapper{width: 1030px;margin: 10px auto;padding: 4px;background: #F6F6F6;border: 1px solid #ddd;}#main-wrap{width:670px;float:right;margin-top: 53px;}#sidebar-wrap {  width: 320px;float: left;margin-left: 19px;margin-top: 32px;margin-bottom: 34px;}.footer-border {background-color: #fff;height: 66px;}.mor1{background: white; height: 61px; width: 100%; float: right; z-index: 1; position: relative;}.mor2{float: right;  font-size: 15px;  color: black;  padding: 18px;  font-family: Electrolize,ge_ss_threeregular;  margin-right: 16px; }.mor2:hover { border-bottom: 3px solid #589FBE; color: #589FBE;}.mor2home{  float: right;  font-size: 15px;  color: #589FBE;  padding: 18px;  font-family: Electrolize,ge_ss_threeregular;  margin-right: 16px;}.mor2home:hover {  border-bottom: 3px solid #589FBE; color: #589FBE;}.mor2no{float: right;font-size: 15px; font-family: Electrolize,ge_ss_threeregular;  color: black;  padding: 18px;  margin-right: 16px; }.mor2no:hover{border-bottom: 3px solid #a1a9cd;color: #a1a9cd;}/*-------ajax-form---------*/.search {overflow: hidden;position: absolute;left: 13%;float: none;z-index: 9999;width:300px;}#ajax-search-form {  font: normal normal 13px/normal Arial,Sans-Serif;  float: left;  position: relative;  top: 275px;  right: -500px;}#ajax-search-form a {color:#741F27;text-decoration:none;}#ajax-search-form .searchbox {padding: 10px;font: normal 12px tahoma;transition: 0.4s;width: 386px;margin: 0;height: 20px;border: 3px solid white;border-radius: 4px;background-color: rgba(255, 255, 255, 0);}#ajax-search-form .searchbox:focus {border: 3px solid rgb(76, 145, 215);outline: none;}#ajax-search-form input::-moz-focus-inner {margin:0;padding:0;border:none;outline:none;}#ajax-search-form .searchbtn {width: auto;border: none;font: normal 12px tahoma;cursor: pointer;padding: 10px 20px;margin: 0 -4px 0 0;border-radius: 3px 0 0 3px;color: #FFF;position: absolute;top: 5px;left: 1px;background-color: rgba(0, 0, 255, 0);outline: none;}#ajax-search-form .searchbtn:hover{}#search-result {border-top: none;background-color: #FFF;padding: 10px;margin: 10px 0;width: 278px;height: auto;position: relative;top: 0;left: 0;max-height:310px;overflow:auto;z-index: 99;-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);display: none;}#search-result li {padding: 10px;border: 1px dotted #EEE;color: #AAA;font-size: 0px;line-height: 1em;margin: 0 0 5px 5px;overflow: hidden;}#search-result img {float:right;margin: 0 0 0 8px;border: 3px solid #EEE;}#ajax-search-form a {color: #888;line-height: 1.9em !important;font: normal 12px tahoma;text-decoration: none;padding: 0;}#search-result ol,#search-result h4 {margin:0;padding:0;}#search-result h4, #search-result strong {display: block;margin: 0 0 10px 0;font: normal 12px ges,tahoma;color: #BF4247;}#search-result ol {margin:0;text-align:right;}#search-result ol a:hover {color: #BF4247;text-decoration: underline;background: none;}#search-result .close {display: block;position: absolute;top: 0;left: 10px;line-height: normal;color: #f00;font-size: 18px;}#search-result strong {color:#B75252}#blog-pager {margin: 1em 0;text-align: center;overflow: hidden;clear: both;}

ونضع الكود التالي تحت <head>

<link href="http://cdn.jsdelivr.net/darfonts/0.1/dinone-dintwo-sstext-ssthree/stylesheet.css" rel="stylesheet"/>

ونضع الكود التالي تحت <body>

<div class='blogouter-wrapper'>
<header class='header-wrapper2'>
<div class='ct-wrapper'>
<div class='navigation section' id='navigation'><div class='widget HTML' id='HTML99'>
<nav class='main-nav'>
<ul>
<li class='home1 highlight'><a href='http://point-ebda3.blogspot.com'>الرئيسية</a></li>
<li><a href='http://point-ebda3.blogspot.com/p/terms.html'>إتفاقية الإستخدام</a></li>
<li><a href='http://point-ebda3.blogspot.com/p/guestbook.html'>سجل الزوار</a></li>
<li><a href='http://point-ebda3.blogspot.com/p/sitemap.html'>إرشيف التدوينات</a></li>
<li class='sorting-01 facebook' title='تابعنا على Facebook'><a href='https://www.facebook.com/PointEbda3Officiel' target='_blank'><i class='fa fa-facebook'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus' title='تابعنا على Google+'><a href='https://plus.google.com/u/0/107501541153326421035/'><i class='fa fa-google-plus'/><span class='inv'/></a></li>
<li class='sorting-04 youtube' title='تابعنا على Youtube'><a href='https://www.youtube.com/channel/UCBPp0c1duWAMySgh52Y7vaQ'><i class='fa fa-youtube'/><span class='inv'/></a></li>
</ul>
<a href='#' id='pull'>القائمة</a>
</nav>
</div></div>
</div>
</header>
</div>
<header class='point-ebda3' id='header-wrap'>
<form action='/search' id='ajax-search-form'>
  <input class='searchbox' name='q' placeholder='ابحث عن شيء تريده هنا' type='text'/>
<button class='searchbtn' type='submit'>
<span class='fa fa-search form-control-feedback fa-white'/>
</button>
</form>
<div id='photo-cover'>
<div class='mygallery'>
<li>
<a href='/' title='نقطة إبداع|إبداع يستمر'>
<div class='animated tada'>
</div>
</a>
</li>
<div class='clear'/>
</div>
</div>
<div id='header'>
</div>
<div class='innerom'/>
  <img alt='' class='slimg' src='http://i.imgur.com/fYhVDsb.png?1'/>
</header>
<div class='mor1' style=' '><a href='http://point-ebda3.blogspot.com/' style='display: block'><div class='mor2home' style=' '>الصفحة الرئيسية</div></a>
<a href='http://point-ebda3.blogspot.com/search/label/قوالب بلوجر' style='display: block'><div class='mor2' style=' '>قوالب بلوجر</div></a>
<a href='http://point-ebda3.blogspot.com/search/label/إضافات بلوجر' style='display: block'><div class='mor2' style=' '>إضافات بلوجر</div></a>
<a href='http://point-ebda3.blogspot.com/search/label/مقالات' style='display: block'><div class='mor2' style=' '>مقالات</div></a>
<a href='http://point-ebda3.blogspot.com/search/label/ملحقات التصميم' style='display: block'><div class='mor2' style=' '>ملحقات التصميم</div></a>
<a href='http://point-ebda3.blogspot.com/search/label/حصريات' style='display: block'><div class='mor2' style=' '>حصريات</div></a>
<a href='http://point-ebda3.blogspot.com/search/label/دروس' style='display: block'><div class='mor2' style=' '>دروس</div></a>
<a href='http://point-ebda3.blogspot.com/search/label/اندرويد' style='display: block'><div class='mor2' style=' '>اندرويد</div></a>
<a href='http://point-ebda3.blogspot.com/search/label/مدونات' style='display: block'><div class='mor2' style=' '>مدونات</div></a>
</div>

لاتنسى ترك تعليق يحفزنا على تقديم المزيد