أضف قائمة أفقية بها تبويبات منسدلة بتقنية css +صندوق بحث لمدونة بلوجر

شاركه على +Googleأضفه الى Deliciousشاركه على Twetter شاركه على Facebookأضفه الى StumbleUpon أضفه الى Digg

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

أولا : لتركيب القائمة على مدونة بلوجر التي بها القالب الذي تقدمه بلوجر

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


طريقة التركيب :

1-لوحة التحكم 
2-القالب
3-تحرير القالب
4-متابعة
5-توسيع القالب

 ثم قم بالضغط على     ctrl + f   ثم قم بالبحث على  الكود التالي 

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

ثم قم بمسح الجزء المعلم بالأحمر في الكود, اذا وجدة اثنين من  الكود الذي وضعته في الأعلى فقم أيضا بمسح الجزء المعلم بالأحمر منهما معا .

ثم قم مرة أخرى بالبحث على هذه الكتابة

/* Tabs

هذه الكتابة هي جزء من الكود الذي في الأسفل قم بمسحه كاملا حتى تصل الى الجزء الخاص ب Columns  .قد  تجد في بعض القوالب الجزء الخاص ب Headings يسبق الجزء الخاص ب Columns

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
margin-top: -$(header.border.size);
border-top: $(header.border.size) solid $(tabs.border.color);
border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);

margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
display: inline-block;

padding: .6em 1em;

font: $(tabs.font);
color: $(tabs.text.color);

border-$startSide: $(tabs.border.width) solid $(content.background.color);
border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
}

/* Columns
----------------------------------------------- */

ثم مباشرة ضع الكود التالي في المكان الذي مسحة منه الكود  الذي في الاعلى

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs .widget ul, .tabs .widget ul {overflow: visible;}

ثانيا :اذا أردت اضافة هذه القائمة لمدونة بها قالب بلوجر معدل

أنا سأشرح بشكل بسيط  جدا لأن بعض المدونين لا يجيدون ـhtml و css

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

ثم قم بحدف الكود ابتداءا من ul>   إلى </ul>

والان انتهينا من هذه الإعدادات يبقى الأن إضافة الأداة.


1- قم بالبحث عن الكود التالي في قالبك :

]]></b:skin>

ثم ضع الكود التالي فوقه مباشرة

#menuWrapper {
width:100%; /* Menu width */
height:35px;
padding-left:14px;
background:#333; /* Background color */
border-radius: 10px;
}
.menu {
direction:rtl;
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {
display:block;
float:right;
}

.menu li a.top_link {
display:block;
float:right;
height:35px;
line-height:32px;
color:#ccc;
text-decoration:none;
font-family:"Verdana", sans-serif;
font-size:15px;
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;

}
.menu li a.top_link span {
float:right;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:right;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIDYq9tCnHe-DFnLkWPQ-mmZYje_JcW8EfiskgTlxEaB0Lb4M4lhZFG1JuS9BrQNOdqskoYdDCbQp56dQjZZYvN0Grjsu7W3su-pC5rRXuszIwaH-gkybA6lxHg_800jjW280qbpgWdADw/s1600/menyhover.bmp) repeat-x; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
right:0;
top:35px;
background:#333; /* Submenu background color */
padding:3px;
white-space:nowrap;
width:120px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:right;
width:120px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:120px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li:hover ul.sub li a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIDYq9tCnHe-DFnLkWPQ-mmZYje_JcW8EfiskgTlxEaB0Lb4M4lhZFG1JuS9BrQNOdqskoYdDCbQp56dQjZZYvN0Grjsu7W3su-pC5rRXuszIwaH-gkybA6lxHg_800jjW280qbpgWdADw/s1600/menyhover.bmp) repeat-x; /* Background Color on mouseover */
color:#fff;

}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Background Color of the Submenu */
padding:3px;
white-space:nowrap;
width:120px;
z-index:4;
height:auto;
}
#search {
width: 228px; /* Width of the Search Box */
height: 50px;
float: left;
z-index: 2;
text-align: center;
margin-top: 5px;
margin-right: 6px;
/*  Search Box Background */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVi6jDOcBJowibY-0EwaA8rWDWnbap8npLy9iFWHWP40PpAyAkJ7QSFF0mBcdHXpouhu39TpBnYv5rGv3buRJalKJ6EK27Ca3X9Mhp9fI73e7hIXtd40kxtlGAOUDzstD0vyGLRwGnFAH_/h74/searchBar1.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

2- ثم الان قم بحفظ قالب مدونتك

3- . اذهب للوحة التحكم

4. تخطيط 

5.عناصر الصفحة

6. اضف اداة

7.اختار  Html/Javascript

8. ثم ضع الكود التالي 

<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='الرابط'><span>الرئيسية</span></a></li>

<li class='top'><a class='top_link' href='الرابط'><span class='down'>اسم التبويب</span></a>
<ul class='sub'>
<li><a href='الرابط'>العنصر 1</a></li>
<li class='mid'><a class='fly' href='الرابط'>العنصر 2</a></li>
<li><a href='الرابط'>العنصر 3</a></li>
<li><a href='الرابط'>العنصر 4</a></li>
<li><a href=الرابط'>العنصر 5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='الرابط'><span class='down'>اسم التبويب</span></a>
<ul class='sub'>
<li><a href='الرابط'>العنصر 1</a></li>
<li><a href='الرابط'>العنصر 2</a></li>
<li><a href='الرابط'>العنصر 3</a></li>
<li><a href='الرابط'>العنصر 4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='الرابط'><span class='down'>اسم التبويب</span></a></li>
<li class='top'><a class='top_link' href='الرابط'><span class='down'>اسم التبويب</span></a></li>

<li class='top'><a class='top_link' href='الرابط'><span class='down'>اسم التبويب</span></a>

</li>

<!-- put codes above -->

<!-- Search  -->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;ابحث هنا ...&quot;;' onfocus='if (this.value == &quot;ابحث هنا ...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='ابحث هنا ...'/></form>
</li>

</ul>
</div>

ملاحظة :

قم بتغير اسم التبويب بعنوان تبويب من اختيارك.
قم بتغير الرابط برابط التبويب أو رابط العناصر.
قم بتغير العنصر 1,2.. بأسماء العناصر التي ستندلس عن التأشير على التبويب المطلوب.

9- قم بالحفظ.

ومبروك عليك الاداة .

تالثا : تخصيص الاضافة :

* اذا أردت اضافة تبويب جديد في القائمة أضف الكود التالي :

<li class="top"><a href="الرابط" class="top_link"><span>اسم التبويب</span></a></li>

 فوق   <!-- put codes above -->  والتي علمتها في الكود الأخير.

* اذا أردة اضافة تبويب جديد في القائمة وبه تبوبات فرعية أضف الكود التالي :

<li class="top"><a href="الرابط" class="top_link"><span class="down">اسم التبويب</span></a>
<ul class="sub">
<li><a href="الرابط">العنصر 1</a></li>
<li><a href="الرابط">العنصر 2</a></li>
<li><a href="الرابط">العنصر 3</a></li>
</ul>
</li>

 فوق   <!-- put codes above -->  والتي علمتها في الكود الأخير.

الى هنا أكون قد أتممت الدرس على أمل أن يفيدكم والسلام عليكم.

Tweet

Social Sharing Widget bychamelcool

التصنيف : أدوات بلوجر,أكواد و هكات,خاص بالمدونات