Blogger: Избранное сообщение. Новые Стили для Виджета

 Blogger: Избранное сообщение. Новые Стили для Виджета

Избранное сообщение - новый виджет от blogger

Видно, что наши друзья из отдела blogger не забывают про нас. Сегодня я заметил, что в списке гаджетов появился новый виджет под названием Избранное сообщение, с помощью которого можно отобразить в сайдбаре то сообщение (пост) которое мы сами посчитаем нужным.  Думаю, что те блогеры и вебмастера, которые не первый месяц работают с платформой blogger уже знакомы с этим виджетом, так что для многих это новый - старый виджет. С помощью умелых программистов, уже очень долгое время его успешно используют сотни тысяч блогеров по всему миру. На английском он звучит так: "Featured post".

И вот сегодня разработчики blogger внесли его в свой список. Правда здесь он может отображать всего один пост. Конечно маловато, но уже хоть что-то. Как по мне этот виджет очень полезен. Кроме того google в очередной раз дает понять, что blogger не собирается сворачиваться.     

Новые Стили для Виджета Избранное Сообщение

Для Внедрения новых стилей виджету Избранное Сообщение используйте HTML коды. Подробная инструкция по установке на видео:

1. Общий JS.
<script>
$(&quot;.FeaturedPost&quot;).each(function(){var t=$(this).find(&quot;.image&quot;),e=$(this).find(&quot;.post-summary h3&quot;),i=$(this).find(&quot;.post-summary p&quot;);e.insertAfter(t),e.wrap(&#39;&lt;div class=&quot;featured-contents&quot;&gt;&lt;/div&gt;&#39;);var a=$(this).find(&quot;.featured-contents&quot;);a.append(i)})
</script>

2. Общий JS \ Jquery.
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

3. CSS для первого варианта старые темы Blogger.
<style>
.featured-contents h3 a{color:#fff} .post-summary { margin-top: 10px; } .featured-contents p{line-height: 1.2; margin-top: -21px; color: #fff; font-size: 12px; padding: 20px;} .featured-contents h3{margin-top: -10px; line-height: 1; padding-bottom: 15px; font-size: 20px; color: #fff; margin-top: -0px!important; background: rgba(27, 188, 155, 0.02)!important; margin-top: -20px!important; padding: 20px 20px !important;} .featured-contents{ margin-top: -34%; margin-left: 0px; margin-right: 0px; background-color: rgba(7, 7, 7, 0.63); overflow: hidden; position: relative; padding: 20px 10px; padding-bottom: 0;}
</style>

4. CSS для первого варианта Новые Темы Blogger.
<style>
.featured-contents h3 a{color:#fff} .post-summary { margin-top: 10px; } .featured-contents p{line-height: 1.2; margin-top: -21px; color: #fff; font-size: 12px; padding: 20px;} .featured-contents h3{margin-top: -10px; line-height: 1.2; padding-bottom: 15px; font-size: 20px; color: #fff; margin-top: -0px!important; background: rgba(27, 188, 155, 0.02)!important; margin-top: -20px!important; padding: 20px 20px !important;} .featured-contents{margin-top: -40%; margin-left: 0px; margin-right: 0px; background-color: rgba(0, 0, 0, 0.47); overflow: hidden; position: relative; padding: 20px 10px; padding-bottom: 0;} .FeaturedPost img {margin-top: 0em;height:200px;}
div#FeaturedPost1 {padding: 0px;} .FeaturedPost h3 {margin: 0px;}
</style>

5. CSS для второго варианта старые темы Blogger.
<style>
.FeaturedPost h3{position:absolute;width:94%;bottom:0;padding:15px 20px;background-image:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.4));background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.4));background-image:-moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.4));background-image:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.4));-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;border-bottom-left-radius:3px;-webkit-border-bottom-left-radius:3px;border-bottom-right-radius:3px;-webkit-border-bottom-right-radius:3px;z-index:1000;opacity:1;filter:alpha(opacity=100);zoom:1}
.FeaturedPost .post-summary{position:relative;height:200px;margin-top:0;border-bottom-left-radius:3px;border-bottom-right-radius:3px;overflow:hidden; padding-top:0px;}
.FeaturedPost .post-summary h3 a{color:#FFF;text-shadow:0 1px 1px rgba(0,0,0,0.3);font-weight:700}
.FeaturedPost .post-summary img.image{border-bottom-left-radius:3px;border-bottom-right-radius:3px;transition: all 0.3s linear;height:200px; filter: brightness(75%);}
.FeaturedPost .post-summary:hover img.image{filter:brightness(65%);zoom:1;transition: all 0.3s linear;transform: scale3d(1.1,1.1,1);}
.FeaturedPost h3:after{content:&quot;Aztex@gmail.com&quot;;display:inline-block;font-size:13px;font-weight:normal;color:#ddd;clear:both;width:100%}
.FeaturedPost .post-summary h3 a:hover{color:#f89406}
.FeaturedPost:hover h3{padding:12px 10px 25px 20px}
.FeaturedPost h3 { color: #caff00; }
</style>

6. CSS для второго варианта новые темы Blogger.
.FeaturedPost h3{position:absolute;width:94%;bottom:-20px;padding:15px 20px;background-image:-webkit-linear-gradient(rgba(0,0,0),rgba(0,0,0,0));background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0));background-image:-moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.4));background-image:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.4));-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;border-bottom-left-radius:3px;-webkit-border-bottom-left-radius:3px;border-bottom-right-radius:3px;-webkit-border-bottom-right-radius:3px;z-index:1000;opacity:1;filter:alpha(opacity=100);zoom:1}
.FeaturedPost .post-summary{position:relative;height:200px;margin-top:0;border-bottom-left-radius:3px;border-bottom-right-radius:3px;overflow:hidden; padding-top:0px;}
.FeaturedPost .post-summary h3 a{color:#FFF;text-shadow:0 1px 1px rgba(0,0,0,0.3);font-weight:700}
.FeaturedPost .post-summary img.image{border-bottom-left-radius:3px;border-bottom-right-radius:3px;transition: all 0.3s linear;height:200px; filter: brightness(75%);}
.FeaturedPost .post-summary:hover img.image{filter:brightness(65%);zoom:1;transition: all 0.3s linear;transform: scale3d(1.1,1.1,1);}
.FeaturedPost h3:after{content:&quot;Aztex@gmail.com&quot;;display:inline-block;font-size:13px;font-weight:normal;color:#ddd;clear:both;width:100%}
.FeaturedPost .post-summary h3:hover{color:#f89406}
.FeaturedPost:hover h3{padding:12px 10px 25px 20px}
.FeaturedPost h3 { color: #7aff00; }
.FeaturedPost img {margin-top: 0em;}
div#FeaturedPost1 {padding: 0px;}

7. CSS для третьего варианта старые темы Blogger.
<style>
.post-summary { margin-top: 10px; }
.featured-contents p{line-height:1.2; margin-top: -21px;}
.featured-contents h3{margin-top: 0px; line-height: 1; padding-bottom: 25px; font-size: 20px;}
.featured-contents{ margin-top: -20%; margin-left: 0px; margin-right: 20px; background-color: #FFF; overflow: hidden; position: relative; padding: 10px; padding-bottom: 0;}
</style>

8. CSS для третьего варианта новые темы Blogger.
<style>
.post-summary { margin-top: 10px; }
.featured-contents p{line-height:1.2; margin-top: -21px;}
.featured-contents h3{margin-top: 0px; line-height: 1; padding-bottom: 15px; font-size: 20px;}
.featured-contents{ margin-top: -20%; margin-left: 0px; margin-right: 20px; background-color: #FFF; overflow: hidden; position: relative; padding: 10px; padding-bottom: 0;} .FeaturedPost img {margin-top: 0em;} .featured-contents h3 a { color: #60656c; }
div#FeaturedPost1 {padding: 0px;}
</style>

9. HTML для первых двух вариантов.
<b:widget id='FeaturedPost1' locked='false' title='Featured post' type='FeaturedPost' version='1'>
          <b:widget-settings>
            <b:widget-setting name='showSnippet'>true</b:widget-setting>
            <b:widget-setting name='showPostTitle'>true</b:widget-setting>
            <b:widget-setting name='postId'>894596872643122965</b:widget-setting>
            <b:widget-setting name='showFirstImage'>true</b:widget-setting>
            <b:widget-setting name='useMostRecentPost'>false</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
                    <!-- Only display title if it's non-empty -->
                    <b:if cond='data:title != &quot;&quot;'>
                      <h2 class='title'><data:title/></h2>
                    </b:if>
                    <b:include name='content'/>
                  </b:includable>
          <b:includable id='content'>
                    <div class='post-summary'>
                      <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
                        <h3><span expr:href='data:postUrl'><data:postTitle/></span></h3>
                      </b:if>
                      <b:if cond='data:showSnippet and data:postSummary != &quot;&quot;'>
                        <p>
                          <data:postSummary/>
                        </p>
                      </b:if>
                      <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
                      <a expr:href='data:postUrl'>  <img class='image' expr:src='data:postFirstImage'/></a>
                      </b:if>
                    </div>

                    <style type='text/css'>
                      .image {
                        width: 100%;
                      }
                    </style>
                  </b:includable>
        </b:widget>

10. HTML для 3 варианта.
<b:widget id='FeaturedPost1' locked='false' title='Featured post' type='FeaturedPost' version='1'>
          <b:widget-settings>
            <b:widget-setting name='showSnippet'>true</b:widget-setting>
            <b:widget-setting name='showPostTitle'>true</b:widget-setting>
            <b:widget-setting name='postId'>894596872643122965</b:widget-setting>
            <b:widget-setting name='showFirstImage'>true</b:widget-setting>
            <b:widget-setting name='useMostRecentPost'>false</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
                    <!-- Only display title if it's non-empty -->
                    <b:if cond='data:title != &quot;&quot;'>
                      <h2 class='title'><data:title/></h2>
                    </b:if>
                    <b:include name='content'/>
                  </b:includable>
          <b:includable id='content'>
                    <div class='post-summary'>
                      <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
                        <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
                      </b:if>
                      <b:if cond='data:showSnippet and data:postSummary != &quot;&quot;'>
                        <p>
                          <data:postSummary/>
                        </p>
                      </b:if>
                      <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
                      <span expr:href='data:postUrl'>  <img class='image' expr:src='data:postFirstImage'/></span>
                      </b:if>
                    </div>

                    <style type='text/css'>
                      .image {
                        width: 100%;
                      }
                    </style>
                  </b:includable>
        </b:widget>


После установки Сохраните Тему и проверьте результат. Если возникнут вопросы, пишите в комментариях.



Поделиться в социальных сетях:
Facebook Twitter Vkontakte

Рекомендуем

2 Коммент.

Оставить комментарий
avatar
Светлана Данилевская
июля 03, 2018

Было бы хорошо, если бы можно было добавлять в виджет несколько сообщений.

Ответить
avatar
Марк Корвин
июля 03, 2018

Для этого есть специальные виджеты более известные, как "последние сообщения по ярлыку" - https://www.shablonu-dlya-blogger.ru/2016/12/premium-vidgety-blogger.html

Ответить