Blogger İpuçları Serisi ile devam ediyoruz arkadaşlar.Bugün Bilgicelli arkadaşımın isteği üzerine Kod Çerçevesinin nasıl yapıldığını anlatacağım.Bu eklenti sayesinde kodları daha düzgün bir şekilde okuyucularımıza göstermiş olacağız.Hazırsak hemen anlatıma geçelim:
Her zamanki gibi Blogger hesabımıza girip "Yerleşim/HTML'yi Düzenle" sekmesine gelip "Widget Şablonlarını Genişlet" tikini aktif hale getirdikten sonra ]]></b:skin> kodundan önce şu kodları yapıştıralım:
/***************** Çerçeve Kodu Bölümü *******************/
.post-body pre {
background: transparent url(http://i49.tinypic.com/29w4d8g.png) no-repeat scroll 2px 0px;
padding-left: 2px;
padding-top: 26px;}
.post-body pre code {
background-color: #fff8af;
display: block;
width: 540px;
overflow: auto;
padding: 0 1em;
color: #555555;
border-left: 4px solid #EB1885;}
kodları yapıştırdıktan sonra şablonu kaydedelim.İşin basit tarafı bitti.Bu bölümde biz sadece "css" tanımlamasını yaptık.Şimdi de bu tanımlamaları özelleştirelim:
Kodda yeşil ile gösterdiğim resim linkini kendinize ait olarak değiştirebilirsiniz.Yalnız bunun için o linkteki resim boyutlarıyla aynı olacak şekilde yeni bir resim yapabilirsiniz.Diyelim resmi o boyutlarda yaptınız ve o resimdeki gibi pembe renk değilde siz reminizi mavi olarak ayarladınız.Bu şekilde yaptığınızda "EB1885" renk kodunuda yaptığınız resmin arkaplan kodu ile aynı olacak şekilde ayarlamalısınız.Biraz karışık gibi oldu ama inanın çok basit.
Bu aşamadan sonra sıra geldi yazılarınızda bu kodu kullanmaya.Bu kodu göstermek için siz yazınızın içinde şu kodu kullanacaksınız:
<pre><code>Yazılarınızı Bu Alana Yazacaksınız.</pre></code>
Bu gösterdiğim kısım çok önemli.Genel itibari ile yapması basit bir eklenti eğer yine de yapamadığınız yer olursa sormaktan çekinmeyin ;)
Bu eklentilerin devamı gelecek inşallah.Hergün bir eklenti yazmam şu anda imkansız gibi görünüyor.Hergün yazamadığım için haliyle ne zaman yazacağım belli olmuyor.Bu yüzden Feedburner aboneliğini kullanarak takip ederseniz yazım size an itibariyle olmasada ulaşacaktır :)
Bugün yine "Blogger İpuçları Serisi"yle devam ediyoruz.Sıradaki ipuçları: Oylama Eklentisi ve Estetik Yukarı Çıkma butonunun nasıl yapıldığına dair.Biliyorum bu işte herkes uzman değil, o yüzden herkesin yapabileceği şekilde anlatmak istiyorum.Tabi yine yapamayan mutlaka çıkacaktır o da büyük ihtimal şablondan kaynaklanacak.Çünkü bu eklentilerden olan Oylama eklentisi her şablona uymayabilir.Ama ben yine de anlatmak istiyorum.Bu sayede yazılarınızın tepkisini ölçmüş olacaksınız bir anlamda.Demosuna şuradan bakabilirsiniz.Hemen Oylama eklentisinin nasıl yapılacağına geçelim:
Öncelikle Blogger'a giriş yapalım.Kumanda Panelinden "Yerleşim"e tıklayalım.Ardından "Blog Kayıtları" kısmına girin ve resimde gösterdiğim yeri işaretleyin.
Bu kısmı işaretledikten sonra Yerleşim'den "HTML'yi Düzenle"ye tıklayalım.Ardından "Tam Şablonu Yükle" komutuna tıklayarak temamızın bir yedeğini alalım ne olur ne olmaz dimi :) Daha sonra "Widget Şablonlarını Genişlet" tikine tıklayalım ve:
Bu kodu bulduktan sonra hemen altına:
Burdan sonra ise şu kodu bulalım:
Evet Oylama eklentisi burada biter.Sırada: Estetik Yukarı Çıkma olayı var :) Bu ismide ben koydum çaktırmayın ;) Bu eklenti ilk anlattığımdan daha da basit.Hemen bunu da anlatalım:
Yine HTML'yi düzenle kısmından (widget şablonlarını genişlet aktif olacak)
kodunu bulacağız.Ben kodu el ile yazdım fakat hata verdi o yüzden resim eklemek zorunda kaldım.Siz elle manuel olarak resimdeki kodu aratın ve hemen üstüne:
örnek resimdeki gibi en son kısma şu kodu ekleyeceğiz.İlla dediğim yere yapmayabilirsiniz.İsterseniz dilediğiniz yere bu kodu ekleyebilirsiniz:
İnşallah faydalı bir anlatım olmuştur.En basit şekilde anlatmaya çalıştım.Yapamadığınız yer olursa sorabilirsiniz.
Çok Önemli Not: Önceki yazımda da belirttiğim gibi blogumda smiley eklentisi kullandığımdan dolayı kodlar smiley olarak gözüküyor.Bunun için sayfa tam yüklenmeden tarayıcınızdaki "Durdur" ikonuna tıklayarak kodları çok kolay bir şekilde kopyalayabilirsiniz...
Öncelikle Blogger'a giriş yapalım.Kumanda Panelinden "Yerleşim"e tıklayalım.Ardından "Blog Kayıtları" kısmına girin ve resimde gösterdiğim yeri işaretleyin.
Bu kısmı işaretledikten sonra Yerleşim'den "HTML'yi Düzenle"ye tıklayalım.Ardından "Tam Şablonu Yükle" komutuna tıklayarak temamızın bir yedeğini alalım ne olur ne olmaz dimi :) Daha sonra "Widget Şablonlarını Genişlet" tikine tıklayalım ve:
post-footer
kod kümesini bulmaya çalışalım.Bu kodu bulduktan sonra şöyle bir kod kümesi bulmuş olacaksınız:div class="post-footer-line post-footer-line-1"
Bu kodu bulduktan sonra hemen altına:
<b:if cond='data:blog.pageType == "item"'><span class='star-ratings'><b:if cond='data:top.showStars'><div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/></b:if></span></b:if>
Burdan sonra ise şu kodu bulalım:
<b:include name='nextprev'/>
<script src='http://www.google.com/jsapi' type='text/javascript'/><script type='text/javascript'>google.load("annotations", "1");function initialize() {google.annotations.createAll();google.annotations.fetch();} google.setOnLoadCallback(initialize);</script>
Evet Oylama eklentisi burada biter.Sırada: Estetik Yukarı Çıkma olayı var :) Bu ismide ben koydum çaktırmayın ;) Bu eklenti ilk anlattığımdan daha da basit.Hemen bunu da anlatalım:
Yine HTML'yi düzenle kısmından (widget şablonlarını genişlet aktif olacak)
kodunu bulacağız.Ben kodu el ile yazdım fakat hata verdi o yüzden resim eklemek zorunda kaldım.Siz elle manuel olarak resimdeki kodu aratın ve hemen üstüne:<script src='http://enesilhan815.googlepages.com/Asansr.js' type='text/javascript'/>
<a href='#' onclick='MGJS.goTop();return false;'><img src='http://i36.tinypic.com/20qcm0z.gif' title='Sayfanın başına dönebilirsin Çekirge :)'/></a>
İnşallah faydalı bir anlatım olmuştur.En basit şekilde anlatmaya çalıştım.Yapamadığınız yer olursa sorabilirsiniz.
Çok Önemli Not: Önceki yazımda da belirttiğim gibi blogumda smiley eklentisi kullandığımdan dolayı kodlar smiley olarak gözüküyor.Bunun için sayfa tam yüklenmeden tarayıcınızdaki "Durdur" ikonuna tıklayarak kodları çok kolay bir şekilde kopyalayabilirsiniz...
Bugünkü yazımda "Blogger" altyapısını kullanarak blog oluşturan yazarlar için güzel bir makale yazmayı düşünüyorum.İşi fazla uzatıp detaya inmek yerine, en basit yoldan herkesin anlayabileceği şekilde "Blogger İpuçları" kategorisi altında yeni yazılar oluşturarak biraz faydalı olmak istiyorum.Sadece işinize yarayabilecek eklentileri sunmak istiyorum.Bunlardan ilki olan "Resimli Benzer Yazılar" eklentisini "Blogger Plugins" isimli arkadaş yapmış bende biraz üzerinde oynayarak gerekli değişiklikleri yaptıktan sonra anlatmaya başlıyorum:
Öncelikle Blogger hesabımıza girip "Yerleşim/HTML'yi Düzenle" sekmesine gelip "Widget Şablonlarını Genişlet" tikini aktif hale getirdikten sonra CTRL+F kısayolu ile <*/head> kodunu bulun ve hemen üstüne şu kodları yapıştırın: (koddaki * işaretini kaldırmayı unutmayın)
<!--Resimli Yazılar Eklentisi Kod Başlangıcı-->
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://enesilhan815.googlepages.com/BenzerYazilar.js' type='text/javascript'/>
</b:if>
<!--Resimli Yazılar Eklentisi Kod Sonu-->
Daha sonra şu kodu bulucaz:
<div class='post-footer-line post-footer-line-1'>
Eğer bu kodu CTRL+F yardımı ile bulamazsanız şu şekilde deneyin:
post-footer
Kodu bulduktan sonra o kodun altına şu kodları yapıştırın:
<!-- Resimli Benzer Yazılar Kod Başlangıcı -->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Resimli Benzer Yazılar";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Resimli Benzer Yazılar Kod Sonu -->
Renkli olarak gösterdiğim yerleri isteğinize göre değiştirebilirsiniz.Gösterilecek yazı sayısınıda az tutmanız sizin yararınıza olacaktır.Eğer yapamadığınız yerler olursa bu konu altına yorum olarak probleminizi yazabilirsiniz.
İlk eklentimiz Resimli Yazılar Eklentisi oldu.İnşallah ilerleyen günlerde farklı farklı eklentilerin anlatımını yine bu blog üzerinden sizlere göstereceğim.İnşallah faydalı bir seri olur hepimiz için.Blogger gün geçtikçe kendini geliştiriyor ve güzelleştiriyor.Wordpress hakkında haddinden fazla yazı bulabiliyoruz internette ama Blogger ile ilgili bu kadar detayı bulamıyoruz.Ama ben ümitliyim bu işten Blogger kendini daha geliştirecek eminim ;)
Önemli Not:
Blogumda smiley eklentisi kullandığımdan kodlarda normal olarak yüz ifadesi çıkıyor.Bunun için ilk uzun kod satırı için : http://enesilhan815.googlepages.com/1.Kod.txt
2.Kod için ise: http://enesilhan815.googlepages.com/2.Kod.txt
adresine girip yazının tamamını CTRL+A tuş kombinasyonu ile kopyalayıp yapıştırabilirsiniz...