كن مهووس: اضافة قائمة افقية لعرض الصفحات متجاوبة

أفضل المواضيع
  • قالب كن مهووس v3
  • أحدث وأضخم باتشات PES 2010 لعام 2016 باخر الانتقالات والاضافات الرهيبة
  • قالبي تدوين وماتلاين المدفوعين على بيكاليكا {تحديث}
  • قالب مدونة نكهة الاصلى مجانا بدون مشاكل
  • Stronghold Crusader 2 The Templar and The Duke-CODEX
  • هذه هي كافة أجهزة سوني التي ستدعم تحديث الأندرويد "مارشميلو 6.0" الجديد
  • تشغيل نت مجانى على خط فودافون
  • اضافة واجهة احترافية v2
  • اضافة صفحة الخطا v2
  • قالب كن مهووس v2 مجانا
نشر في
اضافة قائمة افقية لعرض الصفحات متجاوبة
كتب بواسطة
عدد التعليقات
1 التعليقات

اهلا بكم احبائى الكرام. بعد الاهتمام الكبير بالاصدار الاول والثانى من القائمة الرئيسية والتى تضم زر الصفحة الرئيسية وايضا محركين بحث احترافيين والاهم فيها هى خاصية التجاوب فالاولى بتجاوب باستعمال الجافا سكريبت والثانية باستعمال css فقط اليكم قائمة افقية لعرض الصفحات وبازرار التواصل الاجتماعى بشكل والوان رائعة وايضا والاهم انها متجاوبة مع كل الشاشات بجميع انواعها واحجامها وهى ايضا اضافة مهمة جدا لاى شخص يملك مدونة. فمسائلة التجاوب صعبة على بعض الاشخاص, تابعوا طريقة اضافتها.

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

  1. احتفظ بنسخة احتياطية من القالب لتجنب حدوث ايه مشاكل
  2. توجه الى تحرير html 
  3. تاكد اولا من حذف ستايل واكواد القائمة الموجودة عندك
  4. ابحث عن </head> واضف الاكواد التالية قبله
