اضافة سلايد شو ثابت حسب التسمية لمدونات بلوجر

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

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

بالنسبة للأشخاص الذين لديهم فضول لتجربة الاضافة ومشاهدة، يمكنك الضغط علي الزر التالي :

معاينة

اضافة سلايد شو ثابت حسب التسمية لمدونات بلوجر

قم أولاً بتسجيل الدخول إلى بلوجر > اضغط على المظهر ثم تحرير HTML > ابحث عن </head> وضع الكود التالي فوقه

<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Featured By Rotkx */
#featured-wrapper{padding:0 0 0 20px}
.featured{color:#666;line-height:1.4em;margin:0;padding:0}
.featured ul{list-style:none;margin:0;padding:0}
.featured li{margin:0;padding:0;line-height:1.4em}
.featured .widget{padding:0;margin:0 0 20px}
ul.tech_thumbs{margin:0;padding:0}
ul.tech_thumbs li{margin:0 0 1px;padding:0}
ul.tech_thumbs .tech_box{background:#050505;position:relative;margin:0;padding:0;overflow:hidden;width:100%;height:auto}
span.tech_title a{right:0;bottom:0;position:absolute;margin:0;padding:20px 30px;height:auto;line-height:1.2em;color:#fff}
span.tech_title2 a{right:0;top:0;position:absolute;margin:0;padding:15px 30px;height:auto;line-height:1.4em;color:#fff}
ul.tech_thumbs p,ul.tech_thumbs2 p{line-height:1.2em;color:#eee;margin:8px 0 0;padding:0;font-size:12px;font-weight:400;text-transform:none}
span.tech_title a:hover,span.tech_title2 a:hover,span.tech_title3 a:hover{text-decoration:none}
ul.tech_thumbs .tech_box img{height:auto;width:100%;opacity:.6;transition:all .5s ease}
ul.tech_thumbs .tech_box:hover img{opacity:.5}
ul.tech_thumbs2,ul.tech_thumbs3{margin:0;padding:0}
ul.tech_thumbs2 li{float:right;margin:0 0 1px 1px;padding:0}
ul.tech_thumbs2:nth-child(odd) li{margin:0 0 1px 0}
ul.tech_thumbs2 .tech_box2{background:#050505;position:relative;margin:0;overflow:hidden;width:313.9px;height:170px}
ul.tech_thumbs2 .tech_box2 img{opacity:.5;width:100%;height:100%;transition:all .5s ease}
ul.tech_thumbs2 .tech_box2:hover img{opacity:.3}
span.tech_title{font-size:24px;font-weight:500;margin:0;padding:0}
span.tech_title2{font-size:16px}
@media screen and (max-width:768px){
#featured-wrapper{padding:0;margin:0 auto 10px auto;overflow:hidden}
ul.tech_thumbs2{display:none}}
</style>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(e){for(h=0;h<numtech;h++){f=(o=e.feed.entry[h]).title.$t;if(h==e.feed.entry.length)break;for(m=0;m<o.link.length;m++){if("replies"==o.link[m].rel&&"text/html"==o.link[m].type)o.link[m].title,o.link[m].href;if("alternate"==o.link[m].rel){u=o.link[m].href;break}}var t;try{t=o.media$thumbnail.url,t=t.replace("/s72-c/","/w"+box_width+"-h"+box_height+"-c/")}catch(e){s=o.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),t=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_box}var i=(x=o.published.$t).substring(0,4),r=x.substring(5,7),n=x.substring(8,10),l=new Array;l[1]="يناير",l[2]="فبراير",l[3]="مارس",l[4]="ابريل",l[5]="مايو",l[6]="يونيو",l[7]="يوليو",l[8]="اغسطس",l[9]="سبتمبر",l[10]="اكتوبر",l[11]="نوفمبر",l[12]="ديسمبر",document.write('<ul class="tech_thumbs">'),document.write("<li>"),document.write('<div class="tech_box"><a href="'+u+'"><img width="'+box_width+'" height="'+box_height+'" alt="'+f+'" src="'+t+'"/></a><span class="tech_title"><a href="'+u+'" target ="_top">'+f+"<p>"+l[parseInt(r)]+" "+n+", "+i+" </p></a></span></div>"),document.write("</li>"),document.write("</ul>")}for(h=1;h<numtech2;h++){f=(o=e.feed.entry[h]).title.$t;if(h==e.feed.entry.length)break;for(m=1;m<o.link.length;m++){if("replies"==o.link[m].rel&&"text/html"==o.link[m].type)o.link[m].title,o.link[m].href;if("alternate"==o.link[m].rel){u=o.link[m].href;break}}try{g=o.media$thumbnail.url.replace("/s72-c/","/w"+box_width2+"-h"+box_height2+"-c/")}catch(e){s=o.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),g=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_box2}var i=(x=o.published.$t).substring(0,4),r=x.substring(5,7),n=x.substring(8,10);document.write('<ul class="tech_thumbs2">'),document.write("<li>"),document.write('<div class="tech_box2"><a href="'+u+'"><img width="'+box_width2+'" height="'+box_height2+'" alt="'+f+'" src="'+g+'"/></a><span class="tech_title tech_title2"><a href="'+u+'" target ="_top">'+f+" <p>"+l[parseInt(r)]+" "+n+", "+i+"</p></a></span></div>"),document.write("</li>"),document.write("</ul>")}};
var numtech=1,numtech2=3,box_width=629,box_height=350,box_width2=314,box_height2=170; 
var no_box = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin8AVKjpb1sJ1V8EW8tPXvbcBLPk_yXqERni5aTPCA0WgXSp3QW9VBtsUnKq5kD5PbWgBA9YrPC1I_kD0Wu7X7oDV5VxGPdEfPuzmBx31SXog8bu4-dZUMRXEy2R9OYbQe0E3s3Gm7rdQ/s1600/tech1.jpg'; 
var no_box2 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaSYNkCRB6dGR8SsDQ6uLeCAYPEeUKAqGwCuO9QZzNMvK5ILSVTECajPXNb71zC-hQRsGtmoLvz1Hu60AqX6lRz2CO0038o_jDHCEzuhrtJ_ru1dqR-XY74wovTWv3IixQTZwW8FVh5E8/s1600/tech2.jpg';
//]]>
</script>
</b:if>

انتبه للاكواد التي تم وضع علامة عليها، تمثل الطول والعرض الخاص بالصورة الاولي والصورة الثانية والثالثة
قم بضبتها حسب حجم القالب الخاص بك
الصورة الاولي : box_width=629 و box_height=350
الصورة الثانية والثالثة : box_width2=314 و box_height2=170

الكود التالي هو الكود الأساسي للاضافة ضعه في المكان الذي تريده في القالب ولكن يجب ان يكون بين الوسومين <body> و </body>

<b:if cond='data:view.isHomepage'>
<div id='featured-wrapper'>
  <b:section class='featured' id='featured' maxwidgets='1' showaddelement='yes'>
    <b:widget id='HTML200' 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'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
<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>

مثال : في الصورة التالية قمت بوضع الكود السابق أعلي كود المواضيع وبالتالي سيظهر فوق المواضيع

<div class='site-mainku' id='mainku' role='main'>
...
...
<b:if cond='data:view.isHomepage'>
<div id='featured-wrapper'>
  <b:section class='featured' id='featured' maxwidgets='1' showaddelement='yes'>
    <b:widget id='HTML200' 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'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
<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>
...
...
<b:section class='mainblogsec' id='mainblogsec' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog' version='1'>

اضغط حفظ، وبعد ذلك قم بالذهاب الي التخطيط وقم بتحديث الصفحة (Reload) واضغط تعديل الأداة

ثم قم بكتابة القسم الذي تريده ان يظهر.

بعد ذلك اضغط حفظ وشاهد النتائج.

انتهي شرح كيفية اضافة سلايد شو ثابت حسب التسمية لمدونات بلوجر، شكرا لكم علي الزيارة ونأمل ان يكون مفيد.