Web sitelerine ne kadar çok eklenti kurarsanız, web site hızınız kurmuş olduğunuz eklenti sayısına göre daha da yavaşlayacaktır. Her ne kadar kurmuş olduğunuz eklentileri silseniz dahi, Web sitenizin sunucu tarafında bulunan veri tabanın da kurmuş olduğunuz eklentinin kalıntıları kalıp, şablon boyutu daha da artarak çok fazla veri alanı olmasına neden olacaktır.
Kısaca bir düşünürsek, sosyal eklentileri kullanma adına, AddThis, AddToAny, Jetpack, ve temanızın da eklentilerini hesaplarsak birçok eklenti JS kodları kullanmakta. JS kodları her ne kadar link olarak görülseler de bu linkleri tarayıcı yeni sekmede açıp incelediğinizde çok fazla kod kümelerinden oluştuğunu görebilirsiniz.
Bu makalede anlatılmak istenen ana konu, eklentileri biraz olsun azaltarak web sitemizin açılış hızına katkı sağlamaktan ibarettir. Okuyucu kitlenizin web sitenizi takip edebilmesi ve abone olabilmesi için, “Takip Etme” sosyal uygulamasını web sitenize nasıl ekleneceğinizi aşağıda adım adım okuyabilirsiniz.
2. Wordpress yönetim paneli, Görünüm → Bileşenler’i açın.
3. Takip Et uygulama kodlarını eklemek için sol tarafta bulunan hazır widget’ler kısmından “Metin” sekmesini açın, uygulamayı ekleyeceğiniz Sidebar veya Footer alanını seçin ve aşağıdaki kodları metin penceresine yapıştırın.
Öneri : Ekleyeceğiniz kodları önce bir metin editör dosyasına yapıştırıp, Takip Et sosyal profil link isimlerini değiştirin.
Takip Et Uygulama Kodları:
Bu makalede anlatılmak istenen ana konu, eklentileri biraz olsun azaltarak web sitemizin açılış hızına katkı sağlamaktan ibarettir. Okuyucu kitlenizin web sitenizi takip edebilmesi ve abone olabilmesi için, “Takip Etme” sosyal uygulamasını web sitenize nasıl ekleneceğinizi aşağıda adım adım okuyabilirsiniz.
Takip Etme Uygulama Açıklamaları:
1. Wordpress web sitenize giriş yapın.2. Wordpress yönetim paneli, Görünüm → Bileşenler’i açın.
3. Takip Et uygulama kodlarını eklemek için sol tarafta bulunan hazır widget’ler kısmından “Metin” sekmesini açın, uygulamayı ekleyeceğiniz Sidebar veya Footer alanını seçin ve aşağıdaki kodları metin penceresine yapıştırın.
Öneri : Ekleyeceğiniz kodları önce bir metin editör dosyasına yapıştırıp, Takip Et sosyal profil link isimlerini değiştirin.
Takip Et Uygulama Kodları:
<center>
<div class='add-banner'>
<div class='social-icons-box text-center clearfix'>
<a href='https://www.facebook.com/adnanguneyweb' target='_blank' title='Facebook'><img alt='facebook' src='https://lh4.googleusercontent.com/-MLh-WgsKdfI/U6xLDCdJxII/AAAAAAAAZ0Q/Xa104fm1Q6k/s32-no/icon-fb.png'/></a>
<a href='https://twitter.com/guney59' target='_blank' title='Twitter'><img alt='tweeter' src='https://lh5.googleusercontent.com/-zGLTCWkiB7k/U6xL8ZtlYpI/AAAAAAAAZ0o/du66305LH34/s32-no/icon-tweeter.png'/></a>
<a href='https://www.linkedin.com/in/guney59' target='_blank' title='Linkedin'><img alt='linked in' src='https://lh6.googleusercontent.com/-n_4ZVnU5AlA/U6xMzBIF_PI/AAAAAAAAZ04/bddEzL-hCa0/s32-no/icon-in.png'/></a>
<a href='https://www.youtube.com/user/adnan13031959' target='_blank' title='YouTube'><img alt='you tube' src='https://lh6.googleusercontent.com/-Ih-ytjVjSfo/U6xNXv-_scI/AAAAAAAAZ1I/kOYb-WR24ng/s32-no/icon-you-tube.png'/></a>
<a href='http://www.pinterest.com/adnanguney' target='_blank' title='Pinterest'><img alt='you tube' src='https://lh5.googleusercontent.com/-KLO3yVIqMAo/VASXynYfS2I/AAAAAAAAbBQ/gIo6hBPz58I/s32-no/pinterest.png'/></a>
<a href='https://feedburner.google.com/fb/a/mailverify?uri=adnanguney/adnan&loc=en_US' target='_blank' title='RSS'><img alt='rss' src='https://lh3.googleusercontent.com/-gkMJJsqZB6g/U6xN6jn6A1I/AAAAAAAAZ1Y/f7XSah4IPWs/s32-no/icon-rss.png'/></a>
</div></div>
</center>
Takip Et CSS Kodlarının eklenmesi:
1. Takip Etme Uygulamasına CSS kodlarını eklemeden de kullanabilirsiniz. Ancak Sidebar arka plan rengi genelde beyaz olduğundan simgelerin transparan yani şeffaf olması nedeni ile görülmemesine neden olacaktır. Footer alt bilgi alanına eklediğinizde ise Footer arka plan rengi ile uyum sağlayacaktır. CSS kodlarını ekleyip eklememe seçeneği sizin kararınıza bağlıdır.2. CSS kodlarını eklemek için ilgili adımları takip edebilirsiniz. Temanızı özelleştirdiğiniz ayarları açın. Özel Kod, “Custom Code” seçeneğini açın.
.social-icons-box {
margin: 10px 0;
width: auto;
}
.social-icons-box img {
background: linear-gradient(#00AEB5 14%, #0F99A0 75%) repeat scroll 0 0 #00D1D8;
border-radius: 3px;
height: 30px;
margin: 0 4px;
transition: all 300ms linear 0s;
width: 30px;
}
.social-icons-box img:hover {
background: linear-gradient(#00D1D8 14%, #05B3BA 75%) repeat scroll 0 0 #00D1D8;
transition: all 400ms linear 0s;
z-index: 10000;
}
0 yorum