× İletişim Formu Popüler Yayınlar Widget Tasarımı 2 Arlina Design 11/21/2017 Etiketler : CSS Widget Arlina Design <!DOCTYPE html> <html> <head> <style> @import url('https://fonts.googleapis.com/css?family=Montserrat');body{font:normal bold 14px 'Montserrat';margin:0;padding:20px} .widget{border:1px solid #eee;background:#fff;display:block;width:320px;box-sizing:border-box;height:auto;margin-bottom:30px;overflow:hidden;margin:auto;padding:0} .widget h2{line-height:20px;font:normal bold 14px 'Montserrat';color:#444;text-align:left;padding-bottom:10px;text-transform:uppercase;border-bottom:2px solid #f44336;display:inline-block;bottom:-2px;margin:0 0 20px 0} .widget{color:#666;padding:20px} a{text-decoration:none;color:#222} .PopularPosts .widget-content ul{margin:0} .PopularPosts .widget-content ul li{padding:0;margin-bottom:10px;display:inline-block} .PopularPosts .widget-content ul li:last-child{margin-bottom:0;border-bottom:none!important;padding-bottom:0!important} .PopularPosts img{width:75px;object-fit:cover;height:75px;padding-right:0!important;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease} .popular-posts ul{padding:0;list-style:none} .PopularPosts .item-thumbnail{float:left;height:75px;width:75px;background:#222;overflow:hidden;margin:0 10px 0 0!important;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease} .popular-posts .item-snippet{font-size:11.3px;line-height:19px;color:#868686;text-align:center;display:none;font-family:'Lato';padding-bottom:10px} .popular-posts .item-snippet:before{content:"";width:40px;border-top:1px solid #f44336;position:relative;left:50%;top:0;margin-left:-22px;padding-bottom:10px;display:block} .popular-posts ul li .item-caption{background:#fff;position:static;text-align:center;width:100%;height:75px;margin:auto;margin-top:0;vertical-align:middle;display:table-cell;overflow:hidden;padding:0} .popular-posts .item-title{line-height:22px;font-size:14px;text-align:left;padding:5px 0 2px 5px;background:#fff;display:table-cell} .first-popular .item-thumbnail{float:none!important;height:150px!important;width:100%!important} .first-popular .item-thumbnail img{width:100%;object-fit:cover;height:150px} .first-popular .item-caption{position:relative!important;text-align:center!important;width:90%!important;margin:auto!important;margin-top:-29px!important;display:block!important;height:100%!important} .first-popular .item-title{width:100vw;text-align:center!important;padding:10px!important;font-size:15px!important} .first-popular .item-snippet{display:block!important} .PopularPosts .item-thumbnail img:hover{opacity:.8} </style> </head> <body> <div class="widget PopularPosts" id="PopularPosts1"> <h2>POPÜLER YAYINLAR</h2> <div class="widget-content popular-posts"> <ul> <li class="first-popular"> <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> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script> <script> //<![CDATA[ $( ".popular-posts ul li" ).first().addClass( "first-popular" ); }); //]]> </script> <script> //<![CDATA[ $(".PopularPosts img").attr('src', function(i, src) {return src.replace('w72-h72', 'w280-h220-p-k-nu');}); }); //]]> </script> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Popüler Yayınlar Widget Tasarımı 2" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Popüler Yayınlar Widget Tasarımı 2 Arlina Design 11/21/2017 Etiketler : CSS Widget Arlina Design <!DOCTYPE html> <html> <head> <style> @import url('https://fonts.googleapis.com/css?family=Montserrat');body{font:normal bold 14px 'Montserrat';margin:0;padding:20px} .widget{border:1px solid #eee;background:#fff;display:block;width:320px;box-sizing:border-box;height:auto;margin-bottom:30px;overflow:hidden;margin:auto;padding:0} .widget h2{line-height:20px;font:normal bold 14px 'Montserrat';color:#444;text-align:left;padding-bottom:10px;text-transform:uppercase;border-bottom:2px solid #f44336;display:inline-block;bottom:-2px;margin:0 0 20px 0} .widget{color:#666;padding:20px} a{text-decoration:none;color:#222} .PopularPosts .widget-content ul{margin:0} .PopularPosts .widget-content ul li{padding:0;margin-bottom:10px;display:inline-block} .PopularPosts .widget-content ul li:last-child{margin-bottom:0;border-bottom:none!important;padding-bottom:0!important} .PopularPosts img{width:75px;object-fit:cover;height:75px;padding-right:0!important;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease} .popular-posts ul{padding:0;list-style:none} .PopularPosts .item-thumbnail{float:left;height:75px;width:75px;background:#222;overflow:hidden;margin:0 10px 0 0!important;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease} .popular-posts .item-snippet{font-size:11.3px;line-height:19px;color:#868686;text-align:center;display:none;font-family:'Lato';padding-bottom:10px} .popular-posts .item-snippet:before{content:"";width:40px;border-top:1px solid #f44336;position:relative;left:50%;top:0;margin-left:-22px;padding-bottom:10px;display:block} .popular-posts ul li .item-caption{background:#fff;position:static;text-align:center;width:100%;height:75px;margin:auto;margin-top:0;vertical-align:middle;display:table-cell;overflow:hidden;padding:0} .popular-posts .item-title{line-height:22px;font-size:14px;text-align:left;padding:5px 0 2px 5px;background:#fff;display:table-cell} .first-popular .item-thumbnail{float:none!important;height:150px!important;width:100%!important} .first-popular .item-thumbnail img{width:100%;object-fit:cover;height:150px} .first-popular .item-caption{position:relative!important;text-align:center!important;width:90%!important;margin:auto!important;margin-top:-29px!important;display:block!important;height:100%!important} .first-popular .item-title{width:100vw;text-align:center!important;padding:10px!important;font-size:15px!important} .first-popular .item-snippet{display:block!important} .PopularPosts .item-thumbnail img:hover{opacity:.8} </style> </head> <body> <div class="widget PopularPosts" id="PopularPosts1"> <h2>POPÜLER YAYINLAR</h2> <div class="widget-content popular-posts"> <ul> <li class="first-popular"> <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> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script> <script> //<![CDATA[ $( ".popular-posts ul li" ).first().addClass( "first-popular" ); }); //]]> </script> <script> //<![CDATA[ $(".PopularPosts img").attr('src', function(i, src) {return src.replace('w72-h72', 'w280-h220-p-k-nu');}); }); //]]> </script> </body> </html>
Yorum Gönder