هذه الاداة التي ساشاركها معكم يمكن إستخدامها كتجميل وتمميز للمقالات التي يتم عرضها علي الصفحة الرئيسية لمدونتك،
مرحبا بك يا صديقي المدون، هذه المرة علي مدونة wesam developer، سنعرض لكم كيفية اضافة سلايد شو ثابت حسب التسمية لمدونات بلوجر.
هذه الاداة التي ساشاركها معكم يمكن إستخدامها كتجميل وتمميز للمقالات التي يتم عرضها علي الصفحة الرئيسية لمدونتك، كذلك هي اضافة سريعة التحميل ومضغوطة بما يكفي.
بالنسبة للأشخاص الذين لديهم فضول لتجربة الاضافة ومشاهدة، يمكنك الضغط علي الزر التالي :
اضافة سلايد شو ثابت حسب التسمية لمدونات بلوجر
قم أولاً بتسجيل الدخول إلى blogger اضغط على المظهر ثم تحرير 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://2.bp.blogspot.com/-hJCmymH_jbk/WmpmjvEx2nI/AAAAAAAABqI/mwD8HQPUjI8OfBNfJ8CniDVD40bnPAMswCLcBGAs/s1600/tech1.jpg';
var no_box2 = 'https://2.bp.blogspot.com/-MfOI67FUg6Q/WmpmjW8Ml5I/AAAAAAAABqE/8GdkCFEZEIkwplEXubzxtaKUvs9CyK9NwCLcBGAs/s1600/tech2.jpg';
//]]>
</script>
</b:if>الكود التالي هو الكود الأساسي للاضافة ضعه في المكان الذي تريده في القالب ولكن يجب ان يكون بين الوسومين <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 != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<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>
</b:if>اضغط حفظ، وبعد ذلك قم بالذهاب الي التخطيط وقم بتحديث الصفحة (Reload) واضغط تعديل الأداة
 |
بعد ذلك اضغط حفظ وشاهد النتائج.
انتهي شرح كيفية اضافة سلايد شو ثابت حسب التسمية لمدونات بلوجر، شكرا لكم علي الزيارة ونأمل ان يكون مفيد.
إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا
COMMENTS