سكربت عرض المواضيع حسب التسميات في بلوجر -في الآونة الأخيرة وصلتنا الكثير من الرّسائل حول هذه الإضافة وكيفيّة تركيبها، وظيفة الإضافة هي عرض مواضيع المدونة في الصّفحة الرّئيسية استنادًا إلى تسمية مُحددّة.
يُعتبر هذا السكربت من أفضل سكربتات عرض المواضيع حسب التسميات، وهذا لعدة أسباب (مثل الشكل الخاص بعرض المواضيع أنيق ومتوافق مع جميع الشاشات، خفيف على المدونة ولا يجعلها بطيئة، يُمكن تكرار السكربت أكثر من مرّة في المدونة).
وتُعتبر من أهم الإضافات للمدونات الاخبارية والتي تحتوي على أقسام كثيرة. السكربت قد لا يُناسب حجم وشكل مدونتك لذلك يجب عليك أنّ تمتلك خبرة بسيطة في لغة البرمجة CSS من أجل التعديل على الأكواد الخاصّة بالستايل، حتى تستطيع التعديل على السكربت ليتناسب مع حجم القالب.
كيفية تثبيت سكربت عرض المواضيع حسب التسميات في بلوجر
أولًا ابحث عن الوسم </head> و اضف الكودين التاليين فوقه
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
/* Recent Post by Label */
.newarlinalabel1 ul,.newarlinalabel2 ul{list-style:none;margin:0;padding:0}
.newarlinalabel1 li,.newarlinalabel2 li{margin:0;padding:0;}
.newarlinalabel1 .widget,.newarlinalabel2 .widget{margin:0;padding:0}
.newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden}
.newarlinalabel1 h2,.newarlinalabel2 h2,.newarlinalabel3 h2{position:relative;margin:0;padding:15px 20px;font-size:12px;font-weight:700;text-transform:uppercase;color:#333;border:1px solid #e9e9e9;border-bottom:0}
.newarlinalabel2 h2,.newarlinalabel3 h2{margin:20px 0 0 0;}
.newarlinalabel1 h2:before,.newarlinalabel2 h2:before,.newarlinalabel3 h2:before{content:'\f108';left:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 0 0 10px;color:#ff675c;}
.newarlinalabel2 h2:before{content:'\f0c3';}.newarlinalabel3 h2:before{content:'\f143';}
.newarlinalabel1 .index,.newarlinalabel2 .index{font-size:10px;float:left;font-weight:400;}
.newarlinalabel1 .index a,.newarlinalabel2 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6}
.newarlinalabel2 .index a{color:#ef6c00;border-color:#ffa726}
.newarlinalabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent}
.newarlinalabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent}
.newarlinalabel1 .index a:after{content:"\f104";font-family:FontAwesome;margin-top:3px;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
.newarlinalabel2 .index a:after{content:"\f104";font-family:FontAwesome;margin-top:3px;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:6px}
.newarlinalabel2 span.newarlina_meta_comment a:hover{color:#38761d!important}
.newarlinalabel2 ul.newarlina_thumbs li a:hover,.newarlinalabel2 ul.newarlina_thumbs2 li a:hover{color:#ff675c;text-decoration:none}
.newarlina_right{width:280px;width:45.7%;float:right;margin:0;padding:0 0 0 20px;border-left:1px solid #e9e9e9}
.newarlina_left{width:250px;width:51.5%;float:left;margin:0;padding:0}
ul.newarlina_thumbs{margin:0;padding:0}
ul.newarlina_thumbs li,ul.newarlina_thumbs2{margin:0;padding:0}
ul.newarlina_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}
ul.newarlina_thumbs .cat_thumb img{height:auto;width:100%;transition:all 0.2s}
ul.newarlina_thumbs .cat_thumb img:hover{opacity:.9;}
ul.newarlina_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9}
ul.newarlina_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.newarlina_thumbs2 .cat_thumb2{float:right;margin:0 0 0 10px;width:62px;height:72px;overflow:hidden}
ul.newarlina_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s}
ul.newarlina_thumbs2 .cat_thumb2 img:hover{opacity:.9;}
span.newarlina_title{font-family:Droid Arabic Kufi,sans-serif;font-size:12px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none}
span.newarlina_title2{font-size:12px;line-height:1.4em;margin:0 0 3px}
span.newarlina_title a{color:#333}
span.newarlina_title a:hover{color:#ff675c;text-decoration:none}
span.newarlina_summary{display:block;line-height:1.6em;font-size:12px;text-overflow:ellipsis;margin:10px 0 0 0}
span.newarlina_meta{display:block;font-family:Droid Arabic Kufi,sans-serif;font-size:11px;font-weight:700;color:#aaa;text-transform:uppercase}
span.newarlina_meta a{color:#aaa;display:inline-block}
span.newarlina_meta_date,span.newarlina_meta_comment,span.newarlina_meta_more{display:inline-block;font-weight: 400;margin-left:10px}
span.newarlina_meta_comment a:before{content:"\f0e6";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
span.newarlina_meta_comment a:hover{color:#ff675c!important}
span.newarlina_meta_date:before{content:"\f133";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
ul.newarlina_thumbs2 li a:hover,ul.newarlina_thumbs li a:hover{color:#ff675c;text-decoration:none}
@media screen and (max-width:1024px) {
.newarlinalabel1 .widget-content, .newarlinalabel2 .widget-content {padding:20px 25px;}
.newarlina_right {width:50%;float:right;margin:0;padding:0;border-left:none}
.newarlina_left {width:46%;float:left;margin:0;padding:0;}
ul.newarlina_thumbs .cat_thumb {width:100%;height:auto;}
ul.newarlina_thumbs .cat_thumb img {width:100%;height:auto;}
ul.newarlina_thumbs li {margin:0;padding:0;}
span.newarlina_title2 {font-size:20px;line-height:1.2em;}
span.newarlina_summary {font-size:14px;}}
@media only screen and (max-width:768px){
.newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px 20px}
.newarlina_left{width:100%;float:right;margin:0;padding:0}
ul.newarlina_thumbs2 li{border-bottom:0}
span.newarlina_summary,.newarlina_right{display:none}
span.newarlina_title{margin:0 0 5px}
ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}
span.newarlina_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:480px){
#newarlinalabel1-wrapper,#newarlinalabel2-wrapper{display:none}}
@media only screen and (max-width:320px){
.newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px 20px}
.newarlinalabel1 h2,.newarlinalabel2 h2{padding:10px 20px 1px 20px}
.newarlina_left{width:100%;float:right;margin:0;padding:0}
ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.newarlina_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px) {
.newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px}
.newarlinalabel1 h2,.newarlinalabel2 h2{padding:10px 10px 1px 10px}
.newarlina_left{width:100%;float:right;margin:0;padding:0}
ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.newarlina_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>
كود جافا سكريبت
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="يناير",g[2]="فبراير",g[3]="مارس",g[4]="أبريل",g[5]="مايو",g[6]="يونيو",g[7]="يوليو",g[8]="أغسطس",g[9]="سبتمبر",g[10]="أكتوبر",g[11]="نوفمبر",g[12]="ديسمبر",document.write('<span class="newarlina_right">'),document.write('<ul class="newarlina_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="cat_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="newarlina_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="newarlina_meta">'),1==showpostdate&&(v=v+'<span class="newarlina_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 تعليقات"==l&&(l="1 تعليقات"),"0 تعليقات"==l&&(l="0 تعليقات"),showcomment='<span class="newarlina_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="newarlina_meta_more"><a href="'+n+'" class="url" target ="_top">إقرأ المزيد...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="newarlina_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="newarlina_left">'),document.write('<ul class="newarlina_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="cat_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="newarlina_title newarlina_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="newarlina_meta newarlina_meta2">'),1==showpostdate2&&(v=v+'<span class="newarlina_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 تعليق"==l&&(l="1 تعليقات"),"0 تعليق"==l&&(l="0 تعليقات"),showcomment='<span class="newarlina_meta_comment newarlina_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="newarlina_meta_more newarlina_meta_more2"><a href="'+n+'" class="url" target ="_top">إقرأ المزيد...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")}
//]]>
</script>
<script type='text/javascript'>
var numposts=1,numposts2=7,showpostthumbnails=!0,showpostthumbnails2=!1,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=280,thumb_height=200,thumb_width2=62,thumb_height2=62,no_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8lzJ5dDXg3LFXZJSdwiufWLpg97CNpt2Sq8aRWJMH4jec6pnqUue330O1ssGHR8zHpoOYTNNiqNfDhxYYFLt11T3i0Qn4aeIgdbeV1nOQYj5WKbG_DQBX7NqpKMxP44dutqa6anXgiz5o/s1600/newarlina_thumb.png",no_thumb2="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ1eOZ1Xb9oShfLrDUTDpK51_X2-Oon6TTqfEO34h-WcmwUjEnnueowYt7hFkFJyuV3Bcn2guXxaHVbL6QQEjBuDIzYmP30eDJztLGzow6fixwt-zYlGKHl_VBdDPHoX9fCwHfMC7Im0nG/s1600/newarlinathumb_small.png";
</script>
</b:if>
</b:if>
في الكود السابق يوجد جزء المُعلَم باللون الأحمر دعوني أشرحه لكم
numposts2=7: من خلال هذا الوسم تستطيع التحكم بعدد المواضيع
numchars=150: من خلال هذا الوسم تستطيع التحكم بعدد الكلمات الخاصة بالوصف
الآن من أجل أنّ تعمل الإضافة بالشكل الصحيح يجب عليك إضافة الكود التالي فوق كود Blog1
<b:section class='main' id='main' maxwidgets='3' showaddelement='yes'><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='newarlinalabel1-wrapper'>
<b:section class='newarlinalabel1' id='newarlinalabel1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML80' locked='false' title='أنظمة التشغيل' type='HTML'>
<b:includable id='main'>
<h2><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>مشاهد الكل</a></span><data:content/></h2>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='newarlinalabel2-wrapper'>
<b:section class='newarlinalabel2' id='newarlinalabel2' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML81' locked='false' title='علوم وفيزياء' type='HTML'>
<b:includable id='main'>
<h2><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>مشاهدة الكل</a></span><data:content/></h2>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>
بعد إضافة الكود السابق، توجه إلى التخطيط سوف تجد هُناك آداتين جديدتين تم إضافتهم
قم بتحرير الآداة، ثمَّ أكتب أسم القسم المراد عرض مواضيعه بداخلها وسوف تظهر المواضيع.
إذا احتجت إلى مُساعدة قم بوضع تعليق على الموضوع وسوف يتم الرد بسرعة
إضافة سكربت عرض المواضيع حسب التسمية في بلوجر
4
/
5
بواسطة
مدون محترف
=qشكرا
ردحذفلا شُكر على واجب صديقي =r
حذفشكرا لك اخى جميل جدا اول واحد امر ع التدوينه هدى
ردحذفلا شكر على واجب صديقي
حذفولكنّ لم أفهم هذه (امر ع التدوينه هدى)
موضوع مميز لدي طلب بصراحة هل يمكن إفادتي
ردحذففي الحقيقة أريد ثلاث أقسام خاصة بمدونتي وهو قسم طلبات عمل +قسم عرض عمل وقسم مساعدات إجتماعية لمن يريد وعسى الله نكون سببا في خير
لكن المشكلة اني اريد إستمارة خاصة يملؤها الزائر وتعرض مباشرة في القسم الخاص فهل يمكن ذلك اخي الكريم وشكرا
شكرًا لك صديقتي مرورك المميز
حذفبالنسبة لقسم الدعم يُمكنك فعل قسم مثل هذا http://mudwnp.blogspot.com/p/chat.html
ويكون عبر عمل صفحة ثابتة
بالنسبة لملئ استمار هذه صعبة في بلوجر لكنّ يُمكنك عمل صفحة اتصل بنا http://mudwnp.blogspot.com/p/c.html
ويُمكن لأي أحد إرسال رسائل لك وسوف تصلك عبر البريد الإلكتروني
موضوع رائع جدا أخي منير بارك الله فيك
ردحذفتمت مراسلتك عبر نموذج المراسلة بخصوص طلب
مرورك الرائع صديقي
حذفتم الرد عليك
موضوع جميل ومدونة متألقة بصاحبها وفقك الله اخي منير ننتظر جديدك .
ردحذفمرورك الجميل صديقي
حذفوفقك الله أنت أيضًا
احترامي وتقديري لشخصك الكريم =r
اخي انا لدي مدونة بلوجر انشر فيها مواضيع منسوخة وحاط فيها اعلانات propeller ads ولدي مدونات اخرى فيها مواضيع حصرية وفيها اعلانات ادسنس يعني هل يمكن للمدونة الاولى ان تسبب لي المشاكل ??
ردحذفلا صديقي
حذفلا تسبب اي مشاكل
أزال أحد مشرفي المدونة هذا التعليق.
ردحذفنعتذر منك لا ننشر روابط إشهار
حذفممكن شرح مفصل
ردحذفصديقي لا تحتاج لشرح مفضل
حذفممكن تقول لي ما هو لشيء الذي لم تفهمه
وانا سوف اساعدك
مشكور الاخ الكريم
ردحذفلكن انا اود اضافة الاداة الاولى فقط المسماة قسم2
و ايضا كيف اضيغ حلقات اليوتوب عبر سكريبت عرض الفيديوهات بارك الله فيك مشكور
أهلًا صديقي
حذفيُمكنك مسح القسم الأول من خلال كود الجافا
بالنسبة لسكربت عرض الفيديوهات إن شاء الله اقوم بطرح اكثر من سكريبت لأكثر من شكل
سكربت رائع جدا
ردحذفتسلم ايدك اخى منير الغالى
على كل ما تطرحه من مواضيع مميزة =q =q
لا شكر على واجب صديقي
حذفمرورك الرائع
السلام عليكم ،،،
ردحذفوعليكم السلام
حذفعندي مشكلة في قالب بلوجر يا ريت لو تقدر تساعدني ،، التعليقات لا تظهر أسفل الموضوع وقد حاولت معالجتها من خلال الودجت Blog1 في كود القالب لكن عندما تظهر التعليقات تظهر رموز وتتلخبط بقية العناصر في أسفل الصفحة ،،،
ردحذفاهلًا صديقي
حذفصعب تحديد المشكلة هكذا
قد يكون بسبب تعديلات انت قمت بعلملها
حاول تركيب نظام تعليقات اخر
أزال أحد مشرفي المدونة هذا التعليق.
ردحذفاعتذر لمسح التعليق بسبب الرابط
حذفتسلم الايادى يا اخي
ردحذفالعفو صديقي =r
حذفاين اجد blog1..........
ردحذفاكتب بداية الكود او جزء منه وابحث عنه من خلال ctrl + f
حذفيسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r