Articles by "blogger kodları"
blogger kodları etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

zaman: 2
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Merhaba WebteGez Okuyucuları;

 Bu konumuzda Blogger vb. gibi web sitesi olan herkes bu özelliği kullanarak, sayfalarında istediği mesaj kutusunu koyarak ziyaretçilerinize güzel bir mesaj gönderebilir ve sayfalarınızda güzel bir görünüm yaratabilirsiniz.

Bu özelliği şu an WebteGez Blog sitesinde halen kullanmaktayız. Çünkü gerçekten ziyaretçileri bilgilendirmede işe yarıyor.

Kutuların İçerikleri Şu Şekildedir:

  • Uyarı Kutusu
  • Bilgi Kutusu
  • Hata Kutusu
  • Olumlu Kutusu
  • İndir Kutusu
Şimdi anlatıma geçelim. Yalnız ben bu anlatımı Blogger sitesi ile yönlendirerek yapacağım. Bunu yapmak o kadar zor değil ama. Aşağıdaki adımlarda gene herkesin anlayacağı şekilde yazmaya çalışacağım.

Kurulum:

1)Blogger Panel'inizin sol menüsünden "Şablon" yazan kategoriye tıklayınız. (Sol Tarafta Gösterilen Resimdeki Kategori)
2) Daha sonra karşınıza çıkan sayfadan "Şu Anda Blog'da" yazının altında bulunan "HTML'yi Düzenle" butonuna tıklayınız. (Sol Tarafta Gösterilen Resimdeki Buton)
3) Karşınıza POPUP Pencere tarzı bir pencere açılacaktır. Kodları yapıştırmaya başlamadan önce pencerenin sol üst tafından bulunan "Widget Şablonlarını Genişlet" yazısının başındaki boş CheckBox kutusunu işaretleyin.


 4) Sonrasında klavyenizin "Ctrl+F" tuşuna basarak sayfa içi kelime arama kutusunu açın. Arama kutusuna "]]></b:skin>" yazısını yazarak yazıyı sayfada aratın. Kelime bulucu sol tarafta gördüğünüz resimdeki gibi size karşınıza yazdığınız kodu gösterecek. O bulduğunuz kodun hemen üstüne;
.webtegezolumlu, .webtegezhata, .webtegezbilgi, .webtegezuyari, .webtegezindir {
padding-right: 10px;
padding-bottom: 10px;
font-size: 13px;
line-height: 20px;
margin-bottom: 20px;
padding-top: 10px;
background-repeat: no-repeat;
background-position: 7px center;
text-transform: uppercase;
padding-left: 50px;,
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px
}
 
