اضافة صندوق المشاركات المميزة - متجاوب

مرحبا بكم في إضافة جديدة ومميزة على مدونتكم الأثير,سأقدم في هذا المقال كيفية اضافة صندوق المشاركات المميزة - متجاوب ,الإضافة تعمل على عرض أخر المواضيع بطريقة ميزة و رائعة, حيث تعرض صور المقالت وعناوينها وأيضا تسمياتها, بطريقة جاذبة للزوار ومتجاوبة مع جميع الأجهزة.
بواسطة Mohammad Ktifan
تعليقات
مشاركة
0 دقيقة للقراءة
تغيير حجم الخط
اضافة صندوق المشاركات المميزة - متجاوب

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

مـعـاينة الإضـافــة
مـعـاينة تــجــاوب الإضـافــة

كيفية إضافة الاداة

أولا قبل كل شيء عليك أخذ نسخة احتياطية من قالبك
الأن اتجه الى بلوجر ثم اختر المظهر ثم تحرير HTML ثم ابحث عن الوسم <head>
وضع الكود التالي أسفله/بعده
<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>
لاحظ الكود يحتوي على العدد 1070px وهو عرض لصنوق قم بتغييره بعرض القالب الخاص  بك .
و تأكد ان قالبك يحتوي على مكتبة  jQuery  إن لم يكن يحتويه أضف الكود التالي أسفل/بعد <head>
<script  src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>
الأن أضف الاداة في المكان الذي تريد وضعها به  طالما هي بين الوسمين  <body> , </body>
عبر وضع الكود التالي:
<b:if cond='data:view.isHomepage'>
<div class='featured_ithericx' id='featured_itheric'>
<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>
مثلا يمكنك وضع الاداة ضمن الكود التالي
<div id='wrapper'>
.....
.....
 
 <b:if cond='data:view.isHomepage'>
<div class='featured_ithericx' id='featured_itheric'>
<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>
.....
.....
</div>
إذا كنت تريد عرض اخر مواضيع مدونتك ككل ضمن الاداة فدع الكود كما هو
أما إن كنت تريد عرض مواضيع تسمية معينة قم بإستبدال الكود المحدد بهذا الكود feeds/posts/default/-/قوالب بلوجر مع تغيير قوالب بلوجر بالتسمية الذي تريد.

الى هنا أكون قد وصلت لنهاية المقال أرجو أن أكون قد وفقت بطرحه
إن كانت لديكم أي استفسارات و صعوبات فباب التعليقات مفتوح للجميع
مشاركة:
Mohammad Ktifan
مدون يسعى لتقديم محتوى مميز وجذاب للقراء بشكل عام,مهتم بكثير من الأشياء كـ بلوجر ,تصميم الويب, التصميم الجرافيكي,وأيضا الافلام والمسلسلات العالمية. مدونة الأثير فيسبوك
تعليقات
يرجى الالتزام بسياسة التعليقات لدينا ليتم نشر تعليقك . وشكرا
أيمن · ملصق التعليق
اولا
شكرا على الاضافة الجميلة

ثانيا
متى تنشر قالبك النسخة الثانية انا انتظرها على احر من الجمر
Mohammad Ktifan · أجاب
شكرا لك صديقي هذا اطراء نعتز به
قريبا جدا أنا اعده للنشر
إرسال تعليق
youssef · ملصق التعليق
اخي ليش ماعم تزبط عندي
إرسال تعليق