JavaScript ile Bir Elemanın İçeriğinin En Başına Yeni Bir İçerik Eklemek

Bu işlemi yapan kodlar aşağıdaki gibidir 


<script>

window.onload=function(){

/*eklenecek içerik*/

var a = "<style>.eklenenKutu{display:table;max-width:350px;height:auto;;background-color:#00dd00;padding:2%;}.ekleneniIcerik{display:table-cell;text-align:center;width:100%;height:auto;vertical-align:middle;color:#fff;font-size:18px;font-weight:bold;font-family:Proxima}@media screen and (max-width:900px){.eklenenKutu{max-width:90%;width:55%;margin:5px auto;}.ekleneniIcerik{font-size:.18px;}}</style><div class=\"eklenenKutu\"><div class=\"ekleneniIcerik\">Bu eleman Javascript ile başka bir elemanın içeriğinin başlangıcına eklenmiştir.<\/div><\/div>";


/*Ekleneceği eleman*/

var b=document.querySelectorAll(".disKutu")[0];


/*eklemek istediğimiz içeriği ilgili elemanın içeriğinin başına ekleyen kod*/

b.insertAdjacentHTML('afterbegin', a);


}

</script>


<div class="disKutu">

<div style="display:block;width:450px;height:55px;">Bu kutudaki içerikten önce eklenecek</div>

</div>



Kodun canlı çalışan örneğini görmek için aşağıdaki butona basın.



Bu kutudaki içerikten önce eklenecek


Saygılarımla...
Turgut ARSLAN
at Hiç yorum yok:
Labels: ,

Cumhuriyet Bayramımız Kutlu Olsun

 

Cumhuriyet Bayramımız Kutlu Olsun

Cumhuriyetimizin 97. Yılı Kutlu Olsun
at Hiç yorum yok:

CSS Hazır Basit Product Box Kodu(Transition Efektli)

Product Box'lar, E-Ticaret sitlerinde ürün kutusu olarak bilinen ve kategori sayfalarında ürünlerin gösterilmesi için kullanılan site elemanlarıdır. Kullanıcılar bu kutucuklardaki bilgilere bakarak ürünler hakkında özet bilgi edinirler. Tıkladıklarında ürün detay sayfasına yönlendirme yapar. Bazılarında sepete ekleme butonları ve çeşitli aksiyon elemanları bulunur. Bu örnekte temel seviyede bir ürün kutusu kodlaması yaptım. Basit kolay anlaşılır bir kodlar kullandım. Sadece hover etkisini basit transition ile daha şık yapmak için bir iki ufak CSS3 kodu kullandım. Kodlar aşağıdaki gibidir.

<style>
  .productBox {
    border: solid 1px #ddd;
    width: calc((100% - 10px)/4);
    min-width: 150px;
    min-height:340px;
    height: auto;
    display: block;
    font-family: Arial;
    float: left;
    margin: 5px;
    border-radius: 2%;
    -webkit-border-radius: 2%;
    -moz-border-radius: 2%;
    transition: all .5s;
    background: #fff;
  }

  .productBox:hover {
    border: solid 1px #ccc;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 16px 0px;
  }

  .productImg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 5px auto;
  }

  .productBox a {
    text-decoration: none;
    color: #717171;
  }

  .productName {
    font-size: 0.8rem;
    padding: 5px 7px;
    margin: 0px auto;
    display: block;
  }

  .productBox a:hover .productName {
    color: #141414;
  }

  .productSku {
    font-size: 10px;
    margin: 0px auto;
    padding: 0 7px;
  }

  .productPrice {
    padding: 5px 7px;
    font-size: 1rem;
    font-weight: bold;
    color: #439e4a;
  }

  .productOldPrice {
    padding: 1px 7px;
    font-size: 0.7rem;
    text-decoration: line-through;
    color: #999;
  }
</style>

<div class="productBox">
  <a href="#" title="CSS hazır ürün kutusu">
    <div class="pictureBox">
      <img src="/css-hazir-basit-product-box.jpg" alt="Ürün Fotoğrafı" class="productImg" />
    </div>
    <span class="productSku"> SKU : FFF333ddDDD</span>
    <div class="productName">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </div>
    <div class="productOldPrice">
      29.999,89 <small>TL</small>
    </div>
    <div class="productPrice">
      19.999,89 <small>TL</small>
    </div>

  </a>
</div>

Bu kodların canlı hali,




Ürün Fotoğrafı
SKU : FFF333ddDDD
Lorem ipsum dolor sit amet, consectetur adipiscing elit
29.999,89 TL
19.999,89 TL

 
İsterseniz bu kutucukları yan yana koyarak bir ürün vitrini oluşturabilirsiniz..
Ürün Fotoğrafı
SKU : FFF333ddDDD
CSS Hazır ürün kutusu.
29.999,89 TL
19.999,89 TL
Ürün Fotoğrafı
SKU : FFF333ddDDD
Kolay kullanılabilir. Hemen çalışmanıza ekleyebilirisiniz.
29.999,89 TL
19.999,89 TL
Ürün Fotoğrafı
SKU : FFF333ddDDD
Elemanların float:left ile soldan sağa sıralandıklarına dikkat edin.
29.999,89 TL
19.999,89 TL
Ürün Fotoğrafı
SKU : FFF333ddDDD
Float:left olmasının bir dez avantajı var. Ürün listesinden sonra gelen eleman, listenin en son elemanının sağına yerleşir.
29.999,89 TL
19.999,89 TL
Ürün Fotoğrafı
SKU : FFF333ddDDD
Bunu önlemek için son elemandan sonra clear:both CSS kodunu içeren bir boş div kullanın.
29.999,89 TL
19.999,89 TL
Ürün Fotoğrafı
SKU : FFF333ddDDD
Ürün kutularının boyları içeriğe göre değişiklik gösterir. Boyları eşitlemeniz lazım. Bu kutucukların boyları nasıl eşitlenecek? Bunu bir sonraki yazıda anlatacağım.
29.999,89 TL
19.999,89 TL


Saygılarımla...
Turgut ARSLAN
at Hiç yorum yok:
Labels: ,

CSS Transition Background Efektli Kutucuklar

Basit birkaç satır CSS3 koduyla liste kutularınıza şık ve zarif görünümlü arkaplan efektleri verebilirsiniz. 

<style>
  .hoverKutu {
    background-color: #ededed;
    color: #717171;
    width: 90%;
    height: 45px;
    display: block;
    line-height: 45px;
    text-align: center;
    cursor: pointer;
    transition: background-color 1.1s ease;
    border: solid 1px #dddddd;
    margin: 5px auto;
  }

  .hoverKutu:hover {
    background-color: #fff;
  }
</style>
<div class="hoverKutu">
  CSS3 kodları ile kutucuklara yumuşatılmış Hover efektleri verebilirsiniz.
</div>
<div class="hoverKutu">
  Böylelikle daha yumuşak ve modern görünümlü listeler oluşturabilirsiniz.
</div>

Bu kodların canlı hali şu şekildedir.


CSS3 kodları ile kutucuklara yumuşatılmış Hover efektleri verebilirsiniz.
Böylelikle daha yumuşak ve modern görünümlü listeler oluşturabilirsiniz.

Burada CSS Transition efekti class'ı "hoverKutu" olan elemanların arka plan renk değişimine uygulandı. Bunu yapabilmek için "hoverKutu" classınnın CSS kuralına "transition" kodunu yazdım. Trasnsition efekti uygulanırken sırasıyla

  1. Hangi özelliğe uygulanacak?
  2. Ne kadar sürecek?
  3. Zamanlama(Burada zamanlamadan kastımız geçiş efektinin belirlenen zman içinde ne şekilde tamamlanacağıdır. transition-timing-function: olarak bilinir.)

Burada transition: background-color 1.1s ease; kodu ile geçiş efektinin arkaplan rengini değişirken uygulanacağınız, 1.1 saniye süreceğini ve zamanlama kuralının easing olduğunu belirtmiş oluyoruz.
Sonrasında kullanıcı elamanın üstüne mouse ile geldiğinde efektin uygulanabilmesi için ".hoverKutu" classına ":hover" pseudo classı ile " background-color: #fff;" tanımlaması yaparak arkaplanın beyaz olmasını ve bu geçişin yumuşak bir şekilde gerçekleşmesini sağlıyoruz.

