اضافة قائمة منسدلة فوق المدونة في بلوجر

بسم الله الرحمن الرحيم

بسم الله الرحمن الرحيم والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم السلام عليكم ورحمة الله وبركاته .

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

سبب تصميم وعرض الموضوع على مدونة انتا الكسبان هو كثرة الطلب على هذا الموضوع من الزوار اصحاب المواقع الاخرى لان موقعهم جميل جدا ولكن هناك مشكلة وهى ان معظم القوالب او المواقع بها شريط قوائم بمظهر تقليدى غير لائق {مش كويس} لهذا صممت الموضوع .

 بعض المشاكل التى ذكرها بعض اصحاب المواقع الاخرى  لتغير شريط القوئم الخاصة بموقعهم  اللى خلتنى اعمل الموضوع دا
1- نوع الخط غير لائق بالمدونة .
2- عدم وجود قائمة منسدلة داخل الشريط لاضافة بعض الاقسام الفرعية للموقع او {المدونة} .
3- عدم وجود الوان وتأثيرات داخل الشريط . 
4- عدم وجود تأثيرات بلغة الجافا او الفلاش مما يعطى مظهر جذاب  .
5- عدم وجود اشرطة بهذة المواصفات بالغة العربية .

الحمد لله انتهيت من تعديل القائمة وجعلت منظرها عصري وجذاب وذالك بتنسيق الالوان والاحجام , ايضاَ تم اضافة الخط الكوفي الجميل الى القائمة وروابطها . 
اولا:-  معاينة مباشرة للقائمة 
 

القائمة متوفره بأربع الوان اختر مايناسبك منها ثم اتبع الاتي

طريقة التركيب :-
-- أذهب الى التخطيط >>ثم اضافة اداة جديده >> يجب ان تكون تحت الهيدر مباشره .
ثم الصق كود الاداة التي تريدها , طبعاَ مع تعديل الروابط والاسماء بما تريد : 

الشكل الاول " الرمادي:-
قائمة مسندلة احترافيه لون رمادي 
الكود:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- menu by:7lolblogger.com -->
<div id="menu">
<ul>
<li class='gghfg'><a href='#'><img src='https://lh4.googleusercontent.com/-2p92HsBcl3Q/UwUWKvmwkYI/AAAAAAAAGBY/qU9MdFbVDrc/home.png'/></a></li>
<li><a href="#">وصلة</a></li>
<li><a href="#">وصلة</a></li>
<li><a href="#">وصلة رئيسية</a> <!-- الوصلة الأولى في القائمة -->
<ul> <!-- القائمة الفرعية -->
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية</a>
<ul>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية</a>
<ul>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<!-- menu by:7lolblogger.com -->
</ul>
</div> 
<script>
window.onload = function(){
$("#menu > ul > li").hover(
function(){ $(this).find("ul").slideDown('fast'); } ,
function(){ $(this).find("ul").slideUp('fast'); } );
}
</script>
<style>
@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');} 
#menu {
width: 100%;
max-width: 1000px;
margin: 0 auto;
background: #222;
display: inline-block;
border-bottom: 5px solid #4D4D4D;
height: 45px;
}
#menu ul {
padding:0;
margin:0;
list-style:none;
position:relative; //مهمة
}
#menu > ul > li {
float:right;
padding:0;
margin:0 0 -7px 0;
}
#menu > ul > li > a {
display: block;
min-width: 50px;
text-align: center;
padding: 10px 15px 10px 15px;
text-decoration: none;
color: #FFF;
font: 13px 'DroidKufi-Regular';
}
#menu > ul > li > a:hover {
background: #5C5B5B;
border-bottom: #5C5B5B;
}
#menu > ul > li > ul {
position:absolute;
top:49px;
display:none;
margin-left: -60px;
}
#menu > ul > li > ul > li > a {
background: #5C5B5B;
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFF;
border-bottom: 1px solid #575757;
min-width: 130px;
text-align: right;
font: 12px 'DroidKufi-Regular';
}
#menu > ul > li > ul > li > a:hover {
background: #222;
border-bottom: 1px solid #202020;
}
.gghfg a {
width: 48px !important;
min-width: 48px !important;
height: 25px;
background: #5C5B5B !important;
padding: 10px;
}
</style>

الشكل الثاني " أحمر "  

قائمة مسندلة احترافيه لون أحمر

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- menu by:7lolblogger.com -->
<div id="menu">
<ul>
<li class='gghfg'><a href='#'><img src='https://lh4.googleusercontent.com/-2p92HsBcl3Q/UwUWKvmwkYI/AAAAAAAAGBY/qU9MdFbVDrc/home.png'/></a></li>
<li><a href="#">وصلة</a></li>
<li><a href="#">وصلة</a></li>
<li><a href="#">وصلة رئيسية</a> <!-- الوصلة الأولى في القائمة -->
<ul> <!-- القائمة الفرعية -->
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية</a>
<ul>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية</a>
<ul>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<!-- menu by:7lolblogger.com -->
</ul>
</div> 
<script>
window.onload = function(){
$("#menu > ul > li").hover(
function(){ $(this).find("ul").slideDown('fast'); } ,
function(){ $(this).find("ul").slideUp('fast'); } );
}
</script>
<style>
@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');} 
#menu {
width: 100%;
max-width: 1000px;
margin: 0 auto;
background: #222;
display: inline-block;
border-bottom: 5px solid #DD395A;
height: 45px;
}
#menu ul {
padding:0;
margin:0;
list-style:none;
position:relative; //مهمة
}
#menu > ul > li {
float:right;
padding:0;
margin:0 0 -7px 0;
}
#menu > ul > li > a {
display: block;
min-width: 50px;
text-align: center;
padding: 10px 15px 10px 15px;
text-decoration: none;
color: #FFF;
font: 13px 'DroidKufi-Regular';
}
#menu > ul > li > a:hover {
background: #CC173B;
border-bottom: 4px solid #DD395A;
}
#menu > ul > li > ul {
position:absolute;
top:49px;
display:none;
margin-left: -60px;
}
#menu > ul > li > ul > li > a {
background: #CC173B;
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFF;
border-bottom: 1px solid #DD395A;
min-width: 130px;
text-align: right;
font: 12px 'DroidKufi-Regular';
}
#menu > ul > li > ul > li > a:hover {
background: #222;
border-bottom: 1px solid #202020;
}
.gghfg a {
width: 48px !important;
min-width: 48px !important;
height: 25px;
background: #CC173B !important;
padding: 10px;
}
</style>

