blogger kurdeleli başlık ekleme,blogger widgetler,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,TeknoWin
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.
Axact

Admin Ælis

TeknoWin.blogspot.com Bir çok konuda fikir sahibi olduğu kategorilere yönelip kullanıcıya en iyi ve en özgün bilgiyi sunmayı amaç edinmiştir.TeknoWin Olarak Güncel Haber , Teknoloji , İnternet , Program İndirme , Blogger Konuları , Blogger Temaları Magazin Haberleri , İlginç Bilgiler ,Pratik Bilgiler ve Çözümler , Program Hataları ve Çözümleri Film İndir ve Dizi İndir Oyun İndir , Film Dizi Hakkında Öneriler , Videolar Komik Gifler Fotograflar Tüm Bu Kategorileri Baz Alan Genel Güncel Paylaşım ve Portal Sitesidir...

Yorum Yap:

0 Yorum var: