wesamdev

افلام هندية$type=sticky$count=4$show=home

$show=home

|روبوتات_$type=slider$source=random-posts$snippet=hide$cate=20$show=home

|اضافات بلوجر$type=three$m=0$rm=0$h=400$c=3$show=home

$show=home

wesamdev

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

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

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

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

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


إضافة عرض مواضيع بلوجر في الصفحة الرئيسية


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

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


هذه الإضافة ستمكنك من تحويل اي قالب بلوجر بسيط الى قالب بلوجر احترافي ومن مميزاتها :

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

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


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

  1. أداة عرض مواضيع بلوجر التي سوف اقدمها لك تعتمد على Jquery لتفعيل اكوادها لذلك قم بالبحث عن عبارة jquery في مدونة بلوجر، في حالة وجدت سكريبت شبيه بما السكريبت اسفله قم بتحديثه ان كان قديم حسب الإصدار المعلم بالأحمر، اما ان لم تجد السكريبت قم بإضافته اسفل<body>مباشرة.
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    

  3. نقوم الآن بتركيب جافا سكريبت والتي سوف نقوم بوضعها في آخر body تبع قالب بلوجر وبالخصوص فوق الوسم </body> مباشرة.
  4. <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>
    

  5. الآن نقوم بتركيب Css في قالب بلوجر قم بالتوجه الى قالب بلوجر وابحث عن </b:skin> وضع اكواد Css التالية فوقها مباشرة .
  6. .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}
    

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

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

    بالنسبة لتصنيف المواضيع فسوف تكتبه بدل كلمة recent المعلمة اما ان كنت تريد ان يتم عرض المواضيع حسب آخر المشاركات فأترك كلمة recent كما هي فهي تشير الى ان المواضيع ستعرض ابتداء من الاحدث.

  8. <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

BLOGGER
الاسم

اخبار,45,اداة للكمبيوتر,7,اضافات بلوجر,88,افلام اجنبي,9,افلام روسية,32,افلام عربي مترجمة الي الروسية,1,افلام قديمة,2,افلام هندي,8,البرمجة,8,الجديد في التكنولوجيا,46,العاب,9,النمر,7,اليوتيوب,16,اندرويد,15,اندرويد استوديو,3,برامج كمبيوتر,11,بلوجر,8,تركيا,6,تصميم,3,تطبيقات,20,جافاسكريبت,3,حوادث,5,حول العالم,65,حيوانات,25,خلفيات,1,دروس HTML| بالعربية,2,روبوتات,8,روسيا,60,سياحة,4,سيارات,12,سياسة,17,شروحات,34,شريط الاخبار,1,صحتي,2,طائرات,22,فن,35,قناة الوعي نور,4,قناة قعدة تاريخ,8,قوالب بلوجر,3,كتب الكترونية,7,مالتي ميديا,6,متصفح,2,محليات,4,مسلسل لعبة الحبار,1,مسلسلات اجنبية,2,مسلسلات رمضان 2022,1,مسلسلات رمضان 2120,1,مصر والعرب,2,معدات حربية,34,معدات زراعية,6,مقالات,100,مواصلات النقل,1,مواقع للتصميم,14,وثائقي,14,وسوم بلوجر,2,ويندوز,15,Antivirus,3,Button,1,c++,1,css,37,HTML,11,wesam,2,
rtl
item
Wesam: كود عرض مواضيع مدونة بلوجر في الصفحة الرئيسية بشكل احترافي
كود عرض مواضيع مدونة بلوجر في الصفحة الرئيسية بشكل احترافي
اداة اواضافة عرض مواضيع بلوجرالتي سأقدمها لك تدعم مجموعة من الخصائص والإمكانيات التي تسمح لك بالتحكم في عدد المواضيع التي تريدها ان تعرض، اضافةً انه ي
https://1.bp.blogspot.com/-neaq350xKOM/YUDAYD34KyI/AAAAAAAAWhs/GIZ0hBBcwo0lD98wHxmtjk-qqjeBj9FhgCLcBGAsYHQ/s16000/%25D9%2583%25D9%2588%25D8%25AF%2B%25D8%25B9%25D8%25B1%25D8%25B6%2B%25D9%2585.png
https://1.bp.blogspot.com/-neaq350xKOM/YUDAYD34KyI/AAAAAAAAWhs/GIZ0hBBcwo0lD98wHxmtjk-qqjeBj9FhgCLcBGAsYHQ/s72-c/%25D9%2583%25D9%2588%25D8%25AF%2B%25D8%25B9%25D8%25B1%25D8%25B6%2B%25D9%2585.png
Wesam
https://www.wesamdev.com/2021/09/Display-Blogger-blog-topics-on-the-home-page.html
https://www.wesamdev.com/
https://www.wesamdev.com/
https://www.wesamdev.com/2021/09/Display-Blogger-blog-topics-on-the-home-page.html
true
1297279864306511161
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content