اليك الكود الجميل وهو بلوق التي تبلغ مساحة القطعة كلفه في الشريط الجانبي وتتكون من شعبية الخيارات، ويضم الوظائف الداخلية بنقرة واحدة؟ ومن المعروف أكثر شيوعا أنه يحتوي على مسج من القطع، والذي يسمح لك توفير الكثير من المساحة في الشريط الجانبي والحفاظ على واجهة المستخدم من خلال الجمع بين 3 حتياجات مختلفة في خانة واحدة فقط. وفي هذه المقالة، فإننا نتعلم كيفية إضافة مسج كلفه الشريط الجانبي القطعة في مدون.
ما هو مسج كلفه القطعة؟
كنت قد رأيت الكثير من المواقع التي تمت كلفه القطعة في أعلى جدا من الشريط الجانبي في أن تحافظ على ثلاثة الحاجيات في مكان واحد فقط مما يوفر لك القدرة على اختيار واحد لعرض بينهم. فإنه لا يسمح لك لانقاذ قليلا من الفضاء في الشريط الجانبي ولكن أيضا يحافظ تصميم بلوق الخاص بك نظيفة والمهنية.
وهناك الكثير من المواقع الشعبية اسمه كبيرة تستخدم نفس الأسلوب لعرض المزيد من الحاجيات ضمن مساحة أقل. في هذه المقالة، سوف نعرض لكم طريقة كيفية إضافة مسج كلفه الشريط الجانبي القطعة في المدون وسوف توجه لكم من خلال كل خطوة بالتفصيل.
خلق مسج كلفه القطعة في المدون:
أول شيء يجب عليك القيام به هو الذهاب الى المدون >> قالب >> تحرير HTML ولصق الترميز CSS التالية
فقط فوق علامة ]]></b:skin>
إذا كان لديك ملف CSS نمط منفصل ثم يمكنك أيضا إضافة CSS التالية إليه.
/* 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: left;
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;
}
الآن هذه الخطوة تعتمد اعتمادا كليا على ترميز قالب مدون الخاص بك كما المصممين المختلفة لها طريقة مختلفة في الترميز ولكن نحن لن نشارك الطريقة التي يستخدم أكثر شيوعا في القالب. عليك أن تنظر إلى رمز من منطقة القطعة الشريط الجانبي الخاص بك. البحث عن <div id='sidebar-wrapper'>
<!-- 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'>About</a></li>
<li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>Popular</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] -->
وبمجرد الانتهاء من كل شيء، وغبار، حفظ القالب بالضغط على "حفظ القالب" في الجزء العلوي. الآن انتقل إلى منطقة تخطيط وكنت لاحظت ثلاثة مجالات القطعة فقط فوق الشريط الجانبي الخاص بك. يمكنك إضافة الحاجيات اثنين من تلك المجالات الثلاثة وتظهر في شكل علامات التبويب عند مشاهدته مباشرة على موقع الويب الخاص بك.
اتمنى أن يكون الشرح كافي وواضح ولرؤية المثال هنا
