Blogger Yorum Stilini, Rengini ve Boyutunu Değiştirme Yöntemi

Merhaba arkadaşlar, Blogger'ın son yorum stilleri hoşuma gitmedi bende araştırdım nasıl yapılabileceğini bir sonuca ulaştım. Bunu da sizinle paylaşmak istedim aşağıda resimli bir şekilde Blogger Yorum Stili değiştirmeyi anlatacağım. Herkese kolay gelsin.

Düzenlemeyi yaparken dinleyebileceğiniz güzel bir şarkı.

1. Adım

Blogger'a giriş yapıyorsunuz. Tema > HTML'yi Düzenle yolunu izliyorsunuz. Kaynak kodlarının olduğu sayfa açılacak, klavyeden CTRL + F ye basarak arama çubuğuna /* Variable definitions yazıp aratıyorsunuz. Bulduğunuz bu yazının altına aşağıdaki kodları resimdeki gibi ekliyorsunuz.

<Group description="Comment Font" selector=".comments .comments-content .comment-content, .ss">
     <Variable name="sscommentfont" description="Comment Font" type="font"
         default="normal normal 100% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal normal 100% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif"/>
     <Variable name="sscommentcolor" description="Comment Color" type="color" default="#000000" value="#000000"/>
   </Group>

Bu kodları denediğinizde eğer Blogger satır hatası verirse 1. ve 5. satırları silerek deneyin.

2. Adım

HTML Düzenle modundan hiç çıkmadan tekrar CTRL + F ye basarak şu yazıyı girin /* Comments ----------------------------------------------- */ ve bu yazının altına aşağıdaki kodları resimdeki gibi ekleyin.

.comments .comments-content .comment-content, .ss{
    font: $sscommentfont;
    color: $sscommentcolor;
}

Bu kodları ekledikten sonra kaydediyorsunuz. Daha sonra tekrar Tema > Özelleştir yolunu izliyorsunuz. Aşağıdaki resimde gösterilen yerdeki butona tıklamalısınız.

Daha sonra ekranın üst tarafında siyah arkaplanda Blogger Tema Tasarımcısı açılacak burada aşağıdaki resimde gördüğünüz yerlerden yorumların yazı stilini, yazı rengini, yazı boyutunu değiştirebilirsiniz.

• B ve I yazan kısım yazının kalın ve italik mi olacağıyla ilgilidir.
• Kırmızı kareyle gösterilen kısım yorumlardaki yazının boyutunu seçmenize yarar
• Mavi kutuyla işaretlenmiş yer yorumlardaki yazının font unu seçmenizi sağlar

Devamı

Wordpress Yazi Basligi Uzunluk Kisitlama Kodu

Wordpress'te bazen yazı başlıklarımızı sınırlandırmamız gerekebilir. Temalara göre değişiklikler olabiliyor. Bazen uzun başlıklar <div>  lere sığmayarak taşmalara neden olabiliyor ve sitelerimizde kötü görüntülere neden oluyor. Aşağıdaki adımları uyguladığınızda çözüme ulaşacaksınız.

Wordpress admin panelinden Görünüm > Düzenleyici 'ye tıklayın, functions.php 'de düzenlemeler yapacağız.

 Functions.php de <?php  ----  ?>  kodları arasında bir yere aşağıdaki kodu ekleyin.

<?php function hu_baslik($char) { $title = get_the_title($post->ID); $title = substr($title,0,$char); echo $title; }  ?> 

bu kodları sorunsuz bir şekilde functions.php'ye ekledikten sonra aşağıdaki başlık kodunu sınırlı şekilde göstermek istediğiniz yere yapıştırın.

<?php hu_baslik(20); ?>

Bu kodda kırmızıyla gösterilmiş olan kısım sizin başlıkta kaç karakter göstermek istediğinizdir.

Devamı

Inputla Oluşturulmuş Formlarda Kenarlık(Border) Kaldırma

Chrome ve Opera gibi tarayıcılarda arama formları ve iletişim formları gibi alanlarda sizin border oluşturmamanıza rağmen bir kenarlık gözükür bu kenarlığı kaldırmanın yolu basit bir css kodu, bu kodu stil dosyanıza ekledikten sonra o kenarlıkların (borderların) kalktığını göreceksiniz.  

input:focus, textarea:focus, select:focus{ outline: none;}

Bu kodu stil dosyanıza ekleyerek sorunu halledebilirsiniz. Kolay gelsin.

Devamı

Blogger Sayılı Pagenavi Oluşturmak - Sayılı Navigasyon

Bloggerların çoğunun şikayetçi olduğu şey anasayfanın en alt kısmındaki Pagenavi kısmıdır, yani sayfa navigasyonu, sayfalar arasında geçiş yapan kısım. Bu kısım blogspot sitelerde, önceki yazılar ve sonraki yazılar şeklindedir. Oysa ki çoğu kişi bu kısmı sayılı bir şekilde göstermek ister. İşte bu yapacağınız işlemler istediğiniz sayılı navigasyonu(pagenaviyi) oluşturacaktır. Şunu belirmek istiyorum ki bu işlemleri yapmadan önce şablonunuzun yedeğini alın, sadece bu işlem için değil herhangi bir işlem yaparken özellikle kodlamalarda yapılacak değişiklikten önce mutlaka Blogger Şablonunuzun yedeğini alın. Bloggerlar için hazırladığım Türkçeleştirilmiş Blogger Temalarına da göz atmanızı öneririm.   öncelikle;

]]></b:skin>

kodunu buluyoruz aşağıdaki kodları bu kodun üst kısmına yapıştırıyoruz. ( Copy + Paste)

/* Sayfa Navigasyonu */

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a{padding:3px;margin-right:5px;background:#fff;border:1px solid #c20c0c}
.pagenavi a:visited{color:#c20c0c}
.pagenavi a:hover,.pagenavi .current{background:#c20c0c;color:#fff;text-decoration:none}
.pagenavi .pages,.pagenavi .current{font-weight:bold}
.pagenavi .pages{border:none}

Daha sonra, kaynakta şu kodu aratıyorsunuz.

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

bulduğunuz bu kodu silmeyin hemen altına aşağıdaki kodları ekleyin.

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 9,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}
</script>
<script type="text/javascript" src="https://raw.githubusercontent.com/halituzan/halituzan-com/master/sayilipagenavi.js"></script>
<div class="clear" />
</div>
</b:includable>

Bu eklediğiniz kodlarda değişiklik yaparak navigasyonunuzu Türkçeleştirebilirsiniz. Daha sonra da kaynakta aşağıdaki kodu aratın.

<b:include name='nextprev'/>

Aratıp bulduğunuz bu kodu silin ve yerine aşağıdaki kodları yapıştırın.

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

Eğer bu aşamadaki kod dizimini bulamadıysanız şunu aratın. (bu işlemi yapmak zorunda değilsiniz eğer bu aşamadaki kod dizimi olan <b:include name='nextprev'/> bulamadıysanız bunu yapacaksınız.)

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
...
<b:includable id='main' var='top'>
...
</b:includable>
</b:widget>
</b:section>

bulduğunuz bu kodda  </b:includable> un hemen üstüne şu kodu yapıştırın.

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

Şu an için eksik bir şey yapmadıysanız Sayılı Pagenavi (Önceki ve Sonraki Yazılar) kısmınız hazır demektir. Navigasyonun renk ayarlamalarını Css kodlarıyla oynayarak değiştirebilirsiniz. Yapmış olduğunuz bu işlemlerle sayfalarınız çok şık bir görünüme kavuşmuş olacaktır. Yorumlarınızı eksik etmeyin. Herkese iyi bloglamalar.

Devamı

Blogger Sitelerinde Ust Bilgi Kaldirma Kodu

Bloggerda Üst Bilgiyi Kaldırma Kodları, şu şekilde; Öncelikle sitemizde panel kısmında şablona tıklıyoruz, daha sonra html düzenleyiciye tıklıyoruz ve kodlar arasında şu kodu aratıyoruz.

<b:widget id='Header1' locked='true'

kodlar arasında bu kodu buldukta sonra

<b:widget id='Header1' locked='true' title='Sayfanızın Üstbilgisi (Üstbilgi)' type='Header'>

bu kodlar arasında locked='true' olan kısmı locked="false" olarak değiştiriyoruz. Değişimi doğru bir şekilde yaptıktan sonra blogger panelinden yerleşime tıklıyoruz ve üst bilgimizin bulunduğu widgeti düzenlemeyi açıyoruz kaldır butonu aktifleşmiş olacak bu butona tıklayarak Blogger Sayfanızın Üst Bilgisini kaldırmış bulunuyoruz.  

POWERED BY BLOGGER (ATIF) YAZISINI KALDIRMA KODU

Devamı

Wordpress Ana Akış Sayfasında Kategorileri Gizleme Kodları

Wordpress Ana Sayfada Kategori Engelleme, Bazen sadece yazıları değil, bir kategorinin tüm yazılarını engellemek isteriz. Bu durumda da wordpress'in herhangi bir çözümü yok yine kodlarla bunu sağlayacağız. Öncelikle Wordpress Panelinden Görünüm> Düzenleyici  yolunu izleyin. Daha sonra functions.php yi bulup açın functions dosyasında düzenleme yapacağız. Aşağıdaki kodları functions.php dosyasında <?php -- ?> kodları arasına düzgün bir şekilde yapıştırın. (kırmızı yazıyla yazılmış <?php ve kodlarınen aşağısındaki ?> kısmını yapıştırmıyorsunuz.)

<?php

function kategori_gizleme($query) {
if ($query->is_home()) {
$query->set('cat', '-KATEGORi ID');
}
return $query;
}

add_filter('pre_get_posts', 'kategori_gizleme')

?>

Bu kodlar arasında istemediğimiz kategorilerin id lerini -KATEGORi ID yazan kısma virgülle ayırarak yazmalıyız. örneğin bir tane kategori engellemek istiyoruz ve bu kategorinin id si 32 olsun. Yapmamız gereken değişiklik şu şekilde olmalı.  set('cat','-32') Eğer bir kaç tane kategori engelleyeceksek, set('cat','-32,-43,-44,-56,-79,-107') şeklinde bir düzenleme yazmalıyız. Burda sayılar örnektir. (başlarına eksi koymayı unutmayın) *** Ayrıca engellediğiniz bu kategoriler google botlarınca engellenmez, sadece ana sayfada gösterimi engellenir.

Belki İşinize Yarar Benzer Konu : Wordpress Ana Akış Sayfasında Yazıları Gizleme Kodları

Devamı

Wordpress Ana Akış Sayfasında Yazıları Gizleme Kodları

Wordpress Anasayfa'da Yazı Gizleme, Wordpress sitelerimizde bazen yazdığımız yazıların ana sayfada akışta gözükmesini istemeyiz, bu sorunun wordpresste hali hazırda bir çözümü yok ancak kaynak kodlarıyla oynayarak bunu sağlayabiliyoruz. Yapacağımız kod değişikliğiyle istediğiniz yazının ana sayfada gösterimin engelleyebilirsiniz.   Öncelikle Wordpress Panelinden Görünüm> Düzenleyici  yolunu izleyin. Daha sonra functions.php yi bulup açın functions dosyasında düzenleme yapacağız. Aşağıdaki kodları functions.php dosyasında <?php -- ?> kodları arasına düzgün bir şekilde yapıştırın.

<?php

function yazi_gizle($query) {
if ($query->is_home()) {
$query->set('post__not_in', array(POST ID));
}
return $query;
}
add_filter('pre_get_posts', 'yazi_gizle')

?>

Bu kodlar arasında istemediğimiz yazıların id lerini POST ID yazan kısma virgülle ayırarak yazmalıyız. örneğin bir tane yazı engellemek istiyoruz ve bu yazının id si 17 olsun. Yapmamız gereken değişiklik şu şekilde olmalı.  array(17) Eğer bir kaç tane yazı engelleyeceksek, array(17,18,19,20,55,23,105) şeklinde bir düzenleme yazmalıyız. Burda sayılar örnektir. *** Ayrıca engellediğiniz bu yazılar google botlarınca engellenmez, sadece ana sayfada gösterimi engellenir.

 Belki İşinize Yarar Benzer Konu : Wordpress Ana Akış Sayfasında Kategori Gizleme Kodları

Devamı

Blogger (Blogspot) Mobil Temalarda Sitelerde Powered by Blogger (Blogger Atif Yazisi) Yazisini Kaldirma Yontemi

Merhaba arkadaşlar bir takipçimizin uyarısı üzerine Blogger'da mobil temalarda powered by blogger (blogger atıf yazısını) yazısını nasıl kaldırırız diye araştırdım ve olumlu bir sonuca ulaştım. Kendi blogspot sitemde denedim ve olduğunu gördüm. Şimdi nasıl olduğunu anlatalım. Öncelikle normal masaüstü modunda powered by blogger yazısını nasıl kaldırılacağını şu konuda bahsetmiştim.

 (Powered by Blogger (Atıf) Yazısını Kaldırma Kodu) Yalnız bu şekilde kaldırılan powered by blogger linkini mobil versiyondan kaldıramıyoruz, bu yüzden farklı bir yöntemle kaldıracağız hem masa üstünden hem de mobil temalardan. Önceki paylaşımı blogger sitenizde uyguladıysanız işlemi geri almanız gerekiyor ana menüdeki solda yerleşime tıklayıp "Atıf" bileşenini sitenizin herhangi bir yerine eklemelisiniz.  Yerleşime tıkladıktan sonra aşağıda gösterilen şekilde Atıf bileşenini bir yere ekleyin. Bende zaten ekli olduğu için önceden ekli yazıyor, sizde ekli değilse + işareti olacaktır ona tıklayın.

Bu işlemi yaptıktan sonra artık işin kodlama kısmına geçebiliriz. Ana menüden "Şablon" a tıklayarak HTML'yi Düzenle ye tıklayın ve aşağıdaki kodu aratıp

]]></b:skin>

bu kodun hemen üstüne aşağıdaki CSS kodlarını yapıştırın.

#Attribution1 {height:0px;visibility:hidden;display:none}

Bu Css Kodlarını yapıştırdıktan sonra şimdi vereceğim kodu aratıp üzerinde bir iki değişiklik yapacağız.

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

kodunu aratıp bulun ve bu kodu aşağıdaki kodla değiştirin. locked='true' kısmı locked='false' şeklinde de olabilir bulamazsanız bu şekilde aratın ve aşağıdaki kodla yer değiştirin.

<b:widget id='Attribution1' locked='false' mobile='no' title='' type='Attribution'>

bu işlemleri yaptıktan sonra blogger sitenizi mobilden deneyin ve artık mobil sürümde de powered by blogger yazısı olmadığını göreceksiniz.

Devamı

Powered by Blogger (Atif) Yazisini Kaldirma Kodu

Blogger sitelerinin hepsinde bulunan Powered by Blogger yazısı genelde herkesin canını sıkar ve Blogger bu yazıyı kaldırmamıza imkan vermez ancak biz kodlarda oynamalar yaparak Atıf kısmını yani Powered by Blogger kısmını kaldıracağız. Öncelikle Blogger panelinden şablona tıklıyoruz ve ardından html düzenleyiciye tıklıyoruz. Açılan sayfada kodları göreceksiniz bu kodlar arasında aşağıdaki kodu aratın.

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

Aratıp bulduğunuz bu kodda değiştirmeniz gereken kısım locked='true' yazan kısım bu kısmı locked='false' olarak değiştirin. Daha sonra kaydet butonuna tıklayın. Şimdi eğer işlemi doğru bir şekilde yaptıysanız.

Blogger panel kısmındaki yerleşime tıklayın. Panelde Atıf kısmını yani Powered by Blogger ın olduğu eklentiyi açın işlemler doğru yapıldıysa kaldır butonu aktifleşmiş olması gerekir. Kaldır butonuna tıklayarak bu yazıyı kaldırın ve kaydet butonuna tıklayın. Artık sitenizde atıf kısmı olmayacaktır.

(Mobil Temalarda Powered by Blogger Kaldırma)

Devamı

Sayfaların Sağına, Soluna Kayan veya Sabit Reklam Ekleme Kodu

Sitelerimizin genelde sağı ve ya solu boştur bu boşluğu reklamlarla doldurmak isteyebiliriz, bu boşluğu doldururken de kaynak kodlarında oynamalarda yapamayabiliriz, ancak bununda bir çaresi var fixed kodlarıyla reklamlarınızı sağa veya sola sabitleyebilirsiniz ya da akan bir reklam şeklini verebilirsiniz.

  SOLDA SABİT REKLAM KODU: Style Kodları: Bu kodları css kodlarınızı bulundurduğunuz kısma ekleyin.

#solsreklam {position: absolute; left: 0px; top: 0px; z-index: 1;}

Html Kodları: Bu kodları sitenizde reklamın gözükmesini istediğiniz yere yapıştıracaksınız.

<div id="solsreklam">Adsense Reklam Kodunuz.</div>

----------------------------------------------------------------------------

  SAĞDA SABİT REKLAM KODU: Style Kodları: Bu kodları css kodlarınızı bulundurduğunuz kısma ekleyin.

#sagsreklam {position: absolute; right: 0px; top: 0px; z-index: 1;}

Html Kodları: Bu kodları sitenizde reklamın gözükmesini istediğiniz yere yapıştıracaksınız.

<div id="sagsreklam">Adsense Reklam Kodunuz.</div>

  ----------------------------------------------------------------------------

  SOLDA KAYAN REKLAM KODU: Style Kodları: Bu kodları css kodlarınızı bulundurduğunuz kısma ekleyin.

#solkreklam {position: fixed; left: 0px; top: 0px; z-index: 1;}

Html Kodları: Bu kodları sitenizde reklamın gözükmesini istediğiniz yere yapıştıracaksınız.

<div id="solkreklam">Adsense Reklam Kodunuz.</div>

  ----------------------------------------------------------------------------

  SOLDA KAYAN REKLAM KODU: Style Kodları: Bu kodları css kodlarınızı bulundurduğunuz kısma ekleyin.

#sagkreklam {position: fixed; right: 0px; top: 0px; z-index: 1;}

Html Kodları: Bu kodları sitenizde reklamın gözükmesini istediğiniz yere yapıştıracaksınız.

<div id="solkreklam">Adsense Reklam Kodunuz.</div>

Devamı