bakalimbir

20 Mart 2013 Çarşamba

Adım Adım İyi Bir Blog Sitesi Kurmak

YIllar önce tek sayfalık kişisel HTML sitelerle başlayan internet sitesi kurma trendi zamanla yerini daha dinamik sitelere ve forumlara bıraktı. Son yıllarda ise moda, bir blog sitesi kurmak. Artık herkes kişisel veya temasal bir blog kumaya başladı. Peki sıfırdan adım adım iyi bir blog sitesi nasıl kurulur?

1. Blogunuzun Konusuna Karar Verin

Bir blog sitesi kurmaya başlamadan önce karar vermeniz gereken ilk şey blog sitenizin konusudur. Eğer niyetiniz kişisel bir blog kurmaksa yani içinizden gelen şeyleri yazacaksanız bu adımı geçebilirsiniz ancak temasal bir blog kurmak istiyorsanız seçeceğiniz konuya çok önemli. Blog sitenizin konusunu belirlerken huni yöntemini kullanmanızı öneririm.

Huni yönteminde 4 adet filtre kullanarak blog sitenizin konusuna karar vereceksiniz.

1. Sevdiğiniz, ilgi duyduğunuz konuların bir listesini yapın.

2. Bu konulardan hangisinde bilgi sahibisiniz? Yeteri kadar bilgi sahibi olmadığınız konuları eleyin.

3. Bu konuya insanlar ilgi gösterirmi? Anahtar kelime araştırması yaparak insanların ilgisini çekmeyen konuları eleyin.

4. Son olarak içerik üretmekte sıkıntı çekebileceğiniz konuları eleyin.

Elemeler sonucunda elde kalan konulardan biri hakkında blog açarsanız başarılı olma şansınız yüksektir.

2. Blog İsmine Karar Verin Ve Blog Sitenizi Açın

İnternette ücretsiz blog açmanızı sağlayan onlarca site var. Bunlardan birini kullanarak blog sitenizi kurabilirsiniz ancak daha önce blogunuzun ismine karar vermelisiniz.

Blogunuzun ismi yazdığınız konuyla alakalı olmalı. Arama sonuçlarında başlık olarak blogunuzun ismi görüneceğinden ziyaretçiler başlığı okuduğunda sitenin içeriği hakkında fikir sahibi olmalıdır.

Blogunuzun ismine karar verdiyeniz artık blog sitenizi kurmaya geçebilirsiniz. Bu hizmeti ücretsiz veren siteler arasında en popüler olanları Blogger, Wordpress, Tumblr ve Blogcu’dur. Sizlere şu an okuduğunuz blogun da sağlayıcısı olan Blogger’ı tercih etmenizi önereceğim ve bundan sonraki anlatıma Blogger üzerinden devam edeceğim. Peki ama neden Blogger?

- Blogger bir Google ürünüdür ve diğer tüm Google ürünleriyle entegre bir şekilde çalışmaktadır. Kim gücünü Google’dan alan bir site istemez ki?

- Blogunuz Google sunucularında barındırıldığı için güvendedir. Şifrenizi kimseyle paylaşmadığınız taktirde teknik olarak hacklenme ihtimali yok denecek kadar azdır.

- Blogger’ın kullanıcılarına sunduğu şablon tasarımcı aracı sayesinde blog sitenizin görünümünü istediğiniz gibi değiştirebilirsiniz. Ayrıca interrnette ücretsiz olarak dağıtılan binlerce hazır şablondan birini kolayca blogunuza uygulyabilirsiniz.

- Blogger bir Google ürünü olduğunda siteniz kısa sürede Google’da gözükmeye başlar ve yazılarınız hızlı bir şekilde Google veri tabanına eklenir.

- Blogger kurulumuyla, ayarlarıyla, şablonlarıyla, eklentileriyle kullanımı çok kolay olan bir platformdur.Bu sayede hiç kod bilmeden bile iyi bir blog sahibi olmak mümkündür.

Blogger’da bir blog oluşturmaya karar verdiyseniz adım adım nasıl yapacağınızı resimli bir şekilde anlattığım şu yazıyı okuyabilirsiniz: Blogger’da Blog Oluşturma

3. Blog Tasarımı Ve Şablon Seçimi

Blogunuzu oluştururken seçtiğiniz şablonu Blogger kumanda panelindeki Şablon sekmesinden istediğiniz zaman değiştirebilirsiniz. Blog tasarımıyla ilgili yapacaklarınız bunula sınırlı değil. Aynı yerdeki Özelleştir butonuna tıkladığınızda blog sitenizin arka planı, genişlikleri, yerleşimi, yazı tipleri, büyüklükler ve renkleri gibi pek çok özelliği değiştirmek mümkün.

