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.

Bu şerit kurdeleyı hayal gücünüze bağlı istediğiniz şekilde bloğunuzda kullanabilirsiniz. Ben paylaşayım da gerisi size kalmış.

1. İ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;
}

2. Ş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ık Buraya Gelecek</strong>
  </h1>
</div>

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. İyi bloglamalar.

Arama: blogger şerit kurdele başlık alanı, blogger widget başlıklarını düzenleme, sidebar başlıklarını resim içinde gösterme.