Wordpress.com İçin Eklentisiz Takip Et Uygulaması

Wordpress.com alt domainli kendinden barındırmalı olmayan web siteleri için, “Takip Etme” sosyal uygulamasını hiçbir eklenti yüklemeden link ile, Sidebar ve Footer, alanında kullanabilirsiniz. Wordpress, kendinden barındırmalı web siteleri için, “Takip Etme” sosyal uygulama kullanımını bir önceki yazımda bahsetmiştim. Wordpress.com alt domain ile başlayan Wordpress blog’ların eklenti yükleyemediklerini biliyoruz.

Web sitelerinin olmazsa olmazları arasında yer alan Sosyal Takip Et simgeleri, “Facebook, Twitter, Linkedin, Youtube, Pinterest” ve Blogger kullanıcı kitlesinin kullandığı Feedburner RSS ile “Abone Ol” simge linki oluşturarak Wordpress.com sitenizde eklenti kurmadan kullanabilirsiniz. DEMO

Bu makalede, 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ı:

<div class="social-profiles-widget">
<h3 class="widgettitle">
                    Takip Et
                  </h3>
<a href="https://twitter.com/guney59" target="_blank">
<img alt="Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirI7TbqtCdddvUk-LlTPmA_5WnOmKGXspxBtLoPlI6esTiAAPPD18fNmcjhefX9zuSRDsTZtxFI2cGnAsJEoKeuickZFCwU262GBdgM5WeiljhEr2lIJnfPEPCxt63PlqjQ0uyJOmN4Sw/s1600/twitter.png" title="Twitter">
</a>
<a href="https://facebook.com/adnanguneyweb" target="_blank">
<img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpoBDLXqJ4Crg567-R4NWc9rxwrYAb_5y0pzlDTod0WgIwqEbIIqMU-Pkt0ldOMQYwweYpEx4P0_2nFk4U_3OEYQSvn_FvAee0umanikm1TqAErygw44QWwlSh7kXyVgb5XUWwj-ZD2WY/s1600/facebook.png" title="Facebook">
</a>
<a href="https://plus.google.com/114021536527450214647" target="_blank">
<img alt="Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqqNlqekbmZt1rnyZXIozDFPLMADnLoYF0YGkKndnjy9ApsIts6jNzWyGnEoub-do7OkOPZyjGCWzYHLVoZ1GCIFHxt_IW0_i_Tw8IYvyLgx0FBHmYVVetfql7u8QY50eojRwI6MGazoE/s1600/google.png" title="Google Plus">
</a>
<a href="https://instagram.com/adnanguney55" target="_blank">
<img alt="Instagram" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivv0_KRpPVD5vQvoXKzZvMBD51QxYr39DmBPwkHHVtQzZ1nnsNEJmRqdqJPyAck-475kP9UMRNYYqS6QrkzcSAEmxgcT4BmY805fQo3hwQf0yZ6MaSN6txUXteuo8-eoP3C5_diyAiACs/s1600/instagram.png" title="Instagram">
</a>
<a href="https://feedburner.google.com/fb/a/mailverify?uri=adnanguney/adnan&amp;loc=en_US" target="_blank">
<img alt="RSS Feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtvJ3eV9ZMmpy76IgtjS_C5kfhvzSh60NNcrCGJWOyUeUrmNfzOAzajQMXrYTLT6l79flWzOLQd41Tp4Fx7_6S5NN67gAbo4WVgU8UNq6Tw-9pJ91SmpwLkb867EwmcuiNs-hwzstRn9A/s1600/rss.png" title="RSS Feed">
</a>
<a href="mailto:your@email.com" target="_blank">
<img alt="Email" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXuupqqxgYoOmRjcAWgJw-2uc3O3vo2bCla46GJXfiEL0uONBaJPsMKuAa5Q-0dvXRXj-Uu3-uvb3WELFRjopsbzwZRyR88LTYvis4tdk_banccn7hi74ZCfiJVXeF9VTBAYildIGJh0g/s1600/mail.png" title="Email">
</a>
</div> 

4. Wordpress.com alt domainli kendinden barındırılan bloglar eklenti ve CSS kodlarının eklenmediğini bir kez daha notlarınız arasında bulundurun.

5. Takip Etme Uygulaması CSS kodlarına gerek duyulmadan normal transparan olmayan resimlerden oluşturulmuş olup tüm resimler kendi profilimde depolanmaktadır. Problem olmadan uygulamayı kullanabilirsiniz.

6. Kod içinde mavi ile renklendirilmiş sosyal profil isimlerini kendi profil isimleriniz ile değiştirin. Link ismini değiştirme örneğini inceleyin.

Örnek: https://twitter.com/guney59, guney59 ismini kendi linkiniz ile değiştirin. Aynı değişimi diğer linkler için de uygulayın.

Takip Etme uygulamasını artık hiçbir eklenti kullanmadan sitenizde yapılandırabilirsiniz. Uygulama hakkında anlaşılmayan yerler için yorum yazarak bilgi alabilir, yazıyı beğendi iseniz arkadaşlarınız ile paylaşabilir, yeni makalelerden haberdar olmak için Abone olabilirsiniz.

Devamını Oku

Wordpress Sitesi İçin Eklentisiz Takip Etme Uygulaması

Wordpress, kendinden barındırmalı web siteleri için, “Takip Etme” sosyal uygulamasını hiçbir eklenti yüklemeden link ve CSS kodları ile, Sidebar ve Footer, alanında kullanabilirsiniz. Web sitelerinin olmazsa olmazları arasında yer alan sosyal takip edilme simgeleri, “Facebook, Twitter, Linkedin, Youtube, Pinterest” ve Blogger kullanıcı kitlesinin kullandığı Feedburner RSS ile “Abone Ol” simge linki oluşturarak Wordpress sitenizde eklenti kurmadan neden kullanmayasınız?

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.

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.

3. Açılan pencereye aşağıda verilen CSS kodlarını ekleyin.

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

Takip Etme uygulamasını artık hiçbir eklenti kullanmadan sitenizde yapılandırabilirsiniz. Uygulama hakkında anlaşılmayan yerler için yorum yazarak bilgi alabilir, yazıyı beğendi iseniz arkadaşlarınız ile paylaşabilir, yeni makalelerden haberdar olmak için Abone olabilirsiniz.

Devamını Oku

Wordpress CSS3 Hover Efektli Takip Etme Eklentisi

Wordpress kendinden barındırmalı web siteleri için, tamamen CSS3 stil kodları ile oluşturulmuş Takip Butonları üzerine maus getirildiğinde farklı bir renk gösteren “Hover” sosyal Takip Etme eklentisi. Hover efektli sosyal “Takip Et” eklenti kodları içinde web site hızını etkileyecek hiçbir jQuery, Java Script kodları bulunmamaktadır. Eklenti tamamen saf CSS3 stil kodlarından oluşmakta. Hover efektli Sosyal Takip Etme kotlarını aşağıda incelediğinizde sadece stil, ul ve li, link yapısını göreceksiniz. 

Sosyal medya hesaplarınızdaki takipçi sayınızı arttırmak ve ziyaretçilerinizin dikkatini çekmek için Hover efektli Sosyal Takip Etme eklentisini kullanabilirsiniz. Kendinden barındırmalı Wordpress sitelerinin kullanabileceği bu eklentiyi aynı zamanda, Blogger blogunuza, Yerleşim → Gadget ekle → HTML/JavaScript gadget içine bu yazıdan ekleyip kullanabileceksiniz. 

Blogger için DEMO Eklenti görünümü. 

Kendinden barındırmalı Wordpress sitenize eklemek için, metin widget’ini seçip kodları yapıştırmanız yeterli olacaktır. Hover efektli Sosyal Takip Et eklentisini, ister Sidebar da isterseniz Footer alt bilgi alanında kullanabilirsiniz. 

Kodların bulunduğu dikey çubuğu aşağıya doğru kaydırın ve renklendirilmiş bölümdeki sosyal medya hesap link'inizin id ismi ile değiştirin. 

Tüm yapmanız gereken işlem verilen kodları ilgili alana eklemek ve kaydetmekten ibaret olup sorunsuzca kullanabileceksiniz.

Sosyal Takip Eklenti Kodları :

<style> 
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} 
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} 
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} 
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGD_OHWNNtUk_Az2YtRS6aTgbhYgfdw9fcxMDwulp4tr0OfSAGD2RqJtJugKjckrytLRehkBNrEI5TPwxsYwmJV5VGMEb7YQEoY2I48uNNgVbgpGSwKufpZJU8BkYaf2DjLDum8KjnJpM/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;} 
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;} 
#tbisose .icon{overflow:hidden; color:#fafafa;} 
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} 
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} 
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} 
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} 
#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} 
#tbisose li:hover .icon, 
.touch #tbisose li .icon{width:210px;} 
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);} 
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);} 
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);} 
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);} 
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);} 
</style>
<ul id="tbisose"> 
<li data-alt="Facebook'ta takip et"><a class="icon facebook" href="https://facebook.com/guney59paylasim"  target="_blank">Facebook'ta Takip Et</a></li> 
<li data-alt="Twitter'da takip et"><a class="icon twitter" href="https://twitter.com/guney59"  target="_blank">Twitter'da Takip Et</a></li> 
<li data-alt="Google+'da takip et"><a class="icon googleplus" href="https://plus.google.com/114021536527450214647"  target="_blank">Google+'da Takip Et</a></li> 
<li data-alt="Pinterest'te takip et"><a class="icon pinterest" href="https://pinterest.com/adnanguney"  target="_blank">Pinterest'te Takip Et</a></li> 
<li data-alt="RSS İle Takip Et"><a class="icon rss" href="http://feedburner.google.com/fb/a/mailverify?uri=guney59&loc=en_US"  target="_blank">RSS İle Takip Et</a></li> 
</ul>
<div style="font-size:9px;text-align: center;">By <a href="http://wp.me/p3IEyb-1Xp"target="_blank"> Adnan Güney Gadgeti Al</a></div>

Devamını Oku

Wordpress’den Yeni WhatsApp, Telegram ve Skype için Paylaşım Düğmeleri

Wordpres 4.5 güncellemesiden sonra, WhatsApp, Telegram ve Skype için yeni Paylaşım Düğmeleri uygulamasını başlattı. Milyonlarca WordPress.com uzantılı blog kullanıcı ve site ziyaretcilerinin sosyal ağlarda mesaj paylaşma uygulamasına bugün üç yeni paylaşım düğmelerini, WhatsApp , Telegram ve Skype daha eklendi.

Açık kaynak kodlardan oluşan Wordpres geliştiricilerini ve katgı da bulunan tüm grubu, takdir ile kutluyorum. Blogger geliştiricilerinin de aynı özveri ile bu tür çalışma içerisinde olmasını umut ediyorum.

Wordpress WhatsApp , Telegram ve Skype uygulaması

Yeni eklenen paylaşım düğmelerini Wordpress panelinden yapamayacağınız için aşağıda anlatımı yapılan ilgli adımları takip etmenizi öneririm.

Wordpress Yeni Paylşım Düğmelerini Kurma :

1. Wordpress.com siteye buradan giriş yapın.
2. Sol üst kısımdaki Sitelerim ismine tıklayın ve blogunuzu açın.
3. Sol kısımda açılan menü içindeki, çatal simgesi “Paylaşma” ismine tıklayın.

Paylaşım pencere görünümü

4. Açılan pencerede şu anda Wordpress.com uzantılı web sitenizde kullandığınız paylaşım butonları çıkacaktır. Menüden, Paylaşım Butonları ismine tıklayarak yeni uygulamaya ulaşın.

5. Karşınıza bir önizleme penceresi, Share This paylaşım butonlarının hemen altında, Paylaşma düğmelerini düzenle ve Daha fazla düğmeleri düzenle, seçeneği gelecektir.

6. Daha fazla düğmeleri düzenle, seçeneğine tıklayın.

Paylaşım butonlarını yapılandırma penceresi

7. Açılan pencerede, WhatsApp , Telegram ve Skype, isimlerine tıklayarak ekleyin ve alt kısımdaki butondan kaydedin. Eklediğiniz her buton üst kısımdaki Daha fazla düğme kutucuğunda çıkacaktır.
İsterseniz düğme yapılandırma alanını kullanarak düğme görünümlerini özelleştirebilirsiniz.

Wordpress.com uzantılı blog paylaşım eklentileri için video açıklamaları

Devamını Oku