اضافة صندوق المشاركات المميزة - متجاوب
مرحبا بكم في إضافة جديدة ومميزة على مدونتكم الأثير,سأقدم في هذا المقال كيفية اضافة صندوق المشاركات المميزة - متجاوب ,الإضافة تعمل على عرض أخر المواضيع بطريقة ميزة و رائعة, حيث تعرض صور المقالت وعناوينها وأيضا تسمياتها, بطريقة جاذبة للزوار ومتجاوبة مع جميع الأجهزة.
بواسطة
Mohammad Ktifan
تعليقات
مشاركة
مشاركة: اضافة صندوق المشاركات المميزة - متجاوب
0 دقيقة للقراءة
تغيير حجم الخط
تغيير حجم الخط
مرحبا بكم في إضافة جديدة ومميزة على مدونتكم الأثير,سأقدم في هذا المقال كيفية اضافة صندوق المشاركات المميزة - متجاوب ,الإضافة تعمل على عرض أخر المواضيع بطريقة ميزة و رائعة, حيث تعرض صور المقالت وعناوينها وأيضا تسمياتها, بطريقة جاذبة للزوار ومتجاوبة مع جميع الأجهزة.
مـعـاينة الإضـافــة
مـعـاينة تــجــاوب الإضـافــة
كيفية إضافة الاداة
أولا قبل كل شيء عليك أخذ نسخة احتياطية من قالبكالأن اتجه الى بلوجر ثم اختر المظهر ثم تحرير HTML ثم ابحث عن الوسم
وضع الكود التالي أسفله/بعده
<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* by blog.itheric.com */
*,*:before, *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.featured_itheric{display:inline-block;width:100%;max-width:1070px;margin:0 auto 20px auto;overflow:hidden;max-height:410px;box-shadow:0 0 0 15px #fff}.featured_namina{display:block;position:relative;float:right;overflow:hidden;height:410px}.featured_namina.first{width:44.8%;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;letter-spacing:-1px;text-transform:uppercase;line-height:120%;transition:all 0.2s}.featured_itheric span{padding:3px 6px;letter-spacing:0;font-size:12px;line-height:1;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;line-height:normal;font-weight:normal;letter-spacing:-0.4px;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:22px}.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_itheric{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[
// by blog.itheric.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_itheric">');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>
لاحظ الكود يحتوي على العدد و تأكد ان قالبك يحتوي على مكتبة jQuery إن لم يكن يحتويه أضف الكود التالي أسفل/بعد
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>
الأن أضف الاداة في المكان الذي تريد وضعها به طالما هي بين الوسمين عبر وضع الكود التالي:
<b:if cond='data:view.isHomepage'>
<div class='featured_ithericx' id='featured_itheric'>
<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>
مثلا يمكنك وضع الاداة ضمن الكود التالي<div id='wrapper'>
.....
.....
<b:if cond='data:view.isHomepage'>
<div class='featured_ithericx' id='featured_itheric'>
<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>
.....
.....
</div>
إذا كنت تريد عرض اخر مواضيع مدونتك ككل ضمن الاداة فدع الكود كما هوأما إن كنت تريد عرض مواضيع تسمية معينة قم بإستبدال الكود المحدد بهذا الكود
الى هنا أكون قد وصلت لنهاية المقال أرجو أن أكون قد وفقت بطرحه
إن كانت لديكم أي استفسارات و صعوبات فباب التعليقات مفتوح للجميع
مشاركة:
Mohammad Ktifan
مدون يسعى لتقديم محتوى مميز وجذاب للقراء بشكل عام,مهتم بكثير من الأشياء كـ بلوجر ,تصميم الويب, التصميم الجرافيكي,وأيضا الافلام والمسلسلات العالمية. مدونة الأثير فيسبوك
قد تُعجبك هذه المشاركات
شكرا على الاضافة الجميلة
ثانيا
متى تنشر قالبك النسخة الثانية انا انتظرها على احر من الجمر
قريبا جدا أنا اعده للنشر