× İletişim Formu Blogger Popüler Yayınlar Widget Tasarımı Arlina Design 6/01/2018 Etiketler : CSS3 Widget Arlina Design <!DOCTYPE html> <HTML> <head> <title>Blogger Popüler Yayınlar Widget Tasarımı</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} body {font-family:'Fira Sans Condensed', sans-serif;line-height:1.7;padding:16px} h2 span{display:inline-block;vertical-align:middle} h2{background:#54a5db;color:#fff;position:relative;overflow:hidden;margin:0 auto;font-size:1.1rem;font-weight:400;vertical-align:middle;padding:9px 10px} a:link,a:visited{color:#fff;text-decoration:none;transition:all .3s;font-size:14px;font-weight:700} /* Popular Yayınlar */ #PopularPosts1{padding:0;width:300px;margin:0 auto} #PopularPosts1 h2{background:#dd8231} #PopularPosts1 ul{padding:0;background:#dd8231;counter-reset:popcount} #PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s} #PopularPosts1 ul li:last-child{border-bottom:none} #PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0} #PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)} #PopularPosts1 ul li .item-title a{font-size:14px;font-weight:400;color:#fff} #PopularPosts1 ul li img{width:300px;height:auto;} #PopularPosts1 ul li:first-child{border-bottom:none;padding:0} #PopularPosts1 ul li:first-child .item-thumbnail{margin:0;width:100%;height:158px;overflow:hidden;display:block} #PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s} #PopularPosts1 ul li:hover:first-child .item-title{background:rgba(44,62,80,1);transform:translate(0,0)} #PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff} #PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none} #PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s} #PopularPosts1 ul li:first-child .item-snippet:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)} #PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;} #PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s} #PopularPosts1 ul li:first-child .item-title:before{top:25%} #PopularPosts1 ul li:first-child .item-title:before{color:#fff} #PopularPosts1 ul li:hover .item-title:before{color:rgba(255,255,255,1)} </style> </head> <body> <div class="widget PopularPosts" data-version="1" id="PopularPosts1"> <h2>Popüler Yayınlar</h2> <div class="widget-content popular-posts"> <ul> <li> <div class="item-thumbnail-only"> <div class="item-thumbnail"> <a href="https://bloggereklentileri.blogspot.com/2018/05/blogger-teknoloji-ve-magazin-temas.html" target="_blank" title="Blogger Teknoloji ve Magazin Teması" rel="follow"> <img alt="Blogger Teknoloji ve Magazin Teması" border="0" height="158px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfswmjQE48fo7tK9s5ixZnlE8BZG2sjfAO6fW1MWsIZyWa7IKf6O-BqsaeNfDTA9Bein_NIUi2DZmZH29XJv2nmzQi0N1S33g488K_Vgm2dOSSqU1EdfRldLmQJvz48jk0YRMpRER11-Rm/s1600/btt.png" width="300px"></a> </div> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com/2018/05/blogger-teknoloji-ve-magazin-temas.html" target="_blank" title="Blogger Teknoloji ve Magazin Teması" rel="follow">Blogger Teknoloji ve Magazin Teması</a> </div> </div> </li> <li> <div class="item-thumbnail-only"> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com/2018/05/blogger-2018de-yeni-guncellemeler.html" target="_blank" title="Blogger 2018'de Yeni Güncellemeler Yapacak" rel="follow">Blogger 2018'de Yeni Güncellemeler Yapacak</a></div> </div> </li> <li> <div class="item-thumbnail-only"> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com/2018/05/blogger-weblog-temas-haber-magazin-ve.html" target="_blank" title="Blogger WeBlog Teması (Haber, Magazin ve Dergi)" rel="follow">Blogger WeBlog Teması (Haber, Magazin ve Dergi)</a> </div> </div> </li> <li> <div class="item-thumbnail-only"> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com/2018/04/haber-dergi-ve-teknoloji-blog-temas.html" target="_blank" title="Haber, Dergi ve Teknoloji Blog Teması" rel="follow">Haber, Dergi ve Teknoloji Blog Teması</a> </div> </div> </li> <li> <div class="item-thumbnail-only"> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com/2016/12/mini-blogger-slider-temas.html" target="_blank" title="Mini Blogger Slider Teması" rel="follow">Mini Blogger Slider Teması</a> </div> </div> </li> </ul> </div> </div> </body> </HTML> YENİ YAYIN ÖNCEKİ YAYIN "Blogger Popüler Yayınlar Widget Tasarımı" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger Popüler Yayınlar Widget Tasarımı Arlina Design 6/01/2018 Etiketler : CSS3 Widget Arlina Design <!DOCTYPE html> <HTML> <head> <title>Blogger Popüler Yayınlar Widget Tasarımı</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} body {font-family:'Fira Sans Condensed', sans-serif;line-height:1.7;padding:16px} h2 span{display:inline-block;vertical-align:middle} h2{background:#54a5db;color:#fff;position:relative;overflow:hidden;margin:0 auto;font-size:1.1rem;font-weight:400;vertical-align:middle;padding:9px 10px} a:link,a:visited{color:#fff;text-decoration:none;transition:all .3s;font-size:14px;font-weight:700} /* Popular Yayınlar */ #PopularPosts1{padding:0;width:300px;margin:0 auto} #PopularPosts1 h2{background:#dd8231} #PopularPosts1 ul{padding:0;background:#dd8231;counter-reset:popcount} #PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s} #PopularPosts1 ul li:last-child{border-bottom:none} #PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0} #PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)} #PopularPosts1 ul li .item-title a{font-size:14px;font-weight:400;color:#fff} #PopularPosts1 ul li img{width:300px;height:auto;} #PopularPosts1 ul li:first-child{border-bottom:none;padding:0} #PopularPosts1 ul li:first-child .item-thumbnail{margin:0;width:100%;height:158px;overflow:hidden;display:block} #PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s} #PopularPosts1 ul li:hover:first-child .item-title{background:rgba(44,62,80,1);transform:translate(0,0)} #PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff} #PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none} #PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s} #PopularPosts1 ul li:first-child .item-snippet:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)} #PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;} #PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s} #PopularPosts1 ul li:first-child .item-title:before{top:25%} #PopularPosts1 ul li:first-child .item-title:before{color:#fff} #PopularPosts1 ul li:hover .item-title:before{color:rgba(255,255,255,1)} </style> </head> <body> <div class="widget PopularPosts" data-version="1" id="PopularPosts1"> <h2>Popüler Yayınlar</h2> <div class="widget-content popular-posts"> <ul> <li> <div class="item-thumbnail-only"> <div class="item-thumbnail"> <a href="https://bloggereklentileri.blogspot.com/2018/05/blogger-teknoloji-ve-magazin-temas.html" target="_blank" title="Blogger Teknoloji ve Magazin Teması" rel="follow"> <img alt="Blogger Teknoloji ve Magazin Teması" border="0" height="158px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfswmjQE48fo7tK9s5ixZnlE8BZG2sjfAO6fW1MWsIZyWa7IKf6O-BqsaeNfDTA9Bein_NIUi2DZmZH29XJv2nmzQi0N1S33g488K_Vgm2dOSSqU1EdfRldLmQJvz48jk0YRMpRER11-Rm/s1600/btt.png" width="300px"></a> </div> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com/2018/05/blogger-teknoloji-ve-magazin-temas.html" target="_blank" title="Blogger Teknoloji ve Magazin Teması" rel="follow">Blogger Teknoloji ve Magazin Teması</a> </div> </div> </li> <li> <div class="item-thumbnail-only"> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com/2018/05/blogger-2018de-yeni-guncellemeler.html" target="_blank" title="Blogger 2018'de Yeni Güncellemeler Yapacak" rel="follow">Blogger 2018'de Yeni Güncellemeler Yapacak</a></div> </div> </li> <li> <div class="item-thumbnail-only"> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com/2018/05/blogger-weblog-temas-haber-magazin-ve.html" target="_blank" title="Blogger WeBlog Teması (Haber, Magazin ve Dergi)" rel="follow">Blogger WeBlog Teması (Haber, Magazin ve Dergi)</a> </div> </div> </li> <li> <div class="item-thumbnail-only"> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com/2018/04/haber-dergi-ve-teknoloji-blog-temas.html" target="_blank" title="Haber, Dergi ve Teknoloji Blog Teması" rel="follow">Haber, Dergi ve Teknoloji Blog Teması</a> </div> </div> </li> <li> <div class="item-thumbnail-only"> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com/2016/12/mini-blogger-slider-temas.html" target="_blank" title="Mini Blogger Slider Teması" rel="follow">Mini Blogger Slider Teması</a> </div> </div> </li> </ul> </div> </div> </body> </HTML>
Yorum Gönder