Безплатен блог на платформата 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]='http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/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. Елате пак, може да си харесате още нищо.

        Изтриване

    ИНТЕРЕСНО!Да направим уникална темата на нашия блогИЗБЕРИ!