×

İletişim Formu


Blogger Popüler Yayınlar Widget Tasarımı

6/01/2018
Etiketler :
<!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}
 
YENİ YAYIN
ÖNCEKİ YAYIN

"Blogger Popüler Yayınlar Widget Tasarımı" 0 Yorum yapıldı.

Yorum Gönder

×