.webtegezolumlu {
color: green;
background-color: #EBF8D6;
border: 1px dotted green;
color: #555555;
background-image: url(http://webtegez.3owl.com/Blogger/mesajkutusu/olumlu.png);
}
 
.webtegezhata {
background-color: #FFECE6;
border: 1px dotted red;
color: #555555;
background-image: url(http://webtegez.3owl.com/Blogger/mesajkutusu/hata.png);
}
 
.webtegezbilgi {
background-color: #D3EEF1;
border: 1px dotted blue;
color: #555555;
background-image: url(http://webtegez.3owl.com/Blogger/mesajkutusu/bilgi.png);
}
 
.webtegezuyari {
background-color: #FFFBCC;
border: 1px dotted orange;
color: #555555;
background-image: url(http://webtegez.3owl.com/Blogger/mesajkutusu/uyari.png);
}

.webtegezindir {
color: green;
background-color: #EBF8D6;
border: 1px dotted green;
color: #00cc00;
background-image: url(http://webtegez.3owl.com/Blogger/mesajkutusu/indir.png);
}
kodunu ekleyin.
 Kodu ekledikten sonra "Şablonu Kaydet" butonuna tıklayın ve şablonun kaydedilmesini bekleyin..
Evet arkadaşlar kodlarımız kullanılmaya hazırdır. Şimdi gelelim bu kodların kullanılışına:
Bu kodları aşağıdaki şekildeki gibi kullanabiliriz.
<div class="webtegezuyari">WebteGez Uyarı Kutusu</div>
<div class="webtegezbilgi">WebteGez Bilgi Kutusu</div>
<div class="webtegezhata">WebteGez Hata Kutusu</div>
<div class="webtegezolumlu">WebteGez Olumlu Kutusu</div>
<div class="webtegezindir">WebteGez İndir Kutusu</div>
Bu şekilde bu kodlarla kullanabilirsiniz arkadaşlar.
Örnek Demo Görünümleri Aşağıda Görüntülenmektedir Arkadaşlar..
WebteGez Uyarı Kutusu
WebteGez Bilgi Kutusu
WebteGez Hata Kutusu
WebteGez Olumlu Kutusu
WebteGez İndir Kutusu
İşte bu kadar kolay arkadaşlar.
Hepinize kolay gelsin.
Anlatım Tamamen Bize Aittir..!
Continue reading

zaman: 1
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..

 Tüm Blogger bloglarının Ana Sayfa'sında listelenen konuların altında görüntülenen "Kaydol: Kayıtlar (Atom)" ibaresini bir çok kullanıcının sevmesine rağmen bir o kadarda kullanıcı sevmez. Onu bir şekilde kaldırma ister.

 Blogger kullanıcılarının çoğu bu ibareyi kaldırmasının amacından en büyük etkenlerin bir taneside ekledikleri tasarımın görüntüsünü bozma sebebidir.
 Diğer sebeplerinden bir taneside feedburner kullanmaları. .
Aslında bu ibare ziyaretçilerin, konularınıza abone olması için bir kolaylık sağlar ancak, çoğu kullanıcının Feedburner'i kullanması sonucunda artık pek bir önemi kalmadı. Zaten Feedburner kullananlar sayfalarında farklı yerlerde besleme adreslerini belirtiyorlar.

 Blogger yazarlarının bir çoğu Blogger kullanmayı bildikleri için direkt bunu kaldırabilirler. Ancak Blogger kullanmaya yeni başlayan arkadaşlar için bir yardımım dokunacağını bilerekten bu konuyu yazmak istedim. Bu ibareyi kaldırmak gerçekten çok kolay.

 Kaydol: Kayıtlar (Atom)  Yazısını Kaldırmak istiyorsanız, yapılması gereken gerçekten çok basit;
Aşağıdaki adımları tek tek takip ediniz. Bu takip sonunda amacınıza ulaşmış olacaksınız.

1)Blogger Panel'inizin sol menüsünden "Şablon" yazan kategoriye tıklayınız. (Sol Tarafta Gösterilen Resimdeki Kategori)
2) Daha sonra karşınıza çıkan sayfadan "Şu Anda Blog'da" yazının altında bulunan "HTML'yi Düzenle" butonuna tıklayınız. (Sol Tarafta Gösterilen Resimdeki Buton)
3) Karşınıza POPUP Pencere tarzı bir pencere açılacaktır. Kodları yapıştırmaya başlamadan önce pencerenin sol üst tafından bulunan "Widget Şablonlarını Genişlet" yazısının başındaki boş CheckBox kutusunu işaretleyin.
 4) Sonrasında klavyenizin "Ctrl+F" tuşuna basarak sayfa içi kelime arama kutusunu açın. Arama kutusuna "<b:include name='feedLinks'/>" yazısını yazarak yazıyı sayfada aratın. Kelime bulucu sol tarafta gördüğünüz resimdeki gibi size karşınıza yazdığınız kodu gösterecek. O bulduğunuz kodu komple silerek "Şablonu Kaydet" butonuna basıp kaydediniz..
İşte bu kadar kolay arkadaşlar.
Hepinize kolay gelsin.
Anlatım Tamamen Bize Aittir..!
Continue reading

zaman: 0
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..

Yazılarınız ana sayfanızda otomatik olarak kısaltılıp yazıya eklediğiniz görsellerinde aynı ebatlarda gösterilmesini isterseniz, şablonunuza ekleyeceğiniz küçük bir javascrip kodu sayesinde bu işlemi zahmetsizce yerine getirebilirsiniz.

Kodu şablonunuza eklemek için aşağıdaki adımları takip etmeniz yeterli.  

Sırası ile  Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenle➜Devam yolunu takip ederek blog’unuzun kodlarının açık halde bulunduğu modüle gidin.

Yapacağımız işlemlere başlamadan önce Yedekle/Geri yükle yazan butona basarak kullanmakta olduğunuz blog şablonunu yedeklemenizde fayda var. Daha sonra yapacağınız her hangi bir hata sonrası şablonunuzu geri yükleyerek yapmış olduğunuz tüm değişiklikleri kolayca geri alabilirsiniz.

“Widget şablonlarını genişlet” yazan kutucuğu işaretledikten sonra, bilgisayarınızın  klavyesinde bulunan ctrl + f tuşuna aynı anda basarak açılan arama formunda aşağıdaki kodu aratın


 </head>

bulduğunuz </head> kodun hemen üstüne gelecek şekilde aşağıdaki kodları ekleyin.


<script type='text/javascript'>
var thumbnail_mode = "yes"; 
summary_noimg = 430; 
summary_img = 340; 
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){ 
    if(strx.indexOf("<")!=-1)
    {
        var s = strx.split("<"); 
        for(var i=0;i<s.length;i++){ 
            if(s[i].indexOf(">")!=-1){ 
                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
            } 
        } 
        strx =  s.join(""); 
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2; 
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
    strx = strx.substring(0,chop-1); 
    return strx+'...'; 
}

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
    if(img.length>=1) {    
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>

2.Adım: Aşağıdaki kodu bulun.

<data:post.body/>

Bulduğunuz bu kodu silip yerine aşağıdaki kodları ekleyin (<data:post.body/> şablonlarda iki adet olabiliyor sonuçlarda çıkan ilk kodun yerine) ve kaydedin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Devamını oku ...</a>
</b:if>
</b:if>

Tüm işlemleri doğru yaptıysanız eklentiniz sorunsuz çalışacaktır.


Eklentiyi özelleştirin.

 Eklentiyi ekledikten sonra tasarımınıza uygun şeklide alıntı yapılacak yazının uzunluğu veya gösterilecek resmin ebatlarını belirleyebilirsiniz.
1. Görselelerin ebatını ve alınıtnın uzunluğunu belirleyin. 

 Birinci adımda eklediğiniz aşağıdaki satırları bulun.
var thumbnail_mode = "yes"; //burada ki “yes” resim gösterileceğini belirtir, oraya “no” diye yazarsanız yapılacak alıntıda resim gösterilmez.
summary_noimg = 430; //alıntı yapılacak yazıda resim yoksa alıntının uzunluğunu belirler.
summary_img = 340; //alıntı yapılacak yazıda resim varsa alıntının uzunluğunu belirler.
img_thumb_height = 200; //gösterilecek resmin yüksekliği.
img_thumb_width = 200; //gösterilecek resmin uzunluğu.

2. Devamını oku yazısını özelleştirin.

 Bildiğiniz gibi eklentiyi şablonunuza ekledikten sonra ana sayfada yazıları kısaltarak yazını tamamı için devamını oku şeklinde bir bağlantı oluşturacaktır, eğer siz isterseniz şablonunuza ekleyeceğiniz bir kaç parça CSS kodu sayesinde devamını oku yazan bölümü kendinize göre özelleştirebilirsiniz bunu yapabilmek içinde aşağıdaki adıları takip edebilirsiniz.

aşağıdaki kodları kopyaladıktan sonra ]]></b:skin> etiketini bulup hemen üstüne gelecek şekilde şablonunuza ekleyin.

