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

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

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

وتُعتبر من أهم الإضافات للمدونات الاخبارية والتي تحتوي على أقسام كثيرة. السكربت قد لا يُناسب حجم وشكل مدونتك لذلك يجب عليك أنّ تمتلك خبرة بسيطة في لغة البرمجة 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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO1VuZyatsafQjDugdbdgf6bu_gPQmGhHUGUbrJtkEDrxM5MMEF7Ue_IpyllPUySHX2jV3mHH5I3Kbc_QhVY5g2iYxJZxjWI5HQB8MkJ2BdTVHPQ60Qcxq4DWvZ0x_h2eZutwfQLWvjG_4/s1600/newarlina_thumb.png&quot;,no_thumb2=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkkKXhHb3Q0DIq5GiM-pbfpymMA68JwjS1f20il3paBeAL7pfMUYDrciHtyxrOjXVE61B0tpGzrbQlEbBvJ7PROpWqqNbN8ReZKURd_P38RR8Li6lYsAm36vyLW42bQqdujCHA9Ge2yqKY/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>

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

اضافة سلايدر شو تلقائي في بلوجر

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

معاينة

كيفية اضافة سلايدر شو تلقائي في بلوجر

1. ادخل لوحة تحكم بلوجر.
2. انقر على تبويب قالب.
3. ثم اضغط على زر تحرير HTML.

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه

/* Slider */
.blog_featured_posts {display: inline-block;width: 100%;margin-top: 0px;margin-bottom: 4px;}
.blog_featured_post {display: block;position: relative;float: right;overflow: hidden;height:334px;}
.blog_featured_post.first {width: 43%;margin-left: 9px;}
.blog_featured_post.second {width: 20.79%;margin-left: 9px;}
.blog_featured_post.third, .blog_featured_post.fourth {width: 34.126%;height:163px;}
.blog_featured_post.third {margin-bottom: 9px;}
.blog_featured_post a {display: block;color: rgb(255, 255, 255);text-shadow: rgba(0, 0, 0, 0.498039) 0px 1px 1px;position: relative;vertical-align: bottom;z-index: 1;height:100%;}
.blog_featured_post a:hover:before {opacity: 0.6;box-shadow: inset 0px -3px 200px 5px #000;}
.blog_featured_post a:before {display: block;position: absolute;content: &#39;&#39;;right: 0px;top: 0px;width: 100%;height: 100%;box-shadow: inset 0px -3px 300px 5px #000;opacity: 0.5;-webkit-transition: all 0.2s;transition: all 0.2s;}
.blog_featured_post a .blog_contents {display: block;position: absolute;z-index: 5;bottom: 30px;right: 30px;left: 30px;font-weight:bold;text-transform: uppercase;line-height: 120%;-webkit-transition: all 0.2s;transition: all 0.2s;font-family: droid arabic kufi, sans-serif;}
.blog_contents span {font-style: normal;display: block;position: absolute;bottom: 100%;padding: 5px 10px;letter-spacing: 0px;font-size: 11px;line-height: 1;text-shadow: none;margin-bottom: 10px;background: #f58220;}
.blog_contents span:after {content: &quot;&quot;;border-style: solid;border-width: 21px 7px 21px;border-color: transparent;border-bottom-color: #f58220;left: -7px;bottom: 0;position: absolute;}
.blog_contents span:before {content: &quot;&quot;;border-style: solid;border-width: 21px 7px 21px;border-color: transparent;border-top-color: #f58220;right: -7px;top: 0;position: absolute;}
.blog_featured_post a .blog_contents h3 {text-shadow: 2px 2px 4px black;padding: 8px 10px 9px;text-align: right;float: right;display: inline-block;background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;width:114%;opacity: 0.9;font-size:12px;font-weight:700;margin-right: -30px;}
.blog_featured_post.first a .blog_contents h3 {text-shadow:2px 2px 4px black;padding: 8px 10px 9px;text-align:right;float:right;display:inline-block;background:rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;width:100%;opacity: 0.9;font-size:12px;font-weight:700;margin-right:-30px;}
.blog_featured_post .feat-img{width:100%;height:100%;background-size:cover;background-position:50%;}

ابحث عن الوسم </head> و اضف الكود التالي فوقه

<!-- Slider -->
<script type='text/javascript'>
 //<![CDATA[
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
aBold = true;
numposts1 = 4;
numposts11 = 1;
newsize = 400;
function recentposts1(json) {
j = showRandomImg ? Math.floor((imgr.length + 1) * Math.random()) : 0;
img = new Array;
if (numposts1 <= json.feed.entry.length) maxpost = numposts1;
else maxpost = json.feed.entry.length;
document.write('<div class="blog_featured_posts">');
for (var i = 0; i < maxpost; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var tag = entry.category[0].term;
var pcm;
var posturl;
var cropsize = newsize;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) if (entry.link[k].rel == "alternate") {
posturl = entry.link[k].href;
break
}
for (var k = 0; k < entry.link.length; k++) if (entry.link[k].rel == "replies" && entry.link[k].type == "text/html") {
pcm = entry.link[k].title.split(" ")[0];
break
}
if ("content" in entry) var postcontent = entry.content.$t;
else if ("summary" in entry) var postcontent = entry.summary.$t;
else var postcontent = "";
postdate = entry.published.$t;
if (j > imgr.length - 1) j = 0;
img[i] = imgr[j];
s = postcontent;
a = s.indexOf("<img");
b = s.indexOf('src="', a);
c = s.indexOf('"', b + 5);
d = s.substr(b + 5, c - b - 5);
if (a != -1 && (b != -1 && (c != -1 && d != ""))) img[i] = d;
var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var month2 = ["يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"];
var day = postdate.split("-")[2].substring(0, 2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for (var u2 = 0; u2 < month.length; u2++) if (parseInt(m) == month[u2]) {
m = month2[u2];
break
}
var daystr = day + " " + m + " " + y;
if (i == 0) {
var st = "#FF3D66";
var trtd = '<div class="blog_featured_post first"><a href="' + posturl + '"><div class="blog_contents"><span>' + tag + '</span><h3>' + posttitle + '</h3></div><div class="feat-img" style="background-image:url(' + img[i] + ');"></div></a></div>';
document.write(trtd)
}
if (i == 1) {
var trtd = '<div class="blog_featured_post second"><a href="' + posturl + '"><div class="blog_contents"><span>' + tag + '</span><h3>' + posttitle + '</h3></div><div class="feat-img" style="background-image:url(' + img[i] + ');"></div></a></div>';
document.write(trtd)
}
if (i == 2) {
var trtd = '<div class="blog_featured_post third"><a href="' + posturl + '"><div class="blog_contents"><span>' + tag + '</span><h3>' + posttitle + '</h3></div><div class="feat-img" style="background-image:url(' + img[i] + ');"></div></a></div>';
document.write(trtd)
}
if (i == 3) {
var trtd = '<div class="blog_featured_post fourth"><a href="' + posturl + '"><div class="blog_contents"><span>' + tag + '</span><h3>' + posttitle + '</h3></div><div class="feat-img" style="background-image:url(' + img[i] + ');"></div></a></div>';
document.write(trtd)
}
j++
}
document.write('</div>')
};
//]]>
</script>

الكود الثالث وهو الخاص بعرض السلايدر في المدونة ويُمكنك وضعه في المكان الذي يُناسبك.
لكنّ أفضل مكان هو فوق المواضيع مُباشرًة لذلك ابحث عن الوسم <div id='content-wrapper'> و اضف الكود التالي فوقه

<div class='blog_featured_posts' id='blog_featured_posts'>
<div class='ct-wrapper'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
  </b:if>
  </div>
</div>

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

كود تعديل لون تحديد النصوص

هو كود بسيط يمكنك من تغيير لون التحديد الإفتراضي للنصوص قد يرى البعض ان هذا امر مهم بالنسبة لهم فمن اراد تعديل اللون الإفتراضي لتحديد النصوص يمكنه استخدام الكود التالي وهو لا يعتمد على اى نوع من السكريبتات هو CSS فقط

::selection {background-color: #cc0000; color: #fff;}
::-moz-selection {background-color: #cc0000; color: #fff;}
اللون المعلم بالأحمر هو لون التحديد واللون الأصفر هو لون الكتابه
ملحوظة إضافية من يستخدمون انماط خلفيات مختلفة كأن يكون لديهم اكواد في منطقة بخلفية قاتمه ومنطقة بخلفية فاتحة
فالأفضل ان يتركوا الإفتراضي حيث ان الإفتراضي يتعرف عليها تلقائيا ويعدل اللون مع اختلاف الخلفية

مواقع إختبار التجاوب وتحليل المحتوى هل يمكن الإعتماد عليها ؟

هناك العديد من المواقع الخاصة بتحليل المحتوى أو اختبار تجاوب المواقع وقوتها وسرعتها وكثير من المدونين سواء كانوا مبتدئين أو محترفين يشغل نفسه كثيراً بتلك المواقع وتحليلاتها لكن هل بالفعل يجب ان نشغل بالنا بها ونعتمد عليها في التقييم ؟ 

سنتكلم اولا عن المواقع الخاصة بإختبار التجاوب ودعم الهواتف

أشهرها
Google Mobile-Friendly Test
Bing Mobile Friendliness Test
هذه الفئة من المواقع يمكنك الإعتماد عليها في التقييم المبدئي فقط يعني من خلالها تستطيع معرفة هل مبدأ التجاوب ودعم الهاتف متوافر ام لا في الموقع لكن لا يمكنك التأكد يقينا من الجودة إلا بعد تصفح الموقع بهاتفك فعلياً لكنها تفي بالأمر في المراجعة السريعة

ثانيا المواقع الخاصة بتحليل اخطاء المواقع والسرعة والسيو الخ

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

جميع أزرار المشاركة الإجتماعية في آدة واحدة

هناك عشرات من المواقع التي يتم عبرها المشاركة او خدمات مثل الطباعة وكل شخص يفضل فئة من تلك المواقع او هناك من يريدها كلها طبعا الأبرز هم ثلاث أزرار Facebook , Twitter , Google Plus لكن هناك من يرغب في ازرار أخرى مثل زر المشاركة عبر الواتس آب WhatsApp أو غيره لذلك هذه الآداة ستساعدك في اختيار اهم الأزرار بالنسبة لك وبها زر يجمع البقية في صندوق منبثق

أولا قم بالدخول على الرابط التالي Addtoany 

ثم طبق التالي

ستظهر لك هذه الصفحة 

الكود الناتج انسخه وأضفه في وسط الكود التالي

<b:if cond='data:blog.pageType == &quot;item&quot;'>
أضف الكود هنا
</b:if>

ثم أضف الكود الكامل بعد أحد هذه الأكواد ان أردته في بداية الموضوع

<div class='post-header'>
<div class='post-header-line-1'/>

أو بعد أحد هذه الاكواد إن أردته في نهاية الموضوع

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
ملحوظة ستجد تلك الاكواد مكرره اكثر من مرة في القالب احداه ستظهر تحته والآخر لا , فعليك التجربة إلى أن تصل للمضبوط

قالب Global معرب

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

معاينة تحميل

مميزات القالب

1. متوافق مع جميع المتصفحات
2. متجاوب مع جميع الشاشات
3. اضافة مواضيع ذات صلة
4. مواضيع ذات صلة
5. فوتر بثلاث اعمدة
6. خيارات التنقل بين المواضيع
7. صندوق الاشتراك بالمدونة
8. اماكن للإعلانات جاهزة
9. صندوق تعريق الكاتب
10. قائمة منسدلة ومثبتة
11. نظام تعليقات "بلوجر، فيس بوك، Disqus"
12. سلايدر يعرض المواضيع بشكل عشوائي 
13. ازرار المتابعة والمشاركة على الشبكات الاجتماعية

         والمزيد ...