شرح اضافة قائمة منسدلة باقسام المدونة في الهيدر

3/21/2014

اضافة قائمة منسدلة باقسام المدونة في هيدر مدونات بلوجر

هنا سنشرح كيفية اضافة قائمة منسدلة باقسام المدونة عند وضع مؤشر الماوس عليها ، وذلك لإختصار عدد التصنيفات والتسميات في المدونات التي لها فروع وتسميات كثيرة

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

الشرح :

1) : ادخل على لوحة تحكم مدونتك ثم قالب ثم تحرير HTML
2) ابحث (Ctrl+F) عن الكود التالي :

3) ضع قبله أو فوقه الكود التالي :

4) ابحث عن الكود التالي :

5) ضع قبله أو فوقه الكود التالي :

.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXcrAVbWrcG9lZFKiujHUJsemBg64naxQawbMfciEFSe23kAZuZGnyy5D6vcsnqjKQY_kuk8pn8i0HvGi2Au14_6qELIFaSBaflYBHaCDO7qp6BDzWoajtCxcNxLmgvqyHcnwws4Z-uUE/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;
}

6) قم بحفظ القالب ..

7) الذهاب الى تخطيط Layout وإضافة أداة HTML ولا تقم بتسميتها. ستضع بها الكود التالى بعد التعديل عليه كما سنشرح لك. وهذه النقطة الأكثر دقة فى العمل. :

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

siege auto

التسميات

المشاركات الشائعة

مواقعنا

أرشيف المدونة

قسم 1

قوالب

شرح اضافة قائمة منسدلة باقسام المدونة في الهيدر

شاركنا رأيك وكن اول من يقوم بالتعليق :)[ 0 ]

إرسال تعليق