آخر الأخبار

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

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

كود عرض مواضيع مدونة بلوجر في الصفحة الرئيسية بشكل احترافي

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

أداة عرض مواضيع مدونة بلوجر حسب التصنيف في الصفحة الرئيسية

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

مميزات الأداة
  • مظهر جذاب وأنيق: تصميم عصري يتناسب مع مختلف أنواع المدونات.
  • عرض المواضيع حسب التصنيف أو آخر المشاركات: يمكنك اختيار عرض المواضيع بناءً على تصنيف معين أو حسب آخر المشاركات.
  • التحكم في عدد المواضيع المعروضة: يمكنك تحديد عدد المواضيع التي تريد عرضها.
  • تصميم متجاوب: الأداة متوافقة مع جميع الأجهزة (الهواتف، الأجهزة اللوحية، والحواسيب).
  • سرعة الأداء: الأداة سريعة ولا تؤثر على أداء المدونة.
خطوات تركيب الأداة
إضافة مكتبة jQuery

تأكد من وجود مكتبة jQuery في قالب بلوجر. إذا لم تكن موجودة، أضف الكود التالي قبل </body>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
إضافة كود JavaScript

قم بإضافة الكود التالي قبل </body> في قالب بلوجر:


<script type='text/javascript'>
//<![CDATA[
function generator7(e, t, a) {
    var s;
    s = "recent" == e ? "/feeds/posts/default?alt=json-in-script&max-results=" + a : "/feeds/posts/default/-/" + e + "?alt=json-in-script&max-results=" + a, document.getElementsByClassName("posts7")[t].innerHTML = "", $.ajax({
        type: "get",
        url: s,
        data: "data",
        dataType: "jsonp",
        success: function(e) {
            var a=e.feed.entry[1].link.length-1;$(".conloader").eq(0).remove();for(let m=0;m<e.feed.entry.length;m++){var l=e.feed.entry[m].link[a].title,n=e.feed.entry[m].link[a].href,s=(s=e.feed.entry[m].hasOwnProperty("media$thumbnail")?e.feed.entry[m].media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8BA1HJ9zZGXC2k1R8JqpLXBCoVlYI4kPjBcXfjJblhrhCvARVT04rDqXo43qyEecPhkWpafCegZhLXmckjR535JSZy37yC2Y8o5aVGutMC8G9RORwV5gsy81wMI11J3rMD2KV_QN-GyQ/s72-c/no+image+by+7amian+%25D9%2584%25D8%25A7+%25D8%25AA%25D9%2588%25D8%25AC%25D8%25AF+%25D8%25B5%25D9%2588%25D8%25B1%25D8%25A9.png").replace("s72-c","s300"),r=e.feed.entry[m].published.$t,i=(r=r.substring(0,10)).split("-"),c=i[2]+" "+["","يناير","فبراير","مارس","ابريل","ماي","يونيو","يوليوز","غشت","شتنبر","اكتوبر","نونبر","دجنبر"][parseInt(i[1])]+" "+i[0],o=document.createElement("span");e.feed.entry[m].hasOwnProperty("content")?o.innerHTML=e.feed.entry[m].content.$t:o.innerHTML="";var d=document.createElement("div");d.className="post7",d.innerHTML='<a class="thumb7" title="'+l+'" href="'+n+'"><img alt="'+l+'" src="'+s+'"/></a><div class="info7"><h6 class="tit7"><a title="'+l+'" href="'+n+'">'+l+'</a></h6><div class="items7"><svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="clock" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon small-icon"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3l-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg><span class="date7">'+c+'</span></div><div class="short-content7">'+o.textContent.substring(0,120)+"...</div></div>",document.getElementsByClassName("posts7")[t].appendChild(d)}
        }
    }), "recent" == e ? $(".tool7").eq(t).append('<div style="text-align:center"><a class="readm7" href="/search">عرض المزيد</a></div>') : $(".tool7").eq(t).append('<div style="text-align:center"><a class="readm7" href="/search/label/' + e + '">عرض المزيد</a></div>')
}
var sele = document.getElementsByClassName("posts7").length;
for (let e = 0; e < sele; e++) {
    var lblr7 = document.getElementsByClassName("posts7")[e].innerHTML,
        llblr = lblr7.split("/"),
        lbl78 = llblr[1].replaceAll("\n", ""),
        ro97 = llblr[0].replaceAll("\n", ""),
        div78 = document.createElement("div");
    div78.className = "conloader", div78.innerHTML = '<div class="loader7"></div>', document.getElementsByClassName("tool7")[e].appendChild(div78), generator7(lbl78, e, ro97)
}//]]>
</script>
    
إضافة كود CSS

أضف الكود التالي قبل </b:skin> في قالب بلوجر:


.toool7{position:relative;width:100%;height:auto}
.posts7{position:relative;width:100%;height:auto;display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:10px;text-align:right;direction:rtl;box-sizing:border-box;padding:5px}
.post7{width:auto;height:auto;background-color:#fff;border-radius:5px;padding:5px;transition:all 2s}
.thumb7{width:auto;height:170px;position:relative;display:block;border-radius:5px;overflow:hidden;border:solid 1px #ccc}
.thumb7 img{display:block;object-fit:cover;width:100%;height:100%}
.tit7{line-height:1;margin:2px 0 2px 0;font-family:inherit}
.tit7 a{font-size:14px;color:#333;text-decoration:none;transition:200ms}
.tit7 a:hover{color:rgb(10,0,151)}
.items7{border:solid 1px #eee;border-right:transparent;border-left:transparent;line-height:0;padding:8px 0;margin:5px 0}
.items7 svg{width:12px;display:inline-block;line-height:0;margin:0 1px 0 5px;color:#888;vertical-align:middle}
.date7{font-size:12px;color:#888}
.short-content7{display:block;font-size:11px;color:#999}
@media(max-width:650px){.posts7{grid-template-columns:1fr 1fr}}@media(max-width:400px){.posts7{grid-gap:5px}.thumb7{height:120px}}@media(max-width:350px){.posts7{grid-template-columns:1fr}.thumb7{height:200px}}
@keyframes loadme7{0%{transform:rotate(0deg)}40%{transform:rotate(360deg)}100%{transform:rotate(1080deg)}}
.loader7{position:absolute;width:50px;height:50px;margin:10px auto;border:solid 5px #0000aa;border-right-color:transparent;border-top-color:transparent;border-left-color:transparent;border-radius:100%;animation:linear loadme7 2000ms;animation-iteration-count:infinite;transition:1s}
.conloader{justify-content:center;align-items:center;display:flex;width:100%;height:100px}
.readm7{background-color:#fff;margin:10px auto;padding:0 20px;border-radius:5px;border:solid 1px #eee;font-size:20px;font-weight:bold;text-decoration:none;color:#111;display:inline-block;transition:200ms}
.readm7:hover{color:#0000ff}
.title7a{text-align:right;direction:rtl;box-shadow:0 0 2px #aaa;border-radius:3px;box-sizing:border-box;margin:5px;padding:0 5px 0 0;color:#111;background-color:#fff;font-size:large;line-height:2}
    
إضافة كود HTML

أضف الكود التالي في المكان الذي تريد عرض الأداة فيه (يفضل وضعه في الصفحة الرئيسية):


<b:if cond='data:blog.url == data:blog.homepageUrl'> 
    <div class="tool7">
        <h5 class="title7a">عنوان الآداة</h5>
        <div class="posts7">6/recent</div>
    </div>
</b:if>
    
شرح كود JavaScript

الوظيفة الرئيسية (generator7):

  • تقوم هذه الوظيفة بجلب المواضيع من مدونة بلوجر بناءً على التصنيف أو آخر المشاركات.
  • تستخدم $.ajax للاتصال بخدمة Blogger API لجلب البيانات.
  • تعرض البيانات في شكل بطاقات تحتوي على صورة، عنوان، تاريخ، وملخص للموضوع.

تحديد عدد المواضيع والتصنيف:

  • يتم تحديد عدد المواضيع والتصنيف من خلال الكود 6/recent حيث:
  • 6 هو عدد المواضيع.
  • recent يشير إلى آخر المشاركات. يمكن استبداله باسم التصنيف المطلوب.

عرض المزيد:

  • يتم إضافة زر "عرض المزيد" الذي يقوم بتوجيه المستخدم إلى صفحة تحتوي على المزيد من المواضيع.
الخلاصة

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

🌟 انتبه عزيزي أعضاء المجتمع! 🌟
نحن متحمسون لمشاركتك في مناقشاتنا الديناميكية. لضمان بيئة محترمة وشاملة للجميع، نطلب تعاونكم مع الإرشادات التالية:
1. احترام الخصوصية: يرجى عدم مشاركة معلومات حساسة أو شخصية في تعليقاتك.
2. انشر الإيجابية: نحن نتمسك بسياسة عدم التسامح مطلقًا مع خطاب الكراهية أو اللغة المسيئة. دعونا نحافظ على محادثاتنا محترمة وودية.
3. اللغة المفضلة: لا تتردد في التعبير عن نفسك باللغة الإنجليزية أو العربية. ستساعدنا هاتان اللغتان في الحفاظ على مناقشة واضحة ومتماسكة.
4. احترام التنوع: لتعزيز جو شامل، نطلب منك بكل احترام تجنب مناقشة المسائل الدينية في تعليقاتك.
تذكر أن مساهماتك قيمة، ونحن نقدر التزامك بجعل مجتمعنا مكانًا ترحيبيًا للجميع. دعونا نواصل التعلم والنمو معًا من خلال المناقشات البناءة والاحترام المتبادل.
شكرًا لكونك جزءًا من مجتمعنا اوعي وشك! 🌟

إرسال تعليق