تركيب سلايدر المشاركات المميزة على بلوجر بالطريقة الجديدة
يمكنك الآن إضافة اداة المشاركات المميزة لمدونتك على الصفحة الرئيسية في حال لم تكن متوفرة في قالب مدونتك سوف تعطي قالب مدونتك لمسة جديدة من الإبتكار حيث تتميز الإضافة بالألوان الجذابة وكذلك يمكنك تخصيصها لتعرض أحدث المواضيع او مواضيع بحسب التسمية وهي متجاوبة تمامًا مع جميع أحجام الشاشات الجوال والكمبيوتر.
طريقة تركيب المشاركات المميزة على بلوجر
من لوحة تحكم المدونة أنتقل إلى المظهر أنقر على تعديل 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:'';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("<script src="/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=recentposts1"></script>");
</script>
</div>
</div>
</b:if>
حاليًا الاداة تعرض أحدث المشاركات ولعرض أحدث المشاركات بحسب التسمية إستبدل الرمز
/feeds/posts/default?