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

Търсене

Breaking

Притурка сходни публикации с миниатюри

Притурка сходни публикации
Здравейте, приятели. В скорошна моя публикация споделих с вас как да направите притурка сходни публикации под формата на списък в Blogger. И в нея се оплаквах, че аналозите с изображения работят лошо или въобще на работят.



    Прегледах и пробвах много варианти и днес представям на вашето внимание работеща притурка сходни публикации с миниатюри под всяка публикация в блога.

    За притурката

     Тя изглежда така:


    сходни публикации


    Тествах я в стандартните шаблони на Blogger и в шаблони на трети страни. Навсякъде се показват изображенията и заглавията на публикациите по подобна тема съвсем точно. В допълнение, има възможност да редактирате кода, за да зададете своя собствен стил на притурката и да я направите уникална. Но това ще анализираме по-долу. Междувременно нека преминем към инсталирането ѝ.

    Инсталиране

    За начинаещи е по-добре да опитат всичко на тестовите си блогове. И не забравяйте да архивирате темата, създавайки нейно резервно копие, преди да работите с кода на основния си блог.

    Стъпка 1.  Отидете в раздела Тема ➔ редактиране на HTML кода ➔ В темата чрез F(този начин може би не съм споделяла ) търсим затварящия таг </ head>  и непосредствено над него вмъкваме следния код:


    <!--Related Posts with thumbnails Scripts and Styles Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    #related-posts{float:left;width:auto;}
    #related-posts a{border-right: 1px dotted #eaeaea;}
    #related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
    #related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
    #related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
    </style>

    <script type='text/javascript'>
    //<![CDATA[
    var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpCK5JWYTxGtzRRGNDVICxoiygnUo9gg432k2HqmbFv3kTP9xGc4TXoRufif8pBA71KEPXKZWI-QjLuCCS_VodYiL29cvzwr48Qkc640DSdQkMeTFOV9xGBcU-ij1tfrR0l45S5RKUTi_-/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
    //]]>
    </script>
    </b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->



    В червено е маркиран участъкът от кода, отговарящ за CSS стиловате. Както споменах по-горе, това ще разясним в края на тази публикация.


    Стъпка 2.  Търсим в кода на темата редовете

    <div class='post-footer-line post-footer-line-1'>

    или

    <div class='post-footer-line post-footer-line-2'>

    или


    <div class='post-footer-line post-footer-line-3'>


    Под един от тези редове поставяте кода:


    <!-- Related Posts with Thumbnails Code Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=35&quot;' type='text/javascript'/></b:loop>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=5;
    var relatedpoststitle=&quot;<b>Препоръчвам:</b>&quot;;
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script>
    </div>
    </b:if>
    <!-- Related Posts with Thumbnails Code End-->



    Запаметяваме и преглеждаме която и да е публикация в блога. Ако притурката не се показва връщаме се обратно в кода на темата и търсим реда

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

    И над затварящия таг </b:includable> вписваме кода. Запаметяваме. Сега притурката трябва да е на мястото си.



    Настройки


    А сега да настроим стиловата на притурката. Тук нека се развихри фантазията ви. Можете да ѝ предадете съвършено неповторим дизайн.

    В първия код:

    ➤#related-posts{float:left;width:auto;} – в този код можете да добавите фон на целия блок  #related-posts{background:#eaeaea;float:left;width:auto;}

    ➤#related-posts a{border-right: 1px dotted #eaeaea;} – тази част от кода отговаря за едва видимите разделители между изображенията. Експериментирайте, ако намирате за необходимо.

    ➤#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} - този участък отговаря за наименованието на блока. Можете да зададете необходимия размер нашрифта (font:18px), цвят на шрифта (color:#999999;). По подразбиране тук не е зададен фон на наименованието (background:none;). Ако искате да има такъв, заменете none с нужното ви значение, например с background:#eaeaea;

    ➤#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; } – са стиловете на миниатюрите. Тук border:2px solid #f2f2f2; - е размера и цвета на рамката около изображението. webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; - е заоблянето на ъглите им. Ако и на трите места замените значението 5px на 100 ще имате изображения с абсолютно кръгла форма.

    ➤Обърнете внимание на височината и ширината на изображенията width:110px;height:100px;. Можете на ги направите по-големи или по-малки.


    ➤#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}- определя цвета, разположението и размера на текста под изображението. Променете ги, ако намирате за нужно.

    Във втория код може да се редактира броя на показващи се сходни публикации. За това отговаря участъка в него var maxresults=5; . Защото е възможно притурката да има два реда, ако в един ред не стигне мястото.

    Смятам, че нищо не съм пропуснала. Започвайте с инсталирането на притурката, ако ви е необходима. И ако имате въпроси моля, задайте ги в коментарите.

    Успех на всички ни! Да следващия път.



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

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

    BGtop



    2 коментара:

    1. Нина Андреева18:19

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

      ОтговорИзтриване
      Отговори
      1. Елате пак, може да си харесате още нищо.

        Изтриване