اضافة قائمة منسدله أحترافية لأخر المواضيع من الأقسام - عالم المدون

الاثنين، 10 أبريل، 2017

اضافة قائمة منسدله أحترافية لأخر المواضيع من الأقسام

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



معاينة للأضافة من قالب أحجار



شرح التركيب



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


.mega-menu-wrapper {top: 220px;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;}


  • فى الكود الأول فى أول وسم محدد بالأحمر
  • يوجد رقم 220 عليك تغيير عندما تضيف القائمة حتى يتناسب مع مدونتك
  • الأن الكود الثانى وسوف تضعه فوق الوسم هذا</body>فى مدونتك



<script>
//<![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>



  • فى هذا الكود يوجد وسم محدد بالأحمر 
  • يجب أن يكون id القائمة بنفس الأمر هكذا main-menu
  • او يمكنك تغييره كما فى id القائمة لديك 
  • الأن تقوم بحفظ القالب وننتقل للخطوة المهمه
  • لكى تعمل معك القائمة بدون مشكلة
  • يجب أن يكون القائمة الرئيسية أولا الفرعيه فى مدونتك تعمل من التخطيط
  • كما فى الصورة التالى كما فى الصورة التالى




  • تضع التسمية كان تريده مكان الأسم 
  • وفى الخانة التانى تقوم بوضع كلمة mega 
  • وهكذا سوف تعمل معك القائمة بدون مشكلة 


وهكذا كان موضوع اليوم بالتوفيق للجميع فى أمان الله 


لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق



شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

  • اضافة تعليق
  • 65 تعليق على موضوع : اضافة قائمة منسدله أحترافية لأخر المواضيع من الأقسام

    أزال المؤلف هذا التعليق.

    يجب أخى أن تكون القائمة تعمل من التخطيط

    مينفعش تتعمل من القالب من جوا يعنى نحط url نحط فيه mega هى هى ؟

    لا لن تعمل
    ولكن اضافةقائمة من التخطيط سهل جدا وأفضل من وضعها فى القالب من الداخل

    بس المشكلة التخطيط مفيهوش اضافة قائمة

    عليك أنت اضافة أداة جديده فى التخطيط حتى تتمكن من أضافة قائمة روابط فى الماكن الذى تريدها

    انا ممكن اضيف اداة فى التخطيط بس هل لو عملتها وكتبت الاقسام هتظهر فى نفس المكان الى المفروض تظهر فيه ؟ ولا لازم اعدلها

    لا أكيد لازم تعدل عليه لكون كما تريدها

    انا شلت القائمة الى من جوا القالب وحطيط مكانها تخطيط وعملت القائمة من التخطيط ب المشكلة انه مش بتظهر قائمة منسدلة

    طبب انا شلت الاقسام وعرفت احطها فى التخطيط وحطيتها صح بس مش بتظهر قائمة منسدلة

    لازم يكون ضع التسمية تصحيح فى قائمة الروابط التى قمت بأنشاءها
    مع وضع mega فى خانة الرابط

    عملد كدا فعلا ومظهرتش لما بدوس عليها بتحولنى لصفحة الخطأ

    ضع رابط مدونتك للمعاينة

    جرب على مدونه اخر

    وجربت الاضافة فى قالب تانى به القائمة من التخطيط ومشتغلتش بردو ودا معاينه http://adssssad.blogspot.com.eg/

    جربت على مدونة اخرى ومشتغلتش بردو نفس المشكلة http://adssssad.blogspot.com.eg/

    اخى راجع كدا الاضافه لانها تقريبا فيه غلطه لانى جربتها اكترمن 3 مرات على مدونات مختلفه

    الإضافة تعمل بدون مشكلة ولكنى سوف أجربه على قالب تانى

    اخى هل اشتغلت على القالب الى مت فيه بتجربته ام لا وهل وجد حل ؟؟

    انا لم أجربها الى الأن مشغول فقط

    اخى ارجوك تجربها وتقلى الحل

    ان شاء الله ولكن تعمل على مدونتى بدون مشكلة

    جربتها على قالب مدونتك السابق لم تشتغل ايضا ارجوك محتاج الاضافة ضرورى

    حسنا أخى أنا أستخرجت الأكواد من مدونتى ولم أرجاعها
    وسوف أرجاع الأكواد من الممكن أننى لم اضف شئ

    تم تحديث الموضوع أخى الأن ووضع رابط معاينة اخر للإضافة
    راجع الموضوع من جديد

    لم تشتغل معى دا معاينة http://adssssad.blogspot.com.eg/
    خلى هل id القاشمة فى هذا القالب هوا .navbot
    وهل اغير .main-menu ul li a كلها الى ال id ام اغير main-menu
    وهغيره ايضا فى كود ال css

    تغيير فقط main-menu
    وايضا فى الcss

    اخى id القائمة موجوجد فى القالب بهذا الشكل < nav id='menu' >
    جربته على قالب نسيم اشتغل عادى
    اظن ان المشكلة من هذا الوسم المفروض يكون على هذا الشكل < div class='main-menu
    اليس كذلك ؟ وعن تغير اسم القائمة تختفى القائمة من القالب نهائي لانه مرتبطه باكواد css

    نعم أخى عندم تقوم يتغييؤ ال id عليك ايضا تغيير فى أكواد الcss
    وبخصوص قالب نسيم هو نفس ال id الذى أستخدم فى احجار وقالب مدنتى
    ويمكنك وضع مع الوسم < nav id='menu' > بداخله class ال main-menu

    عليك أخى التباع الموضوع جيدا

    هتعرف تضيف لي اضافة قائمة منسدله أحترافية لأخر المواضيع من الأقسام

    راجع الموضوع سوف تعمل معك أخى

    هتعرف تضيف لي اضافة قائمة منسدله أحترافية لأخر المواضيع من الأقسام ??

    هتعرف تضيف لي اضافة قائمة منسدله أحترافية لأخر المواضيع من الأقسام 2
    admin

    كما أخبرك راجع الموضوع سوف تعمل معك

    اخي انا اضفات الاضافه وتعمل ولاكن بظهر جزئ صغير جدن منها ارجو الرد السريع

    ضع رابط مدونتك أخى

    تفضل ياخي الرابط ولاكن هاذا القالب اصممه ليس قالب مدونتي الفعلي :http://myartecle.blogspot.com.eg/

    المشكلة من القالب أخى أستخدم قالب اخر وسوف تعمل معك

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

    أرجو منك وضع رابط مدونتك بعد تركيب الإضافة

    تفضل هذه رابط المدونة ولكنها تحت التطوير
    https://memo-elkhawaga.blogspot.com/
    واخى ايضا اريد الكود الخاص بالقائمة المنسله وشكرا على ما تقدمه

    هل قمت بتركيب الإضافه

    نعم اخي الكريم قمت بإضافتها مكان ads-header قمت بوضع الكود داخله لكن بعد تعليقك ذهبت مرة اخري لكي اتأكد من ثم اختفت ads-header فهل من سبب

    ما هو الكود الذى وضعته مكان ads-header
    لا يجب عليك وضع أى كود مكان أى كود أخر

    اخى يوجد مگان الاعلانات الذي هو بجانب الشعار كان كود الاعلانات فأزلت كود الاعلانات و قمت بأضافة الكود الذي انت تحدثت عنه في موضوع وهو الذي يوضع المكان الذي اريدههذا ما اتحدث عنه
    للعلم انا هو هو نفس الشخص (الخواجه للمعلوميات)

    أخى أنا أقول ذلك فى شرخ الإضافه عليك مرجعت الشرح لمعرف كيفية التركيب الصحيحه

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

    مرحبا بك أخى
    اذا لم تعرف كيفية وضع الإضافه يمكنك أرسال قالب مدونتك لتركيبها لك

    ما هو الايميل الخاص بك لكى ارسل لك الطلب واشكرك جدا على مجهودك الخاص واذا تمكنت ايضا من انك ترى ما هى مشكلة عدم قبول التعليق التلقائي

    أرسل نسخة من القالب أخى
    عن طريق صفحة أتصل بنا

    اخى الكريم عندما اضغط ارسال لا يرسل شئ فسأقوم بأرسالها على الصفحة الخاصة بالفيسبوك واسم حسابى Memo Elkhawaga
    وانا الوحيد على شبكة فيسبوك بهذا الاسم :>) 8-)

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

    اخى الكريم هل وجدت حل مشكلة قالبى

    مشغول فقط أخى الفاضل
    عندما أتفرغ سوف أعمل عليها

    اخي ممكن تستخرج الmega-menu و سكربت عرض المواضيع بحسب التسمياات من قوالب اجنبية احترافية مثل mega-mag b-mag ijonkz و جزاك الله خيرا

    السلام عليكم ممكن اخي الشرح اكثر حول id القائمة وكيف سأغير الكود التالي المكتوب بالأحمر(".main-menu ul li a")

    ضع رابط مدونتك حتى اعرف لك ما هو الكود الذى سوف تغيره

    يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
    الأبتساماتأخفاء الأبتسامات

    جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر