20 Ekim 2013 Pazar

Kupon Dünya İle İndirimli Alışveriş Keyfi

Webrazzi Summit 2013’de Hanzade Doğan Boyner’in konuşmasını takip etme fırsatı bulmuştum. Konuşmasında HepsiBurada.com için söylediklerini düşündüğümde e-ticaret’in Türkiye’de ne kadar büyük yol kat ettiğini ve ilerleyen yıllarda aynı hızla büyümeye devam edeceğini gördüm.

 

Gerçekten’de online alışveriş sitelerinin ilk çıktığı yıllarda kafamızda onlarca soru işareti vardı. Güvenlik, hizmet, kargo gibi konulardaki soru işaretlerinin, e-ticarete alışma dönemimizi uzattığını söyleyebiliriz sanırım. Peki şimdi durum ne? İnternet kullanıcılarının çok büyük bir bölümü alışverişlerini internet üzerinden yapabiliyor ve online alışverişin avantajlarını sonuna kadar kullanıyorlar.

 

Kendimden örnek vereyim. Mesai saatlerim çok düzenli olmamakla birlikte genellikle 7.30 – 17.00 arası diyebilirim. İş yoğunluğu olduğunda hafta sonları da çalıştığımı belirteyim. İşin dışında ilgilenmem gereken bir eşim, ailem ve arkadaşlarım var. Tabi bir de Blog Hocam : ) Bunca yoğunluğun arasında ufak tefek market alışverişleri dışında kişisel alışverişlere pek zaman ayıramıyorum. Bu durumda da imdadıma online alışveriş siteleri yetişiyor.

 

İnternet üzerinden alışveriş yapmanın sayısız avantajı var. Bunlardan başlıcaları:

  • Mağaza mağaza, reyon reyon dolaşmakla vakit harcamaz ve yorulmazsınız. Pek çok alternatife kısa sürede ulaşır ve zamandan tasarruf edersiniz.
  • Mağazalar için açılma veya kapanma saatlerini düşünmezsiniz. 7 gün 24 saat istediğiniz mağazaya girerek alışveriş yapabilirsiniz.
  • Alışveriş merkezlerinin gürültü ve kalabalığına karışmadan oturduğunuz yerden mağaza mağaza dolaşabilirsiniz.
  • Ve en önemlisi indirim kuponları sayesinde alışverişinizi daha ucuza getirebilirsiniz.

 

Yazının devamında indirim kuponlarını kullanarak nasıl ucuza alışveriş yaptığımı anlatacağım. Aynı adımları takip ederek siz de ucuz alışverişin keyfini çıkarabilirsiniz.

 

Öncelikle KuponDünya sitesine giderek yüzlerce mağaza ve siteye ait indirim kuponlarından birini seçmek. Örneğin ben kendime bir adet ayakkabı, eşime bir adet gömlek ve anneme bir adet kazacak alacağım. Ayakkabıyı Enmoda’dan, gömleği Lidyana’dan, kazağı da DeFacto’dan almak istediğim için KuponDünyası’nda  Enmoda indirim kodu, DeFacto indirim kuponları ve Lidyana indirim kuponları bölümüne giriyorum.

 

enmoda.com indirim kuponu


Resimde gördüğünüz gibi Enmoda indirim kuponları sayfasına girdiğinizde aktif indirim kuponlarının listesini görürsünüz. Ben %20 indirim sağlayan kuponu kullanmak ve istiyorum ilgili butona basarak indirim kodunu kopyalıyorum.

 

Daha sonra DeFacto’ya giderek almak istediğim ayakkabıyı ve numarasını seçtikten sonra satın alma sayfasına geçiyorum.

 

enmoda.com indirim kuponu

 

Burada siparişimin detayları ve bunun hemen altında indirim kodu için ayrılmış bir kutu görürsünüz. Bu kutuya KuponDünyası’ndan aldığım kodu girdikten sonra uygula butonuna basıyorum. Sonuçta  229 TL tutarındaki ayakkabıya %20 (45.80TL) indirim uygulanıyor ve alışverişi 183.20 TL’ye yapabiliyorum.

 

Gördüğünüz gibi indirim kuponları sayesinde ekstra hiçbir şey yapmadan ucuza alışveriş yapabiliyoruz. Siz de ucuz alışveriş yapmak istiyorsunuz KuponDünya Mağazaları’nı ziyaret edin ve alışveriş yapacağınız sitenin ismine tıklayarak indirim kuponunu ücretsiz alın.

