قائمة قائمة منسدله أحترافية لمدونات بلوجر تجعل من مدونتك أكثير جملية وتتيح لزوار مدونتك مشاهد أخر مواضيع أقسام مدونتك وهذا ما يسهل عليهم معرفة اخر المواضيع من كل قسم بعدد مواضيع 4 وهذه الإضافة أستخدمها الأن فى قالب مدونتى الجديد ويمكنك معاينها فى مدونتى ونمر الأن لشرح التركيب .
شرح التركيب
- اولا تقوم بالبحث عن هذا الوسم]]></b:skin>ثم تقوم بوضع الكود التالى فوقه
.mega-menu-wrapper {top: 60px;position: fixed;left: 0;right: 0;opacity: 0;z-index: 99;-webkit-transform: rotate3d(1, 0, 0, 90deg) perspective(800px);transition: all 0.3s ease-out;} .mega-menu-wrapper:before{content:'';display:block;height:6px;position:absolute;top:-6px;left:0;right:0;background:transparent}.main-menu ul li:hover .mega-menu-wrapper{opacity:1;-webkit-transform: rotate3d(1, 0, 0, 0deg);} .clearfix{zoom:1}.mega-post{text-align: center;padding:0!important;width:23%;margin:0 1%!important}.mega-menu{background:#fff;padding:1.5% .5%!important;overflow: hidden;margin-top: -4px;box-shadow: 0 0 6px rgba(0,0,0,0.27);} .mega-post a{margin:0!important} .mega-post.clearfix a {padding: 0;height: 0;} .mega_post-title{color: #FFF;margin: 0;line-height: 22px;font-size: 16px;position: absolute;bottom: 0;width: 100%;padding: 20px 10px;background-image: linear-gradient(transparent,rgba(0, 0, 0, 1));} .mega-tags span{margin:0 1px;display:inline-block}.mega-tags i{margin:0 5px;font-size:16px} .mega-tags {display: none;}
- الأن الكود الثانى وسوف تضعه فوق الوسم هذا</body>فى مدونتك
<script type='text/javascript'> /*<![CDATA[*/ var theLabel=$(".main-menu ul li a");theLabel.each(function(c){var e=$(this),f=e.text(),g=e.attr("href");if("mega"===g){var h=e.parent();e.addClass("mega-icon"),e.attr("href","/search/label/"+f+"?&max-results=10");f.match(/<.*>/g);f.replace(/<.*>/g,""),$.ajax({url:"/feeds/posts/default/-/"+f+"?alt=json-in-script&max-results=4",type:"get",dataType:"jsonp",success:function(c){for(var e=new Array,f="",g=0;g<4;g++){for(var r,i=c.feed.entry[g],j=i.title.$t,k=i.author[0].name.$t,l=c.feed.entry[0].published.$t,m=l.substring(0,4),n=l.substring(5,7),o=l.substring(8,10),p=[,"يناير ","فبراير ","مارس ","أبريل ","مايو ","يونيو ","يوليو ","أغسطس ","سبتمبر ","أكتوبر ","نوفمبر ","ديسمبر "],q=o+" "+p[parseInt(n,10)]+" "+m,t=0;t<i.link.length;t++)if("alternate"==i.link[t].rel){r=i.link[t].href;break}if("content"in i)var u=i.content.$t;s=u,a=s.indexOf("<img"),b=s.indexOf('src="',a),o=s.indexOf('"',b+5),d=s.substr(b+5,o-b-5),a!=-1&&b!=-1&&o!=-1&&""!=d&&(e[g]=d);var v=e[g].replace("s1600/","s500-c/"),f=f+'<li class="mega-post clearfix"><a href="'+r+'" class="mega_post-image" style="background: url('+v+') no-repeat center;background-size: cover;height: 200px;"></a><a href="'+r+'"><h3 class="mega_post-title truncate">'+j+'</h3></a><div class="mega-tags"><span><i class="material-icons"> </i>'+k+'</span><span><i class="material-icons"> </i>'+q+"</span></div></li>"}h.append('<div class="mega-menu-wrapper"><div class="container"><ul class="mega-menu clearfix">'+f+"</ul></div></div>")}})}}); /*]]>*/ </script>
- الأن تقوم بحفظ القالب وننتقل للخطوة المهمه
- لكى تعمل معك القائمة بدون مشكلة
- يجب أن يكون القائمة الرئيسية أولا الفرعيه فى مدونتك تعمل من التخطيط
- كما فى الصورة التالى كما فى الصورة التالى
- تضع التسمية كان تريده مكان الأسم
- وفى الخانة التانى تقوم بوضع كلمة mega
- وهكذا سوف تعمل معك القائمة بدون مشكلة
وهكذا كان موضوع اليوم بالتوفيق للجميع فى أمان الله
المصدر عالم المدون
إرسال تعليق
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).