معهد خبراء بلوجر - قائمة أفقية احترافية لكثرة الطلب عليها

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

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

http://im30.gulfup.com/LBKk1.jpg

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

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

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