.more{
float:right;
color:#000;
font-size:13px;
}


float:right; devamını oku yazan bağlantını sağda gösterilmesini sağlıyor siz burayı float:left; diye değiştirirseniz bağlantı solda görüntülenir.

color:#000; bağlantının renginin siyah olduğunu  belirtiyor, rengini değiştirmek isterseniz renk kodlarından istediğinizi bulup yazabilirsiniz.

font-size:13px; bağlantının font büyüklüğünü belirler siz buradaki 13px değeri ile oynayarak fontun büyüklüğünü kendinize göre ayarlayabilirsiniz.
Continue reading

zaman: 0
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Günümüzün webmasterları için kaçınılmaz sorunlarından birisi de seo ayarları olduğunu görüyoruz. Peki nedir bu seo ayarları ? Anladığım kadarıyla Seo işinin temel amacı web sitelerinde istenilen kelimenin veyahutta yazının diğer sitelerin yazılara karşın bir üs sıraya çıkmasını sağlamak. Haliyle sitenize gelen ziyaretçi sayısı artar bu da sizin reklam almanızı bu sayede reklamlardan fazla gelir etmenizi sağlar. Peki ne seo ayarları için ne yapmalıyız ?


Başlıkta da belirttiğim gibi ayarları Blogger'a göre anlatıyorum ;

