اداة عرض مواضيع مدونة بلوجر في الصفحة الرئيسية حسب التصنيف وحسب العدد الذي تريد
 |
| أداة عرض المشاركات في مدونتك حسب التسميات |
هل تريد تحويل قالب بلوجر عادي الى قالب احترافي ؟ او تريد اداة عرض مواضيع مدونة بلوجر حسب التصنيف ؟
في هذا المقال سوف اقدم لك اداة عرض مشاركات بلوجر في الصفحة الرئيسية بشكل احترافي وحسب التصنيف او التسمية التي تريد.
إضافة عرض مواضيع بلوجر في الصفحة الرئيسية
بسم الله الرحمان الرحيم والصلاة والسلام على اشرف المرسلين سيدنا محمد وعلى آله وصحبه ومن تبعه بإحسان الى يوم الدين، اما بعد، احبتي متابعي مدونة حميان للمعلوميات اليوم في قسم اضافات بلوجر سوف اقدم لكم اداة عرض مواضيع مدونتك على الصفحة الرئيسية بشكل احترافي وانيق.
اداة او اضافة عرض مواضيع بلوجر التي سأقدمها لك تدعم مجموعة من الخصائص والإمكانيات التي تسمح لك بالتحكم في عدد المواضيع التي تريدها ان تعرض، اضافةً انه يمكنك تحديد نوعية المواضيع التي تريد ان تعرضها هل ؟ حسب آخر المشاركات او حسب تصنيف معين.
مميزات اداة عرض مواضيع مدونة بلوجر في الصفحة الرئيسية
هذه الإضافة ستمكنك من تحويل اي قالب بلوجر بسيط الى قالب بلوجر احترافي ومن مميزاتها :
- مظهر جذاب وانيق.
- اظهار المواضيع حسب التصنيف او اخر المشاركات.
- امكانية التحكم في عدد المواضيع التي تريدها ان تعرض.
- تتميز اداة عرض المواضيع بكونها متجاوبة مع الهاتف ومختلف انواع الأجهزة.
- سريعة جدا.
تقوم اضافة عرض مواضيع مدونة بلوجر بعرض المشاركات حسب التسميات والعدد الذي حددته فتعرض كل موضوع مع صورة و اسم الموضوع وتاريخه اضافة الى خلاصة صغيرة من نص الموضوع، كما ان الإضافة تحتوي على زر عرض المزيد لتوجه لعرض المزيد من المواضيع المشابهة لما هو معروض.
طريقة تركيب اداة عرض مواضيع مدونة بلوجر حسب التصنيف في الصفحة الرئيسية
لمعرفة كيفية تركيب اداة عرض مواضيع مدونة بلوجر لا بد من مشاهدة هذا الفديوا والذي يشرح بالتفصيل طريقة تركيب اكواد اداة عرض مشاركات بلوجر في الصفحة الرئيسية بالتفصيل :
قبل ان تقوم بتطبيق اي شيء على قالب بلوجر مدونتك لا تنسى تحميل نسخة إحتياطية له لتفادي فقدانه في حالة حدوث اخطاء.
1- أداة عرض مواضيع بلوجر التي سوف اقدمها لك تعتمد على Jquery لتفعيل اكوادها لذلك قم بالبحث عن عبارة jquery في مدونة بلوجر، في حالة وجدت سكريبت شبيه بما السكريبت اسفله قم بتحديثه ان كان قديم حسب الإصدار المعلم بالأحمر، اما ان لم تجد السكريبت قم بإضافته اسفل <body> مباشرة.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><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/AVvXsEixQB05sj1o6QeaTDuX-5dLaiaCBV-ldXp7s4L4q89XNMwXyYFIMcoqx8OtNO8PPnoXPdAXilkchagd2i_aKw2jmY6_jS9z-UxaqXT_flWCP17X1DBfLVV6uXACEF99xOLaCgENYeIFGH8/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"><h3 class="tit7"><a title="'+l+'" href="'+n+'">'+l+'</a></h3><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>.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}قم بالتعديل على العبارات المعلمة منها عنوان الاداة و عدد المواضيع التي تريد ان يتم عرضها اضافة الى تصنيف الذي تريد ان يتم جلب المواضيع حسبه.
بالنسبة لتصنيف المواضيع فسوف تكتبه بدل كلمة recent المعلمة اما ان كنت تريد ان يتم عرض المواضيع حسب آخر المشاركات فأترك كلمة recent كما هي فهي تشير الى ان المواضيع ستعرض ابتداء من الاحدث.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class="tool7">
<h2 class="title7a">عنوان الآداة</h2>
<div class="posts7">6/recent</div>
</div>
</b:if>ملحوظة
يمكنك اضافة أداة عرض مواضيع بلوجر حسب التصنيف داخل قالب بلوجر أكثر من مرة وبالعدد الذي تريد حيث يمكنك ان تعرض في كل مرة المواضيع حسب تصنيف معين (واقصد بهذا اكواد Html فقط).
الى هنا يكون شرح اداة عرض مشاركات مدونة بلوجر في الصفحة الرئيسية قد انتهى كنتم مع محسن حميان على مدونة حميان للمعلوميات
Tags
اضافات بلوجر
شرح مفيد
ردحذفطيب لو أنا عاوز أضيف التصنيفات أعمل ايه ؟ كمان فيه ملحوظة الصور بتطلع باهته ومش كويسة ازاى اخليها واضحة ؟
ردحذفعلما بأن مدونتى باللغة الانجليزية
حذف