Blogger Sabit Slider Widget'ı

Yazı Boyutu Ayarla büyüt (A+) (A-) küçült

1. Blogger Kontrol Panelinizdeyken sırasıyla " Tema » HTML'yi düzenle " tıklayın.

2.  CTRL+F tuş kombinasyonu'nu kullanarak sayfada " ]]></b:skin> aratın ve bu kodun bir kaç satır üstüne aşağıda verilen kodu ekleyin.;
.meta {
  margin: 0 auto;
  background-color: gray;
  display: flex;
  width: 900px;
  gap: 10px;
  padding: 10px;
}

.slider {
  width: 300px;
  background-color: white;
  border: 1px solid #000;
  box-sizing: border-box;
  padding: 10px;
}

.slider img {
  width: 100%;
}

h4 {
  color: lightgray;
}

.slider  button {
  background-color: grey;
  color: white;
  width: 100%;
  border: none;
  padding:5px;
}
3. Temanızın uygun bölümüne aşağıda ki kodu ekleyin. (Örneğin ben main-wrapper'ın üstüne ekledim. Sizde temanız da uygun gördüğünüz bir yere ekleyin. Ayrıca aşağıda ki kodlar da bulunan BURAYA RESMİN LİNKİ, BAŞLIK, ALT BAŞLIK, ÖNİZLEME Kısımlarını kendinize göre düzenlemeyi unutmayın.
<div class="meta">
  <div class="slider ">
    <img src="BURAYA RESMİN LİNKİ"/>
    <h3>Başlık</h3>
    <h4>Alt Başlık</h4>
    <button class="buy"><a link="">Önizleme</></button>    
  </div>
  <div class="slider >
    <img src="BURAYA RESMİN LİNKİ"/>
    <h3>Başlık</h3>
    <h4>Alt Başlık</h4>
    <button class="buy"><a link="">Önizleme</></button>    
  </div>
  <div class="slider ">
    <img src="BURAYA RESMİN LİNKİ"/>
    <h3>Başlık</h3>
    <h4>Alt Başlık</h4>
    <button class="buy"><a link="">Önizleme</></button>    
  </div>
  <div class="slider ">
    <img src="BURAYA RESMİN LİNKİ"/>
    <h3>Başlık</h3>
    <h4>Alt Başlık</h4>
    <button class="buy"><a link="">Önizleme</></button>    
  </div>
  
    
</div>

0 Yorum:

Yorum Gönder