Kumanda paneli üzerinden yapabileceğiniz değişiklikler de sınırlı olduğu için internette ücretsiz olarak dağıtılan blog şablonlarını kullanabilirsiniz. Benim beğendiğim ve kullanmanızı önerdiğim bazı blog şablonları şunlar:

- Responsive Max Mag 2013 Blogger Teması

- Sementit Blogger Theme

- Legit Blogger Teması

- BlueBuzz

- Bloom Magazin Teması

- 3 Sütunlu Türkçe Blogger Teması: WP-OpenCart

- Elite Minima: Ücretsiz Premium Blogger Teması

- Blogcu Bayanlar İçin Blogger Teması

Bu şablonları nasıl yükleyeceğinizi öğrenmek için Blogger Şablon Yükleme başlıklı yazıyı okuyabilrsiniz. Yine aynı yazının içerisinde ücretsiz Blogger şablonları bulabileceğiniz sitelerin listesini görebilirsiniz.

4. Blogger Kumanda Paneli Ve Ayarlar

Blogger kumanda panelinin arayüzü basit ve Türkçe olduğu için kullanımı çok kolaydır. Zamanla hızlı ve pratik kullanmaya başlayacaksınız ancak bazı ayarlardan kıssaca bahsetmekte yarar var.

- Yorum ayarlarından başlayalım. Yorum konumunu gömülü yapmanızı öneririm. Aynı bu blogda olduğu gibi yazının hemen altında gözükür ve okuyucuların kolayca yorum yazmasını sağlar. “Kimler yorum yapabilir?” seçeneğini herkes olarak işaretlemenizi öneririm. Böylece Google hesabına gerek kalmadan yazınızı okuyan herkes anonim bir isimle veya kendi yazacağı bir isimle yorum yapabilir. Yorum denetlemeyi açarsnız yapılan yorumlar yayınlanmadan önce sizin onayınızdan geçmelidir. Saçma ve spam yorumları engellemek için bunu kullanabilirsiniz.

- Yapmanız gereken diğer önemli ayar ise arama tercihlerindeki arama açıklamasıdır. Arama açıklaması; blog sitenizi Google’da arattığınızda blog başlığının altında çıkan ve blog siteniz hakkında bilgi veren açıklamadır. Bu yüzden bu kısmı yazarken çok özen göstermelisiniz. Blogu sitenizin konusu ve içeriği hakkında bilgi vermelisiniz.

5. Gerekli Araçların Kurulumu

Blog sitenizden daha fazla verim almanızı sağlayacak ve sitenizi optimize edecek bazı ücretsiz araçlar mevcut. Bunların kurulumunu yapmalı ve kullanmaya başlamalısınız. Kısaca bahsetmek gerekirse:

FeedBurner: FeedBurner, insanların yazılarınızı RSS kouyucular ve e-posta ile takip etmelerini sağlayan ücretsiz bir Google aracıdır. Nasıl kullanacağınızı öğrenmek için şu yazıyı okuyabilirsiniz: FeedBurner Kurulumu Ve Ayarları

Google Analytics: Google analytics, sitenizle ilgili pek çok istatistiki veriyi tutan ve bunları size detaylı olarak sunanan ücretsiz bir analiz aracıdır. Blog sitenizi kaç kişi ziyaret etmiş, nereden gelmişler, en çok hangi yazılrınızı okumuşlar, sitede ne kadar kalmışlar gibi pek çok bilgiye bu araç sayesinde ulaşabilirsiniz. Nasıl kullanacağınızı öğrenmek için şu yazıyı okuyabilirsiniz: Acemiler İçin Google Analytics Rehberi

Google Webmaster Tools: Yapmanız gereken ilk şeylerden biri, Google’ın site sahipleri için oluşturduğu bu merkeze site haritası eklemektir. Bu site haritası blogunuzun içerik haritasını Google’a bildirerek tüm yazılarınızın hızlı ve doğru bir şekilde Google dizinine eklenmesini sağlar. Google Webmaster Tools’a site haritası eklemek için şu yazıyı okuyabilirsiniz: Blogger İçin Google Sitemap Oluşturma

6. Önemli Eklentileri Ekleyin

Blogger’da gblogunuza işlevsellik katan bazı eklentiler vardır. Gadget veya widget adı da verilen bu eklentileri Blogger kumanda panelindeki Yerleşim sekmesinden ekleyebilirsiniz. Yerleşim sekmesini açıp gadget ekle dediğinizde Blogger’ın hazır eklentilerinin bir listesini bulacaksınız. Eklentier bunlarla mevcut değildir. Blog Hocam’da yüzlerce Blogger eklentisi mevcuttur ve her geçen gün yenileri eklenmektedir. Yeni oluşturduğnuz blog stenize eklemeniz gereken bazı eklentiler şunlar:

- E-Posta Aboneliği Kutusu: Ziyaretçilerin, yazılarnıza e-poste ile abone olmasını sağlayan bir eklentidir. Yeni bir yazı yayınladığınızda, o yazınız abone olanların e-posta adresine otomatik olarak gönderilir.

