اداة اواضافة عرض مواضيع بلوجرالتي سأقدمها لك تدعم مجموعة من الخصائص والإمكانيات التي تسمح لك بالتحكم في عدد المواضيع التي تريدها ان تعرض، اضافةً انه ي
ادوات عرض مواضيع مدونة بلوجر موجود في كل قوالب بلوجر بمختلف الأشكال والانواع وفي غالب الأحيان تعرض في الصفحة الرئيسية لكن من النادر ان تجد مواضيع في الانترنت تقدم ادوات او اضافات معروضة لتركيب اليدوي وبالخصوص الإضافات التي تعرض مواضيع مدونة بلوجر في الصفحة الرئيسية لهذا اليوم سأقدم لكم إضافة رائعة لعرض المواضيع على مدونتك بشكل جذاب حسب التصنيف الذي تريد مع امكانية تحديد عدد المواضيع التي تريد ان تعرض.
هل تريد تحويل قالب بلوجر عادي الى قالب احترافي؟ او تريداداة عرض مواضيع مدونة بلوجر حسب التصنيف؟
في هذا المقال سوف اقدم لكم اداة عرض مشاركات بلوجر في الصفحة الرئيسية بشكل احترافي وحسب التصنيف او التسمية التي تريد.
إضافة عرض مواضيع بلوجر في الصفحة الرئيسية
بسم الله الرحمن الرحيم والصلاة والسلام على اشرف المرسلين سيدنا محمد وعلى آله وصحبه ومن تبعه بإحسان الى يوم الدين، اما بعد، احبتي متابعي مدونة wesam devloper اليوم في قسم اضافات بلوجر سوف اقدم لكم اداة عرض مواضيع مدونتك على الصفحة الرئيسية بشكل احترافي وانيق.
اداة اواضافة عرض مواضيع بلوجرالتي سأقدمها لك تدعم مجموعة من الخصائص والإمكانيات التي تسمح لك بالتحكم في عدد المواضيع التي تريدها ان تعرض، اضافةً انه يمكنك تحديد نوعية المواضيع التي تريد ان تعرضها هل ؟ حسب آخر المشاركات او حسب تصنيف معين.
مميزات اداة عرض مواضيع مدونة بلوجر في الصفحة الرئيسية
هذه الإضافة ستمكنك من تحويل اي قالب بلوجر بسيط الى قالب بلوجر احترافي ومن مميزاتها :
- مظهر جذاب وانيق.
- اظهار المواضيع حسب التصنيف اواخر المشاركات.
- امكانية التحكم في عدد المواضيع التي تريدها ان تعرض.
- تتميز اداة عرض المواضيع بكونها متجاوبة مع الهاتف ومختلف انواع الأجهزة.
- سريعة جدا.
تقوم اضافة عرض مواضيع مدونة بلوجربعرض المشاركات حسب التسميات والعدد الذي حددته فتعرض كل موضوع مع صورة و اسم الموضوع وتاريخه اضافة الى خلاصة صغيرة من نص الموضوع، كما ان الإضافة تحتوي على زر عرض المزيد لتوجه لعرض المزيد من المواضيع المشابهة لما هو معروض.
طريقة تركيب اداة عرض مواضيع مدونة بلوجر حسب التصنيف في الصفحة الرئيسية
لمعرفة كيفية تركيب اداة عرض مواضيع مدونة بلوجر لا بد من مشاهدة هذا الفديوا والذي يشرح بالتفصيل طريقة تركيب اكواداداة عرض مشاركات بلوجر في الصفحة الرئيسيةبالتفصيل :
قبل ان تقوم بتطبيق اي شيء على قالب بلوجر مدونتك لا تنسى تحميل نسخة إحتياطية له لتفادي فقدانه في حالة حدوث اخطاء.
- أداة عرض مواضيع بلوجر التي سوف اقدمها لك تعتمد على Jquery لتفعيل اكوادها لذلك قم بالبحث عن عبارة jquery في مدونة بلوجر، في حالة وجدت سكريبت شبيه بما السكريبت اسفله قم بتحديثه ان كان قديم حسب الإصدار المعلم بالأحمر، اما ان لم تجد السكريبت قم بإضافته اسفل<body>مباشرة.
- نقوم الآن بتركيب جافا سكريبت والتي سوف نقوم بوضعها في آخر body تبع قالب بلوجر وبالخصوص فوق الوسم </body> مباشرة.
- الآن نقوم بتركيب Css في قالب بلوجر قم بالتوجه الى قالب بلوجر وابحث عن </b:skin> وضع اكواد Css التالية فوقها مباشرة .
-
الآن وصلنا الى مرحلة تركيب اكواد Html بلوجر حيث يجب وضع هذه اكواد في المكان الذي تريد ان تظهر فيه الأداة بالضبط وكما قلت سابقا ان المكان المناسب هو فوق آخر المشاركات حيث يكون الشريط الجانبي Sidbar على يسار أداة عرض مواضيع بلوجر.
قم بالتعديل على العبارات المعلمة منها عنوان الاداة و عدد المواضيع التي تريد ان يتم عرضها اضافة الى تصنيف الذي تريد ان يتم جلب المواضيع حسبه.
بالنسبة لتصنيف المواضيع فسوف تكتبه بدل كلمة recent المعلمة اما ان كنت تريد ان يتم عرض المواضيع حسب آخر المشاركات فأترك كلمة recent كما هي فهي تشير الى ان المواضيع ستعرض ابتداء من الاحدث.
<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://1.bp.blogspot.com/-E8uXoi9RvC4/YMdasLy0poI/AAAAAAAAAWQ/C3D3ICVLRV8cPBMKFUYsGQwByVCxah70ACLcBGAsYHQ/s72-c/no%2Bimage%2Bby%2B7amian%2B%25D9%2584%25D8%25A7%2B%25D8%25AA%25D9%2588%25D8%25AC%25D8%25AF%2B%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}
<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 فقط).
wesam developer
إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا
COMMENTS