إضافة مواضيع ذات تسمية بشكل جديد
السلام عليكم ورحمة الله تعالى وبركاته ومرحبا بكم في درس جديد على قسم إضافات
بلوجر بمدونة technomee, درس اليوم هو حول إضافة سكربت يعرض مواضيع حسب التسمية
بشكل جديد وحصري, الاضافة متجاوبة, يمكن استعمالها للمدونين الذين يريدون تقسيم
قالبهم الى مشاركات تظهر حسب كل تسمية مما يسهل على الزائر الوصول الى التدوينات
للقسم الذي يريده بسهولة.
طريقة التركيب
أولا نبحث عن الوسم </head> وإلصق الأكواد التالية فوقها مباشرة
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
/* CSS Recent Post by Label */
.technomeelabel1 ul,.technomeelabel2 ul{list-style:none;margin:0;padding:0}
.technomeelabel1 li,.technomeelabel2 li{margin:0;padding:0}
.technomeelabel1 .widget,.technomeelabel2 .widget{;margin:0;padding:0}
.technomeelabel1 .widget-content,.technomeelabel2 .widget-content{padding:0;margin:0;word-wrap:break-word;overflow:hidden}
.technomeelabel1 h2,.technomeelabel2 h2{position:relative;margin:0;padding:15px 0;font-size:13px;font-weight:400;border-bottom:1px solid #ddd}
.technomeelabel2 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{color:#07ACEC;border:1px solid #07ACEC;padding:3px 8px;border-radius:2px;margin-left:10px}
.technomeelabel1 .index,.technomeelabel2 .index{font-size:13px;font-weight:400}
.technomeelabel1 .index a,.technomeelabel2 .index a{color:#07ACEC;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6;color:#07ACEC;border-color:#07ACEC}
.technomeelabel1 .index a:hover,.technomeeabel2 .index a:hover{background:#07ACEC;color:#fff;border-color:transparent}
.technomeelabel1 .index a:after{content:"\f104";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:5px}
.technomeelabel2 .index a:after{content:"\f104";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:6px}
.technomeelabel2 span.technomee_meta_comment a:hover{color:#07ACEC!important}
.technomeelabel2 ul.technomee_thumbs li a:hover,.technomeelabel2 ul.technomee_thumbs2 li a:hover{color:#07ACEC;text-decoration:none}
.technomee_right{margin:0;padding:0;border-left:1px solid #fff}
.technomee_right .cat_thumb{float:right;margin-left:10px!important}
.technomee_left{float:right;margin-top:-35px;padding:0}
ul.technomee_thumbs{margin:0;padding:0}
ul.technomee_thumbs li,ul.technomee_thumbs2{margin:0;padding:0}
ul.technomee_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}
ul.technomee_thumbs .cat_thumb img{height:auto;width:100%;transition:all .2s}
ul.technomee_thumbs .cat_thumb img:hover{opacity:.9}
ul.technomee_thumbs2 li{margin:0 0 10px;padding:0 0 10px;width:34.5%;overflow:hidden;min-height:60px;float:right;margin-left:10px!important;border-bottom:1px solid #e9e9e9}
ul.technomee_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.technomee_thumbs2 .cat_thumb2{float:right;margin:0 0 0 10px;height:72px;overflow:hidden}
ul.technomee_thumbs2 .cat_thumb2 img{height:60px;transition:all .2s}
ul.technomee_thumbs2 .cat_thumb2 img:hover{opacity:.9}
span.technomee_title{font-size:18px!important;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none;max-height:45px;overflow:hidden}
span.technomee_title2{font-size:14px!important;font-weight:400!important;line-height:1.4em;margin:0 0 3px;max-height:38px}
span.technomee_title a{color:#333}span.technomee_title a:hover{color:#07ACEC;text-decoration:none}
span.technomee_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0}
span.technomee_meta{display:block;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.technomee_meta a{color:#aaa;display:inline-block}
span.technomee_meta_date,span.technomee_meta_comment,span.technomee_meta_more{display:inline-block;margin-left:10px}
span.technomee_meta_comment a:before{content:"\f0e6";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-left:5px}
span.technomee_meta_comment a:hover{color:#07ACEC!important}
span.technomee_meta_date:before{content:"\f133";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-left:5px}
ul.technomee_thumbs2 li a:hover,ul.technomee_thumbs li a:hover{color:#07ACEC;text-decoration:none}
@media only screen and (max-width:768px){.tanggal i,.tags i{color:#ff8000!important}.technomee_left{width:100%;float:right;margin:0;padding:0}span.technomee_title2{max-height:33px!important}ul.technomee_thumbs2 li{border-bottom:0;width:58%;overflow:hidden;min-height:60px}.technomeelabel1 .widget-content,.technomeelabel2 .widget-content{margin-top:10px}span.technomee_summary,.technomee_right{display:none}span.technomee_title a{font-weight:700}span.technomee_title{margin:0 0 5px}ul.technomee_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}span.technomee_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:320px){ul.technomee_thumbs2 .cat_thumb2 img{width:80px;height:50px}.technomee_left{width:100%;float:right;margin:0;padding:0}ul.technomee_thumbs li{margin:0 0 10px;padding:0 0 10px}span.technomee_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px){.technomee_left{width:100%;float:right;margin:0;padding:0}ul.technomee_thumbs li{margin:0 0 10px;padding:0 0 10px}span.technomee_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>
<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="technomee_right">'),document.write('<ul class="technomee_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="technomee_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="technomee_meta">'),1==showpostdate&&(v=v+'<span class="technomee_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="technomee_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="technomee_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="technomee_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="technomee_left">'),document.write('<ul class="technomee_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="technomee_title technomee_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="technomee_meta technomee_meta2">'),1==showpostdate2&&(v=v+'<span class="technomee_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="technomee_meta_comment technomee_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="technomee_meta_more technomee_meta_more2"><a href="'+n+'" class="url" target ="_top">Read More...</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/AVvXsEg9ZXB9kcLdi47FOHzAql9oPK5DDe2YJ47g40x3iXtdFUF_FdKwgwPf31ybp6ymkhbtpjEN4ZNE5Q4xpfPRIJ6OYjtH1eFc_aEM4T7b5yCx0kahyphenhyphenOBJsUhJvRtyQY1tAWMdb3OoBrEvMzM/s320/technomee_thumb.png",no_thumb2="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2nZdzOxaKVYyj25Dco_Gz9MkNV5vLPcwnC0c_yZPTFnpmf1WkZ8SNv3NlS9w7JFmK0yv-8GRt3K7Tys-5ofWs_osA66tAWiGY8DYxjZ98wLh017ukfbZ25q5bduyTiJU6jlawq-gOL70/s1600/technomeethumb_small.png";
</script>
الأن نبحث عن الوسم <b:section class='main' وضع الاكواد فوقه مباشرة
كما يمكنك وضعه في المكان الذي أحببت ان تظهر به الاضافة وفي حالة عدم وجود هذا
الوسم فقط اذكرها مع وضع رابط مدونتك في التعليقات
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='technomeelabel1-wrapper'>
<b:section class='technomeelabel1' id='Nak1ha Label 1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML80' locked='false' title='فنون' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>فنون</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<h2><span class='data-title'><data:content/></span><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>المزيد</a></span></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='technomeelabel2-wrapper'>
<b:section class='technomeelabel2' id='Nak1ha Label 2' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML81' locked='false' title='ويندوز' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>ويندوز</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<h2><span class='data-title'><data:content/></span><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>المزيد</a></span></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>
<br/>
</b:if>
والى هنا قد انتهينا من درس اليوم الى اللقاء