- Click Box: Bu eklenti Facebok beğen, Twitter takip et ve Google+1 butonlarını içerir. Bu butonlar sayesinde sosyal medyada adınızdan söz edilmesini sağlayabilirsiniz.

- “Resimli Benzer Yazılar” Eklentisi: Her yazının altında o yazıyla ilgili diğer yazılarınızı öneren bu eklenti ile ziyaretçilerinizi daha uzun süreler sitenizde tutabilecek ve yazılarınızın kunma sayısını arttırabileceksiniz.

- Arşiv Sayfası: Arşiv sayfasında yazdığınız tüm yazılar etiketlere göre kategorilere ayrılarak otomatik olarak listelenir. Bu sayfa sayesinde ziyaretçileriniz yazılarınıza kolayca erişebilirler.

7. Yazılarınızı Yazmaya Başlayın

Artık blog siteniz yazı yayınlamaya uygun. Düzenli olarak özgün içerik oluşturmalı, sosyal medyayı aktif olarak kullanmalı ve çeşitli promosyon yöntemleri kullanarak okuyucu kitlesi edinmeye çalışmalısnız. Bu yolda Blog Hocam’da benim ve konuk yazarların yazdığı yazılar size yol gösterecektir. Aklınıza takılan soruları bu konunun altına yorum olarak yazabilirsiiniz.

İyi bloglamalar!

19 Mart 2013 Salı

HTML Renk Kodu Bulucu

Aşağıdaki iki araç altı haneli renk kodu yani hexadecimal değerini almak için yardımcı olacaktır. Bu araçlar Blogger şablonlarını özelleştirerek ve daha çekici mesaj yazmak için size çok yardımcı olacaktır. Lütfen kullanmadan önce her araç için yönergeleri izleyin.

Renk Kodu Oluşturucu

Talimatlar:

Önce istediğiniz renk alanına "Hue" seçici üzerindeki çubuğu sürükleyin.
Sonra Brightness/Saturation alanı içine tıklayın ve istediğiniz rengi elde edene kadar imleci sürükleyin. "Swatch" çubuğu size son renk sonucunu gösterir.
hexadecimal renk kodu "Hex" kutusunda oluşturulur. Sadece altı haneli kodu kopyalayın. yani; #000000
İşte bu kadar!

Eşleştirme Paleti Renk seçimi için Renk Tekerleği

Bu eşleştirme veya vb navigasyon menüsü, arka plan, köprüler, header için tutarlı renkler elde etmek için oldukça yararlı bir araçtır. Talimatlar:

Basitçe (#) işareti karma değeri olmadan aşağıdaki formu altı haneli renk kodu kopyalayıp yapıştırın ve sonra Update'i tıklayın
Eşleşen renk kodları sağ tarafında dörtlü kutularının içinde görünecektir.
Daha sonra hex değerleri kopyalamak ve bunları kullanmaya başlayabilirsiniz!

Jurassic Park 1-2-3 BoxSet Türkçe Dublaj

Jurassic Park Ultimate Trilogy Blu Ray Box Set collection

Jurassic Park 1-2-3 BoxSet Türkçe Dublaj online izle

Jurassic Park 1993 (BRRip XviD) Türkçe Dublaj (Tek Link)

http://www.imdb.com/title/tt0107290/

Tür: Macera | Aile | Bilim-Kurgu
İmdb Puanı: 7.9
Vizyon Tarihi: 09 Haziran 1993 (ABD)
Süre: 127 dakika

Michael Chrichton’ın aynı adlı,çok satan romanından dahi yönetmen Steven Spielberg tarafından sinemaya uyarlanan,bütün zamanların en başarılı yapıtlarından birisi olarak tüm Dünya’da izlenme rekorları kıran olağanüstü bir film.Mağaralarda yapılan kazı çalışmaları sonucunda dinazorların yaşadığı tarih öncesi çağa ait bazı sivrisinek fosilleri bulunur.Milyarder John Hammond öncülüğündeki bilimadamları,son derece ilginç ve karmaşık testler deneyerek bu sivrisinek fosillerindeki kan örneklerini almayı başarırlar.Dinazorların DNA zinciri bir Afrika kurbasıyla birleştirilerek 65 milyon yıl önce yaşamış bu korkunç yaratıklar yeniden yaratılır.Hammond hükümetten kiraladığı bir adada klonladıkları bu vahşi hayvanlar için elektrikli tellerle çevrili bir hayvanat bahçesi kurmuştur.İhtiyar Hammond,bir hafta sonunda Doktor Allen gibi bazı işinde uzman bilimadamlarını Jurassic Park adını verdiği bu hayvanat bahçesini test ettirmek için adaya getirir. Ancak embiryolarını ele geçirmek isteyen biri, güvenlik sistemini devre dışı bırakınca serbest kalan dinazorlar adada dehşet saçmaya başlar…

http://ul.to/ow63tf3c/Jurassic.Park.1.1993.TR.BRRip.XviD.avi

http://turbobit.net/qsuv1g015133.html

http://netload.in/datei/Jurassic.Park.1.1993.TR.BRRip.XviD.avi.htm

http://letitbit.net/download/Jurassic.Park.1.1993.TR.BRRip.avi.html

Jurassic Park : Kayıp Dünya 1997 (BRRip XviD) Türkçe Dublaj (Tek Link)

http://www.imdb.com/title/tt0119567/

Tür: Aksiyon | Macara | Bilim-Kurgu | Gerilim
İmdb Puanı: 6.1
Vizyon Tarihi: 19 Eylül 1997 (Türkiye)
Süre: 129 dakika

Isa Sorna adı verilen bir adada bazı dinazorlar hayatta kalmıştır.Site B kod adlı dinazor üretim tesisinin yer aldığı bu adada çıkan kasırga sonucunda tesisler yıkılmış ve dinazorlar serbest kalmıştır.Aradan geçen dört yıl içinde dinazorlar büyümüş ve birer canavar haline gelmişlerdir.Dinazorların hala hayatta olduğunu öğrenen tesisin kurucusu Milyarder John Hammond,site B’deki ticari potansiyelin farkındadır.Hammond’ın amacı dinazorları doğal çevrelerinde koruyarak dört yıl önce kaybettiği itibarını geri kazanmaktır.İlk filmde olduğu gibi yine yazar Michael Crichton’ın aynı adlı romanından Akademi ödüllü,dahi yönetmen Steven Spielberg tarafından sinemaya uyarlanan ve muhteşem özel efektlerle süslü nefes kesen bir gerilim/macera.

http://turbobit.net/sgbmcags4uv2.html

http://netload.in/datei/Jurassic.Park.2.1997.TR.BRRip.XviD.avi.htm

http://letitbit.net/download/Jurassic.Park.2.1997.TR.BRRip.avi.html

http://ul.to/qp12br9n/Jurassic.Park.2.1997.TR.BRRip.XviD.avi

Jurassic Park III 2001 (BRRip XviD) Türkçe Dublaj (Tek Link)

http://www.imdb.com/title/tt0163025/

Tür: Aksiyon | Macera | Bilim-Kurgu | Gerilim
İmdb Puanı: 5.8
Vizyon Tarihi: 24 Ağustos 2001 (Türkiye)
Süre: 92 dakika

Tam sekiz yıl önce John Hammond,65 milyon yıl öncesi,dinazorların yaşadığı çağa ait sivrisinek fosilerinden alınan kan örnekleri sayesinde,DNA moleküllerinden yaratılan ve genetik mühendisliğin ürünü olan dinazorların özgürce dolaşmasını sağlayan Jurassic Park projesini hayata geçirmişti.Sekiz yıl sonra ise,Isa Sorna adası dışında bir başka ada da bilimsel çalışmalar yapılmış ve burada bazı yeni türlerde de dinazorlar üretilmiştir. Büyük bir Jurassic Park deneyimi yaşamış olan Paleog Dr.Allen Grant,dinazor kemikleri üzerinde yaptığı araştırmalarına devam etmektedir.Bir gün kapısını çok zengin olduklarını söyleyen bir karı-koca çalar.Çift,Grant’e Jurassic Park tesisine uçakla bir tur düzenlemek istediklerini ve kendisinin onlara eşlik etmesini isterler.Allen başta isteksiz görünse de teklifi güzel bir ücret karşılığında kabul eder.Ancak işler istedikleri gibi gitmeyecek ve kandırıldığını öğrenecektir.

http://turbobit.net/sedjaqkkns9u.html

http://netload.in/datei/Jurassic.Park.3.2001.TR.BRRip.XviD.avi.htm

http://letitbit.net/download/Jurassic.Park.3.2001.TR.BRRip.avi.html

http://ul.to/fvn817cj/Jurassic.Park.3.2001.TR.BRRip.XviD.avi

18 Mart 2013 Pazartesi

Bijoux Room Sponsorluğunda 3 Kişiye Hediye Veriyoruz

Blog Hocam’a son zamanlarda bayan blogger arkadaşlar çok yoğun ilgi göstermeye başladı. Destek mesajları ve yorumlarıyla Blog Hocam’a olan bu ilgilerini fazlasıyla hissettirdiler. Bayan okuyucularıma nasıl bir jest yapsam diye düşünürken devreye sponsor olmak istyeyen bir firma girdi :) Blog Hocam’a sponsorluk için mesaj gönderen BijouxRoom firması ile kısa bir görüşmenin ardından anlaştık ve bayan bloggerların hoşuna gideceğini düşündüğümüz bir kaç hediye vermek istedik. Öncelikle sponsor firmayı biraz tanıtmak istiyorum.

