Yalama Şekeri

Sosyal İmleme Eklentisi 2

noreply@blogger.com (Yasin Şen) — Sat, 11 Apr 2009 21:51:21 PDT

Evet saygıdeğer blogger kullanıcıları sosyal imleme eklentilerinden daha önce bahsetmiştik ve hatta bir eklenti oluşturmuştuk. Şimdi ise simgelerini dryicons'dan aldığım diğer bir eklentiyi paylaşmak istiyorum.

Öncelikle
<div class='post-footer-line'>

buluyoruz ve uygun gördüğümüz yere BURADAKİ KODLARI ekliyoruz.

Şimdi geldi sıra CSS kodlarına.

.social {
height:34px;
}
.socialtextspace {
float:left;
}
.socialicons {
float:right;
text-align:right;
}

Ve sonuç

Blogger İçin Google Friend Connect

noreply@blogger.com (Yasin Şen) — Thu, 26 Feb 2009 07:49:01 PST

Okuldan gelip bloguma bir göz atayım dedim ki bir de ne göreyim! İzleyiciler eklentisinin yerini Google Friend Connect almış. Şaşırdım doğal olarak. Blogger'in bloguna bakınca anladım ki tüm bloglar için yenilenmeye gidilmiş.

Google Friend Connect eski adıyla İzleyiciler eklentisi düzenlemek için açınca karşımıza çıkanlar sadece renk kodları oluyor. Bunları da düzenlemek artık sayfanızın dizaynına ve sizin hayal gücünüze kalıyor.

Google Blogger sanki bu işte iyi gibi :)

Kaynak...

Sosyal İmleme Eklentisi

noreply@blogger.com (Yasin Şen) — Thu, 26 Feb 2009 07:29:29 PST

Sosyal imleme, basit olarak internette beğendiğiniz bir makeleyi sosyal imleme sitelerine ekliyorsunuz, eklediğiniz bağlantı diğer kullanıcılarla otomatik olarak paylaşılmış oluyor. Çok başarılı bir sistem.

Biz de mu nimettten faydalanmak istiyoruz. Napabiliriz diye düşünürken aklımıza " Niye her konunun altına bu bağlantıları eklemiyoruz ki ?!?" sorusu geliyor. Madem bu soruyu da aklınıza soktum hadi ekleyelim.

Blogger'den girişimizi yapıp Html'yi Düzenle sekmesinden Widget Şablonlarını Genişleti işaretleyip işimize koyuluyoruz. Yedeğimizi de alalım :)


<div class='post-footer'>

</div>

kodunu bulalım ve arasına aşağıdaki linkte bulunan kodları ekleyelim.

Burdaki Kodları Ekleyin

Daha sonra biraz şekil vermek için kutumuzu bir çerçeve içine alalım. Bunun için yapmamız gereken, aşağıdaki kodları Css bilgilerimizin arasına yerleştirmek.


#social {
background: #f3f3f3;
border: 2px solid #eeeeee;
}

Ben sadece arka plan ve kenarlık ayarladım. Siz yaratıcılığınızı kullanabilirsiniz :)

Kodlarla Başetmek Daha Basit

noreply@blogger.com (Yasin Şen) — Mon, 23 Feb 2009 07:31:44 PST

Hepimiz kodlarla uğraşıyoruz. Yazıyoruz, beğenmiyoruz siliyoruz ve tekrar yazıyoruz. Bu düzenlemeler sırasında yaptıpınız ufak hataları anlamak gayet güç. Bir de düzenli çalışmamışsanız.. Bu yüzden bizimde metin düzenleyicilere ihtiyacımız var.

Nedir bu metin düzenleyiciler? Bu metin düzenleyiciler size yardımcı olmak için kodlarınızı renklendirir. Böylece siz kolaylıkla hatalarınızı bulabilir,kodlarınızı yazabilirsiniz. Ben bu iş için Notepad++ kullanıyorum. Kendisi ücrestsiz bir yazılım ve işini de gayet iyi yaptığını söyleyebilirim. Buradan ulaşabilirsiniz.

Burada da internette bulduğum bir bağlantı var. Tam 35 adet metin düzenleyiciyi incelemişler. Umarım faydalı olur :)

Siz de Css Reset Uygulayın

noreply@blogger.com (Yasin Şen) — Mon, 06 Apr 2009 12:05:11 PDT

