السلام عليكم ورحمة الله وبركاتة
اليوم اقدم لكم هيدر الاصدار الاول احترافى و هو يعتبر هيدر اضافى وليس هيدر اساسى ولكنه يعطى مدونتك جاذبية واحترافية ويفضل وضعه بعد القوائم والهيدر الاصلى يحتوى الهيدر على 4 خانات الخانة الاولى تكتب فيها نبذة مختصرة عن موقعك وعمود يحتوى على وسائل التواصل وعمود يحتوى على الكتاب الخاصين بالمدونة و عمود للنشرة البريدية, والان دعونا ندخل فى شرح التركيب كى لا اطيل عليكم.
شرح التركيب
- توجه الى القالب ثم تحرير httml
- ابحث عن ></b:skin> وضع فوقه الكود التالي
#header-wrap_JW {width: 1170px;background: #4A5667 url(); background-size: cover; margin: 0 auto; height: 240px; margin-bottom: 5px; margin-top: 10px; border: 5px solid #fff; overflow: hidden;}.titlewrapper-jazairiweb {margin: 20px; text-align: center; font-weight: normal; color: rgb(255, 255, 255); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.01) 1%,rgba(255, 255, 255, 0.35) 50%,rgba(255, 255, 255, 0) 100%); font-size: 26.3px; font-family: ge_dinar_tworegular; } #pb-footer { margin: auto; background: none; } #pb-footer h2 { margin-bottom: 20px; font-size: 16px; color: #fff; font-family: ge_dinar_tworegular; } #pb-footer h2:before {content: none; position: none; padding:none; background: none; color: none; line-height: none; } .footer-section { padding: 10px; border-left: 1px dashed #BFBFBF; font-weight: normal;float: right;width: 250px; } .footer-section:last-child { border: none; } .footer-section p { width: 160px; color: #BFBFBF;direction: rtl; text-align: justify; font-family: ge_dinar_tworegular; font-size: 12px; line-height: 16px; } .footer-section h4 { font-family: ge_dinar_tworegular;text-align: right; width: 300px; margin-bottom: 5px; margin-top: 5px; font-size: 13px; font-weight: normal; direction: ltr;color: #BFBFBF;} .pdn--vm { padding-top: 10px; padding-bottom: 21px; } .text-center { text-align: center; } .mrg--an { margin: 0;font-family: ge_dinar_tworegular;color: #fff;} #team { margin: 0 auto;text-align: center; }#team img {height: 60px;width: 60px;border-radius: 30px; border: 1px solid #ddd; margin-left: 15px; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #team img:hover { border-color: #3A4755; opacity: 0.80;box-shadow: 0px 0px 18px 18px rgba(80, 80, 80, 0);-webkit-transform: translateY(-4px); transform: translateY(-4px);}
اضف الكود التالي في المكان الدي تراه مناسب لمدونتك
<header class='jazairiweb_wrap_jazairiweb' id='header-wrap_JW'> <div class='titlewrapper-jazairiweb '> تريدون | تجمع لافضل القوالب و الملحقات المتنوعة</div> <div id='pb-footer'> <div class='footer-section'> <h2>موقع تريدون!</h2> <p>مرحبا بزوار الكرام أتمنى أن تجدوا ما تبحثون عنه في | تريدون</p></div> <div class='footer-section'> <h2>الدعم التقني</h2> <h4>elsayedwuk@gmail.com</h4> <h4>skype : tridwn</h4></div> <div class='footer-section'> <h3 class='profile-name mrg--an'> فريق العمل: مدير الموقع فقط </h3> <div id='team'> <a href='#' target='_blank'><img alt='avatars-000116083896-j1l4i3-t500x500' src='http://a.top4top.net/p_104oqh53.png'/></a> <a href='#'><img alt='unknown-person' src='http://a.top4top.net/p_104oqh53.png' title='unknown-person'/></a> <a href='#'><img alt='unknown-person' src='http://a.top4top.net/p_104oqh53.png' title='unknown-person'/></a></div></div> <div class='footer-section'> <h2>اشترك الآن</h2> <h4>اشترك لتصلك كل المسابقات! أفضل وأرقى القوالب من بلوجر و اضافات و تصاميم وصولا للملفات المفتوحة، منها كذلك ملحقات متنوعة, كما اقدم هدايا عديدة</h4> </div></div> <div class='descriptionwrapper'> <p class='description'><span> </span></p></div> </header>
إرسال تعليق