Bijoux Room – Online Takı Butiği

Bijoux Room, dünyadaki takı ve aksesuar trendlerini takip ederek en kaliteli en moda ürünleri, makuş fiyatlarla müşterilerine sunan bir online takı butiği. BijouxRoom'da ithal kolye, küpe, bileklik, yüzük, yaka ve daha pek çok aksesuarı bir arada bulma ve uygun fiyatlardan faydalanma şansınız var.

Bir modelden onlarca yerine sadece birkaç adet bulunan sitede bu sayede kolaylıkla etrafınızdaki insanların üzerinde göremeyeceğiniz bir takıya sahip olabiliyorsunuz.

Online takı butiği açma sebeplerinden birinin de çekilmez hale gelen trafikte kaybedilen zamanı tüketicilere kazandırmak olduğunu vurgulayan BijouxRoom, siparişlerini müşterilerine anlaşmalı kargo şirketiyle ulaştırıyor. 50 TL ve üzeri alışverişlerde ise kargo ücreti talep edilmiyor.

Sponsor firmaya bir kez daha teşekkür ettikten sonra kazanacağınız hediyeleri tanıtmak istiyorum. Bu etkinlikte 3 kişiye çekilişle birbirinden şık ve güzel yüzük hediye edeceğiz. Çekiliş sonunda hediye edilecek yüzükler şunlar:

Gold Snow	Butterfly Effect	Leopardess

Çekilişe Nasıl Katılabilirim?

Çekilişe katılmak için sosyal medya kullanıcısı veya blog yazarı olmanız yeterli. Katılım modelleri ve kazandırdığı çekiliş hakları şu şekilde:

5 Çekiliş metnini blogda yayınlamak 5 katılım hakkı kazandırır!

Aşağıdaki çekiliş metnini blogunuzda post olarak yayınlarsanız 5 adet katılım hakkın kazanırsınız. Çekiliş metninin altına ve üstüne istediğinizi yazabilirsiniz. Önemli olan postıun içerisinde zorunlu olan metnin yer almasıdır.

Türkiye’nin blog dostu sitesi Blog Hocam, okuyucularına hediye dağıtmaya devam ediyor. Bijoux Room sponsorluğunda düzenlecek çekilişte 3 kişi birbirinden şık ve güzel yüzük kazanacak. [Çekiliş Sayfası]

* Çekiliş metninin HTML kodları *

3 Çekiliş görselini bloga eklemek 3 katılım hakkı kazandırır!

Aşağıdaki çekiliş görseline ait kodları blofunuzun sidebar’ına HTML/JavaScript gadget olarak eklerseniz 3 adet katılım hakkı kazanırsınız.

<a title="Çekilişe Katıl" href="http://bloghocam.blogspot.com/cekilis" target="_blank"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px; padding-top: 0px" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLnFW7SmyOCVik7jNPQwnyQWO1NndneaYTvHm1M80nMNvTls-VntTgSeQItOmgEn6ZxwRTtafm9ssRJtDgYO8eTEJnd0p3GVXYenMlH1FDzEC9lkdHExT5BODRLRmCYWthJ_i-yYcVwFIX/s252/yuzuk-cekilis.png" /></a>

1 Çekiliş mesajını sosyal medyada paylaşmak 1 katılım hakkı kazandırır!

Aşağıdaki çekiliş mesajını Facebook, Twitter ve Google+ hesaplarınızdan birinde herkese açık olarak paylaşırsanız 1 adet katılım hakkı kazanırsınız.

BijouxRoom.com sponsorluğunda yapılacak çekilişle 3 kişiye yüzük hediye ediyoruz. Katılmak için tıklayın! http://bloghocam.blogspot.com/cekilis

Kurallar Ve Önemli Bilgiler

- Sadece çekiliş duyuruları yapan veya bu tür etkinlikkler için açılmış blogların başvuruları kabul edilmez.

- Çekiliş metni yeni bir post olarak, blogunuzun ana sayfasında görünecek şekilde yayınlanmış olmalı.

-Çekiliş metninde bir değişiklik yapıldırsa başvuru kabul edilmez.

- Çekiliş web tabanlı bir uygulama olan random.org aracı ile yapılacak ve video olarak kaydedilerek katılımcılarla paylaşılacaktır.

- Ödül kazananlar haklarını satamaz, devredemez ve erteleyemez. Ayrıca ödül kazananlarla 72 saat çerisinde irtibat kurulamazsa, hakları yedek talihliye geçer.

Çekiliş Takvimi

Çekiliş katılım için son tarih: 29 Mart 2013 Cuma

Çekilişin yapılacağı tarih: 7 Nisan 2013 Pazar

Örnek Katılım Şablonu

Çekilişe katılmak için aşaıdaki şablona uygun olarak yorum yazmanız yeterlidir.

