إضافة قائمة منسدلة لمدونة بلوغر

إضافة قائمة منسدلة لمدونة بلوغر


بسم الله الرحمن الرحيم

السلام عليكم درس اليوم أو بالأحرى إضافة اليوم يبحث عنها الكثير من المدونين بجهد لكن دون جدوى لأنهم لن يجدوها إلا هنا بإدن الله، و بما أنك من متتبعي مدونة أسرار بلوغر فلك الفضلية عليهم جميعا لأننا بحمد الله نتفرد بما هو جديد لإرضاء دوق الراقي أملين أن تنال هذه الإضافة إعجابك.
كما أننا قمنا بتقديم إضافات مشابهة في هذا الموضوع Tabbed Sidebar إضافة جميلة و سهلة و هذا إضافة جديد المواضيع بطريقة متحركة.

blogger-drop-down-menu

أما الأن أتركك مع مشاهدة التطبيق Demo و طريقة التركيب.

1- إضافة كود CSS الخاص بالقائمة المنسدلة


سجل الدخول لمدونتك / تصميم / تحرير HTML / ثم قم بالبحث عن الكود التالي


]]></b:skin>

و قبله مباشرة قم بإضافة هذا الكود


#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float:right;
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;
}

2- إضافة كود ال Java


بعد إضافة الكود الأول قم بالبحث عن هذا الكود


</head>

ثم أضف قبله مباشرة الكود الخاص بالجافا


<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>

3- إضافة القائمة المنسدلة


الأن مع المرحلة الأخيرة لإكمال هذه الإضافة الرائعة
توجه الأن إلى تصميم / عناصر الصفحة / إضافة أداة / HTML/JavaScript

HTMLJavaScript. 


أترك مكان العنوان فارغ و ضع الكود في المربع الكبير

HTMLJavaScript

الأن قم بإضافة الكود التالي للأداة


<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Menu 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="#">Menu 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 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="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">Menu 6</a></li>
  </li></ul>

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

ملاحظة : قم بتغير كلمة (Menu/Drop) للكلمة التي تريد و غير العلامة (#) برابط الصفحة.

اتمنى أن تنال الإضافة إعجابك في انتظار تعليقاتك و استفساراتك تقبل تحياتي الحارة.
إذا أعجبك الموضوع فشاركه مع أصدقائك فلن يأخد منك الأمر سوى 5 ثوان :)

هناك 4 تعليقات:

  1. جزاك الله خيرا

    اضافة ممتازة تسلم إيدك

    منتظرين جديد تدويناتك الرائعه اخى منير

    ردحذف
  2. شكرا لك على تعليقك

    و إن شاء الله هناك كل ما هو جديد و حصري

    فتابع معنا فهذا يشرفني كثيرا

    حفظك الله

    ردحذف
  3. بارك الله فيك أفادتني كثيرا

    ردحذف
  4. @أسماء || أم نضال || العفو أختي الكريمة أسماء

    تشرفت بتعليقك حفظك الله و رعاك

    ردحذف