CSS Transition efekti uygularken dikkat edilmesi gereken üç önemli nokta var.

  1. "transition" kodunu hangi elemana uygulaycaksanız, o elemanın CSS kuralları içine ekleyin.
  2. Değişmesini istediğiniz CSS kuralının(genişlik, yükseklik, arakaplan rengi vs.) transition kodunu eklediğiniz elemanın kuralları içinde olduğuna emin olun.
  3. Değişikliğin uygulanmasını istediğiniz aksiyon tanımlarında(:hover, :focus gibi) değişecek olan CSS kurallarının son hallerini yazın. Aynı  arkaplan efekt sonunda beyaz olacak ise buradaki örnekte " background-color: #fff;" yazdığımız gibi.
at Hiç yorum yok:
Labels: ,

JSON - HTML Tablo Dönüştürücüsü(JSON to HTML Converter)

JSON verilerini HTML tabloya çeviren basit bir JavaScript uygulaması yaptım. Kodlar aşağıdaki gibidir. 


<!DOCTYPE html>

<html>

<body>

  <style>

    .objeTablo th,

    .objeTablo tr,

    .objeTablo td {

      padding: 5px;

      border: solid 1px #f00;

      color: #717171;

      text-align: center;

    }

  </style>

<h2>HTML Tabloya çevirmek istediğiniz JSON içeriğini buraya yapıştırın</h2>

<strong>Bu kod sadece 1 seviye değerleri gösterir.Eğer bir değerin içinde başka bir nesne varsa bunları tabloda Object olarak olarak görürsünüz. </strong><br/>

  <textarea cols="70" rows="20" name="jsonGir"></textarea><br />

    <input type="button" value="JSON İçeriğini Göster" onclick="objGoster()" />

  <table id="tabloIcerik" class="objeTablo" style="max-width: 800px; height: auto;


        border: solid 1px #f00;" cellspacing="0" cellpadding="0">

  </table>

  <script>

    function objGoster() {

      var jsonVeri = document.getElementsByName("jsonGir")[0].value;

      var obj = JSON.parse(jsonVeri);

      var nesneBaslikSay = Object.keys(obj[0]).length;

      var icerik = "<tr>";

      var icerikBaslik = "<tr>";

      var icerikDeger = "";

      for (i = 0; i < nesneBaslikSay; i++) {

        icerikBaslik += "<th> " + Object.keys(obj[0])[i] + " </th>";

      }

      icerikBaslik += "</tr>";

      for (i = 0; i < obj.length; i++) {

        for (j = 0; j < nesneBaslikSay; j++) {

          icerikDeger += "<td> " + obj[i][Object.keys(obj[i])[j]] + " </td>";

        }

        icerikDeger += "</tr>";

      }

      icerik += icerikDeger;

      document.getElementById("tabloIcerik").innerHTML = icerikBaslik + icerik;

    }

  </script>

</body>

</html>


Bu kodların çalışan hali,


HTML Tabloya çevirmek istediğiniz JSON içeriğini buraya yapıştırın

Bu kod sadece 1. seviye değerleri gösterir. Eğer bir değerin içinde başka bir nesne varsa bunları tabloda Object olarak olarak görürsünüz.
Not: Eğer JSON kodunuz okunmadıysa kodu [ ] parantezleri arasın alın. Bu basit bir kod ve arraya dönüşmeyen içerikleri okuyamıyor


at Hiç yorum yok:
Labels: , ,

CSS Timeline Side Bar

CSS ile side bar alanına eklenebilen basit bir timeline kutusu.

CSS Timeline Side Bar


<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>

<ul class="listTimeLine">
  <li class="listDate active">Haziran 30, 2020</li>
  <li class="listItem active">Lorem ipsum dolor</li>
  <li class="listDate">Haziran 18, 2020</li>
  <li class="listItem">Sed ut perspiciatis unde omnis iste</li>
  <li class="listDate">Haziran 17, 2020</li>
  <li class="listItem">Ut enim ad minima veniam, quis nostrum exercitationem</li>
  <li class="listDate">Haziran 10, 2020</li>
  <li class="listItem">Lorem ipsum dolor sit amet</li>
</ul>

at Hiç yorum yok:
Labels: ,

Google Shopping Türkiye'ye Kapanıyor.


Google Shopping Reklamları Kapanıyor

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
at Hiç yorum yok:
Labels:

Google Ads'te TBM Düşüren Bir Anahtar Kelime Stratejisi

Google Ads reklamlarının TBM maliyetleri enflasyon ve rekabetin etkisiyle giderek artmakta. Artık eskisi gibi ucuz CPC'lerle reklam yapm...