إضافة مواضيع ذات تسمية بشكل جديد -->
مرحبا بكم متابعينا الاوفياء. مدير ومشرف المدونة غائب هذه الفترة, نعتذر عن عدم نشر مواضيع جديدة لكم والاجابة عن تعليقاتكم
نشكركم على تفهمكم

آخر المواضيع

breaking/مقالات/9
بلوجر

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية


شارك المدونة مع أصدقائك في الفيسبوك ليستفيدو أيظا

الاثنين، 10 يوليو 2017

5:31:00 م

تكبير النص تصغير النص أعادة للحجم الطبيعي
السلام عليكم ورحمة الله تعالى وبركاته ومرحبا بكم في درس جديد على قسم إضافات بلوجر بمدونة نكهة التقنية, درسنا لهذا اليوم هو حول إضافة سكربت يعرض مواضيع حسب التسمية بشكل جديد وحصري, الاضافة متجاوبة ومتناسقة, يمكن استعمالها للمدونين الذين يريدون تقسيم قالبهم الى مشاركات تظهر حسب كل تسمية مما يسهل على الزائر الوصول الى التدوينات للقسم الذي يريده بسهولة.
معاينة الإضافة 
معاينة
شرح طريقة التركيب 
أولا نبحث عن الوسم </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 */
.blanterlabel1 ul,.blanterlabel2 ul{list-style:none;margin:0;padding:0}
.blanterlabel1 li,.blanterlabel2 li{margin:0;padding:0}
.blanterlabel1 .widget,.blanterlabel2 .widget{;margin:0;padding:0}
.blanterlabel1 .widget-content,.blanterlabel2 .widget-content{padding:0;margin:0;word-wrap:break-word;overflow:hidden}
.blanterlabel1 h2,.blanterlabel2 h2{position:relative;margin:0;padding:15px 0;font-size:13px;font-weight:400;border-bottom:1px solid #ddd}
.blanterlabel2 h2{margin:20px 0 0}
.data-title:before{content:&#39;\f143&#39;;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}
.blanterlabel1 .index,.blanterlabel2 .index{font-size:13px;font-weight:400}
.blanterlabel1 .index a,.blanterlabel2 .index a{color:#07ACEC;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6;color:#07ACEC;border-color:#07ACEC}
.blanterlabel1 .index a:hover,.blanterabel2 .index a:hover{background:#07ACEC;color:#fff;border-color:transparent}
.blanterlabel1 .index a:after{content:&quot;\f104&quot;;font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:5px}
.blanterlabel2 .index a:after{content:&quot;\f104&quot;;font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:6px}
.blanterlabel2 span.blanter_meta_comment a:hover{color:#07ACEC!important}
.blanterlabel2 ul.blanter_thumbs li a:hover,.blanterlabel2 ul.blanter_thumbs2 li a:hover{color:#07ACEC;text-decoration:none}
.blanter_right{margin:0;padding:0;border-left:1px solid #fff}
.blanter_right .cat_thumb{float:right;margin-left:10px!important}
.blanter_left{float:right;margin-top:-35px;padding:0}
ul.blanter_thumbs{margin:0;padding:0}
ul.blanter_thumbs li,ul.blanter_thumbs2{margin:0;padding:0}
ul.blanter_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}
ul.blanter_thumbs .cat_thumb img{height:auto;width:100%;transition:all .2s}
ul.blanter_thumbs .cat_thumb img:hover{opacity:.9}
ul.blanter_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.blanter_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.blanter_thumbs2 .cat_thumb2{float:right;margin:0 0 0 10px;height:72px;overflow:hidden}
ul.blanter_thumbs2 .cat_thumb2 img{height:60px;transition:all .2s}
ul.blanter_thumbs2 .cat_thumb2 img:hover{opacity:.9}
span.blanter_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.blanter_title2{font-size:14px!important;font-weight:400!important;line-height:1.4em;margin:0 0 3px;max-height:38px}
span.blanter_title a{color:#333}span.blanter_title a:hover{color:#07ACEC;text-decoration:none}
span.blanter_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0}
span.blanter_meta{display:block;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.blanter_meta a{color:#aaa;display:inline-block}
span.blanter_meta_date,span.blanter_meta_comment,span.blanter_meta_more{display:inline-block;margin-left:10px}
span.blanter_meta_comment a:before{content:&quot;\f0e6&quot;;font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-left:5px}
span.blanter_meta_comment a:hover{color:#07ACEC!important}
span.blanter_meta_date:before{content:&quot;\f133&quot;;font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-left:5px}
ul.blanter_thumbs2 li a:hover,ul.blanter_thumbs li a:hover{color:#07ACEC;text-decoration:none}
@media only screen and (max-width:768px){.tanggal i,.tags i{color:#ff8000!important}.blanter_left{width:100%;float:right;margin:0;padding:0}span.blanter_title2{max-height:33px!important}ul.blanter_thumbs2 li{border-bottom:0;width:58%;overflow:hidden;min-height:60px}.blanterlabel1 .widget-content,.blanterlabel2 .widget-content{margin-top:10px}span.blanter_summary,.blanter_right{display:none}span.blanter_title a{font-weight:700}span.blanter_title{margin:0 0 5px}ul.blanter_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}span.blanter_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:320px){ul.blanter_thumbs2 .cat_thumb2 img{width:80px;height:50px}.blanter_left{width:100%;float:right;margin:0;padding:0}ul.blanter_thumbs li{margin:0 0 10px;padding:0 0 10px}span.blanter_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px){.blanter_left{width:100%;float:right;margin:0;padding:0}ul.blanter_thumbs li{margin:0 0 10px;padding:0 0 10px}span.blanter_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>
ثانيا, نفس الوسم </head> لكن هذه المرة سنضع هذه الأكواد أسفله مباشرة
<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="blanter_right">'),document.write('<ul class="blanter_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="blanter_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="blanter_meta">'),1==showpostdate&&(v=v+'<span class="blanter_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="blanter_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="blanter_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="blanter_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="blanter_left">'),document.write('<ul class="blanter_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="blanter_title blanter_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="blanter_meta blanter_meta2">'),1==showpostdate2&&(v=v+'<span class="blanter_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="blanter_meta_comment blanter_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="blanter_meta_more blanter_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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMpcMzSaiXG3ijnGohNJKWxPW99LoDdESPacsw0Y_zRtT52ouibIK3lij9iJfE8fdSk2oGKQHPPxX7WfCOIjVoLOAw1SZA6BIj72yJyKsnLxkXHOlKwE6363QQgHUP5VuN4jaG3R69FUw/s320/blanter_thumb.png&quot;,no_thumb2=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyqQ8ROB__RL_0vCJDgxG2RlBS0FCCCBrNe7qv5YDzooD49Wrhku8NhExZF7R0ZH2cW7lxi43UrxxQzZSAp8H7_jcnDoBI_6gN278tWKtgOU_kZzkrBmAvHnAUKrkCIDj6FVvRjDqFMcY/s1600/blanterthumb_small.png&quot;;
</script>
 الأن نبحث عن الوسم <b:section class='main' ونضع الاكواد فوقه مباشرة كما يمكنك وضعه في المكان الذي أحببت ان تظهر به الاضافة وفي حالة عدم وجود هذا الوسم فقط اذكرها مع وضع رابط مدونتك في التعليقات.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='blanterlabel1-wrapper'>
        <b:section class='blanterlabel1' 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'>&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='blanterlabel2-wrapper'>
        <b:section class='blanterlabel2' 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'>&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>
  <br/>
</b:if>
ثم إحفظ القالب ومبروك عليك الإضافة, نتمنى أن تنال إعجابكم, ودمتم في آمان الله

إرسال تعليق

مقالات