لقد سبق لك أن رأيت تلك بلوق التي لديها مساحة القطعة كلفه في الشريط الجانبي تتكون من الشعبية، مؤخرا، ويضم الوظائف داخل بنقرة واحدة؟ ومن المعروف أكثر شيوعا بأنها مسج كلفه القطعة، والذي يسمح لك لانقاذ الكثير من الفضاء في الشريط الجانبي الحفاظ على واجهة المستخدم ودية للمستخدمين من خلال الجمع بين 3 الحاجيات المختلفة في واحدة فقط. في هذه المقالة، ونحن سوف تظهر لك كيفية إضافة مسج كلفه الشريط الجانبي القطعة في البلوجر
ما هو مسج كلفه القطعة؟
كنت قد رأيت الكثير من المواقع التي لديها القطعة كلفه في أعلى جدا من الشريط الجانبي في أن يبقي ثلاثة الحاجيات في مكان واحد فقط مما يوفر لك القدرة على اختيار واحد لعرض بينهم. فإنه لا يسمح لك لانقاذ قليلا من الفضاء في الشريط الجانبي ولكن أيضا يحافظ تصميم بلوق الخاص بك نظيفة والمهنية.
هناك الكثير من المواقع شعبية كبيرة يدعى تستخدم نفس الأسلوب لعرض المزيد من الحاجيات داخل مساحة أقل. في هذه المقالة، ونحن سوف تظهر لك طريقة كيفية إضافة كلفه على مسج في الشريط الجانبي القطعة المدون وسوف توجه لكم من خلال كل خطوة بالتفصيل
:خلق مسج كلفه القطعة في مدون
أول شيء جدا ما عليك القيام به هو أن تذهب إلى Blogger >> قالب >> تحرير
HTML ولصق الترميز CSS
css العلامة. إذا كان لديك ملف ورقة ]]></b:skin> التالية فقط فوق
.التالية إليه 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] -->
مرة واحدة ويتم كل شيء، وغبار، حفظ القالب عن طريق الضغط على "حفظ القالب" في الأعلى. الآن انتقل إلى منطقة تخطيط، وكنت لاحظت ثلاثة مجالات القطعة فقط فوق الشريط الجانبي الخاص بك. يمكنك إضافة الحاجيات اثنين من تلك المجالات الثلاثة وتظهر في شكل علامات التبويب عند مشاهدته مباشرة على موقع الويب الخاص بك
نأمل ساعدت هذا البرنامج التعليمي الخاص أن أكبر مشكلة كيفية إضافة مسج كلفه الشريط الجانبي القطعة في المدون. مع سيئسس يمكنك أسلوب الحاجيات التبويب وفقا لنظرة من بلوق الخاص بك. مشاركة أفكارك واقتراحات حول هذه القطعة في التعليق أدناه.
