понедельник, 15 августа 2011 г.

Убираем панель кнопок при просмотре списка сообщений блога

Сегодня я избавлюсь от панели, в которой есть куча кнопочке для социальных сервисов и знаменитая кнопка Google+


Не то что бы совсем избавлюсь.)))


Я говорю про вот эту панельку - которая в сером квадрате




В чём соль? Когда открываешь блог, то видишь списки сообщений блога и под каждым блогом есть кнопочки для публикации в разных соц сетях. А так же кнопка для отправки по E-Mail и стандартная блогерская система оценки поста.


Человек приходит читать конкретное сообщение. А это значит что ставить оценку, публиковать сообщение или ещё что то, только по тексту вступления - он не будет.


Что бы дать какую то оценку, послать другу ссылку и твитнуть - читателю неизбежно надо войти внутрь поста и прочитать весь текст.


Таким образом эта панель управления становиться бессмысленной при просмотре списка сообщений.


Кто то может сказать - а как де пользователю при просмотре списка понять что это интересно? Да нафиг это не надо! Серьёзно! Когда Вы последний раз просматривали список сообщений блога и по оценкам понимали что Вам это интересно прочитать? 


Ааа.... Вы только так и делаете? А я вот никогда так не делаю - поэтому и меняю свой блог. Потому что считаю что так делают все))))


Люди ди же читают или самое интересное, или всё или по поиску. Ну и совсем маленькая часть - чисто теоретически - открывают блог и по каким то индикаторам смотрят что больше всего твитнули. Но я думаю что таких людей очень и очень мало!


А вот если посмотреть что там находится - там iframe,  который стягивает информацию динамически.  А если выводится 10 сообщений - то 10 iframe.


В общем будем избавляться!



  1. В панели управления идём в меню "Дизайн" и там выбираем пункт "Изменить HTML".
  2. Делаем резервную копию текущего шаблона. Для этого выбираем пункт "Загрузить весь шаблон". Называем файл удобным именем. Лично я в качестве имени файла выбираю такой шаблон [имя блога]-template-[ddMMyyyyHHmm].xml. Например sedegoff-template-200420110859.xml
  3. Ищем кусок кода
    <div class='post-footer'>
    У меня он встречается всего два раза - для обычной версии и для мобильной. Изменять я буду для всех вхождений.
  4.  Теперь внимательно - нужно весь DIV закрыть в конструкцию вида:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    .....
    </b:if>
    
  5. Сохраняем и наслаждаемся
Что бы показать как это выглядит у меня - приведу пример.
    До модификации выглядело вот так:
    <!--первое вхождение-->
    <div class='post-footer'>
                <div class='post-footer-line post-footer-line-1'>
                  <span class='post-author vcard'>
                    <b:if cond='data:top.showAuthor'>
                      <data:top.authorLabel/>
                      <span class='fn'><data:post.author/></span>
                    </b:if>
                  </span>
    
                  <span class='post-timestamp'>
                    <b:if cond='data:top.showTimestamp'>
                      <data:top.timestampLabel/>
                      <b:if cond='data:post.url'>
                        <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
                      </b:if>
                    </b:if>
                  </span>
    
                  <span class='post-comment-link'>
                    <b:if cond='data:blog.pageType != &quot;item&quot;'>
                      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                        <b:if cond='data:post.allowComments'>
                          <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
                        </b:if>
                      </b:if>
                    </b:if>
                  </span>
                </div>
    
                <div class='post-footer-line post-footer-line-2'>
                  <b:if cond='data:top.showMobileShare'>
                    <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
                      <a href='javascript:void();'><data:shareMsg/></a>
                    </div>
                  </b:if>
                  <b:if cond='data:top.showDummy'>
                    <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
                  </b:if>
                </div>
    
              </div>
    <!-- Второе вхождение - между двумя этими вхождениями есть какой то код-->
       <div class='post-footer'>
                <div class='post-footer-line post-footer-line-1'>
                  <span class='post-author vcard'>
                    <b:if cond='data:top.showAuthor'>
                      <data:top.authorLabel/>
                      <span class='fn'><data:post.author/></span>
                    </b:if>
                  </span>
    
                  <span class='post-timestamp'>
                    <b:if cond='data:top.showTimestamp'>
                      <data:top.timestampLabel/>
                      <b:if cond='data:post.url'>
                        <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
                      </b:if>
                    </b:if>
                  </span>
    
                  <span class='post-comment-link'>
                    <b:if cond='data:blog.pageType != &quot;item&quot;'>
                      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                        <b:if cond='data:post.allowComments'>
                          <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
                        </b:if>
                      </b:if>
                    </b:if>
                  </span>
                </div>
    
                <div class='post-footer-line post-footer-line-2'>
                  <b:if cond='data:top.showMobileShare'>
                    <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
                      <a href='javascript:void();'><data:shareMsg/></a>
                    </div>
                  </b:if>
                  <b:if cond='data:top.showDummy'>
                    <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
                  </b:if>
                </div>
    
              </div>
    А после модификации вот так:
    <!--первое вхождение-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='post-footer'>
        <div class='post-footer-line post-footer-line-1'><span class='reaction-buttons'>
            <b:if cond='data:top.showReactions'>
              <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
                <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
                  <span class='reactions-label'>
                  <data:top.reactionsLabel/></span>&#160;</td>
                <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
               </tr></table>
            </b:if>
          </span> <span class='post-timestamp'>
            <b:if cond='data:top.showTimestamp'>
              <data:top.timestampLabel/>
            <b:if cond='data:post.url'>
              <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
            </b:if>
            </b:if>
          </span> <span class='post-comment-link'>
            <b:if cond='data:blog.pageType != &quot;item&quot;'>
              <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                <b:if cond='data:post.allowComments'>
                  <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
                </b:if>
              </b:if>
            </b:if>
          </span> </div>
    
          <div class='post-footer-line post-footer-line-2'><span class='post-icons'>
            <!-- email post links -->
            <b:if cond='data:post.emailPostUrl'>
              <span class='item-action'>
              <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
                  <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
              </a>
              </span>
            </b:if>
    
            <!-- quickedit pencil -->
            <b:include data='post' name='postQuickEdit'/>
          </span> </div>
    
          <div class='post-footer-line post-footer-line-3'><div class='post-share-buttons goog-inline-block'>
            <b:if cond='data:post.sharePostUrl'>
              <b:include data='post' name='shareButtons'/>
            </b:if>
          </div> <span class='post-backlinks post-comment-link'>
             <b:if cond='data:blog.pageType != &quot;item&quot;'>
               <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                 <b:if cond='data:post.showBacklinks'>
                   <a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
                 </b:if>
               </b:if>
             </b:if>
           </span> </div>
        </div>  </b:if>
    <!-- Второе вхождение - между двумя этими вхождениями есть какой то код-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
              <div class='post-footer'>
                <div class='post-footer-line post-footer-line-1'>
                  <span class='post-author vcard'>
                    <b:if cond='data:top.showAuthor'>
                      <data:top.authorLabel/>
                      <span class='fn'><data:post.author/></span>
                    </b:if>
                  </span>
    
                  <span class='post-timestamp'>
                    <b:if cond='data:top.showTimestamp'>
                      <data:top.timestampLabel/>
                      <b:if cond='data:post.url'>
                        <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
                      </b:if>
                    </b:if>
                  </span>
    
                  <span class='post-comment-link'>
                    <b:if cond='data:blog.pageType != &quot;item&quot;'>
                      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                        <b:if cond='data:post.allowComments'>
                          <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
                        </b:if>
                      </b:if>
                    </b:if>
                  </span>
                </div>
    
                <div class='post-footer-line post-footer-line-2'>
                  <b:if cond='data:top.showMobileShare'>
                    <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
                      <a href='javascript:void();'><data:shareMsg/></a>
                    </div>
                  </b:if>
                  <b:if cond='data:top.showDummy'>
                    <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
                  </b:if>
                </div>
    
              </div></b:if>




    У кого то может возникнуть трудность с тем, как определить где заканчивается тег.  У Вас варианта по сути два:

    1. Перебирать вручную.
    2. Скопировать шаблон в HTML редактор, который отображает местоположение парного тега. У меня редактор NetBeans - он это умеет. 

    Комментариев нет: