تركيب سلايدر المشاركات المميزة على بلوجر بالطريقة الجديدة



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


طريقة تركيب المشاركات المميزة على بلوجر

من لوحة تحكم المدونة أنتقل إلى المظهر أنقر على تعديل HTML ثم أبحث عن الرمز </head> وأضف الكود التالي فوقه مباشرةً
<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Featured Post by madad2.com */
*,*:before, *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.featured_namiwrap{display:inline-block;width:100%;max-width:1070px;margin:0 auto 20px auto;overflow:hidden;max-height:410px}.featured_namina{display:block;position:relative;float:right;overflow:hidden;height:410px}.featured_namina.first{width:44.7%;margin-left:1px}.featured_namina.second{width:25%;margin-left:1px}.featured_namina.third,.featured_namina.fourth{width:30%;height:205px}.featured_namina.third{margin-bottom:1px}.featured_namina a{display:block;color:rgb(255,255,255);position:relative;vertical-align:bottom;z-index:1;height:100%}.featured_namina a:before{width:100%;height:100%;position:absolute;content:&#39;&#39;;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%);opacity:.7;z-index:2;transition:all .6s}.featured_namina:hover a:before{opacity:1}.featured_namina a .blog_contents{display:block;position:absolute;z-index:5;bottom:15px;right:15px;left:15px;text-transform:uppercase;line-height:120%;transition:all 0.2s}.featured_namiwrap span{padding:3px 6px;font-size:12px;line-height:1;color:#ffffff;border-radius:3px;text-transform:capitalize;box-shadow:0 2px 5px rgba(0,0,0,0.2)}.featured_namina.first span{background:#679e37}.featured_namina.second span{background:#f8a724}.featured_namina.third span{background:#029ae4}.featured_namina.fourth span{background:#e53935}.featured_namina a .blog_contents h3{margin-top:15px;font-size:16px;color:#ffffff;line-height:normal;font-weight:normal;text-transform:none;text-shadow:none}.featured_namina a .blog_contents h3:hover{text-decoration:underline}.featured_namina.first a .blog_contents h3{font-size:27px}.featured_namina .feat-img{width:100%;height:100%;background-size:cover;background-position:50%;-webkit-backface-visibility:hidden;transition:all .3s}.featured_namina:hover .feat-img{transform:rotate(-3deg) scale(1.2);-webkit-filter:blur(2px);filter:blur(2px)}
@media only screen and (max-width:768px){
.featured_namiwrap{max-height:initial}.featured_namina.second,.featured_namina.first,.featured_namina.third,.featured_namina.fourth{width:100%;height:300px;margin:0;margin-bottom:1px}.featured_namina a .blog_contents{right:15px;left:15px;bottom:10px}.featured_namina.first a .blog_contents h3,.featured_namina a .blog_contents h3{font-size:20px}}
</style>
<script type='text/javascript'>
//<![CDATA[
// Featured post by madad2.com
function recentposts1(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length,document.write('<div class="featured_namiwrap">');for(var t=0;t<maxpost;t++){var i,n=e.feed.entry[t],r=n.title.$t,l=n.category[0].term;newsize;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){i=n.link[o].href;break}for(o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){n.link[o].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)g=n.summary.$t;else g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var m=[1,2,3,4,5,6,7,8,9,10,11,12],f=["Oca","?ub","Mar","Nis","May","Haz","Tem","A?u","Eyl","Eki","Kas","Ara"],p=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<m.length;u++)if(parseInt(p)==m[u]){p=f[u];break}if(0==t){var v='<div class="featured_namina first"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(1==t){v='<div class="featured_namina second"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(2==t){v='<div class="featured_namina third"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(3==t){v='<div class="featured_namina fourth"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}j++}document.write("</div>")}imgr=new Array,imgr[0]="data:image/gif;base64,R0lGODlhAQABAIAAAPHx8AAAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==",showRandomImg=!0,aBold=!0,numposts1=4,numposts11=1,newsize=400;
//]]>
</script>
</b:if>

الخطوة الأخيرة هي إضافة الكود التالي في المكان الصحيح في القالب لعرض الأداة في المكان المناسب يمكنك إضافة الكود التالي فوق الرمز <div id='content-wrapper'> وإن لم تجده فوق الرمز يجب إضافة الكود أسفل موقع القائمة الرئيسية للمدونة بحيث يظهر مباشرةً أسفلها وفي منطقتها ليظهر بالعرض الكامل مع القالب

<b:if cond='data:view.isHomepage'>
<div class='featured_naminaz' id='featured_namiwrap'>
<div class='ct-wrapper'>
<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>
</div>
</div>
</b:if>

حاليًا الاداة تعرض أحدث المشاركات ولعرض أحدث المشاركات بحسب التسمية إستبدل الرمز
/feeds/posts/default?
بالرمز
/feeds/posts/default/-/ضع-التسمية-هنا?

يمكنكم معاينة الإضافة من الرابط أدناه




مشاركات أقدم المقال التالي
6 تعليق
  • لقاء TV
    لقاء TV 01‏/06‏/2020، 5:20:00 م

    بركب على قالب سيو بلس المجاني

    • مداد الجليد
      مداد الجليد 01‏/06‏/2020، 5:33:00 م

      عزيزي يتم تشغيله على كل القوالب لكن بشرط تطبيق الاكواد بشكل صحيح يتوافق مع الاكواد الموجودة في القالب الحالي

  • وظائف
    وظائف 03‏/06‏/2020، 1:04:00 ص

    هل هناك من طريقة لتبديل شكل المشاركات بهذا الشكل ؟؟؟

    • مداد الجليد
      مداد الجليد 03‏/06‏/2020، 11:56:00 ص

      اهلا بك
      حاليا لا يوجد

  • moh kamil
    moh kamil 09‏/08‏/2020، 8:26:00 م

    السلام عليكم ممكن مساعدة؟
    كيف يمكنني ادراج مقاطع الفيديو في صفحة على بلوجر جنباً الى جنب بشكل افقي كل سطر ثلاثة مقاطع فيديو مثلاً على ان تكون متجاوبى في عرض الجوال وشكراً.

    • مداد الجليد
      مداد الجليد 10‏/08‏/2020، 9:08:00 ص

      وعليكم السلام اهلا بك
      اجعل فيديوهات يوتيوب متجاوبة تلقائيا على مدونتك عند اضافة كود التضمين من خلال اتباع شرح في المقالة التالية:https://www.madad2.com/2018/08/responsive-youtube-tren-bloggerresponsive-youtube-for-blogger.html

أضف تعليق
عنوان التعليق