Yeni çıkan tarayıcılar, tarayıcılara gelen güncellemeler, aradaki rekabet, yapımcı vs derken günümüzde tüm tarayıcılar kodları farklı yorumlar oldu. Doğal olarak da Firefox'ta düzgün görüntülenebilen bir sayfa İnternet Explorer'de doğru görüntülenemiyor. Ya da Opera'da görüntülenebilen bir sayfa Google Chrome'de görüntülenemiyor. Tüm sağlayıcılarda ortak görünümü elde edebilmek ya da etmeye çalışmak mümkün aslında. İşte bir kaçı.

1. Generic Reset


 * {
 padding: 0;
 margin: 0;
 border: 0;
 }
/*hizalama sorunlarına birebir*/

2. Chris Poteet’s Reset


* {
 vertical-align: baseline;
 font-family: inherit;
 font-style: inherit;
 font-size: 100%;
 border: none;
 padding: 0;
 margin: 0;
 }
body {
 padding: 5px;
 }
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
 margin: 20px 0;
 }
li, dd, blockquote {
 margin-left: 40px;
 }
table {
 border-collapse: collapse;
 border-spacing: 0;
 }
/*hizalamanın yanısıra başlıkları, talolarıda düzenleyen
bir css reset kodu*/

3. Yahoo’s CSS Reset


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
 padding: 0;
 margin: 0;
 }
table {
 border-collapse: collapse;
 border-spacing: 0;
 }
fieldset,img {
 border: 0;
 }
address,caption,cite,code,dfn,em,strong,th,var {
 font-weight: normal;
 font-style: normal;
 }
ol,ul {
 list-style: none;
 }
caption,th {
 text-align: left;
 }
h1,h2,h3,h4,h5,h6 {
 font-weight: normal;
 font-size: 100%;
 }
q:before,q:after {
 content:'';
 }
abbr,acronym { border: 0;
 }
/*bir çok öğenin tarayıcılardaki sorununu 
çözebilecek bir css reset kodu*/

4. Eric Meyers Reset


html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
 vertical-align: baseline;
 font-family: inherit;
 font-weight: inherit;
 font-style: inherit;
 font-size: 100%;
 outline: 0;
 padding: 0;
 margin: 0;
 border: 0;
 }
/* remember to define focus styles! */
:focus {
 outline: 0;
 }
body {
 background: white;
 line-height: 1;
 color: black;
 }
ol, ul {
 list-style: none;
 }
/* tables still need cellspacing="0" in the markup */
table {
 border-collapse: separate;
 border-spacing: 0;
 }
caption, th, td {
 font-weight: normal;
 text-align: left;
 }
/* remove possible quote marks (") from <q> &
<blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
 content: "";
 }
blockquote, q {
 quotes: "" "";
 }
/*alıntılara tırnak ekleyen gayet başarılı bir 
css resetkodu*/

Son sürümü

5. Condensed Meyers Reset


body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
 padding: 0;
 margin: 0;
 }
fieldset, img {
 border: 0;
 }
table {
 border-collapse: collapse;
 border-spacing: 0;
 }
ol, ul {
 list-style: none;
 }
address, caption, cite, code, dfn, em, strong, th, var {
 font-weight: normal;
 font-style: normal;
 }
caption, th {
 text-align: left;
 }
h1, h2, h3, h4, h5, h6 {
 font-weight: normal;
 font-size: 100%;
 }
q:before, q:after {
 content: '';
 }
abbr, acronym {
 border: 0;
 }
/*Meyer'in özet Css rest kodu*/

6. Tantek’s Reset


/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.                  */
/* http://creativecommons.org/licenses/by/2.0                     */
/* This style sheet is licensed under a Creative Commons License. */

:link, :visited {
 text-decoration: none;
 }
ul, ol {
 list-style: none;
 }
h1, h2, h3, h4, h5, h6, pre, code, p {
 font-size: 1em;
 }
ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, pre,
form, body, html, p, blockquote, fieldset, input {
 padding: 0;
 margin: 0;
 }
a img, :link img, :visited img {
 border: none;
 }
address {
 font-style: normal;
 }

Kaynak

Blogger Otomatik Gizlenen Navigasyon Çubuğu

noreply@blogger.com (Yasin Şen) — Mon, 23 Feb 2009 07:33:54 PST

Bloggerdaki navigasyon çubuğumuzu tamamen kaldırmak yerine onu gizleyebilirsiniz. Çok basit :)

Bloggerden giriş yapıp Html'yi Düzenle sekmesine geliniz, her ihtimale karşı yedeğinizi alınız.

 
#body {

}

etiketinden önce aşağıdaki kodları eklemeniz yeterli olacaktır.

 

