شروحات إضافات بلوجر في الانترنت كثيرة، وخصوصا اضافة عرض اخر مشاركات المدونة، لكن اغلب هذه الاضافات ذات مظهر بسيط غير مميز، بخصائص محدودة لذلك في هذه التدوينة انشاء الله سوف اقدم لكم اداة لعرض مواضيع بلوجر بشكل انيق وجذاب مع الوان كثيرة ومتنوعة تضفي على المواضيع المعروضة رونقا جميلا يميزها عن باقي الاضافات.
السلام عليكم ورحمة الله تعالى بركاته احبتي متابعي مدونة حميان للمعلوميات اليوم سوف أقدم لكم إضافة بلوجر جميلة ونادرة وهي عبارة عن اداة تقوم بعرض مواضيع مدونة بلوجر في الشريط الجانبي Sidebar بشكل جميل ورائع والوان كثيرة ومتناسقة تضفي على المشاركات رونق جذاب، تدعم هذه الاداة مجموعة من الخصائص التي يمكنك التحكم فيها حيث يمكنك تحديد عدد المشاركات المراد اظهارها كما يمكنك اختيار عرض المواضيع حسب اخر المشاركات او حسب تسمية معينة Label.
مميزات ادة عرض مشاركات بلوجر على الشريط الجانبي
- عرض مواضيع المدونة بسرعة بسبب كونها تعتمد على الجافا مباشرة دون الحاجة الى Jquery .
- الوان جذابة تثير انتباه الزائر لضغط على الموضوعات المعروضة على الاداة .
- تدعم خاصية تحديد عدد المشاركات المراد عرضها على المدونة.
- تدعم خاصية عرض المواضيع حسب تسمية معينة Label .
- مدعومة بخاصية Hover في CSS التي تؤدي الى استجابة المواضيع لتحرك سهم الفأرة .
كود اداة عرض المشاركات مع طريقة التركيب
<script>
var NumpofPost = 10;
var label = "recent";
</script>
<style>
#zawaall{position:relative;display:block;width:100%;height:auto;box-sizing:border-box;text-align:right;font-size:14px;direction:rtl;font-weight:700}#zawaall li{position:relative;display:block;float:right;list-style:none!important;border:solid 1px #eee;border-radius:5px;padding:5px;margin:0;width:100%;height:auto;color:#fff;transition:300ms;cursor:pointer;box-sizing:border-box}#zawaall li>a>img{width:50px;height:50px;border-radius:100px;float:right;padding:0;box-sizing:border-box;margin:0 0 0 5px}#zawaall li>a{width:50px;height:50px;box-sizing:border-box}#zawaall li>div>a{text-decoration:none;color:#fff}#zawaall li:hover{box-shadow:0 0 5px 1px #000;z-index:1000}
</style>
<div id="zawa"><ul id="zawaall"></ul></div>
<script>
var colors = ["#F90000","#D41600","#ff8400","#64D500","#00ab07","#3498DB","#0057D5","#0300D5","#C200D5","#D50091"];
var num = 0;
function zarafun(e){for(let r=0;r<e.feed.entry.length;r++){var n=document.createElement("li"),t=(e.feed.entry[r].link.length,e.feed.entry[r].link[4].title),a=e.feed.entry[r].link[4].href,l="";l=e.feed.entry[r].hasOwnProperty("media$thumbnail")?e.feed.entry[r].media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS14aJCpSnUgdrisaS-PIjvyPesq54q8avQJVkmg_fxZX5Ur7U8fbr23Ns8MS14ydnss8rd9Zq_ETldKzt0THxSTgx_Axu-lA7XfEtqHn8rQESUSVZQB_18qX6H5QrDozWC-6A5YseFeg/s72-c/nth.png",n.innerHTML='<a href="'+a+'" target="_blank"><img src="'+l+'" alt=""/></a><div><a href="'+a+'" target="_blank">'+t+"</a></div>",n.style.backgroundColor=colors[num],document.getElementById("zawaall").appendChild(n),num++,num>9&&(num=0)}}
var s_n_o;"recent"==label?((s_n_o=document.createElement("script")).src="/feeds/posts/default?alt=json-in-script&max-results="+NumpofPost+"&callback=zarafun",document.getElementById("zawa").appendChild(s_n_o)):((s_n_o=document.createElement("script")).src="/feeds/posts/default/-/"+label+"?alt=json-in-script&max-results="+NumpofPost+"&callback=zarafun",document.getElementById("zawa").appendChild(s_n_o));
</script>- اداة عرض مواضيع المدونة تتميز بكونها تدعم امكانية تحديد عدد المشاركات المراد عرضها لذلك يمكنك تحديد من خلال السكريبت قم بتحديد قيمة NumpofPost حسب ما تريد في هذه الحالة تم تحديد عدد المشاركات المراد عرضها في حدود 10 مواضيع.
- كما ان الاداة تدعم خاصية تحديد نوعية المواضيع التي تريد عرضها بمعنى لو اردت ان يتم عرض اخر المشاركات تضع قيمة المتغيير Label بقيمة recent كما هو موضح في السكريبت اما في حالة اذا اردت عرض المواضيع حسب تسمية معينة ضع قيمة المتغير Label بقيمة التسمية المراد عرض المواضيع حسبها بمعنى قم باستبدال recent الموضحة في السكريبت باسم التسمية التي تريد.
انتهى شرح اداة عرض مشاركات بلوجر على الشريط الجانبي اتمنى ان يكون الموضوع قد اعجبكم كنت مع محسن حميان على مدونة حميان للمعلوميات.