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

عدد مشاهدات الموضوع:

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

أولا: ادخل على لوحة تحكم مدونتك ثم قالب ثم تحرير HTML
ثانيا: ابحث (Ctrl+F) عن الكود التالي 
</head>
ثالثا: ضع قبله أو فوقه الكود التالي
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jQuery.jGlideMenu.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#jGlide_001').jGlideMenu({
tileSource : '.jGlide_001_tiles' ,
demoMode : false
}).show();
$('#switch').click(function(){$(this).jGlideMenuToggle();});
});
//]]>
</script>

رابعا: ابحث عن الكود التالي
]]></b:skin>
خامسا: ضع قبله أو فوقه الكود التالي 
 .jGM_box {
position: absolute; /* Change absolute with fixed if you want it to float */
top: 50px; /* Distance from above */
right: 860px; /* Distance from right */
width: 227px;
height: 317px;
background: #fff; /* Background color */
margin: 0;
padding: 0;
border: 1px solid #ccc; /* Border */
overflow: hidden;
}
.jGM_header {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 227px;
background: #d1d1d1; /* Background color for the up bar */
color: #fff;
text-align: right;
vertical-align: middle;
line-height: 18px;
cursor: move;
}
.jGM_header a {
margin-right: 12px;
text-decoration: none;
color: #000 !important;
cursor: pointer;
}
.jGM_wrapper {
position: absolute;
top: 19px;
left: 0;
width: 2270px;
height: 288px;
margin: 0;
padding: 0;
border: 0;
}
.jGM_tile {
position: absolute;
top: 0;
left: 7px;
width: 213px;
height: auto;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
display: block;
}
.jGM_cats {
width: 100%;
height: 64px;
overflow: hidden;
vertical-align: middle;
text-align: left;
}
.jGM_cats h4 {
font-family: Verdana,Arial,serif;
font-size: 1.8em;
margin: 0;
padding: 2px 0;
line-height: 1.8em;
color: #414141;
font-weight: normal;
}
.jGM_cats p {
font-family: Verdana,tahoma,arial;
font-size: 1em; /* Font size of the description */
margin: 0;
padding: 0;
line-height: 1.2em;
color: #858585; /* Description color */
font-weight: normal;
}
.jGM_pager {
height: 18px;
width: 213px;
line-height: 18px;
margin: 0;
border: 0;
padding: 0;
background: #f6f6f6;
text-align: center;
vertical-align: middle;
}
.jGM_pager a {
text-decoration: none;
font-weight: bold;
text-decoration: none;
display: block;
}
.jGM_pager a:hover { background: #d1d1d1; }
.jGM_pager img { border: 0; margin: 6px 0; }
.jGM_content {
width: 213px;
height: 150px;
margin: 1px 0;
padding: 0;
border: 0;
overflow: hidden;
}
.jGM_content a {
font-family: Tahoma,arial;
text-decoration: none;
color: #333 !important;
height: 18px;
width: 100%;
display: block;
line-height: 18px;
padding: 0 0 0 10px;
background-color: #e6e7e9;
margin: 1px 0;
}
.jGM_content a:hover {
color: #fff !important;
background-color: #4D4E67; /* Bar color on mouseover */
}
.jGM_more {
background-image: url(http://3.bp.blogspot.com/-n6XI5wLg8og/UjiLQ10dQpI/AAAAAAAAD3Q/cOVY1gTiruc/s1600/arrow.gif);
background-repeat: no-repeat;
background-position: 203px 50%;
}
.jGM_back {
position: absolute;
top: 255px;
right: 0;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_back a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color of the "Back" link */
display: block;
}
.jGM_back a:hover {
color: #fff !important; /* Color of the "Back" link on mouseover */
background: #4D4E67;
}
.jGM_reset {
position: absolute;
top: 255px;
right: 62px;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_reset a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color of the "Home" link */
display: block;
}
.jGM_reset a:hover {
color: #fff !important; /* Color of the "Home" link on mouseover */
background: #4D4E67;
سادسا: قم بحفظ القالب :)
سابعا: الذهاب الى تخطيط Layout وإضافة أداة HTML ولا تقم بتسميتها. ستضع بها الكود التالى بعد التعديل عليه كما سنشرح لك. وهذه النقطة الأكثر دقة فى العمل.
<div class="jGM_box" id="jGlide_001">
<!-- Here all the links of the first level -->
<ul id="tile_001" class="jGlide_001_tiles" title="عنوان القائمة الرئيسية" alt="وصف القائمة الرئيسية">
<li rel="tile_002">Link 1</li>
<li rel="tile_003">Link 2</li>
<li rel="tile_004">Link 3</li>
<li rel="tile_006">Link 4</li>
<li rel="tile_007">Link 5</li>
<li><a href="URL address">Link 6</a></li>
<li><a href="URL address">Link 7</a></li>
<li><a href="URL address">Link 8</a></li>
<li><a href="URL address">Link 9</a></li>
<li><a href="URL address">Link 10</a></li>
<li><a href="URL address">Link 11</a></li>
</ul>
<!-- Here all the links of the second level -->
<ul id="tile_002" class="jGlide_001_tiles" title="عنوان أول قائمة" alt="وصف أول قائمة">
<li rel="tile_005">Link 1.1</li>
<li><a href="URL address">Link 1.2</a></li>
<li><a href="URL address">Link 1.3</a></li>
<li><a href="URL address">Link 1.4</a></li>
</ul>
<ul id="tile_003" class="jGlide_001_tiles" title="عنوان ثانى قائمة" alt="وصف ثانى قائمة">
<li><a href="URL address">Link 2.1</a></li>
<li rel="tile_008">Link 2.2</li>
<li><a href="URL address">Link 2.3</a></li>
</ul>
<ul id="tile_004" class="jGlide_001_tiles" title="عنوان ثالث قائمة" alt="وصف ثالث قائمة">
<li><a href="URL address">Link 3.1</a></li>
<li><a href="URL address">Link 3.2</a></li>
<li><a href="URL address">Link 3.3</a></li>
</ul>

<ul id="tile_006" class="jGlide_001_tiles" title="عنوان رابع قائمة" alt="وصف رابع قائمة">
<li><a href="URL address">Link 4.1</a></li>
<li><a href="URL address">Link 4.2</a></li>
<li><a href="URL address">Link 4.3</a></li>
</ul>
<ul id="tile_007" class="jGlide_001_tiles" title="عنوان خامس قائمة" alt="وصف خامس قائمة">
<li><a href="URL address">Link 5.1</a></li>
<li><a href="URL address">Link 5.2</a></li>
</ul>

<!-- Here all the links of the third level -->
<ul id="tile_005" class="jGlide_001_tiles" title="عنوان قائمة فرعية" alt="وصف قائمة جانبية">
<li><a href="URL address">Link 1.1.1</a></li>
<li><a href="URL address">Link 1.1.2</a></li>
</ul>

<ul id="tile_008" class="jGlide_001_tiles" title="عنوان قائمة فرعية" alt="وصف قائمة فرعية">
<li><a href="URL address">Link 1.2.1</a></li>
<li><a href="URL address">Link 1.2.2</a></li>
</ul>
</div> 

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

هناك 12 تعليقًا:

  1. الف شكر يا هندسه وبالتوفيق وتقديم مواضيع افضل انشاء الله

    ردحذف
  2. أزال المؤلف هذا التعليق.

    ردحذف
  3. @Said Ebeid
    شكرا لك سعيد على تواجدك ودعمك الدائم

    ردحذف
  4. @YaSSeR.Rock

    سنعمل تدوينة خاصة باذن الله بخصوص هذا البرنامج اذا كان يتوافق مع بلوجر.. شكرا لك

    ردحذف
  5. @وي كير جيرماني
    شكرا على تواجدك وتشجيعك

    ردحذف
  6. السلام عليكم .. اخي عندي مشكلة ضروري تحلها الله يخليك.. لما اركب القوائم المنسدلة تطلع لي زي الصورة .. مثال http://upload.mmnon.com/uploads/mmnon.com-1396044281541.png
    يعني القوائم الفرعية تطلع في الخلف .. تكفى يا خوي شوف لي حل .... منتظرك ..

    ردحذف
  7. خلااااص .... يا خوي مكشوووووور تم حل المشكلة ... ومعليش .....

    ردحذف

  8. مشكوور
    مدير موقع Mysurprise

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية