<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" style="margin-top:30px;"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="custom-news-list"> <a href="https://obphaber.blogspot.com/haber-link-1.html" class="news-item-link"> <div class="media"> <div class="pull-left"> <img class="media-object" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRH6IeJ5NfIlH59mXW2AN4iXGNTQixObdPbxPt49lG9veiRnnbbLqXR3uTrxTUy_atSCDPlDsZijXWPD7cLkMmaXU-Gm74t6mbaZSS5VPfs5vnxi6MwZgI8kstYveBmjZkWLFa5dkmEDLUyO-2MrfemyxiUCLOAJ92-vjJFOIphgonxLYgRBaB5KxDnK6/s518/lion.jpg" alt="Haber"> </div> <div class="media-body"> <h4 class="media-heading">OYAK EMS 2026 Maaş Hesaplama Tablosu Yayınlandı</h4> <p class="by-author">OYAK Emekli Maaş Sistemi üyeleri için beklenen kist maaş ve tam maaş farkları detaylı olarak analiz edildi...</p> <div class="fake-btn"> Habere Git <i class="glyphicon glyphicon-chevron-right"></i> </div> </div> </div> </a> <a href="https://obphaber.blogspot.com/haber-link-2.html" class="news-item-link"> <div class="media"> <div class="pull-left"> <img class="media-object" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRH6IeJ5NfIlH59mXW2AN4iXGNTQixObdPbxPt49lG9veiRnnbbLqXR3uTrxTUy_atSCDPlDsZijXWPD7cLkMmaXU-Gm74t6mbaZSS5VPfs5vnxi6MwZgI8kstYveBmjZkWLFa5dkmEDLUyO-2MrfemyxiUCLOAJ92-vjJFOIphgonxLYgRBaB5KxDnK6/s518/lion.jpg" alt="Haber"> </div> <div class="media-body"> <h4 class="media-heading">Konut Kredisi Faiz Oranlarında OYAK Üyelerine Özel İndirim</h4> <p class="by-author">Vakıfbank ve Ziraat Bankası üzerinden kullanılacak OYAK yapılandırma kredilerinde yeni dönem başlıyor.</p> <div class="fake-btn"> Habere Git <i class="glyphicon glyphicon-chevron-right"></i> </div> </div> </div> </a> </div> </div> </div> </div>

/* Liste Kapsayıcı Ayarları */ .custom-news-list { padding: 0; margin: 0; } /* Ana Link Sarmalayıcı */ .news-item-link { display: block; /* Tüm satırı kapla */ color: inherit; /* Yazı rengini bozma */ text-decoration: none !important; /* Alt çizgiyi kaldır */ margin-bottom: 15px; background: #fff; border: 1px solid #eee; border-radius: 8px; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.02); } /* Hover (Üzerine Gelince) Efekti */ .news-item-link:hover { box-shadow: 0 8px 15px rgba(0,0,0,0.1); transform: translateY(-3px); border-color: #FFC107; /* OYAK Haber Sarı */ background-color: #fcfcfc; } /* İçerik Düzeni (Media Object) */ .news-item-link .media { padding: 15px; margin: 0; } /* Resim Ayarları */ .news-item-link .media-object { border-radius: 6px; object-fit: cover; height: 120px; width: 160px; transition: transform 0.3s; } .news-item-link:hover .media-object { transform: scale(1.05); /* Resim hafifçe büyüsün */ } /* Başlık ve Metin */ .news-item-link .media-heading { font-family: 'Strait', sans-serif; font-weight: bold; color: #003198; /* OYAK Lacivert */ font-size: 19px; margin-bottom: 8px; } .news-item-link .by-author { color: #555; font-size: 14px; line-height: 1.5; margin-bottom: 10px; } /* Alt Buton Görünümü (Sadece Görsel) */ .news-item-link .fake-btn { display: inline-block; background-color: #910910; /* OYAK Kırmızı */ color: #fff; padding: 5px 15px; border-radius: 4px; font-size: 12px; font-weight: bold; text-transform: uppercase; } .news-item-link:hover .fake-btn { background-color: #003198; }