Turgut Arslan

CSS ile side bar alanına eklenebilen basit bir timeline kutusu. <style>   .listTimeLine {     margin: 0px;     padding: 10px;     border-left: 1px solid #717171;     font-family: Arial;     width: auto;     display: block;     background-color: #ddd;     max-width: 40%;     height: auto;     display: block;   }   .listTimeLine li {     margin: 4px 0;   }   .listTimeLine li.listDate {     list-style-type: none;     color: #717171;     font-size: 12px;     margin: 18px 0 0 0;   }   .listTimeLine li.listDate:first-child {     margin: 0;   }   .listTimeLine li.listItem {     list-style-type: none;     font-size: 16px;     font-weight: bold;     color: #545454;     padding-left: 15px;   }   .listTimeLine li.listDate:before {     content: "■";     padding-right: 10px;     margin-left: -15px;     line-height: 10px;     vertical-align: top;     display: inline-block;     font-size: 16px;   }   .active {     color: #e04235 !important;     font-weight: bold;   } </style&

Rekabet Kurulu ile anlaşamayan Google 10 Ağustos 2020 Tarihinden itibaren Google Shopping reklamlarının Türkiye'deki arama sonuçlarından kaldırılacağını duyurdu. Merchant Center üzerinden kontrol ettiğimiz Google Alışveriş reklamlarının, diğer Alışveriş Karşılaştırma Siteleri için haksız rekabete sebep olacak şekilde piyasayı domine ettiği, arama sonuçlarında Alışveriş Karşılaştırma Sitelerine de yeterince gösterim hakkı tanımadığı kararının alınmasını ardından Rekabet Kuruluna Google Tarafının sunduğu çözüm önerilerinin kabul edilmemesi üzerine, Google Türkiye tarafından bu kararın alındığı açıklandı. 10 Ağustostan itibaren ülkemizden yapılan arama sonuçlarında shopping reklamlarını göremeyeceğiz. Detaylar için https://turkiye.googleblog.com/2020/07/google-alisveris-reklamlari-ile-ilgili29.html

Metin kutusu kodları <style> .mainBox{ display:block; max-width:100%; height:auto; padding:2.5%; background-color:#f1f1f1; margin:5px auto; border:solid 1px #dfe6e9; box-sizing:border-box; } .innerBox{ background-color:#ffffff; padding:5px; width:100%; height:auto; display:block; border:0px; border-left: solid 3px #e74c3c; text-align:justify; box-sizing:border-box; color:#2c3e50; } </style> <div class="mainBox"> <div  class="innerBox">     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.     </div> </div> Bu kodların canlı hali

Javascript ile bir string ifadeyi tüm sayfada aratıp istenen değerle replace edebilirniz. Javascript kelime değiştirme kodumuz var kelime=/ aranan kelime /ig; var yeniKelime=" yeni ifade "; var x = this.document.body.innerHTML.replace(kelime,yeniKelime); this.document.body.innerHTML = x;  Bu koddaki kırmızı yerleri değiştirip tarayıcı konsolunda çalıştırdığınızda HTML sayfasında aradığınız kelime ile eşleşen tüm ifadelerin değiştirildiğini görebilirsiniz.

Bazı projelerde kullanıcının tıkladığı elemanın indeks sırasını bilmemiz gerekir. Herhangi bir şekilde JQuery vb javascript kütüphanesi kullanmadan saf javascript ile tıklanan elemanın sıra değerini öğrenebilirsiniz. Aşağıdaki kısa kod örneği bu işin kolayca yapılabilmesini sağlıyor. <style> li.demo{display:block;margin-top:2px;padding:5px;background-color:#4caf50;width:50px;text-align:center;color:#fff;cursor:pointer;} </style> <ul id="kutu">   <li class="demo">-1- </li>   <li class="demo">-2- </li>   <li class="demo">-3- </li>   <li class="demo">-4- </li>   <li class="demo">-5- </li> </ul> <div>Sıralama Bilgileri</div> <strong id="siraSonuc"></strong> <script> var elemanlar=[]; var sira; var ind; elemanlar=document.querySelectorAll(".demo"); for (var i=0;i<ele