18 Ekim 2013 Cuma

Görsellerinizi Kayıpsız Sıkıştırarak Sitenizi Hızlandırın

*Giriş kısmını, görsel sıkıştırma konusunun akılda kalması ve gereken hassasiyetin her zaman gösterilmesi adına biraz uzun tutmak istedik, yalnızca gerekli işlemlere geçmek isterseniz lütfen alt bölümdeki başlık ve sonrasını okuyunuz.

İnternet dünyasının kuralları teknolojinin gelişmesine bağlı olarak sürekli olarak değişmekte ve bu değişime ayak uydurmak bahsettiğimiz dünya içerisinde kalıcı olarak yer almak için hayati öneme sahip olmakta. Özellikle arama motorları arasında "demir yumruk" gibi olan Google'ın SEO çalışmaları konusunda hassas olduğu ve bu hassasiyetinin yıl içerisinde yayımladığı çeşitli güncelleştirmeler ile web dünyasında hissedildiğini belirtelim. Google SEO kurallarını genele yaymak ve web dünyasına yerleştirmek istiyor.

Google başta olmak üzere diğer arama motorlarının da yanı sıra İnternet hizmetine erişen herkesin en başta arzu ettiği en önemli hususlardan birisi blog/site yüklenme hızının makul bir düzeyde olmasıdır. Düşünün ki Google'da yaptığınız bir anahtar kelime aramasına bağlı olarak herhangi bir blog/site sayfasını açmanız gerekiyor; çünkü aradığınız bilgi tam da orada. Fakat bir sorun var..! Sayfa yüklenme hızı o kadar yavaş ki çoktan bir ansiklopedi bulup içerisinden o bilgiye ulaşabilirdiniz, hay aksi! Yahut bu denli sayfa indirme işlemi yapan bir blog/site için kotalı İnternet hizmetinizi ve de zamanınızı heba etmeyebilirdiniz. Pekala, sizin internetiniz hızlı olabilir ve de kota sorununuz olmayabilir ancak herkes aynı şansa sahip değil bunu unutmayın.
 
Peki sayfadaki görseller ve yüklenme hızı neden bu kadar ilişkili? diye bir sorunun sorulduğunu varsayarsak cevabını kısaca şöyle açıklayabiliriz. Blogunuz/Siteniz bolca görsel(jpeg, png, gif ve benzer uzantılı) içeriğe sahipse ve siz bu görselleri olduğu gibi -sıkıştırmadan- yazılarınıza ekliyorsanız tosbağadan hallice sayfa yüklenme hızları kaçınılmazdır. Görsellerin sayfa yüklenme hızlarına getirdiği ek yük milisaniyeler cinsinden ölçülse de milisaniyeler zamanla görsellerin artmasıyla yavaş yavaş saniyeleri oluşturur ve 30-40 saniyede açılan bir sayfada da genelde kimse durmaz. Hayır yani daha hızlı yüklenen başka siteler varken neden sizi tercih etsinler ki?!
 
Sanırım Google'ın neden SEO kurallarını yerleştirmek isteğini daha iyi anlıyorsunuz. Bu kuralların en önemli ayaklarından birisinin sayfa yüklenme hızı olduğunu epey bir kavradık artık.
 
Online olarak .png ve .jpeg formatlı görsellerimizi kayıpsız sıkıştırma yani gözümüzün ayırt edemeyeceği kadar benzer ve aynı kalitede sıkıştırma imkanına sahibiz. Aslında kayıpsız sıkıştırma işlemini yapabilen programlar mevcut olsa da gerek kullanımları açısından gerekse de "kayıpsız" dediğimiz en mühim unsuru bir çoğunun sağlayamamasından dolayı bu yazıda, İnternet elinin altında olan insanlar olarak çok daha pratik bir yolla sıkıştırma işlemlerini yapmayı göreceğiz.


Görselleri Kayıpsız Sıkıştırmak

Önemli mi? Giriş kısmını okumadınız galiba, yakaladık :)
 
İnternette en çok kullanılan iki uzantı .png ve .jpeg için uygulamalı gösterim yapacak olsak da sizin daha sıklıkla kullandığınız uzantılı görsellere uygun araçlara da ulaşmanız ve bu basit adımları o uzantılar için uygulamanız mümkün olacaktır.
*Küçük bir not .png uzantılı görseller genelde çok daha iyi sıkışırlar ve kalite konusunda daha az kayıpları olur mümkünse yazılarınızda .png uzantılı görsel kullanmanızı tavsiye ederiz.
 
