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

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

مرحبا بكم من جديد ومع طريقة رائعة لاختصار الموضوع على منصة بلوجر وهو جعل الموضوع مقسَّم الى عدد من الصفحات لكى لا يستقبل القارىء إحساسا سلبيا بأن الموضوع كبير وطويل ولا يمكن قراءته وفى نفس الوقت الطريقة تساعد على ترتيب الأفكار وزيادة تركيز القارىء للموضوع.

معاينة

الفكرة ببساطة ستفيد المدونات التى تحتاج لكتابة مقالات ودروس وأخبار وكذلك المدونات العلمية وغيرها. وأنت بالطبع ستستفيد منها إن قمت باستخدامها. فبدلا من كتابة موضوع يملأ الصفحة بالكامل يمكننا جعله مُقسما فى مساحة أصغر ولكن لأجزاء باستخدام أكواد الجويكرى والسى اس اس وكذلك الجافا اسكريبت. فقط تابعوا معنا.

1- اضافة مكتبة الجويكرى التالى قبل أو فوق وسم </head> (لاحظ ان كنت تستخدم هذا الكود من قبل لا تقم بإضافته مرة أخرى).

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

2- كود CSS

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

<style>

.hiddenPage{display:none;} /*لا تقم بتغيير هذا السطر*/

/*يمكنك تعديل أكواد الألوان وكذلك الأبعاد*/

a.page{padding: 3px; border:1px solid #d3d3d3;text-decoration:none;}

a.activePage{color:red;}

</style>

3- كود HTML

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

<!--HTML CODE www.abu-iyad.com-->

<!--CONTENT-->

/*كود الصفحة الأولى*/

<div id="page1" class="contentPage">

 عنوان الصفحة الأولى

 

 محتوى الصفحة الأولى

</div>

/*كود الصفحة الثانية*/

<div id="page2" class="contentPage hiddenPage">

 عنوان الصفحة الثانية

 

 محتوى الصفحة الثانية

</div>

/*كود الصفحة الثالثة*/

<div id="page3" class="contentPage hiddenPage">

 عنوان الصفحة الثالثة

 

 محتوى الصفحة الثالثة

</div>

/*يمكنك زيادة صفحة أخرى عن طريق تكرار الكود السابق مع تغيير رقم الصفحة*/

<!--PAGINATOR-->

 

<a href="#page1" class="page activePage">1</a>

<a href="#page2" class="page">2</a>

<a href="#page3" class="page">3</a>

/*عند زيادة صفحة أخرى يجب عليك إضافة سطر أخر من الكود السابق مع تغيير رقم الصفحة*/

4- كود Script

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

/*لا تقم بالتعديل فى هذا الكود*/

<script>

function changePage(pageElement){

 $(".contentPage").addClass('hiddenPage');

 $id = $(pageElement).attr('href');

 $($id).removeClass('hiddenPage').show();

 $(".page").removeClass('activePage');

 $(pageElement).addClass('activePage');

}

 

$('.page').click(function(){changePage(this);});

 

</script>

بهذا نكون قد عرضنا عليكم الأكواد بالتفصيل ولكن كيف يتم تفعيل الأكواد وإضافتها؟

 نقوم بإنشاء موضوع جديد ثم التحويل الى وضع HTML واضافة كود CSS ثم HTML بعد التعديل بما يناسبك ثم كود Script واحد تلو الأخر. وبعدها نقوم بنشر الموضوع ومعاينته. وننصح تجربة الموضوع على مدونة تجريبية وبعد نجاح العملية يمكنكم نسخ ولصق الكود كاملا ونشره إما كموضوع كامل عبر مدونتكم أو كجزء من موضوع سيتم نشره.

الكود الكامل

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

<!--CSS CODE www.abu-iyad.com-->

<style>

.hiddenPage{display:none;} /*do not touch this*/

 

a.page{padding: 3px; border:1px solid #d3d3d3;text-decoration:none;}

a.activePage{color:red;}

</style>

<!--HTML CODE www.abu-iyad.com-->

<!--CONTENT-->

/*كود الصفحة الأولى*/

<div id="page1" class="contentPage">

 عنوان الصفحة الأولى

 

 محتوى الصفحة الأولى

</div>

/*كود الصفحة الثانية*/

<div id="page2" class="contentPage hiddenPage">

 عنوان الصفحة الثانية

 

 محتوى الصفحة الثانية

</div>

/*كود الصفحة الثالثة*/

<div id="page3" class="contentPage hiddenPage">

 عنوان الصفحة الثالثة

 

 محتوى الصفحة الثالثة

</div>

/*يمكنك زيادة صفحة أخرى عن طريق تكرار الكود السابق مع تغيير رقم الصفحة*/

<!--PAGINATOR-->

 

<a href="#page1" class="page activePage">1</a>

<a href="#page2" class="page">2</a>

<a href="#page3" class="page">3</a>

/*عند زيادة صفحة أخرى يجب عليك إضافة سطر أخر من الكود السابق مع تغيير رقم الصفحة*/

<!--SCRIPT CODE www.abu-iyad.com-->

<script>

function changePage(pageElement){

 $(".contentPage").addClass('hiddenPage');

 $id = $(pageElement).attr('href');

 $($id).removeClass('hiddenPage').show();

 $(".page").removeClass('activePage');

 $(pageElement).addClass('activePage');

}

 

$('.page').click(function(){changePage(this);});

 

</script>