مساحة إعلانية

2016-02-21

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

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

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

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

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

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

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

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

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

  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  الملون باللون الأحمر من قبل فى قالب المدونة فلاداعى لإعادة إستخدامه مرة أخرى

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

إذا أردت ظهور الموضوع الواحد مقسم إلى عدة صفحات إتبع الخطوات الآتية: (معـــاينة)
multi tabbed content
  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  الملون باللون الأحمر من قبل فى قالب المدونة فلاداعى لإعادة إستخدامه مرة أخرى
أتمنى أن تعجبكم الإضافة ---> تابع المزيد من إضافات بلوجر
تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا

هناك 10 تعليقات

  1. الردود
    1. شكرًا جزيلا لمتابعتك

      حذف
  2. هل تعتقدين أنه سيؤثر سلبا على الموضوع في نتائج البحث ؟ :)

    ردحذف
    الردود
    1. من الأفضل إنشاء مقدمة قبل الإضافة المذكورة تحتوى على الكلمات المفتاحية والإهتمام بوصف البحث للموضوع

      حذف
  3. الردود
    1. شكرًا جزيلا لمتابعتك

      حذف
  4. شكرا لكي على الشرح الرائع.
    هذا التقسيم كنت أبحث عنه من مدة وهناك فكرة موقع على بلوجر كنت أريد عملها ولم أستطيع بسبب تقسيم الصفحات.
    سوف أطبق هذا الشرح قريبا إن شاء الله
    شكراً لكي مرة أخري.

    ردحذف
    الردود
    1. شكرا لمتابعتك وأتمنى لك التوفيق

      حذف
  5. السلام عليكم
    اضفت الكود داخل صفحة html للمشاركة
    ولكن لم تظهر بالشكل المطلوب > لم اقم بتركيب مكتبة الجيكوري هل لديك شرح لها ؟

    ردحذف
  6. موضوع رائع سأجرب ذلك

    ردحذف

يمنع نشر التعليقات ذات الروابط الدعائية أو تعليقات بإسلوب غير لائق أو التى تحتوى على معلومات شخصية كالبريد الإلكترونى
أعتذر عن الرد على طلبات التصميم لضيق الوقت أو التبادل الإعلانى


لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"

Privacy-Policy | عودة الى الاعلى
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2016 ©

تصميم كن مدون