Blogger Kurdele Şeklinde Yayın İçi Başlık Ekleme

Başlıklarınızı Kurdele Şerit İçerisinde Gösterebilirsiniz

Şimdi blogger için paylaşacağım eklentide yazı başlıklarınızı veya widget başlıklarınızı şık bir kurdele şerit şeklinde gösterebilirsiniz.

• İlk olarak blogger panelimizden Şablon-HTML'yi Düzenle yolunu takip ederek ]]></b:skin> kodunu buluyoruz. Bu kodun tam üzerine gelecek şekilde aşağıdaki css kodlarını yapıştırıyoruz ve kaydet deyip çıkıyoruz.

.non-semantic-protector {
    position: relative;
    z-index: 1;
}

.ribbon {
    font-size: 16px !important;
    width: 50%;
    position: relative;
    background: #ba89b6;
    color: #fff;
    text-align: center;
    padding: 1em 2em;
    margin: 2em auto 3em;
}

.ribbon:before, .ribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid #986794;
    z-index: -1;
}

.ribbon:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent;
}

.ribbon:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent;
}

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #804f7c transparent transparent transparent;
    bottom: -1em;
}

.ribbon .ribbon-content:before {
    left: 0;
    border-width: 1em 0 0 1em;
}

.ribbon .ribbon-content:after {
    right: 0;
    border-width: 1em 1em 0 0;
}

Şimdi şerit kurdeleyi nerede kullanmak istiyorsak aşağıdaki HTML kodlarını oraya yapıştırıyoruz. Aşağıdaki kodların içind Başlık Buraya Gelecek bölümünü kendi başlığınızla değiştirin.

<div class="non-semantic-protector"> 
  <h1 class="ribbon">
    <strong class="ribbon-content">Başlığı Buruya Yazınız</strong>
  </h1>
</div>

Kodların Demosunu Görmek İçin tıklayın

Mesela yazı içerisinde başlık olarak kulanmak istiyorsak yazı alanımızda HTML butonuna basarak bu kodları oraya yapıştırıyoruz.

Diğer yerlerde kullanımı vs. sorularınız için aşağıdaki yorum formunu kullanabilirsiniz.