تعتبر القائمة الافقية من اهم اضافات بلوجر , نحن نضع بين ايديكم الان ثلاثة اضافات فى اضافة واحدة القائمة الافقية المنسدلة , صفحتى اتصل بنا ومن نحن, قائمة المواقع الاجتماعية .
القائمة بين ايديكم مفتوحة المصدر ولا تحتوى على اى روابط خارجيه قمت بتعريبها وتنسيقها لتناسب المدونات التي تستخدم اللغه العربية .
ننتقل الان لشرح كيفية اضافة قائمة افقية منسدلة اسفل هيدر مدونتك مضاف الىه المواقع الاجتماعية (dropdown menew-social network)
الخطوة الاولى :- اذهب الى لوحة تحكم بلوجرثم انقر فوق مدونتك > قالب
1- انقر فوق قالب للذهاب الى تبويب تحرير قالب مدونتك كما بالاعلى .
2- انقر فوق تحرير HTML للبدأ.
الخطوة الثانية : من كيفية اضافة قائمة افقية منسدلة اسفل هيدر مدونتك مضاف الىه المواقع الاجتماعية (dropdown menew-social network)
1- من لوحة المفاتيح اضغط على CRRL +F ثم ابحث عن </header>
2- اضف الكود التالى اسفله مباشرة وغير مايلزم .
<!-- menu-search form by mahmoud hassan -->
<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/AVvXsEhDHtwjlqIYPBNjb0kPzSTdWcbSVc9t2VTgO_M8nUjRvjXfhOBt8UTwLGu_sAhwOq3gTdvkT4uKLGPjdFEyghA9fqJDPloTpiSBy-XPkFiHc9pYk4oGnu0q3ruyeQXt1HcGByzL6vc3Uwez/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='رابط صفحة تويتر'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOlmmiNQQvqwwEUrL_mzfcLJWY7EZcl1FyiQjLRWRvzsJ7m6u_DJyXN01bAniDBpUZXD2gZAooFS5W8diNKs7MYoXhUlYHZyGwYoayM3L0aOCNVbwlEc2TTF2M0lgdO-JZjH4oJSOT4pr9/s1600/twitter.png' title='Twitter' width='18px' /></a>
<a href='رابط صفحة جوجل بلس'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMKDB5QIhIe-vnzOBUBCLU_oQvFHpzXga_7BRbo6BL4cUqgAEODQvDK-41lYmcWfZZs_fJYRHc0cPv5kDxqGsLFIQRnInMheSKErrXy5QJ_00ER3AKsl_tCqHUcLy0tpTcVN0BDuJIOhnj/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
<a href='رابط صفة ار اس اس'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPSK34Pf_Pl3xBnMqg3D7t2D4SVn03KC-sHni7WlRnifRsknulzrqHYgNct0IWwp75FVBlB1zST371EzWETVi9ZQf87odXeq2BbrPnVcnhyfJu8t7WdRvgFSL_P1NV91dRzJ3A-TVKpmuG/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='#'>Menu element 1</a></li>
<li><a href='#'>Menu element 2</a></li>
<li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
<li><a href='#'>Menu element 5</a></li>
</ul>
</li>
<li><a href='#'>قائمة منسدله</a>
<ul>
<li><a href='#'>Menu element 1</a></li>
<li><a href='#'>Menu element 2</a></li>
<li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
<li><a href='#'>Menu element 5</a></li>
</ul>
</li>
<li><a href='#'>قائمة منسدلة</a>
<ul>
<li><a href='#'>Menu element 1</a></li>
<li><a href='#'>Menu element 2</a></li>
<li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
<li><a href='#'>Menu element 5</a></li>
</ul>
</li>
<li><a href='#'>قائمة فردية</a></li>
<li><a href='#'>قائمة فرديه</a></li>
<li><a href='#'>قائمة منسدله</a>
<ul>
<li><a href='#'>Menu element 1</a></li>
<li><a href='#'>Menu element 2</a></li>
<li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
<li><a href='#'>Menu element 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>
<!-- menu-search form by mahmoud hassan -->
ملحوظه : فى الصورة بالاعلى كل ما لونت احمر يجب تغيره بروابطك الخاصه وكتابة قائمتك ورابطها .
الخطوة الثالثة :- اضافة الكود الثانى
ابحث عن الكود ]]></b:skin> واضف الكود التالى فوقه مباشرة
<!-- menu-search form by mahmoud hassan -->
#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: right;
}
#menu-search form {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyFJjIKS-667gHqxsJXih-jcbPP4rMcZ2dVip6diWFJnDFY8N-RV5dcbB5rmZHTOpdffJ6oyfBjmY4L5VxUT83PMeEC5ke8buqzkhLlgFH65i_CYUfljKl-e6pOQxMjpPfbJdSpZ_q9Dh8/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;
}
<!-- menu-search form by mahmoud hassan -->
السلام عليكم من فضلك اخي طبقت الشرح لكن الازرار داخلة مع بعضها ماهو الحل ولا يوجد قوائم منسدلةشكرا
ردحذفوعليكم السلاام اخى .... كيف يمكن ان اساعدك ...اعطنى رابط مدونتك وسوف اقوم بعمل ناف باار خاص بك يلائم الواان مدونتك
حذفwww.fityafoundation.tk
ردحذفعفوا غيرت الرابط https://fityafoundation.blogspot.com/
حذف