UI Bileşenleri ve Tipografi

2.6.5 Dokümanlarını mı arıyorsunuz? Eski dokümanlara bir göz atın .

İçindekiler

1. Paragraf
   1. Metin Girintili Paragraf
   2. Büyük Harfle Paragraf
   3. Referans Paragrafını Gönder
2. Resim Gönder
   1. Resim ve Açıklama
   2. Otomatik Işık Kutusu ile Görüntü
   3. Izgara Düzeni Olan Görüntüler
   4. Tümünü Göster Fonksiyonlu Görseller
   5. Kaydırma Düzeni Olan Görüntüler
   6. Lazyload Görüntüsü
3. Dış Bağlantı
4. Düğme
5. İndirme Bağlantısı
6. Alıntı bloğu
7. Not Bloğu
8. Uyarı
9. Masa
10. Sözdizimi vurgulayıcı
    1. MultiTabs Sözdizimi Vurgulayıcı
11. Spoiler
12. Akordeon
13. İçindekiler
    1. Kılavuz İçindekiler
    2. Otomatik İçindekiler Tablosu
14. İlgili Yazılar
    1. Manuel İlgili Gönderiler
    2. Otomatik İlgili Gönderiler
15. Tembel YouTube
    1. YouTube'u ertele
16. Başlık Alt Başlığı
17. Temeller
    1. Açık Gönderi Parçası
    2. Açık Gönderi Küçük Resmi

İlgili Yazılar

1. Firebase
2. Progressive Web App
3. Google Adsense
4. Google Analytics
5. Pagination
6. Google Translate

Bu özelliklerin çoğu yalnızca ' HTML Görünümü ' modunda kullanılabilir , ayrıca bu özelliklerden bazılarını kullanırken ' Yazma görünümü ' moduna geçemezsiniz .

1. Gönderi düzenleyici görünümünde, tıklayınBaşlığın sağ alt kısmındaki simge.
2. Karşınıza iki seçenek çıkacak: HTML görünümü ve Yazma görünümü .
3. Seçme 'HTML Görünümü'.
4. Bileşen kodunu eklemek istediğiniz yere kopyalayıp yapıştırın ve uygun değişiklikleri yapın.

Paragraf

pMakaleye paragraf eklemek için etiketi kullanın .

<!--[ Paragraph ]-->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Metin Girintili Paragraf

Bu özellik, bir paragrafın ilk satırının önceden belirlenmiş bir değerle girintili olmasını sağlar. Bunu birkaç başka paragrafa da uygulayabilirsiniz.

<!--[ Text Indent paragraph ]-->
<p class='pIndent'>Your_paragraph_is_here.</p>

Büyük Harfle Paragraf

Büyük harf, paragrafın ilk harfini yeniden boyutlandırır, böylece bir veya daha fazla satır aşağı düşer. Kitaplar, dergiler, gazeteler vb. gibi birçok basılı medya türü, görsel çekiciliğe katkıda bulunabildikleri için büyük harf kullanır.

Mbir paragrafın veya bölümün başında dekoratif bir unsur olarak kullanılan büyük bir büyük harftir. Azalan sınırın boyutu genellikle iki veya daha fazla satırdır.

<!--[ Drop Cap paragraph ]-->
<p><span class='dropCap'>Y</span>our_paragraph_is_here.</p>

Referans Paragrafını Gönder

Yazının altına kaynakça veya dipnot listesi yazmak.

Kaynak:
www.example.com

<!--[ Post Reference paragraph ]-->
<p class='pRef'>Source:<br/> www.example.com</p>

Resim Gönder

Aşağıda herhangi bir konteyner içermeyen standart bir resim bulunmaktadır, yani bu resim için bir ışık kutusu olmayacaktır.

<!--[ Standard image ]-->
<img class='full' alt='alt_here' width='1280' height='720' src='image_link'/>

İpuçları!
Sınıf adını fark ettiniz mi full? Bu sınıf adını etikete eklemek imgyatay kenar boşluğunu kaldırır ve Mobil Cihazlarda tam ekran genişliğini uyarlar.

Bilmekte fayda var:

• altEtiketlere , widthve heightözniteliklerini eklemenizi öneririz img.

Resim ve Açıklama

Bu görseldeki başlık makale açıklamasında/parçasında okunmayacaktır. Ayrıca, makale parçacıklarında başlıkları okunabilir tutmayı da seçebilirsiniz.

Resim yazısı burada! Nerede arıyordun?

<!--[ Image with Caption ]-->
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='image_alt' src='image_link'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>caption_here</td>
    </tr>
  </tbody>
</table>

tableResimlere sadece açıklama eklemek için figureHTML etiketleri kullanılmasının sebebini merak ediyor olabilirsiniz figcaption.

Sizin için çözeyim! Bunun nedeni, Blogger yazı düzenleyicisi aracılığıyla bir resme başlık eklediğimizde ve HTML'yi elle düzenlemediğimizde, başlık içeren bir resim için yukarıdaki kod parçacığını kullanmasıdır. Bu nedenle, bunları desteklemek gerekir.

Aşağıda gösterildiği gibi etiket yerine figureve etiketlerini de kullanabilirsiniz .figcaptiontable

Resim başlığı figcaption etiketi kullanılarak eklendi.

<!--[ Image with Caption ]-->
<figure>
  <img alt='image_alt' src='image_src'/>
  <figcaption>caption_here</figcaption>
</figure>

Otomatik Işık Kutusu ile Görüntü

Lighbox, resmin ölçeğini büyütmeye ve tıklamada tamamen odaklanabilir hale getirmeye yardımcı olur. Lightbox ayrıca, altresim tıklandığında göründüğünde resmin özniteliğinin içeriğini de içerir.

Işık kutusunu nerede buluyorsunuz? Bu resme tıklayın!

Bilmekte fayda var:

• Gönderideki tüm resimler lbx, separator, psImg, btImg, sınıf adlarından birine sahip bir ana kapsayıcının altına sarılmışsa veya , , , , glImgseçicilerinden birini karşılıyorsa otomatik olarak bir lightbox fonksiyonuna sahip olacaktır ..pS .separator >a.pS .tr-caption-container td >a.pS .separator >img.pS .tr-caption-container td >imgfigure img
• Lightbox'lı bir resim bağlantı etiketinin altına sarılmışsa, resme tıklandığında bağlantı yalnızca lightbox gösterildiğinde açılır.
• Belirli bir görüntü için otomatik ışık kutusu işlevini açıkça devre dışı bırakmak için etikete nitelik ekleyin .data-lightbox='false'img
• Nitelik içeriklerini otomatik olarak içeren lightbox'ı açıkça devre dışı bırakmak için etiketi niteliğe altekleyin .data-caption='false'img

Izgara Düzeni Olan Görüntüler

Görüntüler bağlamında ızgara düzeni genellikle bir web sayfasında veya bir belgede birden fazla görüntüyü yapılandırılmış bir ızgara biçiminde düzenlemeyi ifade eder. Bu düzen, birkaç görüntüyü düzgün ve düzenli bir şekilde görüntülemek istediğiniz galeriler, portföyler veya herhangi bir görüntü koleksiyonu için popülerdir.

<!--[ Images with Grid Layout ]-->
<div class='psImg grImg'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
</div>

Tümünü Göster Fonksiyonlu Görseller

Bazı görselleri gizlemek için kullanılır ve kullanıcı Tümünü Göster düğmesine tıkladığında gösterilir . Tümünü Göster işlevi yalnızca bir kez etkinleştirilebilir, etkinleştirdiğinizde görseller tekrar gizlenemez.

Tümünü Göster

<!--[ Images with Show All Function ]-->
<input hidden class='inImg' id='for-hideImage-1' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  
  <div class='btImg'>
    <!--[ Image acting as a button ]-->
    <img alt='image_alt' src='image_link'/>
    
    <!--[ Button to activate ]-->
    <label for='for-hideImage-1' aria-label='Show all images'>Show All</label>
  </div>

  <!--[ Hide the rest of images here ]-->
  <div class='psImg shImg'>
    <img alt='image_alt' src='image_link'/>
    <img alt='image_alt' src='image_link'/>
    <img alt='image_alt' src='image_link'/>
    <img alt='image_alt' src='image_link'/>
  </div>
</div>

Kaydırma Düzeni Olan Görüntüler

Kaydırma düzenine sahip görseller genellikle görsellerin bir kapsayıcı içinde yatay veya dikey kaydırmalı bir şekilde görüntülendiği bir tasarım tekniğini ifade eder. Bu yaklaşım genellikle ekrandaki kullanılabilir alanı aşabilecek bir görsel koleksiyonunuz olduğunda ve kullanıcıların bunlar arasında kaydırma yapabilmesini istediğinizde kullanılır.

<!--[ Images with Scroll Layout (Type 1) ]-->
<div class='glImg'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
</div>

İpuçları! Kaydırma resminin yüksekliğini, öğeye , , ,
sınıf adlarından birini ekleyerek değiştirebilirsiniz . h150h200h250div.galWrp

İşte başka bir kaydırma düzeni stili ancak yalnızca mobil görünümde etkin olacak. Lütfen bu sayfayı mobil cihazınızda açmayı deneyin.

<!--[ Images with Scroll Layout (Type 2) ]-->
<div class='psImg scImg scrlH'>
  <img alt='image_alt' src=''image_link'/>
  <img alt='image_alt' src=''image_link'/>
  <img alt='image_alt' src=''image_link'/>
  <img alt='image_alt' src=''image_link'/>
</div>

Lazyload Görüntüsü

Blog'un yüklenmesini geciktirmek için kullanışlıdırSayfa Hızıpuan daha yüksek olduğunda, görüntü yalnızca kullanıcı görüntü alanına kaydırdığında yüklenir. Bu özellik,@aFarkas/tembelsizesResimleri tembel yüklemek için.

<!--[ Lazyload Image ]-->
<img class='lazyload' alt='image_title' data-src='image_link' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Uyarı!
Gönderinin ilk resmini asla manuel olarak lazyload etmeyin. Bunu yapmak, beklenmeyen davranışlara yol açar.

Dış Bağlantı

Bağlantının başka bir siteye yönlendireceğini kullanıcılara bildirir.

Dış Bağlantı

<a class='extL' href='link_here' rel='noreferrer' target='_blank'>link_title</a>

Alternatif stil:

Dış Bağlantı

<a class='extL alt' href='link_here' rel='noreferrer' target='_blank'>External Link</a>

Düğme

bağlantı_başlığı

<!--[ Button ]-->
<a class='button' href='link_here'>link_title</a>

bağlantı_başlığı

<!--[ Button outlined ]-->
<a class='button ln' href='link_here'>link_title</a>

bağlantı_başlığı

<!--[ Button with download icon ]-->
<a class='button' href='link_here'><i class='icon dl'></i>link_title</a>

bağlantı_başlığı

<!--[ Button with demo icon ]-->
<a class='button' href='link_here'><i class='icon demo'></i>link_title</a>

İndirme Bağlantısı

dosya_adı.zip 200kb

<!--[ Download Box ]-->
<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fS'>200kb</span>
  </div>

  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='link_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>

Alıntı bloğu

Müşteri çok önemli, müşteriyi müşteri takip edecek. Vestibulum için yatırım yapılır ve tetik faydalıdır. Mauris vel diam pellentesque lorem lacinia luctus.

Anonim

<!--[ Standard Blockquote ]-->
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

Müşteri çok önemli, müşteriyi müşteri takip edecek. Vestibulum için yatırım yapılır ve tetik faydalıdır. Mauris vel diam pellentesque lorem lacinia luctus.

Anonim

<!--[ Blockquote (Style 1) ]-->
<blockquote class='s1'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

Müşteri çok önemli, müşteriyi müşteri takip edecek. Vestibulum için yatırım yapılır ve tetik faydalıdır. Mauris vel diam pellentesque lorem lacinia luctus.

Anonim

<!--[ Blockquote (Style 2) ]-->
<blockquote class='s2'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

Not Bloğu

Bu özellik önemli bilgi, uyarı cümleleri veya vurgu cümleleri eklemeye yarar, aşağıda gösterildiği gibi iki stil vardır.

Bilgi!
Müşteri çok önemli, müşteriyi müşteri takip edecek. Vestibulum için yatırım yapılır ve tetik faydalıdır. Mauris vel diam pellentesque lorem lacinia luctus.

<!--[ Note info ]-->
<p class='note'><b>Info!</b><br/>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Uyarı!
Müşteri çok önemli, müşteriyi müşteri takip edecek. Vestibulum için yatırım yapılır ve tetik faydalıdır. Mauris vel diam pellentesque lorem lacinia luctus.

<!--[ Note warning ]-->
<p class='note wr'><b>Warning!</b><br/>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>

Uyarı

Varsayılan Basit bir varsayılan uyarı - müşteri mutlu olmalıdır.

<!--[ Alert default ]-->
<div class='alert'><b>Default</b>
  A simple default alert - Lorem ipsum dolor sit amet.
</div>

Anahat Basit bir özet uyarısı; bir müşteriye sahip olmak çok önemlidir.

<!--[ Alert outlined ]-->
<div class='alert outline'><b>Outline</b>
  A simple outline alert - Lorem ipsum dolor sit amet.
</div>

Bilgi! Basit bir bilgi uyarısı; bir müşterinizin olması çok önemlidir.

<!--[ Alert variant info ]-->
<div class='alert info'><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

Uyarı! Basit bir uyarı uyarısı - müşteri çok dikkatli olmalıdır.

<!--[ Alert variant warning ]-->
<div class='alert warning'><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

Başarı! Basit bir başarı uyarısı - Müşteri çok mutlu olmalı.

<!--[ Alert variant success ]-->
<div class='alert success'><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

Hata! Basit bir hata uyarısı; gerçekten baş belası.

<!--[ Alert variant error ]-->
<div class='alert error'><b>Error!</b>
  A simple error alert - Lorem ipsum dolor sit amet.
</div>

Bilgi! Basit bir bilgi uyarısı; bir müşterinizin olması çok önemlidir.

<!--[ Alert variant info outlined ]-->
<div class='alert info outline'><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

Uyarı! Basit bir uyarı uyarısı - müşteri çok dikkatli olmalıdır.

<!--[ Alert variant warning outlined ]-->
<div class='alert warning outline'><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

Başarı! Basit bir başarı uyarısı - Müşteri çok mutlu olmalı.

<!--[ Alert variant success outlined ]-->
<div class='alert success outline'><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

Hata! Basit bir hata uyarısı; gerçekten baş belası.

<!--[ Alert variant error outlined ]-->
<div class='alert error outline'><b>Error!</b>
  A simple error alert - Lorem ipsum dolor sit amet.
</div>

Masa

HTML'de tabloları kullanmak biraz daha karmaşıktır, kullanmadan önce HTML tabloları hakkında daha fazla bilgi edinmenizi öneririz. Aşağıda veri içeren bir tablo örneği verilmiştir:

İsim	Konum	Ofis	Yaş	Başlangıç ​​tarihi	Maaş
Kaplan Nixon	Sistem Mimarı	Edinburg	61	2011/04/25	320.800 dolar
Garrett Kışları	Muhasebeci	Tokyo	63	2011/07/25	170.750 dolar
Ashton Cox	Junior Teknik Yazar	San Fransisco	66	2009/01/12	86.000 dolar

<!--[ Table ]-->
<div class='table'>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
    </tbody>
  </table>
</div>

Tablo stilleri için, öğeye aşağıdakileri içeren bir sınıf adı ekleyebilirsiniz :.table

• cborder: tablo kabı için sınır.
• bordered/ noborder(birini seçin): tablo içeriği kenarlığı.
• clr/ primary/ warning/ success/ error: arka plan başlık tablosu.
• stripped: tablo satırı soyulmuş stil.
• hovered: hover tablo satırı.
• mh100/ mhvh/ mh200/ mh300: tablonun maksimum yüksekliği.
• sp5/ sp10/ sp20: tablo içeriği dolgusu

Sözdizimi vurgulayıcı

Yazılarda bilgisayar kodu (HTML, CSS, Javascript, vb.) satırlarını tanımlamak için kullanılır.

<pre data-comment='.html' data-source='src/index.html'><code>code_here</code></pre>

codeetiketi şu şekilde satır içi kod tanımlamak için kullanılabilir: code_here.

<code>code_here</code>

kbdetiketi klavye girişini şu şekilde tanımlamak için kullanılabilir: ⌘ + A.

<kbd>⌘ + A</kbd>

Bilmekte fayda var:

• Tüm kod blokları otomatik olarak vurgulanır@highlightjs/highlight.js, kod vurgulama için popüler kütüphanelerden biri ve özel bir eklenti. Kopyalama düğmesi ve satır numarası da otomatik olarak eklenir.
• Kütüphane, yalnızca gönderide en az bir kod bloğu varsa yüklenir; böylece ekstra isteklerde bulunulmaz.
• Satır içi kodlar da vurgulanmıştır.
• <mark>etiketi, kodun bir kısmını işaretlemek için o kısmı etiketin içine sarmak için kullanılabilir .<code>

MultiTabs Sözdizimi Vurgulayıcı

Birden fazla kod bloğunu bir arada gruplamak için kullanılır.

[HTML] code_here

[CSS] code_here

[JS] code_here

[JSON] code_here

<!--[ MultiTabs Syntax Highlighter ]-->
<div class='pre tabs'>
  <!--[ Active function ]-->
  <input id='preT1-1' type='radio' name='preTab1' checked=''/>
  <input id='preT1-2' type='radio' name='preTab1'/>
  <input id='preT1-3' type='radio' name='preTab1'/>
  <input id='preT1-4' type='radio' name='preTab1'/>
  
  <!--[ Header/title ]-->
  <div>
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for='preT1-1' data-text='HTML'></label>
    <label for='preT1-2' data-text='CSS'></label>
    <label for='preT1-3' data-text='JS'></label>
    <label for='preT1-4' data-text='JSON'></label>
  </div>

  <!--[ Content ]-->
  <pre class='preC1-1' data-source='src/index.html'><code>[HTML] code_here</code></pre>
  <pre class='preC1-2' data-source='src/style.css'><code>[CSS] code_here</code></pre>
  <pre class='preC1-3' data-source='src/main.js'><code>[JS] code_here</code></pre>
  <pre class='preC1-4' data-source='src/rules.json'><code>[JSON] code_here</code></pre>
</div>

Spoiler

Kullanıcının isteğine göre açıp kapatabileceği etkileşimli widget'lar oluşturmak için kullanılır. Varsayılan olarak bu widget kapalıdır, kullanıcı komut düğmesine bastığında içindeki içeriği görüntüler. Bu widget'a herhangi bir içerik dahil edilebilir.

Spoiler:

metin_burada

<!--[ Spoiler ]-->
<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Akordeon

Kullanıcıların gruplar halinde talep üzerine açıp kapatabilecekleri ek içerikleri tanımlar, genellikle soru veya SSS (Sıkça Sorulan Sorular) listesi için kullanılır.

Başlık_burada

metin_burada

<!--[ Accordion ]-->
<details class='ac'>
  <summary>Title_here</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Başlık_burada

metin_burada

<!--[ Accordion (Alternate) ]-->
<details class='ac alt'>
  <summary>Title_here</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Başlık_burada

metin_burada

Başlık_burada

metin_burada

Başlık_burada

metin_burada

Başlık_burada

metin_burada

<!--[ Accordion (Grouped) ]-->
<div class='showH'>
  <details class='ac'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac alt'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac alt'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
</div>

İçindekiler

TOC (İçindekiler Tablosu kısaltması), kullanıcıların farklı bölümlere doğrudan bağlantılar sağlayarak bir web sayfasının içeriğinde hızla gezinmesine yardımcı olur. Bu, özellikle uzun makaleler veya birden fazla farklı bölümü olan sayfalar için yararlıdır.

İçindekiler tablosunu tanımlamanın iki yolu vardır.

Kılavuz İçindekiler

Manuel TOC kullanımı oldukça karmaşıktır, her başlık etiketine farklı bir nitelik eklemeniz idve bunu içerik listesine yazmanız gerekir.

Otomatik İçindekiler Tablosu

Manuel İçindekiler tablosunu kullanmak çok kolay değildir, bu nedenle yazıdaki tüm başlıkları arayan ve içerik listesini düzenli bir şekilde dolduran Otomatik İçindekiler tablosunu sunuyoruz.

İçindekiler

1. Paragraf
   1. Metin Girintili Paragraf
   2. Büyük Harfle Paragraf
   3. Referans Paragrafını Gönder
2. Resim Gönder
   1. Resim ve Açıklama
   2. Otomatik Işık Kutusu ile Görüntü
   3. Izgara Düzeni Olan Görüntüler
   4. Tümünü Göster Fonksiyonlu Görseller
   5. Kaydırma Düzeni Olan Görüntüler
   6. Lazyload Görüntüsü
3. Dış Bağlantı
4. Düğme
5. İndirme Bağlantısı
6. Alıntı bloğu
7. Not Bloğu
8. Uyarı
9. Masa
10. Sözdizimi vurgulayıcı
    1. MultiTabs Sözdizimi Vurgulayıcı
