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

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

اذهب الى الأسفل 
كاتب الموضوعرسالة
JoryAbdallah
 
 
avatar

البلد : السعودية
الجنس : انثى
المساهمات : 1442
نقاط النشاط : 1676

اضافة ثلاثة اقسام في السايدبار بشكل احترافي Empty
مُساهمةموضوع: اضافة ثلاثة اقسام في السايدبار بشكل احترافي   اضافة ثلاثة اقسام في السايدبار بشكل احترافي Emptyالإثنين 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


ﻻ اله الا انت سبحانك اني كنت من الظالمين
ﻻ اله الا الله محمد رسول الله
الرجوع الى أعلى الصفحة اذهب الى الأسفل
abuahmad
أسطورة الإشهار

abuahmad

البلد : مصر
الجنس : ذكر
المساهمات : 7391
نقاط النشاط : 8165

اضافة ثلاثة اقسام في السايدبار بشكل احترافي Empty
مُساهمةموضوع: رد: اضافة ثلاثة اقسام في السايدبار بشكل احترافي   اضافة ثلاثة اقسام في السايدبار بشكل احترافي Emptyالإثنين 9 يناير 2017 - 15:01

شرح رائع

بالتوفيق


توقيع : abuahmad



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

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

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

شبكة منتديات الانوار10[/center]
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Basil Abdallah
 
 
Basil Abdallah

البلد : الأردن
الجنس : ذكر
المساهمات : 782
نقاط النشاط : 727

اضافة ثلاثة اقسام في السايدبار بشكل احترافي Empty
مُساهمةموضوع: رد: اضافة ثلاثة اقسام في السايدبار بشكل احترافي   اضافة ثلاثة اقسام في السايدبار بشكل احترافي Emptyالخميس 12 يناير 2017 - 3:11

شكرا لك


توقيع : Basil Abdallah


bom
الرجوع الى أعلى الصفحة اذهب الى الأسفل
VaMoS AmR
أسطورة الإشهار

VaMoS AmR

البلد : مصر
الجنس : ذكر
المساهمات : 22620
نقاط النشاط : 24228

اضافة ثلاثة اقسام في السايدبار بشكل احترافي Empty
مُساهمةموضوع: رد: اضافة ثلاثة اقسام في السايدبار بشكل احترافي   اضافة ثلاثة اقسام في السايدبار بشكل احترافي Emptyالخميس 16 فبراير 2017 - 12:16

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


توقيع : VaMoS AmR


الرجوع الى أعلى الصفحة اذهب الى الأسفل
مصطفى ستيتان
 
 
مصطفى ستيتان

البلد : فلسطين
الجنس : ذكر
المساهمات : 6271
نقاط النشاط : 6945

اضافة ثلاثة اقسام في السايدبار بشكل احترافي Empty
مُساهمةموضوع: رد: اضافة ثلاثة اقسام في السايدبار بشكل احترافي   اضافة ثلاثة اقسام في السايدبار بشكل احترافي Emptyالأربعاء 3 أكتوبر 2018 - 16:24

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


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


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

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
دليل الإشهار العربي :: منتدى تطوير المواقع والمنتديات :: تطوير المواقع و المنتديات :: قسم تطوير المواقع والمنتديات-
انتقل الى:  
جميع الحقوق محفوظة لمنتدى دليل الإشهار العربي