Öncelikle başlık ayarlarımızı yapıcaz. Başlık ayarları denilen şey aramalarda önce konu başlığı sonra sitenizin ismi çıkmasını sağlıyacak.

Blogger panelinizden Şablon >> Html'yi Düzenle seçeneğine tıklıyayın
Gelen penceredeki  kutudan ''Widget Şablonlarını Genişlet''e tıkalamayı unutmayın...

 
<title><data:blog.pageTitle/></title>

Kodunu * 

 

<b:if cond='data:blog.pageType == "index"'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> - <data:blog.title/></title></b:if>

Bununla değiştiriyoruz. Şimdilik bu kısım bitti.

 İkinci olarak yapmamız gereken ise meta ayarlarını yapmak ( Gerekli birşey ), bu kodu bulun; ( Ctrl + F Kullanabilirsiniz )

 

<b:include data='blog' name='all-head-content'/>

Bununla değiştirin: 

 
<meta content='BLOGUNUZUN KISA AÇIKLAMASI' name='description'/>
 <meta content='BLOGUNUZUN ANAHTAR KELİMELERİ' name='keywords'/>
 <meta content='BLOG YAZARININ ADI' name='author'/>

Ve şablonu kaydedip ziyaretçilerimizin artmasını bekliyoruz :)
Continue reading

zaman: 0
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Blogger dersleri adlı yazı dizimize kısa bir ara vermiştim, fakat artık eskisi gibi blogger derslerine hızlı bir şekilde devam ediyoruz. Şimdi anlatacağım blogger eklentisi için, gayet kullanılabilirliği açısından güzel diyebilirim. Eklentinin amacı; sizden önce yorum yapan kişinin yorumuna karşılık vermenizi sağlıyor. Dolayısı ile siz sizden önce yorum yapan kişininin yorumunda yer alan Cevapla linkine tıklayınca, eklenti sayesinde yorum formunda @ şeklinde, üstteki yorumun sahibinin takma ismi yer alıyor. Velhasıl kelam, eklenti kurulumu çok basit. Aşağıdaki adımları izlemeniz ve uygulamanız yeterli olacaktır.

 Öncelike Widget Şablonlarını Genişlet seçeneğinin yanındaki kutucuğu işaretliyoruz.

Daha sonra ise, aşağıdaki kodu buluyoruz;

<data:commentPostedByMsg/>

Daha sonra, aşağıdaki kodları yukarıdaki koddan sonra ekliyoruz;

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=Blogunuzun-ID-Numarası&postID=&quot; + data:post.id + &quot;&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>Cevapla</a></span>

Not: Yukarıda yer alan kırmızı renkle belirtilmiş yeri blogunuzun ID numarası ile değiştirmeyi unutmayınız.
Continue reading

zaman: 0
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Blog yazarlarının bir çoğu bloglarında, bir çok reklam barındırıyor. Dolayısı ile bu yüzden bloglarının sayfa yüklenim hızları da bir o kadar düşüyor. Bu durumu örneklendirmek gerekir ise; blogunuzdaki her yazınızda yazınızla ilgili bir veya iki resim yer alıyor ise, bu durum blogunuza girilirken blog sayfanızın yavaş açılmasına sebebiyet verebilir. Dolayısı ile sizlerle paylaşacağım bu eklenti sayesinde, blogunuzdaki resimler blogunuzda, aşağıya inildikçe açılmaya başlayacak. Dolayısı ile bu durumda elbette, blogunuzun hızını iyi bir şekilde etkileyecek.

 Öncelikle aşağıdaki kodu buluyoruz;

</head>

 Ve, aşağıdaki kodları yukarıdaki koddan önce ekliyoruz;

<script src="http://teknobeyin.googlecode.com/files/lazyload1.js" type="text/javascript"></script> <script src="http://teknobeyin.googlecode.com/files/jquery.lazyload.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
$(function() {$("img").lazyload({placeholder : "http://img522.imageshack.us/img522/3559/yukleniyor.gif",effect : "fadeIn"});});
// ]]></script>
<script type="text/javascript">// <![CDATA[
if (window.jstiming) window.jstiming.load.tick('headEnd');
// ]]></script>
Continue reading

