"template liste"
Bootstrap 3.1.0 Snippet by muhittinbudak

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container strait" style="margin-bottom:40px;font-family: 'Strait', sans-serif;"> <style> .imageg1 { border-radius: 1rem !important; } #kayitEdit, #kayitDelete, #kayitGeriyukle { margin: 15px 0 0 15px; } </style> <div class="row"> <div class="col-12"> <img style="width:100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVxZ1KGGXEyzEdAr9jL9n6luxV_qgYpPv5R834U6aRsYLlsAh6CoaL8ZdoEcxvX0fbVYB13mvECt2lfDrlD35AHrqNJi2zO40EJMZ7iXFg_jfKVhUev8Hb-GCglvEYiDZXNdUClfW4ebPGXewzgsxyw6Y8quXtiR4TyQrpNpowNDqwkn5ZMwc72Spwd9pj/s1600/adminekran.webp" alt="cat" class="img-responsive image1"> </div> </div> <a class="btn btn-xs btn-danger pull-right" style="margin: 10px 0 0 10px" href="./obp-exit.php"><i class="fa fa-sign-out"></i> Logout</a> <a class="btn btn-xs btn-success pull-right" style="margin-top: 10px" href="./index.php"> 6.997  <span class="glyphicon glyphicon-home"></span>  Ana Sayfa </a>  <a class="btn btn-xs btn-info pull-right" style="margin: 10px 10px" href="./index.php"> 18.414  <span class="glyphicon glyphicon-home"></span>  OBP counter </a> <a class="btn btn-xs btn-warning pull-right" style="margin: 10px 10px" href="./index.php"> 7  <span class="glyphicon glyphicon-home"></span>  Winuser counter </a> <!-- form başlangıç --> <h2 style="color:#144e98">EKLE</h2> <form action="#"> <div class="form-group"> <label for="oyak_title">obp-title</label> <input type="text" class="form-control" id="oyak_title" placeholder="Haber başlığı" name="obp_title"> </div> <div class="form-group"> <label for="oyak_subtitle">Altbaşlık-Subtitle</label> <input type="text" class="form-control" id="oyak_subtitle" placeholder="Haber alt başlığı" name="obp_subtitle"> </div> <div class="form-group"> <label for="oyak_text">Metin-Text</label> <textarea style="resize:none;" class="form-control" rows="3" id="oyak_text" wrap="" placeholder="Haberi girin" name="obp_text"></textarea> </div> <div class="form-group"> <label for="oyak_resim_url">Resim Url'si</label> <textarea style="resize:none;" class="form-control" rows="4" id="oyak_resim_url" wrap="" placeholder="http://resim.jpg" name="obp_resim_url"></textarea> </div> <div class="form-group"> <label for="oyak_resim_url">Web Url'si</label> <textarea style="resize:none;" class="form-control" rows="3" id="oyak_weburl" wrap="" placeholder="http://webadresi url si" name="obp_weburl"></textarea> </div> <div class="checkbox"> <label> <input type="checkbox" name="remember"> <span id="tarih">23 Ekim 2025 Perşembe 23:50</span></label> </div> <button type="button" id="dugme" class="btn btn-block btn-lg btn-primary">Ekle <i class="fa fa-floppy-o" aria-hidden="true"></i></button> </form> <!-- form bitiş --> <div class="well well-sm mt-15 strait-16 imageg1" style="background-color:black;color:#fff;"> <center><strong id="kayitSayisi">61 Adet kayıt var</strong></center> </div> <!-- ul unsur başlangıç --> <ul class="media-list main-list dl-unsur"> <li class="media"> <a class="pull-left" href="#"><img class="media-object img-rounded" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqBR5B3N-9n12vSYDbOQeVfCpN0b-uy2hPR_2dpGKU11VF4yrTkbEPklOgYY7GrnxLxvx4IIJ4Vl4D9Xi9awiyih27bM_5YvQg9G5q6UtkP5Ro3lBk0832Mguy1dgREB0ak_RTCZDaQ2uWlTHBa2XxVOllCxKUHffg9GpBFMh6plgB8md4hWDQTxlo19mD/s1600/bilgilendirme.jpg" alt=""></a> <div class="media-body"> <h4 id="listitem1" class="media-heading">62- OYAK Heyetinin Cumhurbaşkanlığında kabulü</h4> <div class="media-body"> <h6 id="listitem1" class="media-heading text-danger">OYAK Heyetinin Cumhurbaşkanlığında kabulü</h6> <div class="by-author"> <p id="listitem" class="by-author"><a href="https://oyakbilgi.blogspot.com/p/oyak-kulliyede-bilgilendirme.html" target="_blank"><b>https://oyakbilgi.blogspot.com/p/oyak-kulliyede-bilgilendirme.html</b></a></p> <div style="margin-bottom: 10px"> <button id="kayitEdit" lang="62" class="btn btn-primary pull-right">Düzenle <i class="fa fa-edit"></i></button> <button id="kayitDelete" lang="62" class="btn btn-danger pull-right">Sil <span class="glyphicon glyphicon-trash"></span></button> </div><span class="glyphicon glyphicon-time"></span> 03 Eyl 2025 Ça 16:30 </div> </div> </div> </li> <li class="media"> <a class="pull-left" href="#"><img class="media-object img-rounded" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjisIjCiz58ZpH7hyYWTiqGtKDN2r4Ir50U9x8vw7qBUxLub3WTa4HsnOsmTtfxI0FdI_1P1sCXPwl_GIL3RU7grw2vu1i4QxQKqS2b_16vNfkfO1C8MpyiQybYcds3gKYP-g9Lh5Q0LhrtyY_aSIYuNbNzGuNz0mEDAgTtWIzVpAmtojU4l0s3BM6mGhpn/s1600/template.jpg" alt=""></a> <div class="media-body"> <h4 id="listitem1" class="media-heading">61- 2025 Ağustos ayı enflasyon oranı açıklandı</h4> <div class="media-body"> <h6 id="listitem1" class="media-heading text-danger">2025 Ağustos ayı enflasyon oranı açıklandı</h6> <div class="by-author"> <p id="listitem" class="by-author"><a href="https://oyakbilgi.blogspot.com/p/agustos-2025-ayi-enflasyonu-belli-oldu.html" target="_blank"><b>https://oyakbilgi.blogspot.com/p/agustos-2025-ayi-enflasyonu-belli-oldu.html</b></a></p> <div style="margin-bottom: 10px"> <button id="kayitEdit" lang="61" class="btn btn-primary pull-right">Düzenle <i class="fa fa-edit"></i></button> <button id="kayitDelete" lang="61" class="btn btn-danger pull-right">Sil <span class="glyphicon glyphicon-trash"></span></button> </div><span class="glyphicon glyphicon-time"></span> 03 Eyl 2025 Ça 16:07 </div> </div> </div> </li> <li class="media"> <a class="pull-left" href="#"><img class="media-object img-rounded" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUtef4Qp70JTCev8z2ZTaX6o4P6pk9iEJi7aTj559uEf_MqPWWIWfT3FEZliJgB7RpAm_kzo4ZiUNd68c1bDn3cMFHXSuD6CsA1xcA6Nz7xW9_yNlO7PUDXFkQ8Ssh9MZFCopB1cBqwgsOm8k6F55ZLyZnXD8jgec8HSwTVZ-7RLKLlPSWMuTFFggXJPWM/s1600/kiram.jpg" alt=""></a> <div class="media-body"> <h4 id="listitem1" class="media-heading">60- 2025 Eylül Ayı Kira Zammı Belli oldu</h4> <div class="media-body"> <h6 id="listitem1" class="media-heading text-danger">2025 Eylül Ayı Kira Zammı Belli oldu</h6> <div class="by-author"> <p id="listitem" class="by-author"><a href="https://oyakbilgi.blogspot.com/p/kira-2025-artis-orani-belli-oldu.html" target="_blank"><b>https://oyakbilgi.blogspot.com/p/kira-2025-artis-orani-belli-oldu.html</b></a></p> <div style="margin-bottom: 10px"> <button id="kayitEdit" lang="60" class="btn btn-primary pull-right">Düzenle <i class="fa fa-edit"></i></button> <button id="kayitDelete" lang="60" class="btn btn-danger pull-right">Sil <span class="glyphicon glyphicon-trash"></span></button> </div><span class="glyphicon glyphicon-time"></span> 03 Eyl 2025 Ça 15:27 </div> </div> </div> </li> <li class="media"> <a class="pull-left" href="#"><img class="media-object img-rounded" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiknOAZAFDlRSMAQEiyeBdQolsZGrh1pVFabIHlbWLePJtmlRjo59g9Nqvao9L6Mi6vbP_KM6g_NXo5d9GMxRGOv_hqTUnQJ9FnYqbBFala_fv210ou1Mp8X_Acym3_M5ONInTPDussUQULO2O_JzKw17skGVN1nHkQts7krQJoElZPsnEiBQb9ou9Rk7n/s1600/zam-teklif.jpg" alt=""></a> <div class="media-body"> <h4 id="listitem1" class="media-heading">26- Hükümet'in Zam Teklifini Açıklayacağı Tarih Belli Oldu</h4> <div class="media-body"> <h6 id="listitem1" class="media-heading text-danger">Hükümet'in Zam Teklifini Açıklayacağı Tarih Belli Oldu</h6> <div class="by-author"> <p id="listitem" class="by-author"><a href="https://oyakbilgi.blogspot.com/p/hukumetin-zam-teklifini-aciklayacagi.html" target="_blank"><b>https://oyakbilgi.blogspot.com/p/hukumetin-zam-teklifini-aciklayacagi.html</b></a></p> <div style="margin-bottom: 10px"> <button id="kayitEdit" lang="26" class="btn btn-primary pull-right">Düzenle <i class="fa fa-edit"></i></button> <button id="kayitGeriyukle" lang="26" class="btn btn-success pull-right">Geri yükle <span class="glyphicon glyphicon-refresh"></span></button> </div><span class="glyphicon glyphicon-time"></span> 10 Ağu 2025 Pz 16:46 </div> </div> </div> </li> <li class="media"> <a class="pull-left" href="#"><img class="media-object img-rounded" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixUcIadY6Bsi2nYqg73glPfGuMPZnD_H67Fp1pPGZhzenMXlR_OTddQ18v25jv2wH4DLjC3EObeo-gIfUQ8d2KZfWTDnpWNXNDfdQxi3r2lhYtAXO0nTHlvC86rbMb9WtLQ5RZdYThZ2w3tlPddrRijOzzr93WiCo3wi6t66JbFu5Zcm56VJJAspTp7bVI/s1600/tem25.jpg" alt=""></a> <div class="media-body"> <h4 id="listitem1" class="media-heading">2- İstanbul'un 2025 Temmuz Enflasyonu Belli Oldu</h4> <div class="media-body"> <h6 id="listitem1" class="media-heading text-danger">İstanbul'un 2025 Temmuz Enflasyonu Belli Oldu</h6> <div class="by-author"> <p id="listitem" class="by-author"><a href="https://oyakbilgi.blogspot.com/p/ito-2025-temmuz-enflasyonu-belli-oldu.html" target="_blank"><b>https://oyakbilgi.blogspot.com/p/ito-2025-temmuz-enflasyonu-belli-oldu.html</b></a></p> <div style="margin-bottom: 10px"> <button id="kayitEdit" lang="2" class="btn btn-primary pull-right">Düzenle <i class="fa fa-edit"></i></button> <button id="kayitDelete" lang="2" class="btn btn-danger pull-right">Sil <span class="glyphicon glyphicon-trash"></span></button> </div><span class="glyphicon glyphicon-time"></span> 03 Ağu 2025 Pz 17:24 </div> </div> </div> </li> <li class="media"> <a class="pull-left" href="#"><img class="media-object img-rounded" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9xEI-urBAZVTf1_InslbB3upK2s9hph7ClxRAWz1_4J0MyuUDwJNv7L8s3Ep9vfeiBQVAa2S8lU0esST9ONIuv7U0r2V4Ru-4CBStBAD6_eimED5qTLm2TSNIh4syn5hgjCCQyMTbsw7PjkTAw9UBtmYD0UNP19TrEdFE-MlD4rKG5RQ_4b-n2q14YO3G/s1600/cenaze-yardim.jpg" alt=""></a> <div class="media-body"> <h4 id="listitem1" class="media-heading">1- 2025 yılı temmuz aralık ayları arasında sağlıkta en çok emekli aylığı alanlar ile ölüm ve cenaze hakları</h4> <div class="media-body"> <h6 id="listitem1" class="media-heading text-danger"></h6> <div class="by-author"> <p id="listitem" class="by-author"><a href="https://oyakbilgi.blogspot.com/p/2025-yili-memur-emekli-olum-ve-cenaze.html" target="_blank"><b>https://oyakbilgi.blogspot.com/p/2025-yili-memur-emekli-olum-ve-cenaze.html</b></a></p> <div style="margin-bottom: 10px"> <button id="kayitEdit" lang="1" class="btn btn-primary pull-right">Düzenle <i class="fa fa-edit"></i></button> <button id="kayitDelete" lang="1" class="btn btn-danger pull-right">Sil <span class="glyphicon glyphicon-trash"></span></button> </div><span class="glyphicon glyphicon-time"></span> 03 Ağu 2025 Pz 01:46 </div> </div> </div> </li> </ul> <!-- ul unsur bitiş --> <script> $(document).ready(function(){ //hosting ismi gizlendi $('a[title="Free Web Hosting with PHP5 or PHP7"]').hide(); }); </script> </div>
/* list item Restriction. */ .main-list { padding-left: .5em; } .main-list .media { /* margin-top: 20px; */ padding-bottom: 1.1em; border-bottom: 1px solid #3C3C3C; } .main-list .media:first-child { /* border-top: 2px solid blue;*/ padding-top:15px; } .main-list .media:last-child { /*border: none;*/ border-bottom: 1px solid #D6D6D6; } .habertext { border: 1px solid #D9534F; } /* list item shortening a long sentence. */ #listitem { overflow: hidden; width:100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .image-container { width: 150px; height: 100px; overflow: hidden; /* Dışarı taşan kısmı gizle */ position: relative; border-radius: 5px; /* Köşeleri yuvarlatır */ } .image-container img { width: 100%; /* Genişliği kapsayacak şekilde ayarla */ height: auto; /* Oranı koru (sıkıştırma yok) */ display: block; position: relative; top: 0; /* Gerekirse yukarıdan kırp */ }

Questions / Comments: