قائمة منسدلة فاخرة مع مربع بحث وازرار مواقع التواصل الاجتماعي لمدونة بلوجر 2015

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

مثال حي إضغط هنا


طريقة تركيب القائمة المنسدلة على مدونة بلوجر

إذهب إلى لوحة تحكم مدونتك www.blogger.com >> القالب >> انقر على تحرير html ثم أبحث عن الرمز التالي:
]]></b:skin>
إذا كنت لا تعرف كيف تجد مثل هذه الرموز في مدونتك يمكنك مشاهدة هذا الموضوع
بعد أن وجدت الرمز ]]></b:skin>
أضف الكود التالي فوقه مباشرةً:

#contact-links {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    margin: auto;
    position: relative;
    width: 100%;
}
#contact-links a {
    color: #4C9FEB;
}
#contact-links a:hover {
    color: #3D85C6;
}
#my-links {
    float: left;
    font-size: 12px;
    margin: 4px 10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
    margin-right: 7px;
    padding-right: 8px;
    text-decoration: none;
}
#my-links a:first-child {
    border-width: 0;
}
#menu-container {
    background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
    border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
    box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
    clear: both;
    height: 46px;
    padding-top: 1px;
}
#neat-menu {
    float: right;
}
#neat-menu a {
    text-decoration: none;
}
#neat-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#neat-menu > ul > li {
    float: right;
    padding-bottom: 12px;
}
#neat-menu ul li a {
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
    border-color: #D1D1D1;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 0 0;
    color: #333333;
    display: block;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    padding: 11px 15px 10px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#neat-menu > ul > li.active > a {
    background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-bottom: 1px solid #2D81CC;
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    margin: -1px 0 -1px -1px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
    background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#neat-menu > ul > li:first-child > a {
    border-radius: 0 0 0 5px;
}
#neat-menu ul ul {
    background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 #FFFFFF inset;
    height: 0;
    margin-top: 1px;
    opacity: 0;
    overflow: hidden;
    width: 240px;
    padding: 0;
    position: absolute;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#neat-menu ul li:hover ul  {
    margin-top: 0\2;
    height: auto;
    opacity: 1;
    visibility: visible;
}
#neat-menu ul ul a {
    border-right-width: 0;
    border-top: 1px solid #D1D1D1;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #444444;
    height: 24px;
    line-height: 24px;
    padding: 7px 12px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
    border-top-width: 0;
}
#menu-search {
    margin:8px 10px 0 0;
    float: left;
}
#menu-search form {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSVnche023jRlToITGsmvdB54hDKfVBIBql0upVUr70HsNzVtJ6yO3yf0S76bUHicCibABVDTyia-LPSK9iwAOsC3q3kpuyO4U47NAIDWLAR0MrsOWN7owlYo_L7UxQb0aFxstE1KSLVhx/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
    height: 26px;
    padding: 0 25px;
    position: relative;
    width: 130px;
}
#menu-search form:hover {
    background-color: #F9F9F9;
}
#menu-search form input {
    color: #999999;
    font-size: 13px;
    height: 26px;
    text-shadow: 0 1px 0 #FFFFFF;
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    float: right;
    outline: medium none;
    padding: 0;
    width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
    color: #C4C4C4;
}


الأن أضف الكود التالي أسفل الرمز </header>