zaman: 0
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..

Blogger sayfanızın tasarımında değişiklikler yapın
Kurulduğu 1999 yılından bu güne tüm dünyada yüz binlerce blog kullanıcısına ulaşan Blogger, ilk zamanlar birkaç kişinin emekleriyle ayakta kalmaya çalışırken 2002’de Google tarafından satın alınmasıyla çok daha güçlü bir desteğe kavuşmuştu. Yıllar geçtikçe tanınırlığı artan ve insanların yoğun ilgisiyle hızla büyüyen Blogger, şimdilerde oldukça geniş bir kullanıcı kitlesi ve sarsılması güç bir üne erişti. Onu bu kadar cazibeli hale getiren birçok özelliği olsa da, asıl ışıltısı elbette ücretsiz alan sağlaması ve tasarım değişikliklerine özgürce olanak vermesiydi. Öyle ki, eğer biraz uğraşır emek verirseniz, blog sayfanız bambaşka bir kimliğe bürünebilir.

O yüzden, Blogger için tasarım çalışmaları hakkındaki tecrübelerimden yola çıkarak naçizane düşüncelerimden bazılarını sizlerle de paylaşmak istiyorum. Yeter ki sizin de blog sayfanızda değişiklikler yapmak için hevesiniz olsun.

Css kodlarıyla uğraşın

Blogger şablonumuzun iskeletini şekillendiren html kodları Css kodlarıdır. Bu kodlar sitemizin genleri gibidir. Üzerlerinde istediğimiz değişiklikleri yaparak sitemizin dış görünümde farklılıklar yaratabiliriz. Bunun için herhangi bir bilgiye sahip olmanız da gerekmez. Deneme yanılma yöntemiyle bile çok fazla şey öğrenebilirsiniz. Hele ki biraz da İngilizceniz varsa, kodları kavramınız oldukça kolaylaşır. Siz yeter ki css kodlarının üzerlerinde değişiklik yapın ve ‘önizleme’ butonuna basarak yaptığınız değişimin ne tür sonuçlar verdiğiniz gözlemleyin. ‘Hata’ uyarısıyla karşılaşsanız da sorun değil, değişimlerinizi kaydetmediğiniz sürece yaptıklarınızı geriye alabilme imkânınız var. Böylece yavaş yavaş da olsa kendi sitenizin kodlarına hükmetmeye başlayabileceksiniz.

Örneğin aşağıdaki css kodunda sitenin arkaplan rengini temsil eden rakamlar mevcut.
body {
background-color: #333333;}


Bu rakamları değiştirmek oldukça basit bir işlem olsa da sitenin görünümünde önemli bir değişim elde etmiş olursunuz.

Buna benzer basit denemeler yaparak zamanla çok daha karmaşık kodlar üzerinde rahatça oynayabilecek bir bilgiye sahip olabilirsiniz.

Yeni temalar deneyin

Eğer yukarıda bahsettiklerim sizin asla uğraşmak istemediğiniz işlemlerse ve daha pratik yollardan sitenizde değişim yapmak istiyorsanız Blogger için tasarlanan yüzlerce ücretsiz temadan birini sitenize yükleyebilirsiniz. Bu sayede sadece bir iki adımla siteniz tamamen farklı bir görünüm kazanabilir. Ancak burada önemli olan husus, yükleyeceğiniz temanın blogunuzda paylaştığınız içeriğe uygun olmasıdır. Aşırı gösterişli, fazla karmaşık temalardan kaçınmak da yararınıza olacaktır.

Blogunuza nasıl tema yükleyeceğiniz hakkında fikir sahibi olmak için en kısa zamanda başlayacak olan ‘Haftanın Blogger Teması‘ yazı serimizi takip edebilirsiniz.

Yazının uzayıp da konuyu sıkıcı hale getirmemesi için sözlerimi şimdilik burada noktalamakta fayda görüyorum. İlerleyen günlerde bu konudaki yazılara devam edebiliriz.

Son olarak başarılı blog yazarı olmak isteyenler için çok önemli detayların anlatıldığı aşağıdaki yazımızı da incelemenizi tavsiye ederim.
--> Başarılı blog yazarı olmanın sırları
İyi çalışmalar.
Continue reading
Kaydol: Kayıtlar (Atom)