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

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

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

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

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

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

1. Общий JS.

JS

JS

CSS

CSS

CSS

CSS.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:"[email protected]";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;}

CSS

CSS

HTML
          
            true
            true
            894596872643122965
            true
            false
          
          
                    
                    
                      

                    
                    
                  
          
                    

                      
                        

                      
                      
                        

                          
                        
                      
                      
                        
                      
                    
                    
                  
        

HTML
          
            true
            true
            894596872643122965
            true
            false