28 فبراير 2016

مدون محترف اضافات بلوجر نصائح للمدونين إضافة سكربت عرض المواضيع حسب التسمية في بلوجر

إضافة سكربت عرض المواضيع حسب التسمية في بلوجر

إضافة سكربت عرض المواضيع حسب التسمية في بلوجر، وظيفة الإضافة هي عرض مواضيع المدونة في الصّفحة الرّئيسية استنادًا إلى تسمية مُحددّة

سكربت عرض المواضيع حسب التسميات في بلوجر -في الآونة الأخيرة وصلتنا الكثير من الرّسائل حول هذه الإضافة وكيفيّة تركيبها، وظيفة الإضافة هي عرض مواضيع المدونة في الصّفحة الرّئيسية استنادًا إلى تسمية مُحددّة.

يُعتبر هذا السكربت من أفضل سكربتات عرض المواضيع حسب التسميات، وهذا لعدة أسباب (مثل الشكل الخاص بعرض المواضيع أنيق ومتوافق مع جميع الشاشات، خفيف على المدونة ولا يجعلها بطيئة، يُمكن تكرار السكربت أكثر من مرّة في المدونة).

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


كيفية تثبيت سكربت عرض المواضيع حسب التسميات في بلوجر


أولًا ابحث عن الوسم </head> و اضف الكودين التاليين فوقه
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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:&#39;\f108&#39;;left:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 0 0 10px;color:#ff675c;}
.newarlinalabel2 h2:before{content:&#39;\f0c3&#39;;}.newarlinalabel3 h2:before{content:&#39;\f143&#39;;}
.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:&quot;\f104&quot;;font-family:FontAwesome;margin-top:3px;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
.newarlinalabel2 .index a:after{content:&quot;\f104&quot;;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:&quot;\f0e6&quot;;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:&quot;\f133&quot;;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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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=&quot;http://3.bp.blogspot.com/-PHzN2A92GHE/Vmim2TTkAII/AAAAAAAADZU/X42ioeFiyBo/s1600/newarlina_thumb.png&quot;,no_thumb2=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ1eOZ1Xb9oShfLrDUTDpK51_X2-Oon6TTqfEO34h-WcmwUjEnnueowYt7hFkFJyuV3Bcn2guXxaHVbL6QQEjBuDIzYmP30eDJztLGzow6fixwt-zYlGKHl_VBdDPHoX9fCwHfMC7Im0nG/s1600/newarlinathumb_small.png&quot;;
</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'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;مشاهد الكل&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</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'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;مشاهدة الكل&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
</b:if>

بعد إضافة الكود السابق، توجه إلى التخطيط سوف تجد هُناك آداتين جديدتين تم إضافتهم
قم بتحرير الآداة، ثمَّ أكتب أسم القسم المراد عرض مواضيعه بداخلها وسوف تظهر المواضيع.
إذا احتجت إلى مُساعدة قم بوضع تعليق على الموضوع وسوف يتم الرد بسرعة
مواضيع ذات صلة
إضافة سكربت عرض المواضيع حسب التسمية في بلوجر
4 / 5
بواسطة

هناك 30 تعليقًا :

  1. غير معرف29 فبراير, 2016

    شكرا لك اخى جميل جدا اول واحد امر ع التدوينه هدى

    ردحذف
    الردود
    1. لا شكر على واجب صديقي
      ولكنّ لم أفهم هذه (امر ع التدوينه هدى)

      حذف
  2. غير معرف29 فبراير, 2016

    موضوع مميز لدي طلب بصراحة هل يمكن إفادتي
    في الحقيقة أريد ثلاث أقسام خاصة بمدونتي وهو قسم طلبات عمل +قسم عرض عمل وقسم مساعدات إجتماعية لمن يريد وعسى الله نكون سببا في خير
    لكن المشكلة اني اريد إستمارة خاصة يملؤها الزائر وتعرض مباشرة في القسم الخاص فهل يمكن ذلك اخي الكريم وشكرا

    ردحذف
    الردود
    1. شكرًا لك صديقتي مرورك المميز
      بالنسبة لقسم الدعم يُمكنك فعل قسم مثل هذا http://mudwnp.blogspot.com/p/chat.html
      ويكون عبر عمل صفحة ثابتة
      بالنسبة لملئ استمار هذه صعبة في بلوجر لكنّ يُمكنك عمل صفحة اتصل بنا http://mudwnp.blogspot.com/p/c.html
      ويُمكن لأي أحد إرسال رسائل لك وسوف تصلك عبر البريد الإلكتروني

      حذف
  3. موضوع رائع جدا أخي منير بارك الله فيك
    تمت مراسلتك عبر نموذج المراسلة بخصوص طلب

    ردحذف
    الردود
    1. مرورك الرائع صديقي
      تم الرد عليك

      حذف
  4. موضوع جميل ومدونة متألقة بصاحبها وفقك الله اخي منير ننتظر جديدك .

    ردحذف
    الردود
    1. مرورك الجميل صديقي
      وفقك الله أنت أيضًا
      احترامي وتقديري لشخصك الكريم =r

      حذف
  5. اخي انا لدي مدونة بلوجر انشر فيها مواضيع منسوخة وحاط فيها اعلانات propeller ads ولدي مدونات اخرى فيها مواضيع حصرية وفيها اعلانات ادسنس يعني هل يمكن للمدونة الاولى ان تسبب لي المشاكل ??

    ردحذف
  6. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. نعتذر منك لا ننشر روابط إشهار

      حذف
  7. الردود
    1. صديقي لا تحتاج لشرح مفضل
      ممكن تقول لي ما هو لشيء الذي لم تفهمه
      وانا سوف اساعدك

      حذف
  8. مشكور الاخ الكريم
    لكن انا اود اضافة الاداة الاولى فقط المسماة قسم2
    و ايضا كيف اضيغ حلقات اليوتوب عبر سكريبت عرض الفيديوهات بارك الله فيك مشكور

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

      حذف
  9. غير معرف27 مارس, 2016

    سكربت رائع جدا
    تسلم ايدك اخى منير الغالى
    على كل ما تطرحه من مواضيع مميزة =q =q

    ردحذف
    الردود
    1. لا شكر على واجب صديقي
      مرورك الرائع

      حذف
  10. السلام عليكم ،،،

    ردحذف
  11. عندي مشكلة في قالب بلوجر يا ريت لو تقدر تساعدني ،، التعليقات لا تظهر أسفل الموضوع وقد حاولت معالجتها من خلال الودجت Blog1 في كود القالب لكن عندما تظهر التعليقات تظهر رموز وتتلخبط بقية العناصر في أسفل الصفحة ،،،

    ردحذف
    الردود
    1. اهلًا صديقي
      صعب تحديد المشكلة هكذا
      قد يكون بسبب تعديلات انت قمت بعلملها
      حاول تركيب نظام تعليقات اخر

      حذف
  12. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. اعتذر لمسح التعليق بسبب الرابط

      حذف
  13. تسلم الايادى يا اخي

    ردحذف
  14. اين اجد blog1..........

    ردحذف
    الردود
    1. اكتب بداية الكود او جزء منه وابحث عنه من خلال ctrl + f

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r