تقسيم الموضوع الواحد فى بلوجر لعدة صفحات أو تبويبات

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

قدمت فى موضوع سابق كيفية تقسيم السيدبار فى قالب مدونة بلوجر إلى عدة تبويبات وفى هذا الموضوع أقدم إضافة مشابهة ولكن لتقسيم الموضوع الواحد على مدونة بلوجر إلى عدة تبويبات أو عدة صفحات ، تلك الإضافة التى ربما تكون مفيدة عند عرض المقالات الطويلة والتى تعمل على تنسيق المحتوى بشكل جيد و منظم يسهل تصفحه من قبل الزائر.
هذه الإضافة تعمل بتقنية jQuery  و يمكن إستخدامها بإحدى الطريقتين إما على هيئة صفحات مرقمة أو تبويبات تحمل عناوين محتواها
مواضيع مشابهة: 

أداة إخفاء/ إظهار أجزاء متعددة من المحتوى على بلوجر

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

أولًا: تقسيم موضوع بلوجر إلى عدة صفحات

إذا أردت ظهور الموضوع الواحد مقسم إلى عدة صفحات إتبع الخطوات الآتية: (معـــاينة )

1. إذهب إلى تبويب HTML للمشاركة
2. إنسخ الكود التالى والصقه بتبويب HTML للمشاركة

/*condaianllkhir Tabbed Widget*/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script>

<style type="text/css">
* {
 margin: 0;
 padding: 0;
}
#tabs {
 font-size: 90%;
 margin: 20px ;
}
#tabs ul {
 float:right;
 background: #fff;
 width: 500px;
 padding-top: 4px;
}
#tabs li {
 margin-right: 8px;
 list-style: none;
}
* html #tabs li {
 display: inline;
}
#tabs li, #tabs li a {
 float: right;
}
#tabs ul li.active {
 border-top:2px #CCCCCC solid;
 background: #CCCCCC;
}
#tabs ul li.active a {
 color: #333333;
}
#tabs div {
 background: #E6E6E6;
 clear: both;
 padding: 15px ;
 min-height: 200px;
}
#tabs div h3 {
 margin-bottom: 12px;
}
#tabs div p {
 line-height: 150%;
     
}
#tabs ul li a {
 text-decoration: none;
 padding: 8px;
 color: #000;
 font-weight: bold;
}

-->
</style>
<script type="text/javascript">

$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){ 
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active'); 
var currentTab = $(this).attr('href'); 
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
</script>
<br />
<div id="tabs">
<div id="tab-1">
المحتوى الأول
    </div>
<div id="tab-2">
المحتوى الثانى
    </div>
<div id="tab-3">
المحتوى الثالث
    </div>
<div id="tab-4">
المحتوى الرابع
    </div>
<ul>
<li><a href="#tab-1"> 1 </a></li>
<li><a href="#tab-2"> 2 </a></li>
<li><a href="#tab-3"> 3 </a></li>
<li><a href="#tab-4"> 4 </a></li>
</ul>
</div>
/*condaianllkhir Tabbed Widget*/</div>

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

ثانيًا: تقسيم موضوع بلوجر إلى تبويبات

إذا أردت ظهور الموضوع الواحد مقسم إلى عدة صفحات إتبع الخطوات الآتية: (معـــاينة)

1. إذهب إلى تبويب HTML للمشاركة
2. إنسخ الكود التالى والصقه بتبويب HTML للمشاركة

/*condaianllkhir Tabbed Widget*/
<style type="text/css">
* {
 margin: 0;
 padding: 0;
}
#tabs {
 font-size: 90%;
 margin: 20px ;
}
#tabs ul {
 float:right;
 background: #fff;
 width: 500px;
 padding-top: 4px;
}
#tabs li {
 margin-right: 8px;
 list-style: none;
}
* html #tabs li {
 display: inline;
}
#tabs li, #tabs li a {
 float: right;
}
#tabs ul li.active {
 border-top:2px #FFFF66 solid;
 background: #FFFFCC;
}
#tabs ul li.active a {
 color: #333333;
}
#tabs div {
 background: #FFFFCC;
 clear: both;
 padding: 15px ;
 min-height: 200px;
}
#tabs div h3 {
 margin-bottom: 12px;
}
#tabs div p {
 line-height: 150%;
     
}
#tabs ul li a {
 text-decoration: none;
 padding: 8px;
 color: #000;
 font-weight: bold;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){ 
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active'); 
var currentTab = $(this).attr('href'); 
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
</script>
<br />
<div id="tabs">
<ul>
<li><a href="#tab-1">التبويب الأول</a></li>
<li><a href="#tab-2">التبويب الثانى </a></li>
<li><a href="#tab-3">التبويب الثالث </a></li>
<li><a href="#tab-4">التبويب الرابع</a></li>

</ul>
<div id="tab-1">
المحتوى الأول
    </div>
<div id="tab-2">
المحتوى الثانى
    </div>
<div id="tab-3">
المحتوى الثالث
    </div>
<div id="tab-4">
المحتوى الرابع
    </div>
</div>
</div>

قم بتبديل كلمة "المحتوى الأول ، المحتوى الثانى ، المحتوى الثالث،....." بكود المحتوى الذى تريد ظهوره بكل تبويب
إذا كنت تستخدم كود مكتبة jQuery  الملون باللون الأحمر من قبل فى قالب المدونة فلاداعى لإعادة إستخدامه مرة أخرى
أتمنى أن تعجبكم الإضافة ---> تابع المزيد من إضافات بلوجر

تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا

بقلم Dr.Rasha Omran

مطورة تطبيقات الهاتف ، سفيرة ببرنامج Women Techmakers التابع لجوجل ، أهتم بالمحتوى الرقمى وأحببت أن أدون كل ما تعلمته فى هذا الموقع للإفادة فى أعمال هادفة