قائمة أفقية احترافية لكثرة الطلب عليها

11-10-2012, 04:39 PM

Nassro

مدون نشيط

تاريخ التسجيل: Jul 2012

الدولة: Algeria,Adrar

المشاركات: 178

قائمة أفقية احترافية لكثرة الطلب عليها

أنا : Nassro

سجل معنا لتتمتع بهذه الخاصية

السلام عليكم و كالعادة من أخوكم Nassro
اليوم جايب ليكم اضافة جميلة و اساسية للمدونات الإحترافية اضافة اليوم هي قائمة أفقية جميلة تعمل بـjQuery

شاهد صورة الإضافة

للمعاينة من داخل المدونة

http://3anoor.blogspot.com/

نأتي لطريقة التركيب

نتوجه الى لوحة التحكم ثم الى قالب المدونة

و نقوم بالتعليم على خانة التوسيع
و نبحث على

كود بلغة HTML:

]]></b:skin>

ثم نضع فوقها الكود التالي

كود بلغة HTML:

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm 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;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

ثم نقوم بالبحث على

كود بلغة HTML:

</head>

و نضع فوقها الكود التالي

كود بلغة HTML:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[
var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;
function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}
$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});
document.onclick = jsddm_close;
  //]]>
  </script>

ثم نقوم بالمعاينة و ان لم تجد أي مشكل قم بحفظ القالب و توجه الى تخطيط و افتاح أداة جديدة من نوع HTML/JavaScript و نضع فيها الكود التالي

كود بلغة HTML:

<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Link 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>
 <li><a href="#">Link 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>
 <li><a href="#">Link 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>
  </ul>
  </li>
 <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  <li><a href="#">Link 6</a></li>
  </li></ul>

طريقة جعل الإضافة متناسبة مع مدونتك قم بتغيير # الى الرابط المطلوب

و Link الى تسمية القسم

أما بالنسبة Drop فاهي مثل Link

أتمنى أن تكون هده الإضافة قد أعجبت الجميع
أنتظر ردودكم الحلوة

__________________

من مواضيع Nassro

11-10-2012, 07:05 PM	#2
mohamed_arch مدون جديد تاريخ التسجيل: Nov 2012 المشاركات: 3	رد: قائمة أفقية احترافية لكثرة الطلب عليها أنا : mohamed_arch سجل معنا لتتمتع بهذه الخاصية السلام عليكم ورحمة الله وبركاته احييكم على هذه الجهود الرائعة والتي افادة كثيرا من المدونين وانا من اكثرهم وليا طلب بسيط ارجو ان اجده لديكم هل استطيع جعل قائمة الصفحات الافقية تكون عائمة وشكرا جزيلا لكم م محمد جمال صاحب مدونة عالم الهندسة المعمارية اتشرف بزيارتكم http://woarch.blogspot.com/

11-11-2012, 05:16 PM	#3
Perfect مدون جديد تاريخ التسجيل: Nov 2012 المشاركات: 13	رد: قائمة أفقية احترافية لكثرة الطلب عليها أنا : Perfect سجل معنا لتتمتع بهذه الخاصية موضوع جميل لكن .. حبذا لو تذكر لنا طريقة إنشاء تفرع ثالت.. يتفرع عن drop 1-3 مثلا __________________ مرحبا بكم في مدونتي http://khodmenni.blogspot.com ---------------------------------------- مدونة خذ مني الإلكترونية من مواضيع Perfect خلل في القالب مساعدة,,,أخطاء الزحف كيف أنشئ قائمة!!

مواقع النشر (المفضلة)

« الموضوع السابق | الموضوع التالي »

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة لا تستطيع الرد على المواضيع لا تستطيع إرفاق ملفات لا تستطيع تعديل مشاركاتك BB code is متاحة الابتسامات متاحة كود [IMG] متاحة كود HTML معطلة قوانين المنتدى

الانتقال السريع

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
أفضل قائمة منسدلة على بلوجر (قائمة Mashable معربة)	admin	إضافات وأدوات بلوجر	8	06-12-2013 03:37 PM
كيف اضع قائمة أفقية في اعلى الصفحة دون مشاكل	ساجد عابد	طلبات الدعم الفني	4	12-02-2012 03:13 PM
اضافة قائمة المواقع الاجتماعية والاشتراك احترافية	mostafa alwin	إضافات وأدوات بلوجر	9	10-28-2012 12:23 AM
بس يا سيدى بعد ما بصتلها اغم عليها ترحب بكم	sheko	المنتدى الإشهاري	5	09-09-2012 09:39 AM
إضافة قائمة روابط أفقية على غرار Apple Mac Style الآن على بلوجر	admin	إضافات وأدوات بلوجر	6	08-13-2012 01:25 AM

قائمة أفقية احترافية لكثرة الطلب عليها

إضافات وأدوات بلوجر