اضافة المشاركات الشائعة على شكل شبكة

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

معاينة

شرح تركيب الإضافة

1. ادخل إلى لوحة تحكم بلوجر
2. انقر على تبويب قالب
3. اضغط على تحرير HTML

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه

/* CSS Recent Post Gallery */
.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .ad-item{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
.recent-gallery .ad-item a{position:relative;float:left;margin:0 6px;text-decoration:none}
.recent-gallery .ad-item .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-gallery .ad-item:hover .ptitle{visibility:visible;opacity:1}
.recent-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-gallery a:hover img {border-color:#bbb;}

ابحث عن الوسم </head> و اضف الكود التالي فوقه

<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function mudwnpgrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+mudwnp_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+mudwnp_thumbs+'" height="'+mudwnp_thumbs+'"/>',p=mudwnp_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="ad-item">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>

الان قم بحفظ القالب و اتجه إلى التخطيط > إضافة اداة جديدة >HTML/JavaScript و اضف الكود التالي

<script>
var mudwnp_thumbs = 72;
var mudwnp_title = true;
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=mudwnpgrid"></script>

إعدادات التنسيق

max-results=9 : و هو المسؤل عند عدد المواضيع التي سوف يتم عرضها
var mudwnp_title = true : و هو المسؤل عن عرض العناوين
var mudwnp_thumbs = 72 : و هو المسؤل عن حجم الصور

ملحق

إذا اردت عرض مواضيع قسم معين استبدل اخر جزء من الكود بالاعلى بالتالي

<script src="/feeds/posts/summary/-/BLOGGER?max-results=9&amp;alt=json-in-script&amp;callback=mudwnpgrid"></script>

مع إستبدال كلمة BLOGGER باسم القسم المراد عرض مواضيع
و يمكنك إستبدال رقم 9 بالعدد الذي تريده و هو خاص بعدد المواضيع التي سيتم عرضها

دمتم بود

8/24/2015

مواضيع ذات صلة

اضافة المشاركات الشائعة على شكل شبكة

4 / 5

بواسطة مدون محترف

مدون محترف 8/24/2015 14 تعليقات