Bloghocam üzerinden aldığımız iki ekran görüntüsünün birisini .jpeg diğerini de .png olarak kaydettik. Kayıpsız sıkıştırma işlemini yapacağımız siteler ise şunlar:

  • JPEGmini (sınırsız kullanım ve dğer özellikler için üye olabilirsiniz)
  • TinyPNG
JPEG uzantılı olarak ekran görüntüsünü aldığımız bölümün sıkıştırılmamış orijinal hali 55 Kilobyte iken JPEGmini'yi kullanarak 4 Kilobyte'lık bir sıkıştırma gerçekleştirdik ve görseli 51 KB boyuta düşürdük. Milisaniyeleri kazanmaya başladık.

resim sıkıştırma

"İki resim arasındaki yedi farkı bulmaya çalışın" :) Gördüğünüz gibi daha doğrusu göremediğiniz gibi iki resim arasındaki kalite farkı diye bir şey bizim gözümüz için yok gibi, aralarındaki tek fark birisinin sıkışmamış ve büyük boyutlu olması diğerinin ise sıkışmış ve küçük boyutlu olması. Üstelik JPEG uzantılı olmasına karşın fark gözle görülemeyecek kadar az durumda.


JPEGmini Kullanımı

Öncelikle JPEGmini isimli siteye giriyoruz. Sağ üst bölümdeki "Try It Now" bölümüne tıklıyoruz
 
jpeg sıkıştırma compression
 
Karşımıza çıkan yeni bölümden "Upload Your Photo" kısmını tıklıyoruz. Sıkıştırmak istediğimiz JPEG uzantılı görselimizi seçiyoruz.
 
jpegmini kullanım
 
Artık görselimiz karşı tarafa yükleniyor ve sıkıştırma işlemine geçiliyor. Sıkıştırma öncesi ve sonrası interaktif bir panel sayesinde size sunuluyor eğer sıkıştırma performansını beğenirseniz panelin sol alt bölümündeki "Download Full Res." kısmına tıklayarak sıkıştırma işlemi yapılmış görseli indirebilirsiniz. Ancak bir süre sonra üye olmak gerekebiliyor sınırlı sayıda sıkıştırmaya izin veren sistemleri üye olunca sınırsız kullanım ve de ek özellikleri ücretsiz sunuyor.
 
görsel sıkıştırma
 
Orijinal dosya adına "-mini" ekini otomatik koyacak olan sistem bu sayede aynı isimle kayıt yapıp işlem görmemiş görselinizin silinmesini engelliyor.
 
Benzer bir şekilde PNG uzantılı görselimizi sıkıştırarak boyuttan tasarruf elde edebiliriz. Örnek olması için Bloghocam'dan aldığımız ekran alıntısını PNG formatında kaydettik ve TinyPNG ile sıkıştırdık. Sonuç ise oldukça başarılı. Orijinal görsel boyutu 46.6 KB iken kayıpsız sıkıştırılan yeni görselin boyutu 16.7 KB oldu. Bu sıkıştırma oranı % 64 gibi boyut tasarrufu sağlıyor ki sayfa yükleme hızını nedenli olumlu etkileyeceği ortada.
png sıkıştırma
Tüm bu işlemleri yaparken ve yazıya eklediğimiz görselleri sıkıştırırken elde ettiğimiz sıkıştırma boyutu  1 MB üzeri oldu. Görselleri sıkıştırmanın ne denli avantajlı sonuçları olduğunu sanırım rakamsal olarak da görmüş olduk.
 

TinyPNG Kullanımı

Yalnızca siteye girip PNG uzantılı dosyalarınızı aşağıdaki görseldeki gibi dikdörtgen alana sürükleyip bırakmanız yeterlidir. "Compressing" yazısı "Finished" oluncaya dek bir şey yapmanıza gerek yok. İşlem bitince sağ bölümde "Download" sekmesi çıkacak bu sekmeden sıkıştırlmış PNG görselinizi indirebilirsiniz.
 
tinypng kullanımı
 
