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

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

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

مميزات الأداة

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

خطوات تركيب الأداة

إضافة مكتبة 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 يشير إلى آخر المشاركات. يمكن استبداله باسم التصنيف المطلوب.

عرض المزيد:

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

الخلاصة

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