بسم الله الرحمن الرحيم متابعين مدونة مبدع تكنو اليوم لدينا اضافة هيدر لمدونات بلوجر احترافي من برمجة مؤمن محمد
قمنا بتصميم الهيدر مجانا لكم وبدون اي شروط , لا تنسي ان تدعمنا اخي كما ندعمكم
طريقة التركيب
body { margin: 0; padding: 0; direction: rtl; background: #F5F5F5; font-family: Lobster,FontEG; } div#header { background: #455A64; height: 331px; width: 100%; position: relative; z-index: 100; transition: all .5s ease-in-out; overflow: hidden; position: relative; height: 331px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio3m98h46XjmaEJTIyWl8fPLaGWo2tz7vwteOwx5V-oAPY2Of5-TLVtNxrcIQo8sAJy9ooF-ECdk6gUgenXdPuhDtak0t7tyGohwgGc15YnEE3eJ9Q2tjRCdcWZStV326vvnrr2lZFuic/s1600/Siang.png") repeat fixed rgb(69, 90, 100); text-align: center; } h1, h2, h3, h4 { margin: 0; position: relative; } img.logo { display: block; margin: 0 auto; margin-top: 55px; } p.title { color: #FFF; font-size: 15px; } #navbar { width: 100%; height: auto; overflow: hidden; padding: 0; background-color: #FFFFFF; box-shadow: 0 -6px 14px 3px #1E1E1E; } #navbar ul { margin: 0; padding: 0; margin-right: 330px; } #navbar ul li { float: right; margin: 15px; list-style: none; } #navbar ul li a { color: #2E3D44; text-decoration: none; font-size: 15px; } #navbar ul li a:hover { border-bottom: 2px solid #5D6F79; color: #444; } .home { color: #333; text-decoration: none; font-size: 15px; border: 2px solid #898E92; border-radius: 3px; padding: 10px 10px 10px 10px; } .home:hover { background: #f5f5f5; }
لا تنسي حذف الهيدر الخاص بمدونتك قبل تركيب الهيدر الجديد
2. ضع الكود التالي في المكان الذي تريد تركيب فية الهيدر
<b:section id='all'/> <div class='all'> <div id='header'> <h3> <a href='#'><img class='logo' src='http://c.top4top.net/p_35016c341.png'/></a> </h3> <p class='title'>مؤمن محمد </p> </div> <div id='navbar'> <ul> <li><a class='home' href='#'>الرئسية</a></li> <li><a href='#'>بلوجر</a></li> <li><a href='#'>تصميم</a></li> <li><a href='#'>فوتوشوب</a></li> <li><a href='#'>تواصل معنا</a></li> </ul> </div> </div>
نتمني ان تنال اعجابكم الهيدر فاذا كنت تريد ان نستمر في الابداع ادعمنا بتعليق , مدونة رائد الويب هي اول مدونة تنشر هذا الهيدر.
ليست هناك تعليقات:
إرسال تعليق