من أكثر الموضوعات التى أعجبتنى بأحد المدونات المتخصصة فى مجال بلوجر هى إضافة أداة كمعرض بأخر وأحدث موضوعات المدونة أو قسم - وسم أو تسمية - معينة بل ويمكن وضع الكود داخل أى موضوع بسهولة. هذه الأداة موجودة على بلوجر بالفعل ولكن ليست بنفس احترافية الكود الذى سنطرحه لكم الأن . اذا كنت تهتم بهذه الأداة تفضل باتباع تعليمات التنفيذ.
نأخذ نسخة إحتياطية من القالب.
كود 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/AVvXsEjIgW-W-OHvyxWZ3W7Kt9OOTiePXmZYlQh98_HLsx54xpAQTCN9JmLZr5v0K-Lk2UdzvSJl4ALizOYr1sgI1e0N5Mj1fIkpBnMTGec2S0IRepgyE5vL19wmmbpJgpLHfYNFD4TkaME7AcBz/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>
/* th3pc 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;}
/* th3pc Recent Posts Image Gallery CSS End */
4- كود Script يُضاف كأداة HTML/Javascript أو داخل أى موضوع تقوم بانشائه بحيث يتم وضعه من خلال وضع HTML للموضوع أثناء انشائه.
يمكنك تغيير أبعاد الصورة من 150 الى ما يناسب مدونتك.
يمكنك إظهار عنوان الموضوع أسفل الصورة أو إخفائه بتغيير كلمة true الى false.
يمكنك تخصيص كود Script فى الخطوة رقم 4 ليكون خاص بقسم أو وسم معين داخل مدونتك ولتتمكن من ذلك قم باستخدام (/feeds/posts/summary/-/Lable name) بدلا من (/feeds/posts/summary) حيث ان Lable name هو اسم القسم أو الوسم المراد إظهار موضوعاته.
اذا حدثت أى مشكلة فى ظهور الإضافة , فضلا قم بوضع كود ال CSS و كود Script -أى أكواد الخطوة 3 و 4- مع بعضهما ولكن يجب أن يكون كود CSS ينتهى بالوسم </script> وهذا فى حالة استخدام الأكواد داخل أداة HTML/Javascript أو داخل أى موضوع. وشكرا على حسن متابعتكم مع الشكر الوفير للرائع Greenlava لعرضه الكود.
شكر. وهذه الوظيفة هي مفيدة جدا
ردحذف