× İletişim Formu Blogger Öne Çıkan Yayın Widget Tasarımı Arlina Design 7/06/2018 Etiketler : CSS Widget Arlina Design <!DOCTYPE html> <html> <head> <title>Blogger Öne Çıkan Yayın Widget'ı Tasarımı</title> <style> @import url('https://fonts.googleapis.com/css?family=Roboto'); body {font-family: 'Roboto', sans-serif;font-size:16px;color:#222} h3.title{text-transform:uppercase;} a {cursor:pointer;text-decoration:none} .image{width:100%} .FeaturedPost{width:300px;margin:auto;padding:0 8px 8px 8px;border-radius:2px;border:1px solid #ddd} .FeaturedPost .post-summary:after{content:no-close-quote;position:absolute;bottom:0;width:100%;height:150px;overflow:hidden;margin:0;background-image:linear-gradient(to bottom,transparent,rgba(0,0,0,0.75))} body.dark-skin .FeaturedPost:after{width:88.4%} .FeaturedPost .post-summary h3{position:absolute;font-size:16px;line-height:20px;padding:0 15px;bottom:70px;color:#fff;z-index:1} .FeaturedPost h3 a{color:#fff;line-height:25px} .FeaturedPost .post-summary{display: grid;margin:0;position:relative;overflow:hidden;padding-top:0!important} .FeaturedPost p{position:absolute;bottom:16px;color:#a9a9a9;height:50px;padding:0 15px;z-index:1;font-size:14px;overflow:hidden;font-family:sans-serif;line-height:22px} </style> </head> <body> <div class="widget FeaturedPost" id="FeaturedPost1"> <h3 class="title">Öne Çıkan Yayın</h3> <div class="post-summary"> <h3><a target="_blank" href="https://plus.google.com/u/0/collection/gdNMSE" title="Orjinal Resimler" rel="nofollow noopener">Orjinal Resimler</a></h3> <p>Blogger Eklentileri, bir birinden farklı en güzel blog resimlerini sizin için hazırladı...</p> <img class="image" alt="Orjinal Resimler" src="https://lh3.googleusercontent.com/dVJTPD-XUEQxRD63Mc5Grygrne_581HKyxjO6o0lX2nC2iT8gGhs2L2JD-Fp7dLXeZF05jDNwmNpQA=w818-h584-rw-no"/> </div> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blogger Öne Çıkan Yayın Widget Tasarımı" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger Öne Çıkan Yayın Widget Tasarımı Arlina Design 7/06/2018 Etiketler : CSS Widget Arlina Design <!DOCTYPE html> <html> <head> <title>Blogger Öne Çıkan Yayın Widget'ı Tasarımı</title> <style> @import url('https://fonts.googleapis.com/css?family=Roboto'); body {font-family: 'Roboto', sans-serif;font-size:16px;color:#222} h3.title{text-transform:uppercase;} a {cursor:pointer;text-decoration:none} .image{width:100%} .FeaturedPost{width:300px;margin:auto;padding:0 8px 8px 8px;border-radius:2px;border:1px solid #ddd} .FeaturedPost .post-summary:after{content:no-close-quote;position:absolute;bottom:0;width:100%;height:150px;overflow:hidden;margin:0;background-image:linear-gradient(to bottom,transparent,rgba(0,0,0,0.75))} body.dark-skin .FeaturedPost:after{width:88.4%} .FeaturedPost .post-summary h3{position:absolute;font-size:16px;line-height:20px;padding:0 15px;bottom:70px;color:#fff;z-index:1} .FeaturedPost h3 a{color:#fff;line-height:25px} .FeaturedPost .post-summary{display: grid;margin:0;position:relative;overflow:hidden;padding-top:0!important} .FeaturedPost p{position:absolute;bottom:16px;color:#a9a9a9;height:50px;padding:0 15px;z-index:1;font-size:14px;overflow:hidden;font-family:sans-serif;line-height:22px} </style> </head> <body> <div class="widget FeaturedPost" id="FeaturedPost1"> <h3 class="title">Öne Çıkan Yayın</h3> <div class="post-summary"> <h3><a target="_blank" href="https://plus.google.com/u/0/collection/gdNMSE" title="Orjinal Resimler" rel="nofollow noopener">Orjinal Resimler</a></h3> <p>Blogger Eklentileri, bir birinden farklı en güzel blog resimlerini sizin için hazırladı...</p> <img class="image" alt="Orjinal Resimler" src="https://lh3.googleusercontent.com/dVJTPD-XUEQxRD63Mc5Grygrne_581HKyxjO6o0lX2nC2iT8gGhs2L2JD-Fp7dLXeZF05jDNwmNpQA=w818-h584-rw-no"/> </div> </div> </body> </html>
Yorum Gönder