شاطر
استعرض الموضوع السابقاذهب الى الأسفلاستعرض الموضوع التالي

default اضافة ثلاثة اقسام في السايدبار بشكل احترافي

avatar
JoryAbdallah
 
البلد : السعودية
الجنس : انثى
المساهمات : 1442
نقاط النشاط : 1676
تمت المشاركة في الإثنين 9 يناير 2017 - 6:21

السلام عليكم اليوم وبعد طول غياب عن التدوين اقدم لكم طريقة اضافة ثلاثة اقسام في السايدبار في العامود الجانبي في اداة واحد يعني اداة واحدة مقسمة الى ثلاثة اقسام وهي اضافة رائعة واحترافية متوفرة في القوالب الاحترافية
مشاهدة الاضافة
طريقة تركيب الاداة
1- من لوحة التحكم >> قالب >> تحرير HTML
2- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير
3- قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)
4- قم بالبحث عن الكود ]]></b:skin> واضف فوقه مباشراً الكود التالي
/* Tab Widget */
.tabviewsection {
background: #f8f8f8;
text-transform: uppercase;
border-bottom: 5px solid #f34246;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
float: left;
width: 100%;
}
.tabs-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabs-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: right;
border-right: 2px solid #fff;
}
.tabs-widget li a {
color: #fff;
display: block;
padding-right: 16.5px;
padding-left: 16px;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabs-widget-content {
}
.tabviewsection {
margin-top: 10px;
margin-bottom: 10px;
}
.tags_tab {
width: 80px;
text-align: center;
}
.about_tab {
width: 96px;
text-align: center;
}
li.laster {
border: 0px;
width: 120px;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabs-widget li a {
padding-right: 20px;
padding-left: 20px;
}
.tabs-widget {
height: 51px;
}
.tw-authors {
width: 570px;
}
.tabviewsection h2 {
display: none;
}
.tabs-widget li a.tabs-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #f34246;
font-size: 14px;
text-transform: capitalize;
}
.tabs-widget li a {
background: #f34246;
}


5- قم بالبحث عن الكود <div id='sidebar-wrapper'> او <div id='sidebar'> واضف اسفله الكود التالي
<!-- Tab Widget [start] -->
<div class='tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
$(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();

$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
$(this).addClass("tabs-widget-current");
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>المشاركات</a></li>
<li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>الاقسام</a></li>
<li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>التعليقات</a></li>
</ul>
<!-- Tab Widget 1 -->
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<!-- Tab Widget 2 -->
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>

</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<!-- Tab Widget 3 -->
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<!-- Tab Widget [endt] -->

واخيراً اضغط على حفظ القالب ومبروك عليك الاضافة الرائعة
ثم انتقل الى التخطيط لكي تقوم باضافة الادوات التي تناسبك الى الاقسام
الى هنا ينتهي الموضوع نلتقي في مواضيع اخرى انشاء الله
في امان الله




توقيع : JoryAbdallah


ﻻ اله الا انت سبحانك اني كنت من الظالمين
ﻻ اله الا الله محمد رسول الله

default رد: اضافة ثلاثة اقسام في السايدبار بشكل احترافي

abuahmad
abuahmad
أسطورة الإشهار

البلد : مصر
الجنس : ذكر
المساهمات : 7391
نقاط النشاط : 8165
تمت المشاركة في الإثنين 9 يناير 2017 - 15:01
توقيع : abuahmad



اضافة ثلاثة اقسام في السايدبار بشكل احترافي 20310

سارع وشارك بمسابقه صوره واجمل تعليق 100 اعتماد جائزه اسبوعيه
http://www.alanwar10.com/t5044-topic
اضافة ثلاثة اقسام في السايدبار بشكل احترافي 5c3yr34a7puk
 

امتلك منتدى VB بدون اى شروط فقط ضع طلبك باقسام التصميم بمنتدىالانوار10

شبكة منتديات الانوار10 [/center]

default رد: اضافة ثلاثة اقسام في السايدبار بشكل احترافي

Basil Abdallah
Basil Abdallah
 
البلد : الأردن
الجنس : ذكر
المساهمات : 782
نقاط النشاط : 727
تمت المشاركة في الخميس 12 يناير 2017 - 3:11
توقيع : Basil Abdallah


bom

default رد: اضافة ثلاثة اقسام في السايدبار بشكل احترافي

VaMoS AmR
VaMoS AmR
أسطورة الإشهار

البلد : مصر
الجنس : ذكر
المساهمات : 22620
نقاط النشاط : 24228
تمت المشاركة في الخميس 16 فبراير 2017 - 12:16

موضوع ممتاز ومفيد 
جزاك الله الف خير
تحياتى لك
bom 




توقيع : VaMoS AmR


default رد: اضافة ثلاثة اقسام في السايدبار بشكل احترافي

مصطفى ستيتان
مصطفى ستيتان
 
البلد : فلسطين
الجنس : ذكر
المساهمات : 6269
نقاط النشاط : 6945
تمت المشاركة في الأربعاء 3 أكتوبر 2018 - 16:24

ألف شكر لكم على المجهود الطيب ، 
وجزاكم الله كل خير




توقيع : مصطفى ستيتان


سبحان الله والحمدلله ولا إله إلا الله 
- أدعوكم للمشاركة في ( منتديات سما العرب ) 
https://www.samaarab.com/vb/
اضافة ثلاثة اقسام في السايدبار بشكل احترافي Do
استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى