Избранное сообщение - новый виджет от blogger
И вот сегодня разработчики blogger внесли его в свой список. Правда здесь он может отображать всего один пост. Конечно маловато, но уже хоть что-то. Как по мне этот виджет очень полезен. Кроме того google в очередной раз дает понять, что blogger не собирается сворачиваться.
Новые Стили для Виджета Избранное Сообщение
Для Внедрения новых стилей виджету Избранное Сообщение используйте HTML коды. Подробная инструкция по установке на видео:1. Общий JS.
<script>
$(".FeaturedPost").each(function(){var t=$(this).find(".image"),e=$(this).find(".post-summary h3"),i=$(this).find(".post-summary p");e.insertAfter(t),e.wrap('<div class="featured-contents"></div>');var a=$(this).find(".featured-contents");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:"Aztex@gmail.com";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:"Aztex@gmail.com";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 != ""'>
<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 != ""'>
<h3><span expr:href='data:postUrl'><data:postTitle/></span></h3>
</b:if>
<b:if cond='data:showSnippet and data:postSummary != ""'>
<p>
<data:postSummary/>
</p>
</b:if>
<b:if cond='data:showFirstImage and data:postFirstImage != ""'>
<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 != ""'>
<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 != ""'>
<h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
</b:if>
<b:if cond='data:showSnippet and data:postSummary != ""'>
<p>
<data:postSummary/>
</p>
</b:if>
<b:if cond='data:showFirstImage and data:postFirstImage != ""'>
<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>После установки Сохраните Тему и проверьте результат. Если возникнут вопросы, пишите в комментариях.
