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

السلام عليكم ورحمه الله وبركاته.
اهلا بكم فى Videoz
شريط القؤائم الذى لايستغنى عنة اى صاحب موقع لانة ببساطة مهم جدا بالنسبة لة و زوار موقعة لان بدون هذا الشريط لا يعرف الزائر اقسام المدونة مما يودى الى عدم  بقاء الزائر اكثر وقت ممكن فى موقعك الخاص مما يتيح لك كل شى تريدة انتا صاحب الموقع .
سبب تصميم وعرض الموضوع على مدونة انتا الكسبان هو كثرة الطلب على هذا الموضوع من الزوار اصحاب المواقع الاخرى لان موقعهم جميل جدا ولكن هناك مشكلة وهى ان معظم القوالب او المواقع بها شريط قوائم بمظهر تقليدى غير لائق {مش كويس} لهذا صممت الموضوع .
 بعض المشاكل التى ذكرها بعض اصحاب المواقع الاخرى  لتغير شريط القوئم الخاصة بموقعهم  اللى خلتنى اعمل الموضوع دا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>