<!-- #القائمة المنسدلة -->
<div id='contact-links'>
    <div id='my-links'>
        <a href='#'>عن المدونة</a>
        <a href='#'>أتصل بنا</a>
                <a href='رابط صفحة فيس بوك'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6fJWHebGcppuhXp-Kc1XyvbJzflo7TWew7ExcWbfyWW2OpmmapzX9YIVcHA1wtzFAD96KvjP0KSb7nBnbJLaBSFhRGV2DsY6dVAUTDuneAfbYgvt38UWX9UT35UXAA5iL6Lbu4rL_ZecP/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='رابط تويتر'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT-Btv7xutH-09yuwiTAVYNQEfuHlf5z1AsP5Xnn7t4tiHykrei0xoM_-Q5ttgqbDWGOgJ71XCFrWnRwbozXj1fRpcDVEj5tP2goAyrqOQR39ct1WjdYwSA8pq5B1qepPk7BCGlahLTEs6/s1600/twitter.png' title='Twitter' width='18px' /></a>
        <a href='رابط GOOGLE+'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0NgLV-vzk2J8wZk8wg61dQ9eDQ4C71lp0qj0WxBV505an-B9rpFsJdsCVU98HClqGQtSAaIWa56NR6JsP4wXQpz0f5m5qMTbR7rSJVkMQukhxheW9jXctXGrkDJRzBoaQzC6bbg2_ri01/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
        <a href='رابط التغذية'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGpBbp8yr3euAdvtUK5TGUhFOIhW7lFkn38ar5nMtvDI6iIruVBgb-mqM1V1uq5iemTTyKI8VO07tXDEQd6I9uqIocfsXLJktIxXQAfIGnvZubjzj_o7mx_29ICf3KHDx4MWSlugEXPmGO/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
    </div>
    <div id='menu-container'>
        <nav id='neat-menu'>
            <ul>
              <li class='active'><a href='/'>الرئيسية</a></li>
                <li><a href='#'>قائمة</a>
                    <ul>
                        <li><a href='#'>تعديل 1</a></li>                        <li><a href='#'>تعديل 2</a></li>                        <li><a href='#'>تعديل 3</a></li>                        <li><a href='#'>تعديل 4</a></li>                        <li><a href='#'>تعديل 5</a></li>                    </ul>
                </li>
                <li><a href='#'>قائمة 2</a>
                    <ul>
                        <li><a href='#'>تعديل 1</a></li>                        <li><a href='#'>تعديل 2</a></li>                        <li><a href='#'>تعديل 3</a></li>                        <li><a href='#'>تعديل 4</a></li>                        <li><a href='#'>تعديل 5</a></li>                    </ul>
                </li>
                <li><a href='#'>قائمة 3</a>
                    <ul>
                        <li><a href='#'>تعديل 1</a></li>                        <li><a href='#'>تعديل 2</a></li>                        <li><a href='#'>تعديل 3</a></li>                        <li><a href='#'>تعديل 4</a></li>                        <li><a href='#'>تعديل 5</a></li>                    </ul>
                </li>
                <li><a href='#'> تعديل</a></li>                <li><a href='#'>تعديل</a></li>                <li><a href='#'>قائمة 3</a>                    <ul>
                        <li><a href='#'>تعديل 1</a></li>                        <li><a href='#'>تعديل 2</a></li>                        <li><a href='#'>تعديل 3</a></li>                        <li><a href='#'>تعديل 4</a></li>                        <li><a href='#'>تعديل 5</a></li>                    </ul>
                </li>
            </ul>
        </nav>
        <!-- مربع البحث www.madad2.com -->
        <div id='menu-search'>
          <form method='get' action='/search'>
                <input autocomplete='off' name='q' placeholder='بحث...' type='text' value=''/>
            </form>
        </div>
    </div>
</div>



أتمنى أن تكون مفيدة بآمان الله.

مشاركات أقدم المقال التالي
4 تعليق
  • نايف الشهرى
    نايف الشهرى 28‏/03‏/2014، 3:21:00 ص

    مشكور اخى يعطيك العافية

  • Unknown
    Unknown 28‏/03‏/2014، 6:47:00 م

    شكرا لكن عندي تسؤلات انا ركبت قالب لموزعوا انت وغير كل شيء
    الي في اشياء واجهني مشاكل مثلا اخر الأخبار فهي تظهر اخبارك انت أريد جعلها تظهر اخباري
    وايضا الخصوصية ونموذج اتصل بنا كيف أعدلهم

    • مداد الجليد
      مداد الجليد 28‏/03‏/2014، 8:08:00 م

      طبعا جميع ماذكر يمكن ان تجده داخل محرر html ابحث عن رابط www.madad2.com سوف تجده اسفل المحرر يمكنك تغييره برابط مدونتك
      وكذلك يمكنك البحث عن هذه الكلمات في القالب مثل سياسة الخصوصية واستبدالها

  • مداد الجليد
    مداد الجليد 28‏/03‏/2014، 8:04:00 م

    أهلاً وسهلاً نايف

أضف تعليق
عنوان التعليق