جلب المواضيع حسب القسم ببلوجر

جلب المواضيع حسب القسم فى بلوجر

فى هذا الدرس سوف نتعلم كيفية جلب مواضيع بلوجر حسب القسم من خلال اللغات التالية (html - css - javascript - xml - json).

خطوات جلب المواضيع حسب القسم ببلوجر

1- تسجيل الدخول لمدونتك على بلوجر.

2- الان نحن فى لوحة التحكم الخاصة ببلوجر سوف تجد على يمين الصفحة كلمة المظهر قم بالضغط عليها ثم قم بالضغط على السهم الذى يتجه الى الاسفل بجوار كلمة تخصيص فى وسط الصفحة بعد ذلك قم بالضغط على كلمة تعديل HTML.

3- سوف تظهر امامنا جميع اكواد مدونتنا سوف نضع تلك الاكواد فى المكان الذى نريده فليكن بعد الصفحات الرئيسية او بعد جميع التدوينات المهم ان يكون بين وسم body قمنا بنسخ هذا الكود ولصقه فى مدونتك.

<!-- start blog-specific-label -->

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div class='blog-specific-label'>

<b:section id='specific-label' name='عرض المقالات حسب القسم'>

<b:widget id='Text53' locked='false' title='التصنيف الاول' type='Text' version='2' visible='true'>

<b:widget-settings>

<b:widget-setting name='content'/>

</b:widget-settings>

<b:includable id='main'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

</b:section>

</div>

</b:if>

</b:if>

<!-- end blog-specific-label -->

4- سوف نقوم بوضع اكود ال javascript and json قم بنسخ تلك الاكواد ثم وضعها فى اسفل الصفحة قبل وسم </body>.

<!-- start blog-specific-label -->

<script>

//<![CDATA[

var finalSpecLabel = "";

var getMainTitle = document.querySelector('.blog-specific-label .title').innerHTML;

function runLabel(json) {// start json


for (var i=0; i<json.feed.entry.length; i++) { // start loop


var labelTitle = json.feed.entry[i].title.$t;

var labelHref = json.feed.entry[i].link[4].href;

var labelImg = json.feed.entry[i].media$thumbnail.url.replace("s72-c/","");


finalSpecLabel += "<div><img src='"+ labelImg +"'/><a href='"+ labelHref +"'>"+labelTitle+"</a></div>";

}// end loop


document.querySelector('.blog-specific-label .widget-content').innerHTML = finalSpecLabel;

} // end json

var labelHref = "<script src='https://ararblearnblogger.blogspot.com/feeds/posts/default/-/"+getMainTitle+"?alt=json-in-script&callback=runLabel&max-results=5'></"+"script>";

document.write(labelHref);

//]]>

</script>

<!-- end blog-specific-label -->

5- بعد ذلك سوف نقوم بوضع اكولد ال css بين وسم b:skin قم بنسخ تلك الاكواد ووضعها فى قلبك.

/* start blog-specific-label */

.blog-specific-label {text-align:center;border-bottom:2px solid #000;}

.blog-specific-label .widget-content div {width:33.3333%;display:inline-block;}

.blog-specific-label .widget-content div img{width:90%;}

.blog-specific-label .widget-content div a{display:block;}

/* end blog-specific-label */

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

فيديو توضيحى