الشكل الثالث " أزرق " :- 

قائمة مسندلة احترافيه لون أزرق

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- menu by:7lolblogger.com -->
<div id="menu">
<ul>
<li class='gghfg'><a href='#'><img src='https://lh4.googleusercontent.com/-2p92HsBcl3Q/UwUWKvmwkYI/AAAAAAAAGBY/qU9MdFbVDrc/home.png'/></a></li>
<li><a href="#">وصلة</a></li>
<li><a href="#">وصلة</a></li>
<li><a href="#">وصلة رئيسية</a> <!-- الوصلة الأولى في القائمة -->
<ul> <!-- القائمة الفرعية -->
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية</a>
<ul>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية</a>
<ul>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<!-- menu by:7lolblogger.com -->
</ul>
</div> 
<script>
window.onload = function(){
$("#menu > ul > li").hover(
function(){ $(this).find("ul").slideDown('fast'); } ,
function(){ $(this).find("ul").slideUp('fast'); } );
}
</script>
<style>
@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');} 
#menu {
width: 100%;
max-width: 1000px;
margin: 0 auto;
background: #222;
display: inline-block;
border-bottom: 5px solid #4BCDF7;
height: 45px;
}
#menu ul {
padding:0;
margin:0;
list-style:none;
position:relative; //مهمة
}
#menu > ul > li {
float:right;
padding:0;
margin:0 0 -7px 0;
}
#menu > ul > li > a {
display: block;
min-width: 50px;
text-align: center;
padding: 10px 15px 10px 15px;
text-decoration: none;
color: #FFF;
font: 13px 'DroidKufi-Regular';
}
#menu > ul > li > a:hover {
background: #39B8E9;
border-bottom: 4px solid #4BCDF7;
}
#menu > ul > li > ul {
position:absolute;
top:49px;
display:none;
margin-left: -60px;
}
#menu > ul > li > ul > li > a {
background: #39B8E9;
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFF;
border-bottom: 1px solid #4BCDF7;
min-width: 130px;
text-align: right;
font: 12px 'DroidKufi-Regular';
}
#menu > ul > li > ul > li > a:hover {
background: #222;
border-bottom: 1px solid #202020;
}
.gghfg a {
width: 48px !important;
min-width: 48px !important;
height: 25px;
background: #39B8E9 !important;
padding: 10px;
}
</style>

الشكل الرابع " أخضر " :-
قائمة مسندلة احترافيه لون اخضر

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- menu by:7lolblogger.com -->
<div id="menu">
<ul>
<li class='gghfg'><a href='#'><img src='https://lh4.googleusercontent.com/-2p92HsBcl3Q/UwUWKvmwkYI/AAAAAAAAGBY/qU9MdFbVDrc/home.png'/></a></li>
<li><a href="#">وصلة</a></li>
<li><a href="#">وصلة</a></li>
<li><a href="#">وصلة رئيسية</a> <!-- الوصلة الأولى في القائمة -->
<ul> <!-- القائمة الفرعية -->
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية</a>
<ul>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية</a>
<ul>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<!-- menu by:7lolblogger.com -->
</ul>
</div> 
<script>
window.onload = function(){
$("#menu > ul > li").hover(
function(){ $(this).find("ul").slideDown('fast'); } ,
function(){ $(this).find("ul").slideUp('fast'); } );
}
</script>
<style>
@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');} 
#menu {
width: 100%;
max-width: 1000px;
margin: 0 auto;
background: #222;
display: inline-block;
border-bottom: 5px solid #42E27C;
height: 45px;
}
#menu ul {
padding:0;
margin:0;
list-style:none;
position:relative; //مهمة
}
#menu > ul > li {
float:right;
padding:0;
margin:0 0 -7px 0;
}
#menu > ul > li > a {
display: block;
min-width: 50px;
text-align: center;
padding: 10px 15px 10px 15px;
text-decoration: none;
color: #FFF;
font: 13px 'DroidKufi-Regular';
}
#menu > ul > li > a:hover {
background: #2ABD5F;
border-bottom: 4px solid #42E27C;
}
#menu > ul > li > ul {
position:absolute;
top:49px;
display:none;
margin-left: -60px;
}
#menu > ul > li > ul > li > a {
background: #2ABD5F;
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFF;
border-bottom: 1px solid #42E27C;
min-width: 130px;
text-align: right;
font: 12px 'DroidKufi-Regular';
}
#menu > ul > li > ul > li > a:hover {
background: #222;
border-bottom: 1px solid #202020;
}
.gghfg a {
width: 48px !important;
min-width: 48px !important;
height: 25px;
background: #2ABD5F !important;
padding: 10px;
}
</style>