إضافة عرض مواضيع مدونة بلوجر في الشريط الجانبي لقالب بلوجر
بسم الله والصلاة والسلام على اشرف المرسلين محمد صلى الله عليه وسلم، اليوم ان شاء الله في قسم اضافات بلوجر على مدونة حميان للمعلوميات سوف اقدم لكم اضافة رائعة وجميلة تتمثل في أداة تقوم بعرض مشاركات بلوجر في الشريط الجانبي حسب مجموعة من الخواص المدعومة من طرف هذه الإضافة.
هذه الإضافة تمتاز بمجموعة من الخصائص التي تمكنك من التحكم فيها وبالخصوص في طريقة عرض هذه المشاركات ونوعها، حيث يمكنك من خلال هذه الأداة عرض المشاركات حسب التصنيف او حسب آخر المواضيع، كما يمكنك ايضا اختيار عرض مواضيع بلوجر بشكل عشوائي، اضافة انه يمكنك التحكم في عدد المواضيع المراد عرضها.
مميزات اداة عرض مواضيع مدونة بلوجر في الشريط الجانبي
تدعم اداة عرض مواضيع مدونة بلوجر في Sidebar مجموعة من الخصائص تتمثل في :
- امكانية التحكم في عدد مواضيع مدونة بلوجر التي يجب عرضها.
- تدعم خاصية عرض مواضيع بلوجر حسب آخر المشاركات.
- تدعم ميزة عرض مواضيع بلوجر حسب تصنيف معين تحدده.
- تدعم امكانية عرض مشاركات بلوجر بشكل عشوائي.
- الاداة تعتمد على مكتبة Jquery.
- الإضافة سريعة جدا حيث تم برمجتها باستعمال خوارزميات مختصرة.
- إمكانية اضافة الأداة اكثر من مرة اقصد بهذا Html فقط مع تغيير الإعدادات في كل مرة.
تركيب اضافة عرض مشاركات مدونة بلوجر في Sidebar بسهولة
أداة عرض مقالات مدونة بلوجر في الشريط الجانبي تعتمد على مكتبة Jquery لتنفيذ اكواد الجافا سكريبت لذلك في حالة اذا لم تجد Jquery في مدونتك على بلوجر قم بإضافته، واذا كان موجود قم بتحديثه الى آخر نسخة :
- في حالة اذا كانت مدونتك على بلوجر لا تحتوي على Jquery قم بوضع هذا السكريبت اسفل العبارة <body> مباشرة.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>- يمكنك الحصول على آخر نسخة من Jquery من خلال Google Hosted Libraries ( رابط آخر نسخة من سكريبت Jquery )
اول شيء نبدأ في تركيبه بالنسبة لأداة عرض مواضيع بلوجر في Sidebar هو الجافا سكريبت والتي يجب اضافتها في القالب اسفل body بمعنى فوق الوسم </body> مباشرة.
<script type='text/javascript'>
//<![CDATA[
var monthss = ["7amian", "يناير", "فبراير", "مارس", "ابريل", "ماي", "يونيو", "يوليوز", "غشت", "شتنبر", "اكتوبر", "نونبر", "دجنبر"];
function InSidbarby7amian(e, t, a) {
var n, i = e,
l = !1;
"recent" == t ? n = "/feeds/posts/default?alt=json-in-script&max-results=" + e : "random" == t ? (l = !0, n = "/feeds/posts/default?alt=json-in-script&max-results=150") : n = "/feeds/posts/default/-/" + t + "?alt=json-in-script&max-results=" + e, $.ajax({
type: "get",
url: n,
data: "data",
dataType: "jsonp",
success: function(e) {
var t = e.feed.entry.length,
n = e.feed.entry[0].link.length - 1,
s = [];
$(".tool-jami").eq(a).html("");
for (let e = 0; e < t; e++) s.push(e);
1 == l && (s = s.sort(() => Math.random() - .5), t = i);
for (let i = 0; i < t; i++) {var r = s[i],d = e.feed.entry[r].published.$t,o = (d = d.substring(0, 10)).split("-");$(".tool-jami").eq(a).append('<div class="post-jami"><div class="thumb-jami"><a title="' + e.feed.entry[r].link[n].title + '" href="' + e.feed.entry[r].link[n].href + '"><img alt="' + e.feed.entry[r].link[n].title + '" src="' + e.feed.entry[r].media$thumbnail.url.replace("s72-c", "w90-h80-c") + '"/></a></div><div class="info-jami"><h2><a title ="' + e.feed.entry[r].link[n].title + '"href="' + e.feed.entry[r].link[n].href + '">' + e.feed.entry[r].link[n].title + '</a></h2><span class="date-jami">' + o[2] + " " + monthss[parseInt(o[1])] + " " + o[0] + "</span></div></div>")}
}
})
}
var trrtby7amian = $(".tool-jami").length;
for (let e = 0; e < trrtby7amian; e++) {var allinone = $(".tool-jami").eq(e).html().split("/");InSidbarby7amian(parseInt(allinone[0]), allinone[1], e)}
//]]>
</script>الان نقوم بتركيب اكود CSS في قالب بلوجر، نقوم بنسخ الاكواد ولصقها فوق </b:skin> مباشرة.
.post-jami{display:flex;flex-direction:row;direction:rtl;margin:0 10px;padding:6px 0;border-bottom:solid 1px #f1f1f1;box-sizing:border-box;align-items:center}
.post-jami:last-child{border:none}
.thumb-jami a::before{content:"";display:block;position:absolute;width:100%;height:100%;background-color:#00000075;opacity:0;transition:250ms}
.thumb-jami a::after{content:"";display:block;position:absolute;z-index:99;width:26px;height:26px;top:27px;right:32px;background:no-repeat center url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' focusable='false' data-prefix='fal' data-icon='external-link-alt' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M440,256H424a8,8,0,0,0-8,8V464a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V112A16,16,0,0,1,48,96H248a8,8,0,0,0,8-8V72a8,8,0,0,0-8-8H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V264A8,8,0,0,0,440,256ZM480,0h-.06L383.78.17c-28.45,0-42.66,34.54-22.58,54.62l35.28,35.28-265,265a12,12,0,0,0,0,17l8.49,8.49a12,12,0,0,0,17,0l265-265,35.28,35.27c20,20,54.57,6,54.62-22.57L512,32.05A32,32,0,0,0,480,0Zm-.17,128.17-96-96L480,32Z'%3E%3C/path%3E%3C/svg%3E");opacity:0;transition:250ms}
.thumb-jami a:hover::before,.thumb-jami a:hover::after{opacity:1;transition:250ms}
.thumb-jami a{position:relative;float:right;display:block;overflow:hidden;border:solid 1px #eee;border-radius:5px;width:90px;height:80px}
.thumb-jami a img{width:100%;height:100%;display:block}
.info-jami{margin-right:5px}
.info-jami h2{display:block;padding:0;margin:0;font-size:15px;line-height:1.5}
.info-jami h2 a{font-family:inherit;text-decoration:none;color:#111111;transition:200ms}
.info-jami h2 a:hover{color:#00f}
.date-jami{font-size:12px;color:#aaa;margin-right:3px}الان وصلنا الى المرحلة المهمة وهي تركيب Html والذي يجب ان تقوم بتركيبه من خلال التنسيق مع مراعات الإعدادات التالية :
- قم بالتوجه الى التنسيق من خلال الشريط الجانبي لبلوجر.
- اختر اضافة اداة جديدة في مساحة الشريط الجانبي لمدونتك.
- اختر اضافة اداة HTML/JavaScript وضع عنوان من اختيارك.
- ضع الكود التالي في المحتوى مع تغيير الإعدادات كما تريد.
<div class="tool-jami">3/recent</div>إعدادات اداة عرض مواضيع بلوجر في Sidebar
- يمكن تغيير عدد المواضيع التي المراد عرضها من خلال تغيير الرقم 3 الى اي رقم تريد.
- في حالة اردت عرض اخر المشاركات دع كلمة recent كما هي .
- في حالة اردت عرض مشاركات عشوائية استبدل كلمة recent ب كلمة random.
- في حالة اردت عرض المواضيع حسب تصنيف معين قم بإستبدال كلمة recent باسم التصنيف المراد.
الى هنا يكون شرح كيفية اضافة اداة عرض مقالات بلوجر في الشريط الجانبي قد انتهى كنتم مع محسن حميان على مدونة حميان للمعلوميات
Tags
اضافات بلوجر