أداة أحدث الموضوعات لمدونات بلوجر أو لقسم معين بطريقة مميزة

 أداة أحدث الموضوعات لمدونات بلوجر أو لقسم معين بطريقة مميزة

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

1- نأخذ نسخة إحتياطية من القالب.

2- كود JavaScript ويتم وضعه قبل أو فوق وسم </head>

<script>

// طريقة إضافة أخر الموضوعات للمدونة أو قسم معين بشكل معرض

//<![CDATA[

function bsrpGallery(root) {

    var entries = root.feed.entry || [];

    var html = ['<div class="bsrp-gallery nopin" title="Get this from abu-iyad.com">'];

    for (var i = 0; i < entries.length; ++i) {

        var post = entries[i];

        var postTitle = post.title.$t;

        var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhrG8eHgIXLGN2vad2vucK1pqLHqB7rs_8ulkLfhyaqKyrH95Uo0-JSLq3Dlhev-zoQstLF8wKCTL1Wf13Uo4PxwgyrWWHMpqFjMZlCSa8o0N5OFaiF0ddxNucnihCIOk-qMKqvh37G-9y/s72-c/default+image.png';

        var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');

        var links = post.link || [];

        for (var j = 0; j < links.length; ++j) {

            if (links[j].rel == 'alternate') break;

        }

        var postUrl = links[j].href;

        var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';

        var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';

        var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';

        html.push('<div class="bs-item">', item, '</div>');

    }

    html.push('</div>');

    document.write(html.join(""));

}

//]]>

</script>

3- كود CSS ويتم وضعه قبل أو فوق وسم </b:skin>

/* Abu-iyad Recent Posts Image Gallery CSS Start */

.bsrp-gallery {padding:10px; clear:both;}

.bsrp-gallery:after {content: "";display: table;clear: both;}

.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}

.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}

.bsrp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;}

.bsrp-gallery a:hover img {background: #ee7e22;}

/* Abu-iyad Recent Posts Image Gallery CSS End */

4- كود Script يُضاف كأداة HTML/Javascript أو داخل أى موضوع تقوم بانشائه بحيث يتم وضعه من خلال وضع HTML للموضوع أثناء انشائه.

<script>

  var bsrpg_thumbSize = 150;

  var bsrpg_showTitle = true;

</script>

<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=bsrpGallery"></script>

ملاحظات:

يمكنك تغيير أبعاد الصورة من 150 الى ما يناسب مدونتك.

يمكنك إظهار عنوان الموضوع أسفل الصورة أو إخفائه بتغيير كلمة true الى false.

يمكنك تخصيص كود Script فى الخطوة رقم 4 ليكون خاص بقسم أو وسم معين داخل مدونتك ولتتمكن من ذلك قم باستخدام (/feeds/posts/summary/-/Lable name) بدلا من (/feeds/posts/summary) حيث ان Lable name هو اسم القسم أو الوسم المراد إظهار موضوعاته.