#navbar-iframe{opacity:0.5;filter:alpha(Opacity=0)} 
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
/*--Opacity değerlerinizi istediğiniz gibi değiştirebilirsiniz
%100 için 1.0 değeri yeterlidir. Hover üzerine gelince işleyen
fonksiyonu temsil eder -- */

İstediğiniz şekilde düzenleyebilirsiniz.
Deneme

Blogger Navigasyon Çubuğunu Kaldıralım

noreply@blogger.com (Yasin Şen) — Tue, 17 Feb 2009 13:22:08 PST

Belki Blogger Navigasyon Çubuğunuzu kaldırmak isteyebilirsiniz. Bu çok basit :) Her zamanki gibi Blogger'den giriş yapıp Html Düzenleme Sekmesine geliyoruz. Her ihtimale karşı yedek alıyoruz.


#navbar-iframe {
 display: none !important; 
}

Yaptığımız şey sadece Css kodlarımız arasına yukarıda verdiğim kodları eklemek. Navigasyon çubuğunu kaldırmak yasak değildir, bir sakıncası da yoktur :)

Eğer başka öğeleri de gizlemek isterseniz yapacağınız şey ;


#etiket {
 display: none !important; 
}

şeklinde düzenleme yapmaktır :)

Blogger'de Gelişmiş Arama Kutusu

noreply@blogger.com (Yasin Şen) — Sun, 22 Feb 2009 01:24:54 PST

Basit arama kutusu adlı yazımda, Blogger için basit bir şekilde arama kutusu oluşturmayı anlatmıştım. Hiç grafik kullanmamıştık ve sadece mantığı kavramak için yapılan bir çalışmaydı. Şimdiyse grafiklerle hazırlanmış daha şık bir arama kutusu yapacağız.

Her zaman olduğu gibi Blogger'den giriş yapıp Html'yi Düzenle kısmına geliyoruz.


   /* arama kutusunun genel yapısı
 ------------------------------------------------- */
 #search-box {

  width: 228px;
  height: 24px;
  overflow: hidden; /* bu kodu kullanarak geniş gelen yazıların gizlenmesini sağlıyoruz  */
  background: #fff url(http://img266.imageshack.us/img266/6724/50484735ge5.png) no-repeat /*arka planda kullanıcağımız resim*/
 }
 
 /* yazı girişi kutusu
 ------------------------------------------------- */
 #search-box input {
  width: 200px;
  height: 16px;
  padding: 0;
  margin: 3px 0 0 3px;
  float: left; /* sola hizalı */  
  border: none;
  background: #fff;
  font: normal 13px Verdana  /* font özelliklerinin değiştirebilirsiniz */
 }
 
 /* butonumuz
 ------------------------------------------------- */ 
 #search-box button {
  width: 16px;  /* benim kullandığım resim 16x16 olduğundan genişliği ve yüksekliği böyle ayarladım */
  height: 16px;
  margin: 3px 9px 0 0;
  float: right;
  text-indent: -9999px; /* "Ara" yazısının gözükmemesi için bu kodu kulllanıyoruz */
  border: none;
  background: #fff url(http://www.iconlet.com/icons/crystal09/16x16/search.png) no-repeat; /* buton resmimiz */
  cursor: pointer /* imlecin butonun üzerine gelince nasıl görüneceğini belirtir */
 }

Bu kodları CSS bilgilerine eklemeniz yeterli olucaktır.


  <div id='search-box'>
       <form action='/search' method='get'>
           <input name='q' onblur='if(this.value == " ") this.value="aramak için bir şey yazın" ;' onfocus='if(this.value == "aramak için bir şey yazın") this.value=" "; ;' type='text' value='aramak için bir şey yazın'/>
           <button type='submit'>Ara</button>
       </form>
   </div>

Bunları ise sitenizde arzu ettiğiniz yere koyabilirsiniz.

Diğer yazımdaki kodlardan farklı olarak bu kutuda


onblur='if(this.value == " ") this.value="aramak için bir şey yazın" ;' /* imleç kalkınca etkinleşen fonksiyon*/ 
onfocus='if(this.value == "aramak için bir şey yazın") this.value=""; ;' /*imleç tıklayınca etkinleşen fonksiyon*/
value='Hadi sen de ara !!' /* kutunun içinde yazıcak olan yazı*/

bunlar mevcut. Yaptığı işlevse, tıklayınca aramak için bir şey yazın yazısını silmesi ve imleci kaldırınca eğer kutu boşsa tekrar aynı yazıyı yazması. Yani kullanıcı kutuya Atatürk sorgusunu aramak için tıklayınca yazı silinecek. Atatürk yazdıktan sonra imleci kaldırırsa yazı yine Atatürk kalacaktır.

Örneği sitemin üst tarafında :)

Blogger'den Google Adsense İçin Monetize

noreply@blogger.com (Yasin Şen) — Sat, 14 Feb 2009 13:12:01 PST

İnternet aracılığıyla en kolay para kazanma yöntemlerinden biri olan Google Adsense Blogger için en uygun sistem olduğunu kanıtlama adına adımlar atmaya devam ediyor. Bunun son örneği Blogger yerleşim sayfasına eklenen Monetize sekmesi. Bu sekme sayesinde Google Adsense reklamlarını daha kolay bir şekilde yayınlayabiliyorsunuz. Kenar çubuğunda, kayıtların altında ve hem kayıtların altında hem de kenar çubuğunda olmak üzere 3 seçenek mevcut.

Sevgililer Gününüz Kutlu Olsun

noreply@blogger.com (Yasin Şen) — Wed, 18 Feb 2009 10:35:19 PST

Bireysel açıdan bakarsak 14 Şubat herkes için farklı bir önem belirtir. Bizim bakkal amca için son ödeme tarihidir, babam için su faturasının son günüdür, Ali Abi için arabanın bakım günüdür :) Birazcık gerçekçi olmak gerekirse, bu gün Sevgililer Günü'dür. Tabi sevgilisi olmayanlar tarafından görülen her mutlu çiftin yürekte bir sızı oluşturması, kıskanılması, ezik hissettirmesi, bu günün herkes için aynı önemde olmadığını belirtir. Sevgililer Günü birbirini çok sevenlerin, sevdiğine açılacak platoniklerin ya da severken ayrılanların duygularının kabarma günüdür bir bakıma. Ya da "sapların saplar, aşıkların aşıklar, sevgililerin sevgililer günü kutlu olsun !!" mesajlarının dolaşmasına neden olan gün..

Bu günü beraber geçirebileceğiniz birileri varsa ne mutlu size. Ne mutlu o birilerine ki sizinleler.. Ayrıca ne mutlu ki Sevgililer Günü yoktur deyip de her günü özel yaşayan çiftlere :) Herkesin Sevgililer Günü kutlu olsun :)

Google 14 Şubat Sevgililer Günü Logosu

noreply@blogger.com (Yasin Şen) — Sat, 14 Feb 2009 06:37:29 PST

Google'nin Sevgililer Günü için hazırladığı logoda iki tane kuş var. Görüldüğü gibi çok aşıklar. Google her zaman ki gibi sade bir tasarım kullanmış. Fakat Google nin özelliği olsa gerek yine de anlatılanlar çok fazla. İyi ki varsın Google !! :)

Blogger'de Basit Arama Kutusu

noreply@blogger.com (Yasin Şen) — Sun, 22 Feb 2009 01:25:44 PST

Bloglarımızda ziyaretçiyi tutmak pek de kolay bir iş değil. Güncel konular, cafcaflı renkler, kullanıcı dostu dizaynlar, özgün yazılar... Bunların hepsi olduğu zaman sitemiz dört dörtlük olur. Ben şimdi yapabildiğim düzeyde formlar üzerinde basit ve hoş değişikler yapmayı göstericem.

En çok kullanılan formlardan biri arama formudur ve basit olarak şekli alttaki gibidir.

  <div id='search-box'>
        <form action='/search' method='get'>
            <input name='q' type='text' value=''/>
            <button type='submit'>Ara</button>
        </form>
    </div>

Ve görünümü de aşağıdaki gibidir.

Gördüğünüz gibi çok basit bir form. Yavaş yavaş değiştirmeye başlıyalım. Öncelikle biraz renk ve çerçeve katalım. Formumuza style değerini verip background(arkaplan) değerini gri yaptık, böylece etki alanını görmüş olduk.

  <div id='search-box' style=' background:#eeeeee; '>
        <form action='/search' method='get'>
            <input name='q' type='text' value=''/>
            <button type='submit'>Ara</button>
        </form>
    </div>

Biraz uzun oldu sanki, width(genişlik) değeri girerek normal ölçüye alalım 200 piksel yeterli olur şimdilik. Height(yükseklik) içinse 20 piksel girelim ki taşma olmasın. Şimdi etki alanımızı biraz genişletelim. Bunun için padding(öteleme gibi bi şe) değerini kullanmamız gerekir. 10 piksel yeterli.

  
<div id='search-box' style=' background:#eeeeee;width:200px;height:20px; padding:10px; '>
 <form action='/search' method='get'>
            <input name='q' type='text' value=''/>
            <button type='submit'>Ara</button>
        </form>
    </div>

