4

Публикации. Във вид на списък или мрежов изглед в 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="http://2.bp.blogspot.com/-Gbn3dT1R9Yo/VPXSJ8lih_I/AAAAAAAALDQ/24wFWdfFvu4/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(
    http://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/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='http://1.bp.blogspot.com/-vjVOXJyXcC4/VP9A7twG8mI/AAAAAAAALJ8/YW0yxhvxP7A/s1600/search-grid-icon.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> Мрежов изглед</a> <a class='list-view-button' onclick='list_view()'><img src='http://4.bp.blogspot.com/-SrQiXEhgVmA/VP9BUnr3KkI/AAAAAAAALKE/EwVFym9YxoA/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>



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

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

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

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

    4 коментара :

    1. Лидия Петранова17 февруари 2019 г., 10:29 ч.

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

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

        Изтриване
    2. Лидия Петранова18 февруари 2019 г., 14:15 ч.

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

      ОтговорИзтриване


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
    Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита