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

Търсене

Breaking

Публикации. Във вид на списък или мрежов изглед в Blogger

Публикация списък или мрежа в Blogger
Добър ден, приятели. По подразбиране публикациите в главната страница на блога ни се показват във вид на списък. Но със сигурност сте обърнали внимание, че в модерни блогове постовете на главната страница се показват в мрежов изглед. Наистина така вниманието на посетителя със сигурност е привлечено.



    Кратко описание

    Прилича много на възможността, която предлага Facebook да се преглеждат постовете както желаете, във вид на списък или в мрежов изглед. Изглежда така.


    Така изглеждат бутоните

    Искам да споделя с вас как да инсталирате в блога си приспособление, с което да се превключва от преглед в списък към мрежов изглед и обратно. За да може потребителят сам да реши как да възприема съдържанието по-удобно.

    По този начин местоположението на публикациите ще изглежда като списък.



    списък


    А така има мрежов изглед.


    мрежов изглед




    Тези бутони ще се виждат само на главната страница, на страниците с етикетите и архива.


    Предимства

    ◾Чрез лесно натискане на бутоните, читателят може да превключи на желания режим на гледане;

    ◾Кодът не изисква скрипт jQuery;

    ◾В режим на списък публикациите ще се показват с автоматичен бутон Read More и миниатюри с определен размер;

    ◾Във вид на мрежа под курсор се използва красив hover ефект с лека прозрачност и се показва името на публикацията с броя на коментарите;

    Ако има желание за инсталиране на такъв превключвател за списък / мрежа, нека пристъпим към инсталацията му.
    Всички промени и допълнения се правят директно в раздела Тема. Затова препоръчвам предварително да направите резервно копие на шаблона или да опитате първо в тестовия си блог. Въпреки че няма нищо особено и сложно. Стъпките са три.

    Първа стъпка

    Отидете в раздела Тема и намерете затварящия маркер </ head>. Над него впишете следния код:


    <script type='text/javascript'>
    function list_view(){
    if(document.getElementsByClassName(&quot;post&quot;)) {elementArray = document.getElementsByClassName(&quot;post&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-grid-view&quot;;}}
    if(document.getElementsByClassName(&quot;post-title&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title-grid&quot;;}}
    }
    function grid_view(){
    if(document.getElementsByClassName(&quot;post-grid-view&quot;)) {elementArray = document.getElementsByClassName(&quot;post-grid-view&quot;); while (elementArray.length) {elementArray[0].className = &quot;post&quot;;}}
    if(document.getElementsByClassName(&quot;post-title-grid&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title-grid&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title&quot;;}}
    }
    </script>
     <script type='text/javascript'>
    posts_no_thumb_sum = 100;
    posts_thumb_sum = 350;
    </script>

    <script type='text/javascript'>
    //<![CDATA[
    function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }
    strx = s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
    }
    function createSummaryAndThumb(pID, pURL, pTITLE){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = posts_no_thumb_sum;
    if(img.length>=1) {
    imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>';
    summ = posts_thumb_sum;
    }

    else {
    imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnnNWqWfISJnF4IHWCYMS99mCniMxo4RGChuscoVKwajWdlgZqS4MnDvTZtDwEbi_OUTM9ScUDuae2R1QZTKg3di88TJYzlgdc60ypzzpb6eq0a7cNq4Nzj8tUBXd2DXJtxTZbDlw-4O-7/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>';
    summ = posts_thumb_sum;
    }

    var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text">' + removeHtmlTag(div.innerHTML,summ) + '</div></a>';
    div.innerHTML = summary;
    }
    //]]>
    </script>

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType!= &quot;item&quot;'>
    <style>
    #list-view-button {font-family: Verdana; text-align:left;cursor:pointer;font-size: 14px;border-bottom: 5px solid #eaeaea;text-decoration: none;}
    #list-view-button a{text-decoration: none; color: #666;}
    .grid-view-button {background-color:
    #efefef;color:#666;padding:5px 10px;border-radius: 5px;font-size: 12px;}
    .list-view-button {background-color:
    #efefef;color:#000;padding:5px 10px;border-radius: 5px;font-size: 12px;}
    .post-grid-view {width:100%;height:250px;overflow: hidden;float:left;margin:0px 0px 20px !important;position:relative;display: block; -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s; }
    .post-grid-view .posts-thumb {width:40% !important;height:250px !important;float:left;margin:0px;position:relative;border-top: 0px solid transparent !important;overflow: hidden;}
    .post-grid-view .post-header {display: none;}
    .post-grid-view .post-body img {min-width: 300px !important; min-height: 250px !important;display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}
    .post-grid-view .post-summary-text {opacity: 1; background: none; width: 58%;font-size: 120% !important;clear: none !important; display: inline-block !important; padding: 80px 0px !important; color: #666 !important; text-shadow: none !important; float: right !important; text-align: left; position: relative !important; font-family: &#39;Open Sans Condensed&#39;, sans-serif;}
    .post-grid-view .post-body {height: 250px;background:#f5f5f5; box-shadow: none !important;}
    .post-title-grid a { font-size:170%;color: #777;font-family: &#39;Open Sans Condensed&#39;, sans-serif;}
    .post-title-grid { position: absolute; left: 42%; top: 5%; z-index: 1;}
    .post-grid-view .post-footer {left: 41%; display:block;position: absolute; bottom: 2%;font-size: 120%; background: transparent !important; border: 0px solid transparent !important;font-family: &#39;Open Sans Condensed&#39;, sans-serif;}
    .post-grid-view .post-footer a{color: #128EC9;}
    .post-grid-view a.comment-bubble {display: none;}
    .main-inner .column-center-inner .section {margin: 0px !important;}
    .post { -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;}

    #blog-pager {clear:both;}
    .post {height:auto;width:32.2%;display:inline-block;text-decoration:none;float:left;margin:0 1% 1% 0%;overflow: hidden;padding:0!important;}
    .date-header {display: none;}
    h3.post-title a {font-size:90%;font-family: &#39;Open Sans Condensed&#39;, sans-serif;text-transform:uppercase;color:#fff;text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);font-weight: bold;}
    h3.post-title {text-align: center; position:absolute;top:0;width:100%;overflow:hidden;margin:0px !important;padding-top: 30%; background-color: rgba(50, 126, 213, 0.8);transform: scale(1);opacity: 0;z-index: 10;height: 100%;transition: all 300ms ease-out 0s;}
    h3.post-title:hover {opacity: 1;}
    .posts-thumb {width:100%!important;height:200px!important;overflow:hidden;clear:both;}
    .post-body {border-radius:2px;box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);position:relative;overflow: hidden;}
    .post-body a {text-decoration: none;}
    .post-body img {display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;min-width:200px!important;min-height:200px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}
    .post-summary-text {display: none;}
    a.comment-bubble {color:#fff;text-decoration:none;font-size:100%;width: 100%;text-align: center;position:absolute;top:175px;left: 0px;text-shadow:1px 2px 1px #333;font-family: &#39;Pacifico&#39;, cursive;z-index: 122;}
    a.comment-bubble:before { content: &quot;Комментариев: &quot; url(
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSIuUwbGBE3SJtNfoxVxAZfzc7UJSfdrce0l1FEK5poh8YKHl2unRhYb6vYOKDLmIbAiqIqAChd66IbT6psXMamD62wl1R4E3WELSnHochjZlzjzwQYoEvbYcLMh2wE5i3v96PSBpQ-Roy/s1600/heart-active.png);}
    .post-header,.post-footer {display:none;}
    </style></b:if></b:if>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
    <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>


    background-color:#efefef; определя цвета на бутоните

    Втора стъпка

    Да намерим в кода на темата този ред:


    <b:section class='main' id='main' name='Main' showaddelement='no'>

    Или този:

    <b:section class='main' id='main' name='Main' showaddelement='yes'>


    Над него вписваме следния код:

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType!= &quot;item&quot;'>
    <div id='list-view-button'><a class='grid-view-button' onclick='grid_view()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPlKOkr93G892gfX-WC7Ft2Iuq_I_JelNDhB-2CNSoFdNvyFC1NZVgNbHUf1KOZ8EfBYEFNvK7nEjd4Dzwm2jrw0P9HXxoWyLtRg2JAz-bMdfQVlEx4Dp-6kg8B3hrVlenbmbBHCrGEqaM/s1600/search-grid-icon.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> Мрежов изглед</a> <a class='list-view-button' onclick='list_view()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDZvnHRS41Ni3NskG-E-rFQJK0Aw2MWFuZJpmeqpbud40_qdFGEiElNtSfbpdBtUJQ8n4cYEke7Qfs6rcHDchP9htAcfl2v3IgwuMazVR823PKOO8971LV32RBUSV7a230Yw-w2L_0X6sm/s1600/icon-list-view.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> Преглед във вид на списък</a></div>

    </b:if></b:if>


    Трета стъпка

    А сега търсим още един ред в кода на темата:

    <data:post.body/>

    Обикновено този ред се повтаря няколко пъти. В някои теми се среща два пъти, в други – три пъти. Заменете втория ред, ако повторенията са две, или втория и третия, ако повторенията са три, със следния код:

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType != &quot;item&quot;'>         <div expr:id='&quot;summary&quot; + data:post.id'> <data:post.body/> </div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script><b:if cond='data:post.allowComments'><a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:post.numComments/></a></b:if></b:if> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> </b:if> <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/> </b:if>



    След всички направени промени използвайте опцията визуализация, за да видите резултата. Не забравяйте да запазите промените, ако всичко изглежда нормално.

    Имате ли въпроси? Ще ги решим заедно, ако пишете в коментарите.

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

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

    BGtop


    4 коментара:

    1. Лидия Петранова10:29

      Здравейте, малко се затрудних, ще ми помогнете ли?

      ОтговорИзтриване
      Отговори
      1. Здравейте! Разбира се, че ще помогна. Когато имате време, дайте линк, за да погледна.Поздрави!

        Изтриване
    2. Лидия Петранова14:15

      Здравейте! Изпратих линк на ел. поща и чакам отговор.

      ОтговорИзтриване
      Отговори
      1. Получих го, ще погледна и ще отговоря. Поздрави!

        Изтриване