Benzer bir şekilde diğer formatları da sıkıştırabileceğiniz online hizmetler İnternette mevcut ancak PNG başta olmak üzere tavsiyemiz blog/sitenizde ve yazılarınızda PNG-JPEG formatında görseller kullanmanız. Mümkünse PNG formatını kullanmaya çalışın. Bu yazının sizlere faydalı olmasını dilerken Serdar Kara Hocamıza blogunda bize de yer verdiği için teşekkür ediyoruz. Değerli vaktinizi ayırdığınız için size de ayrıca teşekkür ediyor iyi bloglamalar diliyoruz :)

Yazı Hakkında: Bu yazı uzun süredir çeşitli konularda başka başka diyarlarda yazı yazan kafadar blogcuların son 1.5 yıldır tek bir hesap üzerinden fırsat buldukça teknoloji haberleri ve bilimsel gelişmeler konusunda kendi dünyalarına göre yayın yaptıkları Teknoloji Manya BLOG adına Blog Hocam için yazılmıştır.

    15 Ekim 2013 Salı

    Blog Hocam 2013 Bumerang Ödüllerinde

    Konuya girmeden önce Kurban Bayramınızı kutlamak istiyorum. Herkese sevdikleriyle mutlu bir bayram geçirmesini dilerim.

    Gelelim konumuza… Her senenin sonunda, o seneye ait en iyi blogların seçildiği “Bumerang Ödülleri”nin bu yıl üçüncüsü düzenleniyor. Sadece Bumerang altın ve platin üyelerin katılabildiği Bumerang Ödülleri, her sene merakla beklenen ve ödül töreniyle adından söz ettiren bir etkinlik haline geldi. Bunun için Bumerang’a teşekkür etmeliyiz sanırım.

     

    2011 ve 2012 yıllarındaki Bumerang Ödülleri’ne blogumu ve kendimi iddialı görmediğim için katılmamıştım. Ancak özellikle geçen sene, gerek sosyal medyadan gerek de ilgili yazıya yapılan yorumlarda katılmam yönünde cesaretlendirici ve tabiri caizse gaza getirici yorumlar almıştım. Bu nedenle 2013 “Bumerang Ödülleri”ne katılmaya karar verdim.


    “En Sosyal Blog” Kategorisinde Adayım

     

    Esasında yarışacağım kategoriyi seçerken “en uzman” ve “en sosyal” kategorileri arasında kalmış, hatta sosyal medya hesaplarımdan fikirlerinizi almıştım. Kategorilerin açıklamalarını defalarca okuyunca Blog Hocam’a en uygun kategorinin “En Sosyal Blog” kategorisi olduğuna karar verip başvurumu yaptım.


    Peki En Sosyal Blog nedir?

     

    Bumerang, en sosyal blog olma riterlerini şu şekilde belirlemiş:

    • Sosyal medyayı yakından takip ederek aktif kullanan
    • Tüm platformlarda okuyucularıyla etkileşim halinde olan,
    • Okuyucu yorumlarına önem veren,
    • Okuyucularına kendi alanında özgün içerikler sunan,
    • Sitesini faydalı widgetlarla zenginleştiren

    Eğer siz de benim gibi Blog Hocam’ın bu kriterlere uygun olduğunu düşünüyor ve desteklemek isiyorsanız oylarınızı bekliyorum.

     

     

    Oy Nasıl Verilir?

     

    Blog Hocam’a “En Sosyal Blog” olması için oy vermek isteresniz yapmanız gereken şey oldukça basit. Blog Hocam oylama sayfasına giderek cep telefonunu numaranızı girdikten sonra doğrulama kodunun SMS olarak gelmesini isteyin, aglen doğrulama kodunu bir alttaki kutucuğa yazarak oy ver butonuna tıklayın.

     

    Bumerang Ödülleri Oy Ver

    Not: Oy verme işleminin ücretsiz olduğunu ve her katgeoride sadece 1 bloga oy verebileceğinizi hatırlatmak isterim.

     

    Bumerang Ödülleri Oy Ver!

     

    “Bumerang Ödülleri”ne katılacak diğer blog yazarlarına da şans ve başarı dileklerimi iletmek istiyorum. Umarım hak eden bloglar ödüllerini alırlar.

    14 Ekim 2013 Pazartesi

    Hashtag Kültürü Ve #BlogYazarlığı

    Eğer sosyal medyada yeniyseniz veya fazla vakit harcamıyorsanız hashtag (#) adı verilen etiketleme yöntemi size kafa karıştırıcı veya gereksiz gelebilir. Açıkçası hashtagle yeni tanıştığımda ben böyle düşünmüştüm. Ancak zamanla online iletişimin vazgeçilmez bir parçası olduklarını ve bunları kullanmayı bilmenin ne kadar önemli olduğunu anladım.

     

    hashtag

     

     

    Hashtag Nedir?

     

    İlk olarak Twitter’la hayatımıza giren hashtagler kelimelerin başına # işaretinin konulmasıyla oluşturulur ve bir konuyu belirlemek ya da ayrıştırmak amacıyla kullanılır. Bir anahtar kelime veya kelime grubunun başına # işaret konulduğunda o kelime bir link haline dönüşür ve bu linke tıklandığında dünya üzerinde o hashtag kullanılarak yazılan tüm tweetler listelenir.

     

     

    Hashtag Nasıl Oluşturulur?

     

    Hashtag oluştururken bazı noktalara dikkat etmeniz gerekir. Örneğin birden fazla kelimeden oluştururken kelimelerin arasında boşluk bırakmamalısınız (#Blog yazarlığı). Birden fazla kelimeden oluşan bir hashtag oluşturmak istediğinizde bitişik yazmalısınız (#Blogyazarlığı). Eğer kelimeleri ayırt etmek isterseniz ikinci kelimenin ilk harfini büyük yazabilirsiniz (#BlogYazarlığı). Hashtaglerde büyük küçük harf kullanımı fark etmediği için  #blogyazarlığı ile#BlogYazarlığı aynı sonucu verecektir. Dikkat etmeniz gereken diğer bir nokta ise hashtaglerde noktalama işaretleri kullanmamaktır. Hashtaglerde sayılara izin verilir fakat oktalamaa işaretlerine izin verilmez.

     

     

    Mention (@) İle Hashtag (#) Farklı Şeylerdir!

     

    Yeni kullanıcılar tarafından çok karıştırıldığı için bu konuya da değinmek istedim. İkisi çok farklı şeylerdir. @ işaretinin yanına bir Twitter kullanıcı ismi yazılarak oluşturulan tweet ile o kişiden bahsetmiş olursunuz ve attığınız o tweet, kişinin @Bağlan sekmesinde gözükür. Örneğin tweetinizin başına @Bloghocam yazarsanız gönderdiğiniz tweetten haberdar olurum. Bir tweette hem mention hem de hashtag kullanabilirsiniz.

     

     

    Blogger İçin Hashtag Kullanımı

     

    Twitter ile hayatımıza giren hashtagler o kadar etkili bir iletişim ve etkileşim aracı oldu ki diğer sosyal medya platformları duruma kayıtsız kalmayarak onlar da hashtag kullanımını aktif hale hetirdi. Artık sadece Twitter’da değil Facebook, Google+, Inatagram gibi diğer popüler sosyal medya platfırmlarında da hashtag kullanabiliyorsunuz. Peki bloggerlar bu sosyal platformlarda hashtagleri nasıl kullanmalı?

     

    1. Gündem Takibi: Gerek ülke gündemi gerekse blogunuzun konusuyla ilgili gelişmeleri takip etmek için, açılan hashtagler çok işe yarar. Hatırlayacağınız gibi Gezi olaylarında ve Webrazzi Summit gibi organizasyonda açılan hastagler vasıtasıyla gündemi kolayca takip edebilmiştik.

     

    2. Follow Friday: Eski Twitter kullanıcıların çok iyi bildiği FollowFriday (#FF) etkinliği ülkemizde artık fala kullanılmasa da yurt dışında geçerliliğini koruyan bir takipçi önerme sistemi.  Kullanıcılar, takibe değer buldukları hesapları her cuma günü #FF hashtagiyle paylaşırlar ve insanlar bu hashtag üzerinden takip edecek yeni kişiler bulurlar. (Örn. “#FF @Bloghocam blog yazarlığı ile ilgili faydalı tweetler paylaşıyor” gibi)

     

    3. Yazı Promosyonu: Blogunuzda ayınladığınız yazıları ilglieneceğini düşündüğünüz kitlelere ulaştırmak hashtag kullanmak çok etkili bir yöntemdir. Örneğin blogunuzda moda ile ilgili bir yazı yayınladığınızda bu yazıyı sosyal medyada #moda hashtagini kullanarak paylaşmak size yeni okuyucular kazandırabilir.

     

    4. Takipçi Kazanmak: Twitter’da profil ayarlarınızda kişisel bilgiler kısmında hashtag kullanmak size yeni takipçiler kazandırabilir. Örneğin ilgi alanınızın SEO olduğunu düşünelim. Kişisel bilgilerinizin açıklama kısmına #SEO yazarsanız, #SEO aramlarında kişiler listesinde isminiz yer alır.

     

    5. Sohbet Etmek: Bazı hashtagleri sadece eğlenmek ve sohbet etmek için açıldığını biliyoruz. Bu hashtagleri kullanarak siz de sohbetlere katılabilir, fikirlerinizi yazabilir, yeni takipçiler kazanabilirsiniz.

     

     

    Hashtag Araçları

     

    İnternette Twitter kullanımınızı kolaylaştıracak pek çok araç var. Bunlardan özellikle hashtag seçimi ve keşfi için kullanabileceğiniz en iyi 2 tanesini size tanıtmak istiyorum.

     

    Tagboard: Kolay kullanımı ve sade arayüzüyle benim favori hashtag aracım olan Tagboard sayesinde takip etmek istediğiniz bir hashtage ait Twitter, Facebook, Google+, Instagram, Vine gibi platformlarda gönderilen mesajlarıı tek bir ekrandan takip edebiliyorsunuz.

     

    Hashtags.org: 2007’de kurulan bu hashtag izleme aracı sayesinde hangi hashtaglerin yükselişte, hangilerinin düşüştğe olduğunu, o hashtag ile sohbete katılan kullanıcıları, benzer hashtagleri ve daha pek çok bilgiyi görebilirsiniz.

     

     

    #BlogYazarlığı Hashtaginde Görüşelim

     

    Blog Hocam’ın okuyucu kitlesinin tamamına yakını blog yazarı. Eminim herkesin blog yazarlığı ile ilgili söyleyecek bir şeyleri vardır. Bu yüzden Twitter’da #BlogYazarlığı hashtagini kullanarak sohbet etmeyi, ipuçları paylaşmayı, sorunlarımızı anlatmayı, blog dünyasında haberleri aktarmayı… vs. öneriyorum. Eğer katılımda bulunursanız çok memnum olurum.

     

    12 Ekim 2013 Cumartesi

    BH Okuyucularına Özel Droplink Widget

    Blogunuzun sidebarını güzelleştirecek ve işlevsellik katacak, yine BH okuyucularına özel bir eklentiyi sizlerle paylaşmak istiyorum.

     

    Bu droplink eklentisi bildiğiniz açılır menü mantığıyla çalışıyor ancak görsellik olarak oldukça orijinal ve dikkat çekici.  İmaj olarak eklediğim ve bizzat hazırladığım “Bağlı Kalın” (isterseniz değiştirebilirsiniz) yazısına tıklandığında, ziyaretçilerin sizinle bağlantı kurabileceği sosyal hesaplarla takip kanalların listesi çıkıyor. Her seçeneğin yanında da o kanala ait ikon bulunuyor.  Olabildiğince fazla kanal eklemeye çalıştım ancak kullanmadıklarınızı kaldırabilir veya yeni kanallar ekleyebilirsiniz.

     

    Blogger Droplink Widget

     

    Bu widgetı blogunuza eklemek için Blogger kumanda paneline giriş yaptıktan sonra Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu izleyin ve aşağıdaki kodları yapıştırın.

     

    <!--Blog Hocam Droplink Widget-->
    <div class="droplink">
        <h3><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1T-B3npkzjrieg1Uu03q7m4fULOyNddvDC-5MLdflbxhHTB3h4dUBEQSry-RII2Gepi6V0fufzk41_m4D9P7Xrzg8FLdDdGwfI95US2MVeaA0yy3Vezm4Pf8AXObkT6r_sOjMiN_O2vod/s178/bagli-kal.png"/></a></h3>
        <ul>
          <li class="facebook"><a href="http://www.facebook.com/bloghocam" target="_blank">Facebook</a></li>
          <li class="twitter"><a href="http://twitter.com/bloghocam" target="_blank">Twitter</a></li>
          <li class="google"><a href="https://plus.google.com/108761595756468128383/" target="_blank">Google+</a></li>
          <li class="pinterest"><a href="http://pinterest.com/bloghocam" target="_blank">Pinterest</a></li>
          <li class="instagram"><a href="http://instagram.com" target="_blank">Instagram</a>
    </li>
          <li class="linkedin"><a href="http://www.linkedin.com/" target="_blank">LinkedIn</a>
    </li> 
          <li class="youtube"><a href="http://youtube.com" target="_blank">YouTube</a>
    </li>
          <li class="rss"><a href="http://feeds.feedburner.com/bloghocam" target="_blank">RSS</a></li>
          <li class="mail"><a href="http://bloghocam.blogspot.com/p/iletisim.html" target="_blank">E-Mail</a></li>
         
        </ul>
    </div>
    <style>
    .droplink {
        width: 200px;
        position:absolute;
        -moz-border-radius-topleft: 5px;
        -webkit-border-top-left-radius: 5px;
        -moz-border-radius-topright: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-bottomleft: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-bottomright: 5px;
        -webkit-border-bottom-right-radius: 5px;}
    .droplink ul, .droplink h3, .droplink h3 a{
        padding: 0px;
        margin: 0px;}
    .droplink:hover {
        height: auto;
        background-color: #3E403D;
        border: solid 1px #3A3C39;}
    .droplink h3 a {
        text-align: center;
        width: 100%;
        display: block;
        padding: 2px 0px;
        color: #333;
        letter-spacing: 3px;
        text-decoration: none;
        text-transform: uppercase;}
    .droplink h3 a img{
        border: none;}
    .droplink:hover h3 a {
        color: #FFF;
        font-weight: bold;}
    .droplink:hover h3 a {
        position: absolute;
        left: -1px;
        top: -1px;}
    .droplink ul{
        list-style: none;   
        display: none;}
    .droplink:hover ul{
        display: block;
        margin-top: 40px;}
    .droplink li{
        display: block;}
    .droplink li a{
        padding: 5px 12px 4px 34px;   
        margin: 1px;
        background-color: #484A47;
        display: block;
        color:#FFF;
        text-decoration: none;
        -moz-border-radius-topleft: 5px;
        -webkit-border-top-left-radius: 5px;
        -moz-border-radius-topright: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-bottomleft: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-bottomright: 5px;
        -webkit-border-bottom-right-radius: 5px;
        background-repeat:no-repeat;
        background-position: 10px 3px;}
    .droplink li a:hover {
        background-color: #CC3B1F;}
    .droplink .facebook a {
        background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7qW3eca_Ciy9cEKSGYAV9STFS3oBPLnenTBK-0LJ_M2r3GnUN94Nj9ezbrnZ75_6agBRgB_duAznrmBbXRgOb8XDLPtoOtUZJISf4DS3gmJmw1iRNTtw6T-PzU2VOz8d-XUuLZyGw0eHX/s16/facebook.png");}
    .droplink .linkedin a {
        background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_7pborHXorqBiKsYFOAX3BKBhm-iQMf3vBFBL3Okj3GvWrVstckkWfbTWb3ETkg_o99ZiBYmaTsHOAnTo6J-SgMeSvTGuthUq7JjGccBPXu6dH0sbA6etQrrjJhiBnSC7EWoxPuzbmHpB/s16/linkedin.png");}
    .droplink .twitter a {
        background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjWudxMTeUo1kfrftuxCP0pgfkHH_AG5_t53vVlC2PxXlpXRRJWfBL32Td8xkROC3btXh0ttLM5CMa2vmtj7eaiRZdZlDj7OrV2q8cehO9fHRIEJUyjEeFiNshfjMslFtOku0vcqflqcRX/s16/twitter.png");}
    .droplink .google a {
        background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW2-3T-aRQO4HiKKJ0sPKscNFpa8VJoCh6Ja4vCYNENtmxca_GfeHhW0jS4evkYuRgZbkHYcPs0zdfibKpL2Ijvah81I4c5pVmWEo3kzJCDaKV5HQzBHO-FYRneQB_8ZdJo9fWpRBrFo3l/s16/gplus.png");}
    .droplink .youtube a {
        background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSW1xZXLeuQVHiaKmAaMjrw8P8pi8jc_wlRqCQOmJwVajNlUM_In-RaV9_CfL1eUHT-ATA1OaU_LiHZSX_JUNLrkP-M77ZrOTnwWoiQLij4j39xo5CBb8PGoxh-EoOXDa6tb60QKBp_-Js/s16/youtube.png");}
    .droplink .rss a {
        background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOoRlrhycTuJybZRd7fU45lNy9tYeD94dU4yEDGtEh62AJRDA6Vq2jvrS_JgvfJOWjtihL6DlOaRBhYgzdGHW5ruSa4JKxD3L0_39b4vwOY8e5D5SqXnzRL5G5XUxt0DnJweK2jY1D9AoK/s16/rss.png");}
    .droplink .pinterest a {
        background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT1TRVga6zxCdvPO31VM5FVUNnyNZBb2k2OJH_2M5R27VCjdmvFwnH0lT0E9iFzxT5KsIrkT3OITwKUXkx8vRddZ4Sowsf0CRY2NLiWXhBc1GH-GQuNlPiel-T3RQkOGcR03GMtIeuCkYg/s16/pinterest.png");}
    .droplink .instagram a {
        background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBq-DwR7F5Ktlb29rrV4qxpNSIvhoK4VsLHBI4_6h_wUvSQLq2iFJjRA27ostnagfkRUPqn_RuLyW0KZU_143Te9YU9HzXNRo11H-kkwN4kEtLgbgtiWVI8Jn7QY6GV1JYrE-e5NTH6Qcq/s16/instagram.png");}
    .droplink .mail a {
        background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1HjmEg9yJbYOXcv9wZt_xAyYMnhdE9_oi6Ub7VZnAsCT-uVsChstjuyPPgdyPEFs4GlkZaEGyNvvTQq1OiCl090OOFk0emtsg6l94ckvEFLUeHEJ6Q2A9znzZtHFrRSuMGYFx1ZaxWRD-/s16/email.png");}
    </style>
    <!--Blog Hocam Droplink Widget-->

     

    Düzenlenecek yerler:

    Kodlarda kırmızı renkle gösterdiğim link “Bağlı Kalın”  ikonuna ait link. Buraya kendi hazırlayacağınız “takip et, iletişim kur, sosyalleşelim… vb” şeklindeki ikonların linkini koyabilirsiniz. Mavi renkle gösterdiğim yerlere ise kendi hesap adreslerinizi yazcaksınız.

     

    Listeden bir öğeyi kaldrmak:

    Yazının başında da belirttiğim gibi olabildiğince fazla kanal eklemye çalıştım ancak siz bunların hepsini kullanmak istemeyebilirsiniz. Listeden kaldırmak istediğiniz öğe hangisiyse o öğenin <li> ve </li> kodları arasında bölümünü silmeniz yeterli. Örneğin bir Youtube kanalınız yoksa ve YouTube öğesini listeden kaldırmak istiyorsanız şu kodları silmeniz yeterli olacaktır:

    <li class="youtube"><a href="http://youtube.com" target="_blank">YouTube</a>
    </li>

     

    Listeye yeni öğe eklemek:

    En çok kullanalan sosyal ve iletişim kanallarını eklemeye çalıştım ama bunların dışında bir öğe de eklemek isteyebilirsiniz. Bunu 2 adımda gerçekleştireceksiniz. Bir örnekle anlatırsam daha alaşlır olacak sanırım. Flickr hesabımızı listeye eklemek istediğimizi düşünelim.

     

    1. Adım: Öncelikle kodların HTML bölümünde </ul> taginin hemen üstüne Flickr’ın HTML kodunu şu şekilde ekleyeceğiz:

     

    <li class="flickr"><a href=http://flickr.com/kullanıcıadı target="_blank">YouTube</a>
    </li>

     

    2. Adım: Şimdi de listedeki Flickr öğesinin yanında gösterilecek ikonu tanıtacağız. Bunun için </style> taginin hemenüzerine şu kodu ekliyoruz:

     

    .droplink .flixkr a {
        background-image:url(http://flickr.png);}

     

    İşlem bu kadar.

     

    Bu widgetı sadece sosyal kanallar için kullanmak zorunda değilsiniz. Farklı amaçlarla da kullanabilirsiniz. Örneğin favori sitelerinizi listeleyebilir, blogunuzun kategorilerini listeleyebilir veya blogunuzun sabit sayfalarını bu menüde toplayablirsiniz.

     

    Kafanıza takılan soru veya bir öneriniz olursa yorum bölümünden sorabilirsiniz. Aşağıdaki sosyal paylaşım butonlarını kullanarak yazıyı arkadaşlarınızla paylaşırsanız memnun olurum.