.png)
اضافة المشاركات الشائعة على شكل شبكة - دائما في قوالب بلوجر نبحث عن طرق لكيفية تطويرها او جعلها اكثر جمالية و المشاركات الشائعة الخاصة ببلوجر شكلها ليس جيد بما فيه الكفاية لذلك اكثر المدونين يبحثون عن اكواد تجعلها اكثر جمالية من شكلها السابق و في مقال اليوم سوف نقوم بتحسين شكلها بحيث إضافة اليوم سوف تعرض احدث المواضيع على شكل ألبوم صور ولكن بنظرة مختلفة يمكنك معاينة الإضافة بالضغط على ...
شرح تركيب الإضافة
- ادخل إلى لوحة تحكم بلوجر
- انقر على تبويب قالب
- اضغط على تحرير 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;}
ابحث عن الوسم
<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&alt=json-in-script&callback=mudwnpgrid"></script>
إعدادات التنسيق
max-results=9 : و هو المسؤل عند عدد المواضيع التي سوف يتم عرضها
var mudwnp_title = true : و هو المسؤل عن عرض العناوين
var mudwnp_thumbs = 72 : و هو المسؤل عن حجم الصور
ملحق
إذا اردت عرض مواضيع قسم معين استبدل اخر جزء من الكود بالاعلى بالتالي
<script src="/feeds/posts/summary/-/BLOGGER?max-results=9&alt=json-in-script&callback=mudwnpgrid"></script>
مع إستبدال كلمة BLOGGER باسم القسم المراد عرض مواضيع
و يمكنك إستبدال رقم 9 بالعدد الذي تريده و هو خاص بعدد المواضيع التي سيتم عرضها
دمتم بود