طبعا الكثير من الناس تبحث عن إضافة بلوجر لتقسيم المقال إلى أجزاء ، و طبعا في هذا المقال سأعيكم إضافتين ناجحتين ، و كل ما عليك هو إستعمالهم على قالبك الذي يكون خالي من الاخطاء ، و في حال حدوث مشاكل جرب استعمالهم على قالب ثاني ، فقد يكون هناك تضارب بين السكربتات لانك ستضيف شيء جديد على قالبك ، و بالنسبة لكلا الاضافتين يمكنك اما استعمال الاكواد مباشرة داخل Html التدوينة او وضعهم في القالب كما تريد .
خبر مفرح لكم ؟
كان الكثيرون يبحثون عن طريقة وضع هاته الاضافة مع التحديث ، لكن لا حاجة لذلك بعد اليوم بما أن جوجل أدسنس قام بوضع قوانين جديدة لان المنافسة إشتدت عليه ، فمن الاَن و صاعداََ يسمح لك جوجل أدسنس بوضع ما شئت من الاعلانات على صفحتك بشرط واحد ان لا يكون محتوى الصفحة أكبر من محتوى الاعلانات ، لذا يمكننا إدراج إلعلانين مع كل صفحة و لا نحتاج التحديث ، فكل ما يتنقل المستخدم يظهر معه اعلانين ، و سأقول لك مكان وضع الاعلانين في الاكواد لكي أسهل عليك فهم الفكرة .طريقة تركيب الإضافة الأولى
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>إبحث عن وسم ]]></b:skin و أضف الكود التالي قبله
.post-pagination {إبحث عن </head> او /head و ضع الكود التالي قبله
margin: 40px auto;
text-align: center;
width: 100%;
float:left;
}
.button_1, .button_2, .button_3 {
border: 2px solid #f4655f;
font-weight: 900;
padding: 6px 36px;
color:#f4655f;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #f4655f;
color: #fff;
text-decoration: none;
}
<script type="text/javascript">الان ادخل الى موضوع جديد ثم قم بنسخ الكود التالي في خانة Html
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>
<div class="content_1">طبعا التعديل عليه و إدراجه في الصفحة يحتاج بعض المهارة و ليس سهل ، فقط قم بكاتبة موضوع كامل قبل ادراج هذا الكود ، ثم انتقل الى خانة Html و ضع هذا الكود في الاسفل ، ثم قم بنسخ الجزء الاولى من المقال الذي تريده و ضعه في مكان محتوى الصفحة الاولى ثم الجزء الثاني و الثالث و راعي كل وسم فيما يخص Div و كل شيء ، و هناك نسخة اخرى منه من 4 صفحات يمكنك تجربتها مباشرة على صفحة بلوجر بدون اضافة اكواد في القالب Dev Post
أضف محتوى الصفحة الاولى
</div>
<div class="content_2" style="display: none;">
أضف محتوى الصفحة الثانية
</div>
<div class="content_3" style="display: none;">
أضف محتوى الصفحة الثالثة
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>
طريقة تركيب الاضافة الثانية
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>إبحث عن وسم ]]></b:skin و أضف الكود التالي قبله
<style>إبحث عن </head> او /head و ضع الكود التالي قبله
.hiddenPage{display:none;}
a.page{padding: 3px; border:1px solid #d3d3d3;text-decoration:none;}
a.activePage{color:red;}
</style>
<script>الان ادخل الى موضوع جديد ثم قم بنسخ الكود التالي في خانة Html
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 CODE www.amni8.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>
/*عند زيادة صفحة أخرى يجب عليك إضافة سطر أخر من الكود السابق مع تغيير رقم الصفحة*/
EmoticonEmoticon