- İsim: Serdar Kara

- Çekiliş metnin bulunduğu postun URL’si: http://bloghocam.blogspot.com/2013/03/xxx.html

- Çekiliş görselinin bulunduğu blog URL’si: http://bloghocam.blogspot.com/

- Çekiliş mesajının Facebook URL’si: http://www.facebook.com/bloghocam/posts/xxx

- Çekiliş mesajının Twitter URL’si: https://twitter.com/BlogHocam/status/xxx

- Çekiliş mesajının Google+ URL’si: https://plus.google.com/110966163584417465277/posts/xxx

- İletişim adresi: bloghocam@gmail.com

Tüm katılımcılara bol şans!

17 Mart 2013 Pazar

HTML Kodlarıyla Jquery Resim Galerisi

HTML kodlarıyla Resim Galerisi.
Siteme Resim Galerisi Nasıl Eklerim?
HTML Kodu Jquery Resim Galerisi Yapımı.
Blogger, WordPress Resim Galerisi Ekle.
İleri geri butonlu resim galerisi yapımı.

Jquery bir javascript kütüphanesidir. Hız, performans, kullanım kolaylığı ve kodları inanılmaz şekilde kısaltması sebebiyle birçok sitede, eklentilerde kullanılır. Resim galerileri pek çok sitenin vazgeçilmez öğelerinden biridir. Resimlerinizi ne kadar etkili ve başaralı sunarsanız bu size o kadar artı olarak dönecektir. Bu yazıda HTML kodlarıyla Jquery resim galerisi oluşturacaz. İstediğiniz kadar resmi ekleyebilir, ileri ve geri butonlarıyla yönlendirebilirsiniz. Blogger, WordPress veya websitenizde kullanabileceğiniz uygulaması basit ve güzel bir resim galerisi.

