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

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

السلام عليكم ورحمة الله وبركاته

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

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

إذهب إلى لوحة تحكم مدونتك 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/AVvXsEgGRkLgudflluqFr1hWu1_zToPmUbq85uteygAyjTbfzDEdmz6DjSepJTUsaTcrn-TaQv0TEQ80hQW1p6tXiG9GO-LkekE_TB9nrVSlnAMpGaEIO0DSwHPdPF_oLNQ33Dh8Ql9veBg_38yW/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/AVvXsEhCdNOsF6Zz7gJ63nKWVMLsGwPsSN8MT2LZiZrSfYwGnKedu7Jta_-xLJoBshLlNpMT3ahOSUWwwSbudBSi0Sxr6IKPNOB1Rh9SEHIhOrOXvJDGVBSujZUPL6cJXXPNATgaKRG-chiN6KM-/s1600/facebook-icon.png' title='Facebook' width='18px'/></a> <a href='رابط تويتر'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT4jSKkuloDISOpztDzpHtjy17IVb4qgDf6aUETar9TPz2bAKhWc2AlD_qJ-NIb0OQCJL4qdmgIT3594fsysB7hn19Jj0UMD-oE2cLRkCpcrifZNwFsgTnH3g6zrURU6FSX_qBH2iUk3W1/s1600/twitter.png' title='Twitter' width='18px' /></a> <a href='رابط GOOGLE+'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfJFsuX_9sEIuIHO4H4Z1ZqcH92R4-03ZxSiOvCOO_yDaKBBwVZLZZ4LI9XrVa-Ku11FfQC50ZMKca1DGdImZr-_dxzWH1xKWFIIprQP9Gv9zkJ3eoOQ4WxqbUm2LDFWJximlKupirYA7/s1600/google-plus-icon.png' title='Google' width='18px'/></a> <a href='رابط التغذية'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi53T3wxMLNM28oqpJypXlXq9c2NBF9tRtm_K8_ItT9IF9EciEqyq2kZ2tpx7QDunRcH4eOkNTqVhyphenhyphenskufRTQvbNwbauuG1TAzMlTNHUMySmPSpJix3q3Wrf1YuAqoyHpTT18DWh_kTGTYI/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>  <div id='menu-search'>
 <form method='get' action='/search'>
 <input autocomplete='off' name='q' placeholder='بحث...' type='text' value=''/> </form>
</div>
</div>
</div>

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