30 مارس 2016

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

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

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

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

السكربت عبارة عن صورة رئيسية في البداية و ثمانية مواضيع على شكل شبكة ويُمكن زيادتهم أو انقاصهم على حسب ما يُناسبك، وهو خفيف على المدونة ولن يؤثر على سُرعتها. يُمكنك مُعاينة شكل السكريبت من خلال الزر التالي.


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

ادخل إلى لوحة تحكم بلوجر
انقر على قالب
ثم انقر على تحرير HTML

ابحث عن الوسم </head> و اضف الكود التالي فوقه
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* CSS Recent Post by Label */
#HTML90{margin-right: 6px;}
#HTML91{margin-right: 6px;}
.mudwnplabel1 ul,.mudwnplabel2 ul{list-style:none;margin:0;padding:0}
.mudwnplabel1 li,.mudwnplabel2 li{margin:0;padding:0}
.mudwnplabel1 .widget,.mudwnplabel2 .widget{font-family:'Droid Arabic Kufi',sans-serif!important;font-family:13px;margin:0;padding:0}
.mudwnplabel1 .widget-content,.mudwnplabel2 .widget-content{padding:0;margin:0;word-wrap:break-word;overflow:hidden}
.mudwnplabel1 h2,.mudwnplabel2 h2{position:relative;margin:0;padding:15px 0;font-size:12px;font-weight:700;border-bottom:1px solid #ddd}
.mudwnplabel2 h2{margin:20px 0 0}
.data-title:before{content:'\f143';left:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:400;margin:0 0 0 10px;color:#07ACEC}
.data-title{margin-right: 6px;color:#07ACEC;border:1px solid #07ACEC;padding:3px 8px;border-radius:2px;margin-left:10px;font-size:10px;font-weight:700}
.mudwnplabel1 .index,.mudwnplabel2 .index{font-size:10px;font-weight:700}
.mudwnplabel1 .index a,.mudwnplabel2 .index a{color:#07ACEC;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6;color:#07ACEC;border-color:#07ACEC}
.mudwnplabel1 .index a:hover,.mudwnpabel2 .index a:hover{background:#07ACEC;color:#fff;border-color:transparent}
.mudwnplabel1 .index a:after{content:"\f104";font-family:FontAwesome;font-style:normal;font-weight:700;text-decoration:inherit;padding-right:5px}
.mudwnplabel2 .index a:after{content:"\f104";font-family:FontAwesome;font-style:normal;font-weight:700;text-decoration:inherit;padding-right:6px}
.mudwnplabel2 span.mudwnp_meta_comment a:hover{color:#07ACEC!important}
.mudwnplabel2 ul.mudwnp_thumbs li a:hover,.mudwnplabel2 ul.mudwnp_thumbs2 li a:hover{color:#07ACEC;text-decoration:none}
.mudwnp_right{margin:0;padding:0;border-left:1px solid #fff}
.mudwnp_right .cat_thumb{float:right;margin-left:10px!important}
.mudwnp_left{float:right;margin-top:-35px;padding:0}
ul.mudwnp_thumbs{margin:0;padding:0}
ul.mudwnp_thumbs li,ul.mudwnp_thumbs2{margin:0;padding:0}
ul.mudwnp_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}
ul.mudwnp_thumbs .cat_thumb img{border-radius: 4px;margin-right: 2px;height: 160px;width:100%;transition:all .2s}
ul.mudwnp_thumbs .cat_thumb img:hover{opacity:.9}
ul.mudwnp_thumbs2 li{margin:0 0 10px;padding:0 0 10px;width:27%;overflow:hidden;min-height:74px;float:right;margin-left:10px!important;border-bottom:1px solid #e9e9e9}
ul.mudwnp_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.mudwnp_thumbs2 .cat_thumb2{float:right;margin:0 0 0 10px;height:72px;overflow:hidden}
ul.mudwnp_thumbs2 .cat_thumb2 img{border-radius: 3px;margin-right: 2px;height:60px;transition:all .2s}
ul.mudwnp_thumbs2 .cat_thumb2 img:hover{opacity:.9}
span.mudwnp_title{font-family:'Droid Arabic Kufi',sans-serif;font-size:12px!important;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none;max-height:45px;overflow:hidden}
span.mudwnp_title2{font-size:12px!important;font-weight:700!important;line-height:1.4em;margin:0 0 3px;max-height:38px}
span.mudwnp_title a{color:#333}span.mudwnp_title a:hover{color:#07ACEC;text-decoration:none}
span.mudwnp_summary{display:block;line-height:1.6em;font-size:11px;width: 87%;text-overflow:ellipsis;margin:10px 0 0}
span.mudwnp_meta{display:block;font-family:'Droid Arabic Kufi',sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.mudwnp_meta a{color:#aaa;display:inline-block}
span.mudwnp_meta_date,span.mudwnp_meta_comment,span.mudwnp_meta_more{display:inline-block;margin-left:10px}
span.mudwnp_meta_comment a:before{content:"\f0e6";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-left:5px}
span.mudwnp_meta_comment a:hover{color:#07ACEC!important}
span.mudwnp_meta_date:before{content:"\f133";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-left:5px}
ul.mudwnp_thumbs2 li a:hover,ul.mudwnp_thumbs li a:hover{color:#07ACEC;text-decoration:none}
@media only screen and (max-width:768px){.tanggal i,.tags i{color:#ff8000!important}.mudwnp_left{width:100%;float:right;margin:0;padding:0}span.mudwnp_title2{max-height:33px!important}ul.mudwnp_thumbs2 li{border-bottom:0;width:58%;overflow:hidden;min-height:60px}.mudwnplabel1 .widget-content,.mudwnplabel2 .widget-content{margin-top:10px}span.mudwnp_summary,.mudwnp_right{display:none}span.mudwnp_title a{font-weight:700}span.mudwnp_title{margin:0 0 5px}ul.mudwnp_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}span.mudwnp_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:320px){ul.mudwnp_thumbs2 .cat_thumb2 img{width:80px;height:50px}.mudwnp_left{width:100%;float:right;margin:0;padding:0}ul.mudwnp_thumbs li{margin:0 0 10px;padding:0 0 10px}span.mudwnp_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px){.mudwnp_left{width:100%;float:right;margin:0;padding:0}ul.mudwnp_thumbs li{margin:0 0 10px;padding:0 0 10px}span.mudwnp_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>

الآن الخطوة الثانية وهي إضافة كود جافا سكربت فوق </head> أيضًا
<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="mudwnp_right">'),document.write('<ul class="mudwnp_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="mudwnp_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="mudwnp_meta">'),1==showpostdate&&(v=v+'<span class="mudwnp_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 تعليقات"==l&&(l="1 تعليقات"),"0 تعليقات"==l&&(l="0 تعليقات"),showcomment='<span class="mudwnp_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="mudwnp_meta_more"><a href="'+n+'" class="url" target ="_top">إقرأ المزيد...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="mudwnp_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="mudwnp_left">'),document.write('<ul class="mudwnp_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="mudwnp_title mudwnp_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="mudwnp_meta mudwnp_meta2">'),1==showpostdate2&&(v=v+'<span class="mudwnp_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 تعليق"==l&&(l="1 تعليقات"),"0 تعليق"==l&&(l="0 تعليقات"),showcomment='<span class="mudwnp_meta_comment mudwnp_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="mudwnp_meta_more mudwnp_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=9,showpostthumbnails=!0,showpostthumbnails2=!0,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=310,thumb_height=160,thumb_width2=100,thumb_height2=55,no_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjE_Uy50rmDqlKYXNerEFozzjaJwhpW-SpuMOim1Q9dSed72-EStKGFX2YsISare0Jt-mI8jJ_dUGCefc0juIiwirOt3AGG4WO6f0SBQQwwxJ8oAfDpYdnkH68kgDFzR0DpPVY9DRJOQg/s320/mudwnp_thumb.png",no_thumb2="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDO2plt3O_ZAeKean2exI7kGkHfDp3WKU_8G0Kpdx366WqCquW8uCCBP3kHSqYyAp8R7v-UPupQLyMiN4iWKKQ8hSVJWwyik1xJhcqJv4w8ijh-5co6sauk9E4SijllhzpQcAcZuDfKg4/s1600/mudwnpthumb_small.png";
</script>

</b:if>
</b:if>

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

الخطوة الثانية وهي إضافة كود السكربت

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <div id='mudwnplabel1-wrapper'>
        <b:section class='mudwnplabel1' id='mudwnplabel1' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML90' locked='false' title='Berita' type='HTML'>
            <b:includable id='main'>
<h2><span class='data-title'><data:content/></span><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;مشاهدة الكل&lt;/a&gt;</span></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='mudwnplabel2-wrapper'>
        <b:section class='mudwnplabel2' id='mudwnplabel2' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML91' locked='false' title='Info Menarik' type='HTML'>
            <b:includable id='main'>
<h2><span class='data-title'><data:content/></span><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;مشاهدة الكل&lt;/a&gt;</span></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
بواسطة

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

  1. شكرا موضوع رائع شكرا لحضرتك ولكن فى سوال
    فى التدوينة بتاعت حضرتك بتاعت السيو الاكواد الى انت كتبها احتها بالترتيب زى ماانت حاتطها ولا اى حاجة

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

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

      حذف
    3. لا ننشر روابط إشهار صديقي

      حذف
  2. غير معرف01 أبريل, 2016

    موضوعك رائع حبيبي
    ربنا يوفقك

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

    ردحذف
    الردود
    1. وعليكم السلام
      صراحة لم افهم قصدك جيدًا ممكن توضحلي أكثر

      حذف
    2. اريد اضافة الاداة الاولى االمسمات نصائح المستقلين اسفل المشاراكات في الصفحة الرئيسة و تكون ثابتة

      حذف
    3. اقرأ الموضوع في الأعلى سوف تجد رابط السكريبت الأول

      حذف
  4. إصدرا رائع أحس من الأول

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

      حذف
  5. غير معرف04 أبريل, 2016

    الله ينور عليك يا منير
    تسلم ايدك يالغالى مجهود رائع جدا

    ردحذف
  6. اخى لوغيرت اسم المدونة بعد فتحها بشهر فليوجد مشكلة للمدونة فى الارشفة او اى شيئ

    ردحذف
    الردود
    1. نعم صديقي
      سوف تمسح ارشفة كل شي وكأن المدونة جديدة

      حذف
  7. غير معرف05 أبريل, 2016

    سكريبت جميل حسنا أخي اريد إضافته في قالبي لكن كيف أجعله غير ضاهر داخل التدوينة فمن قبل أضفت سكريبت لكن عندما دخلت للتدوينة وجدت أن السكريبت يظهر وانا اريده يظهر في الصفحة الرئيسية فقط وعند الضغط على احد التدوينات ندخل للتدوينة دون ظهور السكريبت بالكامل x=

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

      حذف
    2. غير معرف09 أبريل, 2016

      q= واو هذا ما كنت ابحث عنه إذن مشكور جدا أخي

      حذف
    3. لا شُكر على واجب =e

      حذف
  8. غير معرف06 أبريل, 2016

    موضوع رائع متألق دائماً حملة_ شاركنا_ لندعمك

    ردحذف
  9. دائما رائع وفقك الله للافضل

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

    ردحذف
    الردود
    1. أهلًا صديقي
      ادخل إلى موقع المصمم تجده في الفوتر وابحث عنه

      حذف
  11. انا مش عارف اعمل الخطوه الثالث

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

      حذف
  12. جزاك الله اخي خير الجزاء . حقاً مدون محترف .
    اريد فقط ان ااعرف هل هذه الاداه تفاعليه مع الهواتف تتناسق مع الهواتف ام تظهر كما هيا علي الحاسبو وتخرب مظهر المدونه ؟؟

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

      حذف
  13. اخي اخر حطوه بيجيب خطاء ممكن مكان وضع الكود

    ردحذف
    الردود
    1. بسبب إضافة الكود في مكان خاطيء
      حاول إضافته في مكان صحيح كما هو موضح في الشرح

      حذف
  14. سلام عليكم اخي جزاك الله خيرا على هذه الضاافة ، كنت ابحث عنها ... لكن هل هو متجاوب على الموبايل ؟
    انا لدي 2 سكريبت للتسميات في قالبي و اريد اضافة الثالث لكن اخاف ان تصبح المدونة بطيئة !! بماذا تنصحني
    اردت ان احذف واحد منهم و هو الذي لا يُظهر الصور بجانب المواضيع و لم اعرف كيف

    ردحذف
    الردود
    1. نعم صديقي هو متجاوب
      بخصوص الحذف ..إلخ
      هذا الأمر عائد إليك

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

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

      حذف
  15. غير معرف05 يونيو, 2016

    السلام عليكم اضافة رائعة ومميزة كالعادة دائما متميز لكن لم أفهم الصورة أين أضع الكود الثالث ؟؟؟؟

    ردحذف
    الردود
    1. أهلًا صديقي
      يجب وضع الكود أسفل الاكواد الموجودة في الصورة
      ابحث عنهم من خلال ctrl + f

      حذف
  16. موضوع رائع أخي واصل

    ردحذف
  17. غالى بعد اضافة الكود ظهرت بهذا الشكل

    https://s31.postimg.org/wlk6t2f8r/image.png

    ردحذف
    الردود
    1. لأنّ اللغة في إعدادات مدونتك اجنبية

      حذف
  18. اخي انا لما وضعتها خرجت لي في الاسفل المواضيع وانا اريدقا في الاعلي طما في المعاينة هل يمكن

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

      حذف

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