<style type='text/css'>
#broder{width:580px;height:440px;background:#333;border:3px solid #666;position:relative;margin:30px auto 20px;}
#slide{width:480px;height:360px;overflow:hidden;position:absolute;left:49px;top:29px;background:#fff;border:0px solid #698639;border-color:#698639 #e0ebcb #e0ebcb #698639;}
#slide a{width:480px;height:360px;text-decoration:none;display:block;position:absolute;left:480px;}
#slide a img{display:block;border:0;}
#title{width:131px;height:132px;position:absolute;left:5px;top:-30px;}
#previous{width:74px;height:74px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9bMvmWEddobw0UB_eAptbCBKWTC1cuKNZXMGjD4a8lKp6SQLP76MUR0_cxg9rpnz_SOvRlkis4LQy9_-LchukGrHcPadGYgGvkAoCdnEMmrfyaRDwjVNBI_P4jLr-mCBXdjktzyMIkI0F/s1600/slide-left.png);position:absolute;left:5px;top:175px;cursor:pointer;}
#next{width:74px;height:74px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2wuuM4v-VMtNOaXDvvwzukhaW-EHnCeYo9qZjt9169SAZ_K0pJ2wUvPnYCz8JPLonxZ0g0ZkSpVFWnDkUJue6hbLH9ZGFEakzPNU-q0uG51EzMupSm2dV3zRvIkNH_M13Uu3XuK1f884u/s1600/slide-right.png);position:absolute;left:510px;top:175px;cursor:pointer;}
#buttons{position:absolute;left:50px;top:405px;}
#buttons div{width:20px;height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNrN_oUhkNQ0DWsZaYmyDP_uZl8RacwCKvqTDQ0dfbqGA5Xoq_Dme4hzVsIya09LEoffggiazgq5qKLq4qdrFhJOIU7_1OX6nVhI1UrIaRsZj1xwva83i3mhpz8SlBT1eBNUHFjI9veHru/s1600/slide-button.gif);float:left;margin-right:5px;display:inline;}
#buttons div b{display:block;width:20px;height:20px;line-height:19px;font-family:arial, sans-serif;font-size:11px;color:#16a;text-align:center;cursor:pointer;}
img#loading{position:absolute;left:240px;top:170px;}
#previous b,#next b{display:none;}
</style>
<script src="http://social-media-dosyalari.googlecode.com/files/jquery-slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
current = 1;
button = 1;
images = 8;
width = 480;
$('#p1').animate({"left": "0px"}, 400, "swing");
$('#b1').css("backgroundPosition", "left bottom")
$('#b1 b').css("color","#fff");
$("#next").click(function() {
button = current;
current++
if (current == (images+1) ) {current = 1}
animateLeft(current,button)});
$("#previous").click(function() {
button = current;
current--
if (current == 0 ) {current = images}
animateRight(current,button)});
$("#buttons div").click(function() {
button=current;
clickButton = $(this).attr('id');
current = parseInt(clickButton.slice(1));
if (current > button) {animateLeft(current,button)}
if (current < button) {animateRight(current,button)}});
$("#buttons div b").mouseover(function() {
if (($(this).css("color")) == "#16a" || ($(this).css("color")) == "rgb(17, 102, 170)") {$(this).css("color","#000");}});
$("#buttons div b").mouseout(function() {
if (($(this).css("color")) == "#000" || ($(this).css("color")) == "rgb(0, 0, 0)") {$(this).css("color","#16a");}});
function animateLeft(current,button) {
$('#p'+current).css("left",width +"px");
$('#p'+current).animate({"left": "0px"}, 400, "swing");
$('#p'+button).animate({"left": -width+"px"}, 400, "swing");
setbutton()}
function animateRight(current,button) {
$('#p'+current).css("left",-width+"px");
$('#p'+current).animate({"left": "0px"}, 400, "swing");
$('#p'+button).animate({"left": width+"px"}, 400, "swing");
setbutton()}
function setbutton () {
$('#b'+button).css("backgroundPosition", "left top")
$('#b'+button+' b').css("color","#16a");
$('#b'+current).css("backgroundPosition", "left bottom")
$('#b'+current+' b').css("color","#fff");}});
</script>
<div id="broder">
<div id="slide">
<img alt="loading" id="loading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeQtmxKJQJiGLd5Tg2k67arFYprHxiDN7S3b8C8FQH2MzL5tNR5ze1mrqWm_odjnyuFj-IXBU-rdOu2jcrGO_ohCtITfYVQ5Dhuxg2icgs83BQ5DdUX2QmEHK6gNJgAHx9ktW86dZnz9bM/s1600/loading.gif" />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWRtMOXUShttegTqj3JNgYIg6zF3P_akrCIjpjYQzFsWZl5esiMUVpOr4crV1XkekTGSaWbn5ev6bG65js9GAhuBOJ3gzFF0LxYBACZOB1Wg9U61KyfuhyvURMdwkU1eKrfylfxit6VGq/s1600/ol.jpg" id="p1"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWRtMOXUShttegTqj3JNgYIg6zF3P_akrCIjpjYQzFsWZl5esiMUVpOr4crV1XkekTGSaWbn5ev6bG65js9GAhuBOJ3gzFF0LxYBACZOB1Wg9U61KyfuhyvURMdwkU1eKrfylfxit6VGq/s1600/ol.jpg" width="480" alt="Meftun Apart Front" title="Meftun Apart Front"/></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgCxvYpDupuhvACPqUOhshjWPA_YbNeabqeiAxkjfMKb4_X_E8JQ3MWlCzlfYRey6JMYhyphenhyphenDsdNOUkqrTrYj67xtROx30wQcsaNZ5-LFywVWGWK0_PdryGa72aKZmN7tfuxIjUoRBbSGJM3/s1600/havuz.jpg" id="p2"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgCxvYpDupuhvACPqUOhshjWPA_YbNeabqeiAxkjfMKb4_X_E8JQ3MWlCzlfYRey6JMYhyphenhyphenDsdNOUkqrTrYj67xtROx30wQcsaNZ5-LFywVWGWK0_PdryGa72aKZmN7tfuxIjUoRBbSGJM3/s1600/havuz.jpg" width="480" alt="Meftun Apart Havuz" title="Meftun Apart havuz"/></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVeFIu3vF0hEqI2q6eU1h_2aMhjoC-sAIPLrKpgWK5xlmtjEHjoJPG8u6ZWCIgtUiL8FbXqJd-aRahoRpRjt4eH1ThEJr0yhcokopgoZT8bOBo1k0C-95Th0NcI6twb6jpnsq-t_42nq5A/s1600/salon.jpg" id="p3"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVeFIu3vF0hEqI2q6eU1h_2aMhjoC-sAIPLrKpgWK5xlmtjEHjoJPG8u6ZWCIgtUiL8FbXqJd-aRahoRpRjt4eH1ThEJr0yhcokopgoZT8bOBo1k0C-95Th0NcI6twb6jpnsq-t_42nq5A/s1600/salon.jpg" width="480" alt="Meftun Apart Salon" title="Meftun Apart Salon"/></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSbt-gUpE5GI8TaNO9zYur8LjKcgcQElm4UQhy_7sboWtl7bMbn3RfMWAqlex93GrgqxlCr9sQS1MB_MlT1J2FA1c3iWmh314YaryDv01qYGQGFNTZXqGcrBN7jIpL9iDUIpDkQ7sqLWNX/s1600/balkon.jpg" id="p4"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSbt-gUpE5GI8TaNO9zYur8LjKcgcQElm4UQhy_7sboWtl7bMbn3RfMWAqlex93GrgqxlCr9sQS1MB_MlT1J2FA1c3iWmh314YaryDv01qYGQGFNTZXqGcrBN7jIpL9iDUIpDkQ7sqLWNX/s1600/balkon.jpg" width="480" alt="Meftun Apart Balkon" title="Meftun Apart Balkon"/></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0KKiv0EnGhbnEZcVH1znYjKrf6FKBVMTfCkS5F6KA8zvloohI8I7neFZr7cz1EfEBVfjH7U3hETKUwh7G9Tq9TvcsBEhUPnqyqyDDtckmSsRwAVWm-_2IcPNMMMkjWeBLtD9EDFbsLLX/s1600/meftun_aparts9b.jpg" id="p5"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0KKiv0EnGhbnEZcVH1znYjKrf6FKBVMTfCkS5F6KA8zvloohI8I7neFZr7cz1EfEBVfjH7U3hETKUwh7G9Tq9TvcsBEhUPnqyqyDDtckmSsRwAVWm-_2IcPNMMMkjWeBLtD9EDFbsLLX/s1600/meftun_aparts9b.jpg" width="480" alt="Meftun Apart Açık mutfak" title="Meftun Apart Açık Mutfak"/></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOfrOMLfZ55DW3sxkzVbJseG88HmYairzGbOcTcHl4UBkA8aa6QZd0rsenZ6NiGcSlr1Z38arxjNA5UceXEU1opa2_4tEBrUWU_qe2Hc-dmUbpC_bB2t7k_b7A_UJu5d1EwiqnDU_no0_l/s1600/meftun_aparts10b.jpg" id="p6"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOfrOMLfZ55DW3sxkzVbJseG88HmYairzGbOcTcHl4UBkA8aa6QZd0rsenZ6NiGcSlr1Z38arxjNA5UceXEU1opa2_4tEBrUWU_qe2Hc-dmUbpC_bB2t7k_b7A_UJu5d1EwiqnDU_no0_l/s1600/meftun_aparts10b.jpg" width="480" alt="Meftun Apart Yatak odası-1" title="Meftun Apart Yatak odası-1"/></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO3itzFlULdcB-P0jBT6hXL9SmxOzl5akvv6OtS_LhVaLjWPaAbXafI461rqbBbvOTQ8kmswchVpHOVs9F68pC5N2DXnVnZ5RCQCCxiXDMF_NBykOCnWQvV4f_VTdzPTXC_qD3ibZ1eVx2/s1600/5.JPG" id="p7"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO3itzFlULdcB-P0jBT6hXL9SmxOzl5akvv6OtS_LhVaLjWPaAbXafI461rqbBbvOTQ8kmswchVpHOVs9F68pC5N2DXnVnZ5RCQCCxiXDMF_NBykOCnWQvV4f_VTdzPTXC_qD3ibZ1eVx2/s1600/5.JPG" width="480" alt="Meftun Apart Yatak odası-2" title="Meftun Apart Yatak odası-2"/></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFMHCK9saukfIwJdLZCF-UJU2W3sc2Imi08JbFPGvWWPj4eOwIOtSL2GhidNQj23_DKr1sXK3bzsVTdJT-J-91ETm9NBN_96Bo8cX92EZP3Hx9Ppz8RsPcBF54LE54K9DOIyA2kjuO2Kdg/s1600/7.JPG" id="p8"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFMHCK9saukfIwJdLZCF-UJU2W3sc2Imi08JbFPGvWWPj4eOwIOtSL2GhidNQj23_DKr1sXK3bzsVTdJT-J-91ETm9NBN_96Bo8cX92EZP3Hx9Ppz8RsPcBF54LE54K9DOIyA2kjuO2Kdg/s1600/7.JPG" width="480" alt="Meftun Apart WC&Banyo" title="Meftun Apart WC&Banyo"/></a>
</div>
<div id="previous">
<b>Önceki</b></div>
<div id="next">
<b>Sonraki</b></div>
<div id="buttons">
<div id="b1">
<b>1</b></div>
<div id="b2">
<b>2</b></div>
<div id="b3">
<b>3</b></div>
<div id="b4">
<b>4</b></div>
<div id="b5">
<b>5</b></div>
<div id="b6">
<b>6</b></div>
<div id="b7">
<b>7</b></div>
<div id="b8">
<b>8</b></div>
</div>
</div>

Script kodları arasındaki Mavi renkle belirttiğim alanları kendinize göre düzenleyin.
images = 8; Kaç tane resim kullanıyorsanız, (Örnekte 8 adet resim kullanılmıştır.)
width = 480; Kullandığınız resimlerin genişliği

Ve son olarak Kırmızı renkle belirttigim alanları kendinize göre düzenleyin.
width:580px;height:440px; (width: Genişlik, height: Yükseklik)
width:480px;height:360px; (width: Genişlik, height: Yükseklik)
<a href="Resim Linkiniz" id="p1"><img height="360" src="Resim Linkiniz" width="480" alt="Resmin Adı" title="resmin üstüne gelince çıkacak yazı"/></a>

Örnek Resim Galerisi Önizleme: