مساحة إعلانية

قوائم واشرطة التنقل للمدونات بأكثر من 30 استايل متنوع

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

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






طريقة الاضافة 




  1. اذهب الى لوحة التحكم في مدونتك
  2. القالب
  3. تحرير html
  4. ثم ابحث عن الرمز  ]]>
اذا كنت لا تعرف كيث تبحث عن الاكواد في قالب مدونتك انظر الى الصورة هنـــــــا

بعد ان تجد الرمز المطلوب اضف الكود التالي فوق الرمز ]]> مباشر


ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
width: 100%;
float: left;
background: #222;
font-size: 1.2em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFx9ufK8O0Yt5Rx434-qqlnHIo0aAWtZuqi3mxR6uoxMhaS90g_lnUyPXk24FjUf4FxyG0QONblH894QMrONq40hC1O78FHiEOaXScYj2xiqb3Lib3supHViiBUcuB2adZiCzpRZ4pSjO0/s1600/topnav_bg-namkna-ngoctra.png) repeat-x;
z-index:100}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
z-index:100}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb2WtBIug2LaBtdLQZwXlgp8ZlWgy4yKz5k0Xh5G3Wb9njqV87LiWJLLC2xyjSDPWqohvtgliTqKTkAWqQJuzQASF2nj0BF7DQRQdeftWvoYEoHN0g-8T6IPE4EeZkayRuqbjHGeW5dud8/s1600/topnav_hover-namkna-ngoctra.png) no-repeat center top;
z-index:100}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5MexGATPm8d__R3ZRxpMCrgtd4aK6nZY_jnSrZpLsxD29hSxbzE1nrmDW1RvCyLxih_7CmSWLqwxg2QRbxIEOXWMdpoox1qxoa-VVZfDZtx6E-4rQ66k4YlZr0gkkYHs4KPfFHMD8AqnD/s1600/subnav_btn-namkna-blogspot-ngoctra.png) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6FYN9vlYWmTzFf_OiD_VyPmBfUjlsMj4lBgYl3cIrQuRvZvHm7w67MqgUU7NYmRmS0eUe17M4lCdDpBZXEhyphenhyphenyGzXNiMr4v0drXUjpUDAFd4kNFTtbdxy_yY3RSwn1GRIkm47AJ7OSNxas/s1600/dropdown_linkbg-namkna-blogspot-ngoctra.png) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6FYN9vlYWmTzFf_OiD_VyPmBfUjlsMj4lBgYl3cIrQuRvZvHm7w67MqgUU7NYmRmS0eUe17M4lCdDpBZXEhyphenhyphenyGzXNiMr4v0drXUjpUDAFd4kNFTtbdxy_yY3RSwn1GRIkm47AJ7OSNxas/s1600/dropdown_linkbg-namkna-blogspot-ngoctra.png) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}


5. ابحث عن الرمز   ثم اضف الكود التالي فوقه مباشر

6. الان اذهب الى التخطيط اضافة ادوات اضف اداة HTML / Javarscip ثم الصق الكود التالي حيث تريد ظهوره مع التعديل عليه بإضافة روابط واسماء الصفحات المطلوبة


الستايل الثاني

طريقة الاضافة كما هو موضوع بالاعلى  فقط سوف اضع التسميات 

طريقة الاضافة 




  1. اذهب الى لوحة التحكم في مدونتك
  2. القالب
  3. تحرير html
  4. ثم ابحث عن الرمز  ]]>
بعد ان تجد الرمز المطلوب اضف الكود التالي فوق الرمز ]]> مباشر


#drop {
margin: 0;
padding: 15px;
z-index:100;
position:relative;
}

#dropmenu_namkna li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#dropmenu_namkna li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#dropmenu_namkna li a:hover {
background: #C8C8C8;
}

#dropmenu_namkna li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
z-index:30; 
}

#dropmenu_namkna li ul li {
float: none;
display: inline;
}

#dropmenu_namkna li ul li a {
width: auto;
background: #CAE8FA;
}

#dropmenu_namkna li ul li a:hover {
background: #A3CEE5;
}


5. ابحث عن الرمز   ثم اضف الكود التالي فوقه مباشر


6. الان اذهب الى التخطيط اضافة ادوات اضف اداة HTML / Javarscip ثم الصق الكود التالي حيث تريد ظهوره مع التعديل عليه بإضافة روابط واسماء الصفحات المطلوبة

_________________________________________________________________
الان الاشرطة الاخرئ اختر الشريط الذي تحتاجه 
ثم اذهب الى لوحة التحكم في مدونتك تخطيط 

اضافة اداوات ثم اضف اداة HTML / Javarscip واضف الكود الذي يعجبك في كل من الستايلات التالية

ولا تنسى التعديل عليها ازالة رمز # واضافة رابط الصفحات المقصودة مع التعديل على Link 1 في كل منها 



استايل 1
استايل 2
استايل 3
استايل 4
استايل 5

استايل 6

استايل 7

استايل 8

استايل 9

استايل 10

استايل 11

استايل 12

استايل 13

استايل 14
استايل 15

استايل 16

استايل 17

استايل 18

استايل 19

استايل 20

استايل 21

استايل 22

استايل 23

استايل 24

استايل 25

استايل 26

استايل 27

استايل 28

استايل 29

استايل 30



جميع الحقوق محفوظة لموقع © ديزاد فان

تصميم : مصطفى صلاح