11. Spoiler
12. Akordeon
13. İçindekiler
    1. Kılavuz İçindekiler
    2. Otomatik İçindekiler Tablosu
14. İlgili Yazılar
    1. Manuel İlgili Gönderiler
    2. Otomatik İlgili Gönderiler
15. Tembel YouTube
    1. YouTube'u ertele
16. Başlık Alt Başlığı
17. Temeller
    1. Açık Gönderi Parçası
    2. Açık Gönderi Küçük Resmi

<!--[ Automatic Table of Contents ]-->
<details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='aToc'></div>
</details>

Manuel İlgili Gönderiler

Bu yazıyı okumak isteyebilirsiniz:

• post_title
• post_title
• post_title

<div class='pRelate'>
  <!--[ Related title ]-->
  <b>You may want to read this post :</b>
  <ul>
    <li><a href='post_link'>post_title</a></li>
    <li><a href='post_link'>post_title</a></li>
    <li><a href='post_link'>post_title</a></li>
  </ul>
</div>

Otomatik İlgili Gönderiler

İlgili Yazılar

1. Basic
2. Navigation Menu
3. Comments
4. Split Post
5. Tabs Post
6. Appearance

<!--[ Automatic Related Posts ]-->
<details class='sp arp' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Related Posts</summary>  
  <div class='aRel'></div>
</details>

Bilmekte fayda var:

• Bu özellik belirli bir etikete sahip gönderilerin listesini gösterir.
• Bir etiketi belirtmek için, öğeye öznitelik ekleyin .data-label='My Label'.aRel
• Eğer öznitelik belirtilmezse veya etiketli bir gönderi yoksa , gönderide kullanılmamışsa geçerli gönderiden rastgele bir etikete, aksi takdirde sayfada kullanılmışsa blogdan rastgele bir etikete geri dönülür.data-labeldata-label
• Görüntülenen gönderiyi filtreleyecektir.
• Maksimum gönderi sayısını ayarlamak için, 6'nın maksimum gönderi sayısı olduğu özniteliğini ekleyin.data-max-posts='6'

Tembel YouTube

Oynat düğmesine tıklandığında iframe yüklenir, aksi takdirde küçük resim görüntüsü yer tutucu olarak gösterilir ve bu da kullanılarak tembel yüklenir@aFarkas/tembelsizes.

<!--[ Lazy YouTube ]-->
<div class='lazyYt' data-embed='video_id'></div>

YouTube'u ertele

iframe yüklemesini erteler@aFarkas/tembelsizes.

<!--[ Defer YouTube ]-->
<div class='videoYt'>
  <iframe class='lazyload' data-src='https://www.youtube.com/embed/DT61L8hbbJ4' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' allowfullscreen=''></iframe>
</div>

Başlık Alt Başlığı

Belirli bir gönderi veya sayfadaki başlık başlığının yanına alt başlık ekler.

<style>
  /* Custom Header subtitle */
  .headH::after{content:'Subtitle'}
</style>

Temeller

Açık Gönderi Parçası

Gönderi parçacığı gönderinin birkaç satırlık metin içeriğini gösterir. Gönderinin başlangıcından itibaren metinleri otomatik olarak seçer. Özel bir gönderi parçacığı ayarlamak isterseniz, gönderinin başına aşağıdaki kod parçacığını ekleyebilirsiniz:

<!--[ Explicitly sets post snippet ]-->
<div hidden='' aria-hidden='true'>post_snippet</div>

<!--more-->

Açık Gönderi Küçük Resmi

Blogger, gönderinin ilk resmini otomatik olarak küçük resmi olarak seçer. Gönderide görünmemesi gereken özel gönderi küçük resmi ayarlamak isterseniz, gönderinin başına aşağıdaki kod parçacığını ekleyebilirsiniz:

<!--[ Explicitly sets post thumbnail ]-->
<!--[
  <div class='separator'><img src='image_src'/></div>
]-->

<!--more-->

Yukarıdaki iki kod parçacığını aşağıda gösterildiği gibi birleştirerek özel gönderi parçacığı ve gönderi küçük resmi ayarlayabilirsiniz:

<!--[ Explicitly sets post snippet ]-->
<div hidden='' aria-hidden='true'>post_snippet</div>

<!--[ Explicitly sets post thumbnail ]-->
<!--[
  <div class='separator'><img src='image_src'/></div>
]-->

<!--more-->