× İletişim Formu Popüler Yayınlar Widget Tasarımı 4 Arlina Design 11/21/2017 Etiketler : CSS Widget Arlina Design <!DOCTYPE html> <html> <head> <style> @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');@import url('https://fonts.googleapis.com/css?family=Montserrat');body{background:#ececec;font:normal bold 14px 'Montserrat';margin:0;padding:20px} a{color:#222;text-decoration:none} .widget{position:relative;overflow:visible;box-sizing:border-box;width:320px;margin:auto} ul{list-style:none;margin:0 0 0;padding:0 0 0} .item-snippet{color:#555;line-height:1.5em} #PopularPosts1 img,#PopularPosts2 img{float:left;margin:0;width:100%;height:auto;min-height:72px} .PopularPosts .item-thumbnail{width:320px;height:180px;overflow:hidden;position:relative} #PopularPosts1 .item-title{line-height:1.2em} .PopularPosts .widget-content ul li{list-style-type:none;margin:0} .PopularPosts .widget-content{padding-bottom:5px} .PopularPosts .item-control{display:none} .PopularPosts .widget-content li .item-title a{line-height:1.2em;color:#fff;width:80%;position:absolute;top:120px;left:15px;text-shadow:1px 1px 0 rgba(0,0,0,0.9)} .PopularPosts .item-thumbnail>a:before{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);-webkit-transition-duration:1.0s;-moz-transition-duration:1.0s;-o-transition-duration:1.0s} .PopularPosts .item-thumbnail a:hover:before{background:none} .PopularPosts .item-thumbnail{width:100%;height:180px;position:relative} .PopularPosts .item-thumbnail:hover,.PopularPosts .widget-content ul li:hover .item-title a{color:#ffcc00;text-shadow:1px 1px 0 rgba(0,0,0,0.9)} .PopularPosts .item-snippet{line-height:1.5em;color:#555;padding:15px;font-size:12px;font-weight:normal} .PopularPosts .widget-content ul li{background:#fff;margin-top:15px;padding:0;position:relative;-moz-box-shadow:1px 1px 2px #cccccc;-webkit-box-shadow:1px 1px 2px #ccc;-o-box-shadow:1px 1px 2px #ccc;-ms-box-shadow:1px 1px 2px #ccc} .PopularPosts .widget-content ul li:nth-child(1){margin-top:0} .PopularPosts .widget-content ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#fc0;text-align:center;top:3px;left:12px;margin:9px 0;font-size:16px;padding:0;font-weight:normal;line-height:normal;transition:all .3s;z-index:1} .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005'} .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006'} .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006'} .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006'} .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006'} </style> </head> <body> <div class="widget PopularPosts" id="PopularPosts1"> <div class="widget-title"> <h2>POPÜLER YAYINLAR</h2> </div> <div class="widget-content popular-posts"> <ul> <li> <div class="item-content"> <div class="item-thumbnail"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html"> <img alt="Disqus Bağlantı Butonları" title="Disqus Bağlantı Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8gEAPqtB9-wq2rrf63YHOllDSRa92Wa7Jc1sA8XkQGcQ-W3ww2ej6opHMPeFDBf7OjQxjztvlgyssmZgruToHZRsuSdN3HzJDQRJtf4C-P-t3rYx-cl0BLNW9NgZSGGiSb7NHlvWjpuM-/s1600/disqus-buttons.png"/> </a> </div> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html">Disqus Bağlantı Butonları</a></div> <div class="item-snippet">Disqus'un kendi web sitesinde kullanmış olduğu butonları, blog sitelerinde kullanılabilecek şekilde düzenledim ve bu yazımızda sizle...</div> </div> <div class='clear'></div> </li> <li> <div class="item-content"> <div class="item-thumbnail"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html"> <img alt="WhatSapp Paylaşım Ve Sohbet Butonları" title="WhatSapp Paylaşım Ve Sohbet Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGg5O551Zgzmg0fMipv4Mx9nS2jKMMGmabUiT8zO7QsxUPUnF7WjBq1YfuYwtqVS3TIF4KoWfxXuWT2ihvOjxY3lD_dFMy5ddoHt0ixdY4C0HhLv7gE9VvKlCvAU0-_AB9rtbFn6CBlVF0/s1600/whatsapp.png"/> </a> </div> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html">WhatSapp Paylaşım Ve Sohbet Butonları</a></div> <div class="item-snippet">WhatSapp'ın paylaşım butonu ve sohbet butonlarını herhangi bir kodlama yada javaScript kullanmadan nasıl oluşturacağın ile ilgili bi...</div> </div> <div class='clear'></div> </li> <li> <div class="item-content"> <div class="item-thumbnail"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html"> <img alt="Blogger'da Site Haritası Sayfası Oluşturma" title="Blogger'da Site Haritası Sayfası Oluşturma" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcw0UpfIaf5k_l4ByEMlYRNaLJa8LA35eafkvMyDBPRKOtiiKWcFNBbrHpeNBkCRFWpU57JsT4ubJMLHW-_QGOCCw8sYJ7UtsYMyRPOfDHc4lTmwdjEjDcFaaPzhM198AlWjsXSx86jwF/s1600/sitemap.png"/> </a> </div> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html">Blogger'da Site Haritası Sayfası Oluşturma</a></div> <div class="item-snippet">Bu yazımızda blog sitesinde site haritası oluştuşturmayı ve site haritasının özelliklerini paylaşacağım. Öncelikle, neden blog sitelerin...</div> </div> <div class='clear'></div> </li> <li> <div class="item-content"> <div class="item-thumbnail"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html"> <img alt="Blog Yazılarını Sütunlara Bölme Eklentisi" title="Blog Yazılarını Sütunlara Bölme Eklentisi" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDUSIzLWN3rUiUB7N5IUjUGlcPdpGOyiUiF56JLd0BntRXD_ByGs00eSPlYvpDSHfmmL46BQirsECY2bT-Lj_wsSCL1zp5W3j0p949FW1808Yq0Ty9nA04hGdfWvTkw_V9IagxA9cqt95m/s1600/column.png"/> </a> </div> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html">Blog Yazılarını Sütunlara Bölme Eklentisi</a></div> <div class="item-snippet">Bu yazımızda blog yazılarının yan yana sütunlar halinde bölmesi ile ilgili bilgiler paylaşacağım.</div> </div> <div class='clear'></div> </li> <li> <div class="item-content"> <div class="item-thumbnail"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html"> <img alt="Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" title="Google+'da Uygunsuz İçeriği Rapor Etme ve EngellemeGoogle+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQvy4mVsmsOznYhJxqLiTMophBb72WywN-PhDJf6rn7alUEJ7u0eGfnC3uwQOsTw-WuAwgbZyyU5-sFTzSbo5OtfpKQLbL-PkygNu8Vbnr-pipT2rq-ahR5bgGNfXOenTwlIOBV1eCw27/s1600/google-plus.png"/> </a> </div> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html">Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme</a></div> <div class="item-snippet">Google+'da uygun olmayan içerikleri filtreleme imkanı maalesef bulunmuyor. Bu nedenle, kullanıcılar tarafından uygunsuz içerik olara...</div> </div> <div class='clear'></div> </li> </ul> </div> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Popüler Yayınlar Widget Tasarımı 4" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Popüler Yayınlar Widget Tasarımı 4 Arlina Design 11/21/2017 Etiketler : CSS Widget Arlina Design <!DOCTYPE html> <html> <head> <style> @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');@import url('https://fonts.googleapis.com/css?family=Montserrat');body{background:#ececec;font:normal bold 14px 'Montserrat';margin:0;padding:20px} a{color:#222;text-decoration:none} .widget{position:relative;overflow:visible;box-sizing:border-box;width:320px;margin:auto} ul{list-style:none;margin:0 0 0;padding:0 0 0} .item-snippet{color:#555;line-height:1.5em} #PopularPosts1 img,#PopularPosts2 img{float:left;margin:0;width:100%;height:auto;min-height:72px} .PopularPosts .item-thumbnail{width:320px;height:180px;overflow:hidden;position:relative} #PopularPosts1 .item-title{line-height:1.2em} .PopularPosts .widget-content ul li{list-style-type:none;margin:0} .PopularPosts .widget-content{padding-bottom:5px} .PopularPosts .item-control{display:none} .PopularPosts .widget-content li .item-title a{line-height:1.2em;color:#fff;width:80%;position:absolute;top:120px;left:15px;text-shadow:1px 1px 0 rgba(0,0,0,0.9)} .PopularPosts .item-thumbnail>a:before{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);-webkit-transition-duration:1.0s;-moz-transition-duration:1.0s;-o-transition-duration:1.0s} .PopularPosts .item-thumbnail a:hover:before{background:none} .PopularPosts .item-thumbnail{width:100%;height:180px;position:relative} .PopularPosts .item-thumbnail:hover,.PopularPosts .widget-content ul li:hover .item-title a{color:#ffcc00;text-shadow:1px 1px 0 rgba(0,0,0,0.9)} .PopularPosts .item-snippet{line-height:1.5em;color:#555;padding:15px;font-size:12px;font-weight:normal} .PopularPosts .widget-content ul li{background:#fff;margin-top:15px;padding:0;position:relative;-moz-box-shadow:1px 1px 2px #cccccc;-webkit-box-shadow:1px 1px 2px #ccc;-o-box-shadow:1px 1px 2px #ccc;-ms-box-shadow:1px 1px 2px #ccc} .PopularPosts .widget-content ul li:nth-child(1){margin-top:0} .PopularPosts .widget-content ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#fc0;text-align:center;top:3px;left:12px;margin:9px 0;font-size:16px;padding:0;font-weight:normal;line-height:normal;transition:all .3s;z-index:1} .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005'} .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006'} .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006'} .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006'} .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006'} </style> </head> <body> <div class="widget PopularPosts" id="PopularPosts1"> <div class="widget-title"> <h2>POPÜLER YAYINLAR</h2> </div> <div class="widget-content popular-posts"> <ul> <li> <div class="item-content"> <div class="item-thumbnail"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html"> <img alt="Disqus Bağlantı Butonları" title="Disqus Bağlantı Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8gEAPqtB9-wq2rrf63YHOllDSRa92Wa7Jc1sA8XkQGcQ-W3ww2ej6opHMPeFDBf7OjQxjztvlgyssmZgruToHZRsuSdN3HzJDQRJtf4C-P-t3rYx-cl0BLNW9NgZSGGiSb7NHlvWjpuM-/s1600/disqus-buttons.png"/> </a> </div> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html">Disqus Bağlantı Butonları</a></div> <div class="item-snippet">Disqus'un kendi web sitesinde kullanmış olduğu butonları, blog sitelerinde kullanılabilecek şekilde düzenledim ve bu yazımızda sizle...</div> </div> <div class='clear'></div> </li> <li> <div class="item-content"> <div class="item-thumbnail"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html"> <img alt="WhatSapp Paylaşım Ve Sohbet Butonları" title="WhatSapp Paylaşım Ve Sohbet Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGg5O551Zgzmg0fMipv4Mx9nS2jKMMGmabUiT8zO7QsxUPUnF7WjBq1YfuYwtqVS3TIF4KoWfxXuWT2ihvOjxY3lD_dFMy5ddoHt0ixdY4C0HhLv7gE9VvKlCvAU0-_AB9rtbFn6CBlVF0/s1600/whatsapp.png"/> </a> </div> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html">WhatSapp Paylaşım Ve Sohbet Butonları</a></div> <div class="item-snippet">WhatSapp'ın paylaşım butonu ve sohbet butonlarını herhangi bir kodlama yada javaScript kullanmadan nasıl oluşturacağın ile ilgili bi...</div> </div> <div class='clear'></div> </li> <li> <div class="item-content"> <div class="item-thumbnail"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html"> <img alt="Blogger'da Site Haritası Sayfası Oluşturma" title="Blogger'da Site Haritası Sayfası Oluşturma" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcw0UpfIaf5k_l4ByEMlYRNaLJa8LA35eafkvMyDBPRKOtiiKWcFNBbrHpeNBkCRFWpU57JsT4ubJMLHW-_QGOCCw8sYJ7UtsYMyRPOfDHc4lTmwdjEjDcFaaPzhM198AlWjsXSx86jwF/s1600/sitemap.png"/> </a> </div> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html">Blogger'da Site Haritası Sayfası Oluşturma</a></div> <div class="item-snippet">Bu yazımızda blog sitesinde site haritası oluştuşturmayı ve site haritasının özelliklerini paylaşacağım. Öncelikle, neden blog sitelerin...</div> </div> <div class='clear'></div> </li> <li> <div class="item-content"> <div class="item-thumbnail"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html"> <img alt="Blog Yazılarını Sütunlara Bölme Eklentisi" title="Blog Yazılarını Sütunlara Bölme Eklentisi" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDUSIzLWN3rUiUB7N5IUjUGlcPdpGOyiUiF56JLd0BntRXD_ByGs00eSPlYvpDSHfmmL46BQirsECY2bT-Lj_wsSCL1zp5W3j0p949FW1808Yq0Ty9nA04hGdfWvTkw_V9IagxA9cqt95m/s1600/column.png"/> </a> </div> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html">Blog Yazılarını Sütunlara Bölme Eklentisi</a></div> <div class="item-snippet">Bu yazımızda blog yazılarının yan yana sütunlar halinde bölmesi ile ilgili bilgiler paylaşacağım.</div> </div> <div class='clear'></div> </li> <li> <div class="item-content"> <div class="item-thumbnail"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html"> <img alt="Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" title="Google+'da Uygunsuz İçeriği Rapor Etme ve EngellemeGoogle+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQvy4mVsmsOznYhJxqLiTMophBb72WywN-PhDJf6rn7alUEJ7u0eGfnC3uwQOsTw-WuAwgbZyyU5-sFTzSbo5OtfpKQLbL-PkygNu8Vbnr-pipT2rq-ahR5bgGNfXOenTwlIOBV1eCw27/s1600/google-plus.png"/> </a> </div> <div class="item-title"> <a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html">Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme</a></div> <div class="item-snippet">Google+'da uygun olmayan içerikleri filtreleme imkanı maalesef bulunmuyor. Bu nedenle, kullanıcılar tarafından uygunsuz içerik olara...</div> </div> <div class='clear'></div> </li> </ul> </div> </div> </body> </html>
Yorum Gönder