Xenforo 2.0 - 2.1 Seo Dostu İçerik Gizleme

23 Ocak 2021
73
3
8
webmasterlocasi.com
Birçok forum sahibinin eklentiler veya direk post_macros şablonuna gömülen içerik gizleme kodları sebebiyle google'da index alamama sorunları ile karşı karşıya kaldığını gördüm ve bu yüzden hem içeriğini ziyaretçilerine gizlemek isteyen hemde google açısından seo dostu bir gizleme yöntemini ve bunu şık eklemeler ile nasıl kullanabileceğimizi anlatmak istedim.

Tasarım ve ekleme kısmına geçmeden önce içerik gizleme kodlarını ve kullanımını sizlere anlatmak istiyorum...

Admin panelimize girdikten sonra Görünüm ve diller --->Şablonlar--->Extra.less Şablonumuzu buluyoruz.
Şablonu açtıktan sonra en alta kodlarımızı ekliyoruz.


ekk.png

CSS:
///İçerik Gizleme Blur Efekti Başlangıç///
#XF[data-logged-in="false"] {
    .block--messages {
        .message-content {
            -webkit-filter: blur(4px);
            -moz-filter: blur(4px);
            -ms-filter: blur(4px);
            -o-filter: blur(4px);
            filter: blur(4px);
            filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='2');
            pointer-events: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
        }
    }

}
///İçerik Gizleme Blur Efekti Bitiş///
Yukarıdaki kod xenforo data-logged özelliği ile üye olmayan kişilerin (Ziyaretçiler) içeriği blurlu yani bulanık olarak görmesini sağlayacaktır.Fakat Google içerik odaklı indexleme yaptığı için google botları içerikleri bizler gibi bulanık görmeyecek ve buda bize seo dostu bir içerik gizleme sağlamış olacaktır.

İsteğe Bağlı Geliştirme Ve Tasarım

Yukarıdaki blur özelliğini ekledikten sonra elbette ziyaretçilerimize blurun kalkması için ne yapmaları gerektiğini belirtecek bir uyarıda koymak gerekli aşağıdaki vereceğim kodlar ile yine yanlızca ziyaretçilerimize bu uyarıyı göstermiş oluyoruz.(Aşağıdaki tasarımı örnek olması için hazırladım kaynak kısmında PSD dosyası biçiminde sizlerle paylaşacağım photoshop ile kendi logonuzu koyup kendi yazı stilinizde bir uyarı resmi hazırlayabilirsiniz.)
Uyarı Resmi sayfa ile birlikte tam ortada kayarak hareket edecektir.

misafir.png

Yukarıda belirttiğim gibi yine extra.less şablonumuza aşağıdaki kodlarımızı ekliyoruz.Ardından kaynakta verdiğim PSD uzantılı dosyayı photoshopta kendi logonuz ve yazı stilleriniz şeklinde düzenleyip ekleme çıkarma yapıp styles klasörünüze atabilirsiniz.

CSS:
#XF[data-logged-in="false"] {
    .p-body {
        &:before {
            content: url(styles/uyari/misafir.png);///Resim uzantısını buradan düzenleyebilirsiniz.///
            position: fixed;
            left: 35%;
            top: 40%;
            z-index: 3;
    
        }
    }
}
@media screen and (max-width:600px){
    #XF[data-logged-in="false"] {
    .p-body {
        &:before {
            content: url(styles/uyari/misafirmobil.png); ///Mobil için resim uzantısınıda buradan düzenleyiniz.///
    
            width:100%;
            position:fixed;
            left:7%;
            z-index:3;
    
        }
    }
}
}