إضافة أنيقة جدا لأحدث المقالات لمدونات بلوجر أو لتصنيف معين

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

طريقة التركيب

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

- أذهب الى " لوحة التحكم " في المدونة .

- أضغط فوق " قالب " .

- ثم أختر " تحرير HTML " .

- أضغط " Ctrl + F " لأظهار اداة البحث .

- قم بالبحث عن

</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/AVvXsEhYVpip9DGWp_UJsE6Ea_E_QqxT9GnZLbr3IOJ25oZBsKV0hj1TlyB_r-ZmoScAIFh-OYBORj9RWskrmiXwZXU-VStJ58Sg4aPVytA1B5jUAYMnaEVgjPhQzExRRILnnh26mnr7SAlBVRq2/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>

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

- قم بالبحث عن

</b:skin>

- قم بوضع هذا الكود " فوقها مباشرة ".

/* إضافة أنيقة جدا لأحدث المقالات لمدونات بلوجر أو لتصنيف معين */

.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;}

/* إضافة أنيقة جدا لأحدث المقالات لمدونات بلوجر أو لتصنيف معين */

أضغط " حفظ النموذج "

كود Script يُضاف كأداة HTML/Javascript 

1- إذهب الى لوحة التحكم .

2- ثم الى التخطيط .

3- ثم أختر أضافة أداة 

HTML/Javascript

أو داخل أى موضوع تقوم بانشائه بحيث يتم وضعه من خلال وضع HTML للموضوع أثناء انشائه.

<center>

<script>

  var bsrpg_thumbSize = 135; 

  var bsrpg_showTitle = true;

</script>

<script src="/feeds/posts/summary/-/فيديوهات?max-results=12&alt=json-in-script&callback=bsrpGallery"></script>

</center>

شارك على جوجل بلس

عن المصمم