عدد مشاهدات الموضوع:
السلام عليكم ورحمة الله اليوم أقدم لكم اضافة جميلة ويحتاجها الكثيرة منا ونرى انها مستعملة في أشهر المواقع الإجتماعية ، إنها قائمة افقية ثابتة اي تتبعك وانت تتصفح المدونة اذا نزلت تنزل معك واذا صَعِدْتَ صَعَدَتْ معك، أقدم لكم صورة الأداة بعد ان قمت بتعريبها و تطويرها:
- كما نلاحظ ان القائمة تحتوي على سهم يقوم بإصعادنا الى الاعلى واخر اتجاهه الى الأسفل يقوم بإنزالنا وبعدها نرى 5 ازرار يمككنا وضع روابطنا فيها ويمكننا زيادة العدد او العكس، ايضا نرى مربع بحث في الاضافة الأصل الغير المعربة مربع البحث لا يعمل وانا جعلته يعمل وبشكل جيد كما ينبغي,عندما ننزل القائمة تصبح شفافة نوعا ما وعندما نضع المؤشر عليها تصبح عادية كما كانت في السابق
الأن حان وقت عرض الاكواد لوضع هذه القائمة الرائعة في مدونتنا:
الخطوات:
أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن : </head>
ونقوم بإلصاق هذا الكود قبله .
وبعد هذا سنقوم بالبحث على </body> بنفس الطريقة التي استخدمناها سابقا ونقوم بإلصاق الكود التالي قبله أيضا مع تعديل ما يناسب:
الرابط-1 ، 2 ، 3 ، 4 و 5 بروابطنا التي نريد ان يتم التوجيه اليها بعد الظغط على الزر ، ونغير العناوين : عنوان الرابط 1
، 2 ، 3 ، 4 و 5 بالكلمة التي ستظهر على زر
مثال:
وهذا هو كل شئ مع تحياتي اخوكم : - كما نلاحظ ان القائمة تحتوي على سهم يقوم بإصعادنا الى الاعلى واخر اتجاهه الى الأسفل يقوم بإنزالنا وبعدها نرى 5 ازرار يمككنا وضع روابطنا فيها ويمكننا زيادة العدد او العكس، ايضا نرى مربع بحث في الاضافة الأصل الغير المعربة مربع البحث لا يعمل وانا جعلته يعمل وبشكل جيد كما ينبغي,عندما ننزل القائمة تصبح شفافة نوعا ما وعندما نضع المؤشر عليها تصبح عادية كما كانت في السابق
الأن حان وقت عرض الاكواد لوضع هذه القائمة الرائعة في مدونتنا:
الخطوات:
أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن : </head>
ونقوم بإلصاق هذا الكود قبله .
<link href='https://abuiyad.googlecode.com/svn/Ayoub-Etmaiti-menu-fixed-abu-i.css' rel='stylesheet'/><script src='http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.js' type='text/javascript'/><script type='text/javascript'>$(function() {$(window).scroll(function(){var scrollTop = $(window).scrollTop();if(scrollTop != 0)$('#nav').stop().animate({'opacity':'0.2'},400);else$('#nav').stop().animate({'opacity':'1'},400);});$('#nav').hover(function (e) {var scrollTop = $(window).scrollTop();if(scrollTop != 0){$('#nav').stop().animate({'opacity':'1'},400);}},function (e) {var scrollTop = $(window).scrollTop();if(scrollTop != 0){$('#nav').stop().animate({'opacity':'0.2'},400);}});});</script>
وبعد هذا سنقوم بالبحث على </body> بنفس الطريقة التي استخدمناها سابقا ونقوم بإلصاق الكود التالي قبله أيضا مع تعديل ما يناسب:
نقوم بتغير الكلمات :<div id='nav'><ul><li><a class='top' href='#'><span/></a></li><li><a class='bottom' href='#bottom'><span/></a></li><li><a href='الرابط-1'><span>عنوان الرابط 1</span></a></li><li><a href='الرابط-2'><span>عنوان الرابط 2</span></a></li><li><a href='الرابط-3'><span>عنوان الرابط 3</span></a></li><li><a href='الرابط-4'><span>عنوان الرابط 4</span></a></li><li><a href='الرابط-5'><span>عنوان الرابط 5</span></a></li><li class='search1'><form action='/search' id='search1' method='get'><input id='s' name='q' onblur='if (this.value == "") {this.value = "ابحث في المدونة...";}' onfocus='if (this.value == "ابحث في المدونة...") {this.value = ""}' type='text' value='ابحث في المدونة...'/><input id='searchbutton' src='http://3.bp.blogspot.com/-80DxERf30RE/UBWOpjpQFII/AAAAAAAABB8/xOILGMsPazI/s1600/search-ico-ayoub-etmaiti.png' type='image'/></form></li></ul></div><div id='top'/><div class='desc'/><div id='bottom'/><div class='scroll'/>
الرابط-1 ، 2 ، 3 ، 4 و 5 بروابطنا التي نريد ان يتم التوجيه اليها بعد الظغط على الزر ، ونغير العناوين : عنوان الرابط 1
، 2 ، 3 ، 4 و 5 بالكلمة التي ستظهر على زر
مثال:
<li><a href='ayoub-etmaiti.blogspot.com'><span>أيوب التمايتي</span></a></li>
صراحةً موضوعك مميز جدا وقالب مدونتك مميز :D
ردحذفشكرا اخى أيوب
رائع أخى شكراً لمجهودك
ردحذف@King Sherif
ردحذفشكرا عزيزي لتعليقك وتشجيعك ، وشكرا ايضا لزيارتك لمدونتي وبداء رأيك في قالبها :D
@محمد شريف
ردحذفمرحبا اخي محمد شكرا لتعليقك وابداء رأيك ، وعفوا على كل شئ انا رهن الخدمة في كل وقت.
نشكرك أخي أيوب على هذه الإضافة الجميلة ومشاركتك الأجمل
ردحذف@أبو إياد
ردحذفعفوا عزيزي محمد تستاهل كل الخير.
اخي العزيز جربت الطريقه بس ماضهرت عندي ياريت اجاوبني
ردحذفوهذا رابط مدونتي
http://7rem-alsultan.blogspot.com/
وشكرا
@Ahmed Al Ezzi
ردحذفارسلي القالب ورح حاول
شكرا جزيلا
ردحذفلا تنسوا زيارة مدونتي الجديدة http://cafe-arb.blogspot.com
عفوا اخي ومن هذا التعليق اريد ان اخبر كل من قام بنقل هذا الموضوع وحذف حقوقي انني لن اسامح وانا اعرفهم لانني اتابع الموضوع --
ردحذفأزال المؤلف هذا التعليق.
ردحذفMERCI
ردحذفNELLEVO
@NELLEVO
ردحذف:-*
شكرًا لك أخي على الإضافة الجميلة
ردحذفلكن مهما حاولت لا تظهر لي بالشكل المطلوب!
طبقت الخطوات بحذافيرها ولم أنسى سطرًا
وبعد التطبيق أجد أن الإضافة تظهر في في نهاية المدونة
وليست على شكل شريط، بل تظهر لي الروابط بشكل إعتيادي فوق بعضها
http://img02.arabsh.com/uploads/image/2012/08/17/0e3e454964fa04.jpg
أرجو المساعدة
@Lovely Dream
ردحذفإبحث عن /B:skin
وضع هذا الكود فوقها
#nav{
height:35px;
border-bottom:1px solid #ddd;
position:fixed;
top:0px;
left:0px;
right:0px;
background:#fff url(http://2.bp.blogspot.com/-bckLuWC19WY/T0fJrpz6iKI/AAAAAAAAA54/MC8DKKhTLIo/s1600/navbar.png) repeat-x center right;
z-index:999999;
}
#nav ul{
height:25px;
list-style:none;
margin:6px auto 0px auto;
width:600px;
}
#nav ul li{
display:inline;
float:right;
margin:0px 2px;
}
#nav a{
font-size:11px;
font-weight:bold;
float:right;
padding: 2px 4px;
color:#999;
text-decoration: none;
border:1px solid #ccc;
cursor: pointer;
background:transparent url(http://4.bp.blogspot.com/-ShWV7a_7odE/T0fKLcy3gxI/AAAAAAAAA6A/ub4aoZ_NKdI/s1600/overlay.png) repeat-x center right;
height:16px;
line-height:16px;
}
#nav a:hover{
background:#D9D9DA none;
color: #fff;
}
#nav a.top span, #nav a.bottom span{
float:right;
width:16px;
height:16px;
}
#nav a.top span{
background:transparent url(http://3.bp.blogspot.com/-qZmlI1Nz7DM/T0fKY6MehSI/AAAAAAAAA6I/kb4LSXK4SpI/s1600/top.png) no-repeat center center;
}
#nav a.bottom span{
background:transparent url(http://3.bp.blogspot.com/-kYbPC6fbW8E/T0fKkpgn4uI/AAAAAAAAA6Q/1EMaMEmc51o/s1600/bottom.png) no-repeat center center;
}
#nav ul li.search1{
float:left;
margin-left:-100px ;
}
#nav input[type="text"]{
float:right;
border:1px solid #ccc;
margin:auto;
padding:2px 2px 2px 2px;
}
input.searchbutton{
border:1px solid #ccc;
padding:1px;
cursor:pointer;
width:30px;
height:22px;
margin:auto;
background:#E8E9EA url(http://2.bp.blogspot.com/-Z8TTNFUcQmQ/T0fKvZHRH_I/AAAAAAAAA6Y/FFtC1_2_snA/s1600/search.png) no-repeat center center;
}
input.searchbutton:hover{
background-color:#D9D9DA;
}
شكرًا جزيلاً.. تمت الإضافة بنجاح : )
ردحذف@Lovely Dream
ردحذفعفوا لأي إستفسار راسلني من هنا ayoub-etmaiti.blogspot.com
هممم، عندما أقوم بالضغط على رابط ملفك في الهوتميل يحولني إلى صفحة "الأشخاص" الخاصة بي...
ردحذفلدي إستفسار آخر،
الشريط لدي لا يبهت عندما أقوم بتنزيل الصفحة نحو الأسفل
أي خاصية الشفافية لا تعمل ^^"
أزال المؤلف هذا التعليق.
ردحذفتم المراسلة على الإيميل
ردحذف@Lovely Dream
ردحذفتم بحمد الله
مشكور اخى الفاضل :
ردحذفhttp://www.arabi-b.blogspot.com
https://sites.google.com/site/lightbox007/emoticon/64%2819%29.png
ردحذف@التحرير
ردحذف¿?
@السيد ابو جبل
ردحذفمبروك وارا انها تعمل على أكمل وجه في حالة ما كنت تريد تغيير الألوان قم بتفكيك ملف css وعدله على راحتك..
:-t
ردحذف:x
ردحذفلا تعمل بمدونتى رجاء الحل http://abotgar.blogspot.com/
ردحذف@mohamed
ردحذفهذا ما شرحته في هذا الدرس هو كيف تجعل القائمة تتبعك الى كل مكان
@محمد ابوتجار
ردحذفأولا قلي كيف تظهر وبعد ذلك ساساعدك