Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

Сходни публикации, като адаптивна притурка за Blogger

"Сходни публикации"
Здравейте! Предлагам на вашето внимание една притурка за Blogger - "Сходни публикации“ в 9 стила. Тя дори може да се нарече " Сходни публикации - девет в едно (девет различни притурки в една), защото може да се настрои в девет различни варианта. Ако имате нужда от сходни публикации с миниатюри, моля, ако искате без миниатюри, заповядайте, и така нататък. При определяне настройките на притурката просто трябва да се променя в кода цифрата от 1 до 9, с което избирате стила на сходните съобщения, както вие предпочитате.




    За подробности относно инсталирането и настройката на притурката, ще прочетете по-долу. Притурката "Сходни публикации" се състои от две
    части:

    ➤CSS код, който определя стиловете и

    ➤Скрипт, който трябва да добавите към вашия блог в самия шаблон.
    Това се извършва лесно.


    Как да се добави притурката "Сходни публикации" в Blogger


    Отиваме в панела на управление ➔ избираме Шаблон ➔ редактиране на HTML кода. След това трябва да използвате функцията за търсене в шаблона и с помощта на клавиатурата натискаме Ctrl + F отваряме прозореца за търсене. В него поставяме тага </ head> и натискаме Enter. Затварящият таг </ head> се открива маркиран в жълто. Точно над него поставяме кода за стиловете за притурката. Този CSS код е:


    <style type='text/css'>
    .related-posts-container{margin:55px 0px;}.related-posts-container h4{font:20px &#39;Open Sans&#39;, sans-serif;margin-bottom:20px;}.related-posts-container ul,.related-posts-container ul li{list-style: none;margin: 0;padding: 0;}.related-posts-container ul li a{text-transform:capitalize !important;font:bold 13px &#39;Open Sans&#39;, sans-serif;outline: 0;}.related-snippets{margin-top:5px;font:italic 12px &#39;Open Sans&#39;, sans-serif;}.related-posts-1 li{list-style:inside none disc !important;}.related-posts-1 li,.related-posts-2 li{border-top:1px solid rgba(0,0,0,0.04);padding:0.8em 0 !important;}.related-posts-1 li:first-child,.related-posts-2 li:first-child{border-top:medium none;}li.related-post-item{margin:0 3% 3% 0 !important;width:22.7%;float:left;list-style:none;position:relative;}li.related-post-item:last-child{margin:0 0 2% !important;}.related-thumb-large{width:100%;height:auto;border:none;margin:0px auto 10px;padding:0 !important;}.related-posts-8 li .related-title,.related-posts-9 li .related-title,.related-posts-9 li .related-snippets{padding-left:74px;}.related-posts-8 li:nth-child(even),.related-posts-9 li:nth-child(even){margin:0 0 4% !important;}.related-posts-8 li,.related-posts-9 li{background-color:#ffffff;box-shadow:0 0 4px rgba(180, 180, 180, 0.55);width:42% !important;float:left;margin:0 4% 4% 0 !important;padding:3% !important;}.related-thumb{float:left;height:64px;margin-right:10px;object-fit:cover;width:64px;}.related-posts-6 li,.related-posts-6 a{line-height:0 !important;}.related-posts-6 .related-thumb-large{margin-bottom:0;}.related-posts-7 li.related-post-item{margin:0 !important;width:25% !important;}.related-wrapper{position:absolute;left:0px;right:0;top:0px;bottom:0;margin:0 auto;z-index:4;background:rgba(77,77,77,0.2);}.related-wrapper-inner{position:relative;height:100%;z-index:99;width:100%;display:table;vertical-align:middle;text-align:center;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}.related-wrapper .related-title{vertical-align:middle;display:table-cell;color:#ffffff;font:bold 16px &#39;Open Sans&#39;, sans-serif;padding:0 20px;}.related-date{margin-top:5px;font:italic 11px &#39;Open Sans&#39;, sans-serif;color:#999999;}


    </style>




    След като запазим промените, повторно използваме търсенето в шаблона, за да намерим този ред:


    <b:includable id='postQuickEdit' var='post'> 

    Тук също така търсеният ред е маркиран в жълто. Сега, точно над  </b:includable> добавяме скрипта за извеждане на свързани публикации след всяка една такава от нашия блог. Ако над


    <b:includable id='postQuickEdit' var='post'> 



    предходният код не е отворен, разгърнете го, като кликнете върху черния триъгълник срещу него. Превъртаме внимателно надолу по целия код до затварящия го </b:includable>. Скриптът за добавяне е:


    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='related-posts-container' id='related-posts-widget'/>
    <div style='clear: both;'/>
    <script type='text/javascript'>
    var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];
    var relatedSettings = {
    blogURL:&quot;<data:blog.homepageUrl/>&quot;,
    relatedHeading:&quot;&lt;h4&gt;&lt;span&gt;Прочетете още:&lt;/span&gt;&lt;/h4&gt;&quot;,
    relatedPosts:4,
    relatedStyle:9,
    thumbnailSize:&quot;w300-h200-p-nu&quot;,
    defaultThumb:&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirD_w25SHUM7OmLHJIPB-yRmvuSi3kU24Tikt1Gn0fqIxr2bNG12Lybb8rEhV2AMUTSpOD8msYmrpEs73Q3ZYNoqUWRHTse2di8I9JYqw9EbTmP_6L1BXWwL4wgXi1qmsNVvG07vYUecEx/w300-c-h200/no-thumb.png&quot;,
    roundThumbs:false,
    titleLength:&quot;auto&quot;,
    snippetLength:45,
    centerText:false,
    openNewTab:false
    };</script>
    <script type='text/javascript'>
    //<![CDATA[
    var randomRelatedIndex,startRelated;!function(a,b,c){var d={callBack:function(){}};for(var e in relatedSettings)d[e]="undefined"==relatedSettings[e]?d[e]:relatedSettings[e];var f=function(a){var d=b.createElement("script");d.type="text/javascript",d.src=a,c.appendChild(d)},g=function(a,b){return Math.floor(Math.random()*(b-a+1))+a},h=function(a){var c,d,b=a.length;if(0===b)return!1;for(;--b;)c=Math.floor(Math.random()*(b+1)),d=a[b],a[b]=a[c],a[c]=d;return a},i="object"==typeof labelArray&&labelArray.length>0?"/-/"+h(labelArray)[0]:"",j=function(a){var b=a.feed.openSearch$totalResults.$t-d.relatedPosts,c=g(1,b>0?b:1);f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&start-index="+c+"&max-results="+d.relatedPosts+"&callback=startRelated")},k=function(a){var l,m,n,o,p,q,b=document.getElementById("related-posts-widget"),c=h(a.feed.entry),e=d.relatedStyle,f=d.relatedHeading+'<ul class="related-posts-'+e+'">',g=d.openNewTab?' target="_blank"':"",i=d.centerText?"text-align:center;":"",j=d.roundThumbs?"-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;":"",k='<span style="display:block;clear:both;"></span>';if(b){for(var r=0;r<d.relatedPosts&&r!=c.length;r++){n=c[r].title.$t,o="auto"!==d.titleLength&&d.titleLength<n.length?n.substring(0,d.titleLength)+"&hellip;":n,p="media$thumbnail"in c[r]&&d.thumbnailSize!==!1?c[r].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/"+d.thumbnailSize):d.defaultThumb,l=h(c[r].published.$t);for(var s=[1,2,3,4,5,6,7,8,9,10,11,12],t=["January","February","March","April","May","June","July","August","September","October","November","December"],u=l.split("-")[2].substring(0,2),v=l.split("-")[1],w=l.split("-")[0],x=0;x<s.length;x++)if(parseInt(v)==s[x]){v=t[x];break}postdate=v+" "+u+" "+w,q="summary"in c[r]&&d.snippetLength>0?c[r].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.snippetLength)+"&hellip;":"";for(var y=0,z=c[r].link.length;y<z;y++)m="alternate"==c[r].link[y].rel?c[r].link[y].href:"#";1==e?f+='<li><a href="'+m+'" '+g+">"+o+"</a></li>":2==e?f+='<li><a href="'+m+'" '+g+'><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":3==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":4==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":5==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+"</div></a></li>":6==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-wrapper" style="'+j+'"><div class="related-wrapper-inner"><div class="related-title">'+o+"</div></div></div></a></li>":7==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"></a></li>':8==e?f+='<li class="related-post-item"><a class="related-post-item-wrapper" href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":9==e&&(f+='<li><a href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>")}b.innerHTML=f+="</ul>"+k,d.callBack()}};randomRelatedIndex=j,startRelated=k,f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]);
    //]]>
    </script>


    </b:if>




    Запаметете шаблона и проверете работата на притурката. По подразбирате тя има 4 правоъгълни миниатюри, заглавията им и датата на публикуване.

    Инсталирането на притурката е готово. А сега да минем към настройките. Да видим какво може да се измени и какви стилове има тя.

    Как да настроим притурката „Сходни публикации“ 




    ➤В реда - relatedHeading: &quot;&lt;h4&gt;&lt;span&gt;Прочетете още:&lt;/span&gt;&lt;/h4&gt;&quot;, - можете да промените текста, като го замените със "Сходни публикации" или нещо подобно;

    ➤В реда - relatedPosts: цифрата 4, е броя на сходните публикации. Може да изберете да са 3, 5 или друго;

    ➤А тук - relatedStyle: 4, е най-интересното. С изменение на цифрата от 1 до 9 се променя стила на притурката. Например, при 1 ще имаме притурка без миниатюра, само със заглавието на публикацията; Или например, при цифра 7 ще има само картинки, миниатюри. А с помощта на цифрата 9 тя ще бъде с такъв стил:






    Няма да разказвам какъв е стилът на притурката при избор на останалите цифри, нека бъде, както се казва, изненада за вас. Експериментирайте. Да минем към настройките по-нататък.


    ➤Редът - thumbnailSize: "w300-h200-p-nu", и defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirD_w25SHUM7OmLHJIPB-yRmvuSi3kU24Tikt1Gn0fqIxr2bNG12Lybb8rEhV2AMUTSpOD8msYmrpEs73Q3ZYNoqUWRHTse2di8I9JYqw9EbTmP_6L1BXWwL4wgXi1qmsNVvG07vYUecEx/w300-h200-c/no-thumb.png", - променя размерът на миниатюрите;

    ➤А в този ред - roundThumbs:false, - ако обозначението false смените на true ще имате овални миниатюри;

    ➤В реда - snippetLength:45 се задава количеството на символите след заглавието на публикацията. По-голямо значение, повече символи в описанието след заглавието;

    ➤Тук - centerText:false, - можете да центрирате заглавието на публикацията, заменяйки значението false на true;


    Това е всичко, приятели. Надявам се, че тази притурка ще ви хареса и вие ще я инсталирате на своя блог.
    Доскоро и успех на всички вас, без изключения. Даже и на Олга Протасова, която ми забрани да чета всички нейни блогове.

    Здраве за всички! Не забравяйте да правите добро на други хора!

    Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

    BGtop

    Няма коментари:

    Публикуване на коментар