Sıkça takip ettiğim yabancı bir blogger olan Woork‘un blogundaki CSS kategorisinde dolaşırken hoşuma giden bir makale gördüm . Sizler için bu makaleyi çevirdim. Woork buna Beautiful CSS buttons with icon set (Türkçe :ikon seti içeren hoş css butonları) diyor bende ikonlar ile css butonları diyorum . Neyse lafı fazla uzatmayalım .

Sitenize eğer hoş ve basit bir tasarım yapıyorsanız bu butonlar işinize yarayabilir . Bu css butonlarında ikon ve bir adet css için arkaplan resmi kullanıyoruz. Eğer ikon nerden bulabilirim derseniz İconfinder ‘i kullanabilirsiniz. Başlayalım ;

Başlamadan önce kaynak kodlarını indirebilirsiniz..

1 ) HTML Kodumuz

 <a href="#" class="button">
<span class="add">Add to your bookmark</span>
</a>

Butonu oluştururken kullanacağımız HTML kodumuz bu olucak . Yani ne kadar buton eklemek istiyorsak o kadar da bu kodumuzdan olacak. span class=”add” yazan yerde add kısmı ikonumuzun css kısmıdır. Yani eğer ikon değiştirmek istiyorsanız bu class isminide değiştireceksiniz.

Resimde de görüldüğü gibi add sınıfı kullandığınız ikona göre değişecektir .

Yukarıdaki resimde ise butonumuzun tasarımını yani düzenini görüyoruz ..

Burda kodun sonucunda oluşacak bir buton. ve bu span class=”add” kısmında bahsettiğim olayı daha detaylı görüyorsunuz .

Bende bir örnek kod yazıyorum . Bu kod parçasına dikkat edebilirsiniz. Ben 2 farklı buton eklemek istiyorum

<a href="http://google.com.tr" class="button">
<span class="Google">Google'ye git</span>
</a>

<a href="http://facebook.com" class="button">
<span class="facebook">Facebook'a git</span>
</a>

2 ) CSS Kodumuz

Yazının başından itibaren css’den bahsediyoruz. Kod parçaları felan da verdik. Fakat bizim css kodumuz nerede ? İşte burada ! CSS Kodundaki resimleri yukarıdaki İNDİR butonundan indirebilirsiniz ..

Bu ana css kodumuz;

a.button{
background:url(img/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
}
a:hover.button{
color:#0066CC;
}

Şimdi ise ikonlarımıza butona eklemek için yukarıdaki css kodunun devamını veriyorum.

/* -------------------- */
/* BUTONLAR */
/* -------------------- */
.ikon1{
background:url(img/ikon1.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.ikon2{
background:url(img/ikon2.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;

}
.ikon2{
background:url(img/ikon2.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}

3 ) Son Olarak

Butonunuzda kullanmak istediğiniz ikonların boyutu ideal 16×16 ‘dır. Yazıda kullanılan butonları sizde kullanmak istiyorsanız buraya tıklayarak indirebilirsiniz..

Kolay gelsin ..

Bu torrent rehberi isimli yazımda torrent ile ilgili önemli ve kısa bilgiler bulabileceksiniz..

Torrent Nedir ?

P2p protokolüdür. Yani asıl ismi peer to peer olan dosya paylaşım sistemidir.  Bunların çoğu kaaza , limewire diye adlandırdığımız programların çalışma yöntemidir. Çoğu kişi bu tür programları müzik , video indirmek için kullanır fakat dosyalarınızın başkasıylada (izin verdiğiniz sürece) paylaşıldığını çoğu kişi bilmez.

Hangi Programlar Kullanılır ?

Torrent indirmek için kullanılan programlar ; bittorrent , emule , uTorrent benzeri programlardır. Fakat burda size önerdiğim program uTorrent’tir.. Onuda buradan indirebilirsiniz. Programda dil seçenekleri arasında Türkçe seçeneğinide görebilirsiniz.

uTorrent Kullanımı:

• uTorrent’i kurduktan hemen sonra ilk önce seçenekler > hız testi bölümüne girin. Bağlantı tipi kısmından internet hızını ve bağlantı türünü seçin. Şu Anki port kısmında ise kafadan atarak 5 haneli (örn: 489712) bir sayı girin. Fakat o girdiğiniz portu modeminizde de erişime açık olarak ayarlamanız gerek. (Port açma konusunda buradan yardım alabilirsiniz. Portu modeminizde açtığınızda uTorrent penceresindeki portu test edin butonuna tıklayarak portun erişime açık olup olmadığınız öğrenebilirsiniz. Bu işlemlerdne sonra pencerenin sağ alt köşesindeki seçili ayarları kullan butonuna tıklayıp çıkıyoruz.

  

DTP kapatıldı , son zamanlarda canlı yayında izlediğim en güzel haber bu oldu .  Sıra AKP’de olabilir. Erken seçimede gidebiliriz. (: .. O…. çocuklarının partisi ve bu partinin köpekleri başı Ahmet Türk çekmek üzere 5 yıl daha siyasete atanamayacaklar ..

Anayasa Mahkemesi Başkanı Haşim Kılıç, DTP’nin terör
örgütüyle olan eylemleri de değerlendirildiğinde devletin bütünlüğüne
yönelik bir odak haline geldiğinin anlaşıldığından kapatılmasına karar
verildiğini açıkladı. Haşim Kılıç, kararın oybirliğiyle alındığını
belirtti.

Türk ve Tuğluk’un vekilliği düşürüldü
Kılıç, DTP Genel ……Başkanı ve Mardin Milletvekili Ahmet Türk ile Diyarbakır Milletvekili Aysel Tuğluk’un partinin kapatılmasıyla ilgili gerekçeli kararın Resmi Gazete’de yayımlanmasından sonra milletvekilliklerinin sona ermesine karar verildiğini bildirdi.

Özgürlüğün uygulandığı bir ülkede pekte özgür değiliz galiba ? Bazı şeylere sınırlar koyuluyor. Buda Türkiye’de çoğu vatandaşın kullandığı internet. Sansür koyulan siteler bilinmedik sitelerde değil. Youtube vs.. Yakında diğer sosyal ağlara , maillerimizede erişim yasağı koyabilirler. Bu durum maalesef çok kendini belli ediyor. Ve karşımıza sansüre sansür‘den sonra Eylem 2.0 çıkıyor. Sloganıda çok güzel: “İnternetin Susturulması Matbaanın Kapatılmasından Farksızdır !!!“

Eylem 2.0 ve destekçilerinin amaçları siyasi bir konu içermiyor. Asıl amaçları bu gidişe bir dur demek ve sansürün zararlarını başkalarına anlatmak…

www.eylem20.org