border(kenarlık) kullanarak formumuza kenarlık ekliyoruz. Ve yazı girşini yaptığımız yeri biraz değiştiriyoruz.

  
<div id='search-box' style=' background:#eeeeee;width:200px;height:20px; padding:10px; '>
 <form action='/search' method='get'>
            <input name='q' type='text' value='' style='  background:#ffffff;  border: 1px solid #000000'>
            <button type='submit'>Ara</button>
        </form>
    </div>

Birazda butonumuzu düzenliyelim. Uyumlu bir buton yaptık yazı rengimizide color değeriyle kırmızı yaptık.

  
<div id='search-box' style=' background:#eeeeee;width:200px;height:20px; padding:10px; '>
 <form action='/search' method='get'>
            <input name='q' type='text' value='' style='  background:#ffffff;  border: 1px solid #000000'>
            <button type='submit' style=' color:red; background:#ffffff;  border: 1px solid #000000'>Ara</button>
        </form>
    </div>

Evet en basit şekliyle bir formu bu şekilde değiştirebilirsiniz. İlerki yazılarımda resim ve değişik fonksiyonlarla beraber olmak dileğiyle hoşçakalın :)

Önceki Yazılar, Sonraki Yazılar

noreply@blogger.com (Yasin Şen) — Wed, 11 Feb 2009 10:37:44 PST

Yeni gelişen temalarla beraber bazı bloglarda Önceki ve Sonraki yazıları gösteren linkler kayboldu. Bunun çözümü işte burda:

Burdan giriş yapıp düzenlemek istediğiniz blogunuzun html'yi düzenle kısmına geliniz.


#blog-pager-newer-link { 
      display:none;
}
#blog-pager-older-link {
      display:none;
}
#blog-pager {
      display:none;
}

Blogunuzda, bu bağlantıların gözükmemesinin nedeni genellikle temaların

display:none;

kodunu kullanarak bu öğeleri gizlemesidir. Bizde bu kodları silicez ve birazcık estetik katıcaz, son olarak kodumuz


#blog-pager-newer-link {
 float: left;      
}
#blog-pager-older-link {
 float: right;    
}
#blog-pager {
 text-align: center;      
}

olucak. Daha yeni olan sayfalar solda gösterilecektir, ortada ana sayfa ve solda da daha eski olan sayfalar. Eğer yerlerini değiştirmek isterseniz

float:left; //sola hizalar
float:right; // sağa hizalar
text-align: center; // ortaya hizalar

bu kodlar yardımcı olucaktır. :)

Blogger'de Kategori Oluşturmak

noreply@blogger.com (Yasin Şen) — Wed, 11 Feb 2009 11:30:19 PST

Evet herkesin bildiği gibi Blogger'in kategori desteği yok, onun yerine etiket koymuşlar :) Fakat biz cinlik yapıp kategori oluşturucaz. Öncelikle Buradan giriş yapıp ilgili blogunuzun sayfa öğeleri kısmına gelmelisiniz.

Daha sonra kategorileriniz olmasını istediğiniz alandaki gadget ekle bağlantısına tıklayıp bir bağlantı listesi ekleyin.

Şimdi diyelim ki iki adet yazınız var. Bunlar şöyle olsun:

Blogger Kategori Oluşturmak etiketler:blogger, kategori, ipucu, püf nokta
Blogger Sayfa Düzeni etiketler:blogger, tasarım, css

Bu iki konuyu Blogger kategorisine koymak istiyoruz;

Bağlantı listemizi açıyoruz ve site adresi kısmına

http://siteniz.blogspot.com/search/label/blogger

şeklinde linkimizi ekliyoruz. Site adına da Blogger yazarak kategorimizi oluşturuyoruz. Böylece istediğiniz kadar etiket ekleyebilirsiniz ve kategorilerinizde istediğiniz düzende olur.

Eğer kategorinizde fazla yazı varsa linkin sonuna ?max-results= kodunu ekleyerek gösterilecek yazıyı ayarlayabilirsiniz. Böylece sitenin yüklenmesi de gecikmemiş olur.

Son kod:
http://siteniz.blogspot.com/search/label/blogger?max-results=3

gibi olacaktır. Resimli gösterim Burada mevcuttur.

İyi bloglar :)