اضافة قائمة مسندلة الى بلوجر blogger

adel    يناير 26, 2012    أدوات بلوجر , اشهار بلوجر , اضافات بلوجر , دروس بلوجر , ربح بلوجر , نصائح بلوجر    تعليق   

قد يهمك ايضًا

بالرغم من أنه لايمكن اضافة قائمة مسندلة لمدوانات بلوجر من لوحة التحكم للبلوجر مباشرة الا أنه يمكننا القيام بذالك عن طريق ادخال بعض التعديلات البسيطة والتي يمكنها اعطاء نتائج جيدة ومتميزة للغاية.



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

الخطوة الأولى قم بتسجيل الدخول الى لوحة التحكم بمدونتك ثم اختر تحرير قالب المدونة ولاتنسى أن تحفظ نسخة من القالب قبل ادخال أي تعديلات لتفادي الأخطاء ثم ابحث عن الكود أو الرمز التالي :

]]></b:skin>

اضف الشفرة أو كود css التالية مباشرة قبل الرمز السابق .

#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;
}

الخطوة الثانية وتتمثل في في اضافة شفرة 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>

الأن قد انتهينا من تعديل قالب المدونة ،حسنا نقوم  الأن بالحفظ.

الخطوة الثالثة وتتمثل في اضافة أداة القائمة المسندلة باتباع الأتي :

من لوحة التحكم اختر التخطيط ثم اختر اضافة أداة ثم اختر عبارة HTML / JavaScript وقم بلصق الشفرة أو الكود التالي :

<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="#">AllBlogTools</a></li>
  </li></ul>

وبهذا متابعي الكرام نكون قد انتهينا من اضافة قائمة مسندلة وجميلة الى مدونة blogger بطريقة سهلة وممتعة اليس كذالك.

بقي الأن أن نقوم بادخال بعض التعديلات والمتمثلة في تغيير تسميات القائمة وادراج الروابط الخاصة بكل قسم .

مثال على ذالك نقوم بادخال بعض التعديلات على الشفرة التالية  <li><a href="#">Menu 3</a>  يمكنك تغيير عبارة Menu3 باسم لقسم محدد بمدونتك مثلا أو ارسالة أو أي صفحة على مدونتك.

كما يجب ادراج رابط الكتروني خاص بالقسم أوالصفحة التي تريد بالضبط  "#" مكان  الرمز # وهكذا يمكنك تغيير باقي الشفرة بالشكل الذي يتلائم ومدنتك.

هذا وأي تساؤل أو استفسار أو اقتراح  يمكنني المساعدة وفتح النقاش ان أمكن ذالك لإثراء الموضوع وتعميم الفائدة .