<style>
/*================================
           القائمة العلوية
================================*/
.width {width: 98%;margin: 0 auto;}
.header-top {height: 40px;overflow: hidden;background:  #29567D;border:4px solid #fff}
.header-top:hover{background-color:#F74047;text-decoration:none;transition:1s;background:#29567D;background-image:linear-gradient(110deg,#F74047 0%,#F74047 50%,transparent 50%,transparent 100%);background-size:200%;background-position:150% 0;background-repeat:no-repeat;transition:background-position 1.9s ease,color 1.15s ease}
.menu-top {float: right;}
.menu-top li {float: right;}
.menu-top li:after {content: "|";color: rgba(238, 238, 238, 0.14);}
.menu-top a {padding:8.5px;display: inline-block;font-family: 'Acme',El Messiri;font-weight: 700;font-size: 15px;color: #fff;box-shadow: inset 0 3px 9px rgba(0,0,0,.25);}
.menu-top a:hover{box-shadow: inset 1px 1px 10px 30px #F74047;
color:#fff;}
.social-top {float: left;padding: 5px 10px 0 0;}
.social-top li {float: right;}
.social-top li a:hover:before {-webkit-animation: toTopFromBottom .3s forwards;-moz-animation: toTopFromBottom .3s forwards;animation: toTopFromBottom .3s forwards;box-shadow: inset 0 3px 9px rgba(0,0,0,.25);}
.social-top .LinkList ul{text-align:center}
.social-top a{display: block;width: 30px;height: 30px;font-size: 14px;color: #fff;line-height: 35px;transition: 0.3s;background:#F74047 ;margin-right: 5px;border-radius:2px;overflow:hidden;text-align: -webkit-center;box-shadow: inset 0 3px 9px rgba(0,0,0,.25);}
.social-top a:before{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400;line-height:27px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.social-top .facebook:before{content:"\f09a"!important;}
.social-top a.facebook:hover{background:#3b5998;}
.social-top .twitter:before{content:"\f099"!important}
.social-top a.twitter:hover{background:#55acee;}
.social-top .gplus:before{content:"\f0d5"!important}
.social-top a.gplus:hover{background:#DD4B39;}
.social-top .rss:before{content:"\f09e"!important;}
.social-top ul a.rss:hover{background:#FFC200;}
.social-top .youtube:before{content:"\f167"!important;}
.social-top a.youtube:hover{background:#e52d27;}
.social-top .skype:before{content:"\f17e"!important;}
.social-top a.skype:hover{background:#00aff0;}
.social-top .stumbleupon:before{content:"\f1a4"!important;}
.social-top a.stumbleupon:hover{background:#eb4924;}
.social-top .tumblr:before{content:"\f173"!important;}
.social-top a.tumblr:hover{background:#35465c;}
.social-top .vine:before{content:"\f1ca"!important;}
.social-top a.vine:hover{background:#00b488;}
.social-top .stack-overflow:before{content:"\f16c"!important;}
.social-top a.stack-overflow:hover{background:#fe7a15;}
.social-top .linkedin:before{content:"\f0e1"!important;}
.social-top a.linkedin:hover{background:#0976b4;}
.social-top .dribbble:before{content:"\f17d"!important;}
.social-top a.dribbble:hover{background:#ea4c89;}
.social-top .soundcloud:before{content:"\f1be"!important;}
.social-top a.soundcloud:hover{background:#f80;}
.social-top .behance:before{content:"\f1b4"!important;}
.social-top a.behance:hover{background:#1769ff;}
.social-top .digg:before{content:"\f1a6"!important;}
.social-top a.digg:hover{background:#000;}
.social-top .instagram:before{content:"\f16d"!important;}
.social-top a.instagram:hover{background:#3f729b;}
.social-top .pinterest:before{content:"\f0d2"!important;}
.social-top a.pinterest:hover{background:#cc2127;}
.social-top .delicious:before{content:"\f1a5"!important;}
.social-top a.delicious:hover{background:#39f;}
  .resp-desk1{display:none}
nav select {width: 100%;margin: 6px 0px 10px 0;cursor: pointer;padding: 6px;background: #ED3D44;border: none;color: #fff;} option{background: #29567D;color: #fff;}
@media (max-width: 800px){.nav1{display:none}.resp-desk1{display:block;margin-top:0}nav{margin:0;background:none}.main-nav{background:none;border-bottom:none}.nav1 li a,.nav1 li a:hover,.nav1 li a.home{background:#29567D;color:#fff;border:0;margin:0}.nav1 li{display:block;margin:0}}
..menu-top li:hover,.social-top li:hover{  -webkit-animation:rubberBand .8s 1;  -moz-animation:rubberBand .8s 1;  -o-animation:rubberBand .8s 1;  animation:rubberBand .8s 1}
</style>
<link href='https://cdn.rawgit.com/th3littleprof/elprof/master/amine.css' rel='stylesheet' type='text/css'/>
  1. الان ضع هذة الاكواد مكان اكواد القائمة التى حذفتها وعدلها كما تريد
<!-- بداية القائمة الافقية (كن مهووس) -->
<div class='header-top wow animated bounceInDown animated'>
<div class='width'>
<div class='menu-top'>
<div class='page-top wow animated bounceInRight animated'>
<nav id='menu-top'>
<ul id='nav1'>
  <div class='resp-desk1'><a href='#' id='duled1'><i class='fa fa-reorder'/> الصفحات</a></div>
<button class='homer' onclick='document.getElementById(&amp;apos;ads-box&amp;apos;).style.top=&amp;apos;60px&amp;apos;;document.getElementById(&amp;apos;count-box&amp;apos;).style.display=&amp;apos;none&amp;apos;;'><a href='#' style='color:#fff;'><i class='fa fa-bars fa-l'/> مواقع ندعمها </a></button>
<li><a href='/p/blog-page_57.html'>سياسة الخصوصية</a></li>
<li><a href='/p/terms.html'> اتفاقية الاستخدام</a></li>
<li><a href='/p/blog-page_49.html'>التبادل الاعلاني</a></li>
<li><a href='/p/chat.html'> اطلب اضافتك</a></li>
<li><a href='/p/broken-link.html'> الروابط المعطوبة</a></li>
<li><a href='/p/password.html'>هدايا الموقع</a></li>
</ul>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var str=location.href.toLowerCase();$('#menu-top ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('.resp-desk1');menu=$('#menu-top ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});
//]]>
</script>
  </nav>
<div class='clear'/>
</div>
</div>
<div class='social-top'>
<div class='socila-media' id='social-media'>
  <ul>
<li><a class='youtube' href='https://www.youtube.com/channel/UC59xbKG9NMY4Q8vsozfzLkQ' title='youtube'/></li>
<li><a class='rss' href='http://' title='rss'/></li>
<li><a class='twitter' href='http://' title='twitter'/></li>
<li><a class='gplus' href='https://plus.google.com/u/0/+MidoOops' title='gplus'/></li>
<li><a class='facebook' href='https://www.facebook.com/cn1gk' title='facebook'/></li>
</ul>
  </div>
</div>
</div>
</div>
<!-- نهاية القائمة الافقية (كن مهووس) -->
  1. احفظ القالب
اذا حدثت مشكلة او كان هناك استفسار او طلب فباب التعليقات مفتوح وصفحة اطلب اضافتك
avatar

http://cafear1.blogspot.com.eg/ تفضل انظر شكل الاضافة ليس منسقة جيدا

delete 20‏/8‏/2016 2:03 م

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


محول الاكواد الابتسامات





اخبار الهواتف الذكيه
    فريق العمل

    Milad Shenouda

    Front-End Developer

    السيد ابراهيم

    مدير الموقع ومصمم فوتوشوب

    انضم الينا

    مدون محترف

    انضم الينا

    مدون محترف

    اعجب بصفحتنا على الفيسبوك
    ماذا تنتظر !!!
    أنضم الى اعضاء مدونة
    كن مهووس | هوسنا هو سر ابداعنا
    تابعنا الان على تويتر
    فنحن الافضل

    جميع الحقوق محفوظة

    كن مهووس

    2018

    تكويد وتطوير