-->
Th3 Developers Th3 Developers
randomposts

آخر الأخبار

randomposts
randomposts
جاري التحميل ...
randomposts

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

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

في موضوعنا السابق قُمنا بطرح إضافة سكربت عرض المواضيع حسب التسمية في بلوجر، اليوم سوف نُشارككم نفس السكربت ولكن بشكل مختلف، حيث من خلال السكربت الجديد تستطيع التحكم به بشكل كامل كتغيير شكل عرض المواضيع وزيادة عدد المواضيع والكثير من الأمور على حسب ذوقك وما يُناسب مدونتك ولكنّك تحتاج إلى خبرة بسيطة في كل من 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/AVvXsEiXtjGAvDEGBjcQAOuqXnX3hu7bgo78AWLaVBmw8EZEPn-1fjHxc-GNfYLFCOVKNs-bw0S81vQ5sYzOLBHvZ4D3Sj3tgN4VfsXA8kF-KVNO00-rIOj18Qaur8E7ly_-9VayGHWRIALyjlc/s320/mudwnp_thumb.png",no_thumb2="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUCtRPZRLu9TI_MkhPOlFdqmnoMtKO-7zSZMZqZBs-X9qe6buzoU6V_5uwjZKrxvLqQ84i4PPZOAz64UZfZFv0wJmqT46ELAg2Di7hsvxLPvrqlVbAslfVvZ9W6rW12Ta6Hrb2oCpGMwE/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>

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

أتمنى أنّ يكون أعجبكم السكربت وانتظرونا بقوالب بلوجر جديدة إن شاء الله.
وإذا احتجت إلى أي مُساعدة في تركيب السكربت أترك تعليق.

بقلم : المطور

بقلم : المطور

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

التعليقات



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

إتصل بنا

عن الموقع

نقدم لكم : افضل الحلقات التقنية على اليوتيوب ، في سلسلة من الدروس الحصرية و مراجعة التطبيقات و الالعاب الخارقة و الفريدة ، مع تقديم كورسات ربحية من تقديم المطور .

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

سنعرض عليك أفضل كورسات و دورات الربح عن موقع المطورين ، حيث نتطرق الى مواقع ربحية موثوقة مع تقديم إستراتيجيات من إبتكار المطور ، و نقدم لك أيضا أفضل خطط الربح من أدسنس .

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

تابعنا على الفيسبوك

جميع الحقوق محفوظة

Th3 Developers

2017