21 Mart 2014 Cuma

Teknoloji Blogu Açmanızı Tavsiye Etmiyorum

Bu yazı, Aorhan.com’un sahibi Ahmet Orhan tarafından Blog Hocam için yazılmıştır.

Başlıkta yazıldığı gibi "Teknoloji Blogu Açmanızı Tavsiye Etmiyorum" diyorum ve neden bunu söylediğimi anlatmaya başlıyorum. Blogların popülerleşmesinden sonra kategori bazında en fazla açılan blog kategorilerinden birisi şüphesiz teknoloji bloglarıdır. Çünkü işin aslında yatan gerçek, blog açan interneti seven, meraklı kişiliktir ve günümüzün en çok merak edilen olayları teknoloji sayesinde olmaktadır. İnternet'te sosyal medyaların var olması, yeni tanıtılan ürünlerin (iphone, galaxy vb.) sanki Ay'a uzay mekiği gönderilmesi gibi lanse edilmesinden meraklar giderek artmaktadır.

teknoloji-blog
İşte hal böyle olunca bu meraklı şahsiyetler blog açmak ister ve konusuda bellidir hem merak ettiklerini öğrenecek hem de bunları anlatarak rahatlayacaktır :) Hal böyle olunca sincapteknoloji,com, hiphizliteknoloji.com, adilazimdegil.com, asiteknoloji.com gibi saçma sapan alan adlarıyla yola çıkacak 2-3 makale yazacak sonrasında kopyala-yapıştır ve son söz "orda bir blog var uzaktaaaa, o blog bizim blogumuzdurrrrr, girmesekte, yorum yazmasaktaaaa o blog bizim blogumuzdurrrr lay lay layyy layaa" der gibi uzakta terk edilerek çöp blogların arasına yer alacak.

Peki buna iten nedenler nedir ? Bu kadar blog niye çöp olma riski veya kaderiyle karşı karşıya bunu sorduğumuzda sebepleri basitçe altta sıraladıklarımdır:

1- Blog açma hevesinin bitmesi,

2- Ziyaretçi gelmemesi,

3- Yazmanın görünenden daha zor olduğunun öğrenilmesi,

4- Host derdi, spam derdi, hack derdinin ortaya çıkması,

5- Web tasarıma merak salmak,

6- Para kazanma içgüdüsüyle açılıp eldeki parayı da kaptırmak
ve dahası.

İşte bunlar yüzünden belki senede benim tahminimce Türkçe teknoloji blogu olarak 1000'e yakın belki de fazlası blog çöp oluyor.

Gerekçeli nedenlerden en çoğu ya ziyaretçi uğramaması ya da iş güçtür ki maalesef bende ilk açtığım yıllardaki gibi yazamıyorum. Yazamamak hiç yazmamaktan veya kapatmaktan iyidir ama kapatmak işte en kötüsü.

Ziyaretçi çekememenin de nedenleri var ve bu nedenlerin çoğunu sizler oluşturduğunuzun farkında değilsiniz. Tabi herkes bilerek bir şeye başlaması zor zamanla öğreniliyor ama araştırmadan bu yola baş koymamak gerekir bana göre.

İnsanlar o kadar teknolojik alet içinde her yeri takip edebiliyor ve bulduğunuz ziyaretçiyi kaçırmamak da sizin elinizde. Bana göre teknolojik site açmak şu dönemde hata, olanlar da sitelerini ileriye nasıl taşır ya da illa ben açacağım ama açarken neye dikkat etmeliyim diyorsanız bu konuyu da bir sonraki "Teknoloji Blogu Açarken Neler Yapılma(ma)lı" yazısında sizlere bilgi ve tecrübelerimi aktaracağım.

Esen kalın...

 

Yazar Hakkında: aorhan.com'da teknoloji blog yazarlığı yapmakta olan Ahmet Orhan, blog yazarlığına 2006 yılında başlamış ve gerek wordpress temaları gerekse blogculuk konusunda edindiği bilgi ve tecrübelerini teknolojiyle beraber sitesinde sunmaktadır.

Blog: aorhan.com
Mail: muh.aorhan@gmail.com

19 Mart 2014 Çarşamba

Windows 8 Metro Stil Navigasyon Menü

Metro stil Navigasyon Menü

Eğer web sitenizin navigasyon menüsünden sıkıldıysanız? Windows 8 Metro Stili Menüyü kullanabilirsiniz. Şık ve zarif tasarımıyla dikkat çeken bu Menü Windows 8 navigasyon arayüzünden esinlenilmiştir. Herkesin Microsoft Windows 8 veya Windows akıllı telefonları yeni serisinin arayüz deneyimi varsa, o zaman bu METRO arayüzü menü onlar için yeni bir şey değil. Animasyonlu butonları, arka plan resimlerini kendiniz ayarlayabildiğiniz kullanıcı dostu güzel bir eklenti.



1. Adım: CSS Style kodlarını Ekleme :


  • Blogger panelinize giriş yapın Şablon HTML'yi Düzenle
  • Ctrl+F yardımı ile ]]></b:skin>  kodunu aratıp bulun ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.
  • Şablonu Kaydet diyip çıkın.


.MEFmetromenu{width:960px;margin:10px auto;font-family:'Oswald',Arial,sans-serif;}
@media screen and max-width:960px {
.MEFmetromenu{position:relative;width:100%;}
}
.karo-mf{text-align:center;cursor:pointer;width:90px;height:90px;}
.karo-mf a{display:block;padding-top:12px;text-decoration:none;}
.karo-mf img{padding-bottom:5px;height:48px;width:48px;position:relative;display:block;margin:0 auto;}
.karo-mf span{font-size:15px;padding-bottom:4px;display:block;}
.karo-mf-large{width:190px;height:90px;text-align:center;cursor:pointer;}
.karo-mf-large a{display:block;padding:21px;text-decoration:none;}
.karo-mf-large img{vertical-align:middle;position:relative;width:48px;height:48px;margin:0 auto;}
.karo-mf-large span{font-size:15px;vertical-align:middle;display:inline;}
.karo-mf-extralarge{text-align:center;cursor:pointer;width:190px;height:190px;}
.karo-mf-extralarge a{display:block;padding-top:52px;text-decoration:none;}
.karo-mf-extralarge img{padding-bottom:22px;height:80px;width:80px;position:relative;display:block;margin:0 auto;}
.karo-mf-extralarge span{font-size:15px;padding-bottom:14px;display:block;}
.karo-mf,.karo-mf-large,.karo-mf-extralarge{-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;}
.karo-mf:hover,.karo-mf-large:hover,.karo-mf-extralarge:hover{-webkit-transform: scale(0.92,0.92);-moz-transform: scale(0.92,0.92);-o-transform: scale(0.92,0.92);-ms-transform: scale(0.92,0.92);transform: scale(0.92,0.92);}
.shadow-beyaz:hover{box-shadow:0 0 6px 3px #fff;-webkit-box-shadow:0 0 6px 3px #fff;-moz-box-shadow:0 0 6px 3px #fff;-o-box-shadow:0 0 6px 3px #fff;-ms-box-shadow:0 0 6px 3px #fff;}
.shadow-mavi:hover{box-shadow:0 0 6px 3px #38D1F7;-webkit-box-shadow:0 0 6px 3px #38D1F7;-moz-box-shadow:0 0 6px 3px #38D1F7;-o-box-shadow:0 0 6px 3px #38D1F7;-ms-box-shadow:0 0 6px 3px #38D1F7;}
.shadow-yesil:hover{box-shadow:0 0 6px 3px #AACA37;-webkit-box-shadow:0 0 6px 3px #AACA37;-moz-box-shadow:0 0 6px 3px #AACA37;-o-box-shadow:0 0 6px 3px #AACA37;-ms-box-shadow:0 0 6px 3px #AACA37;}
.shadow-kirmizi:hover{box-shadow:0 0 6px 3px #E81750;-webkit-box-shadow:0 0 6px 3px #E81750;-moz-box-shadow:0 0 6px 3px #E81750;-o-box-shadow:0 0 6px 3px #E81750;-ms-box-shadow:0 0 6px 3px #E81750;}
.shadow-siyah:hover{box-shadow:0 0 6px 3px #444;-webkit-box-shadow:0 0 6px 3px #444;-moz-box-shadow:0 0 6px 3px #444;-o-box-shadow:0 0 6px 3px #444;-ms-box-shadow:0 0 6px 3px #444;}
.renk-mavi{background:#00BBE2;}
.renk-mavi-2{background:#2C84EE;}
.renk-koyumavi{background:#044E94;}
.renk-meneksekirmizi{background:#781766;}
.renk-kirmizi{background:#E51400;}
.renk-kirmizi-2{background:#E81750;}
.renk-pembe{background:#FF539B;}
.renk-mor{background:#D02090;}
.renk-turuncu{background:#FB8F02;}
.renk-turuncu-2{background:#F60;}
.renk-turuncu-3{background:#DD5F37;}
.renk-mercankirmizisi{background:#CD5B45;}
.renk-yesil{background:#67B239;}
.renk-yesil-2{background:#96BF01;}
.renk-koyuyesil{background:#016C38;}
.renk-zeytinyesili{background:#990;}
.renk-cimenyesili{background:#CDCD00;}
.renk-koyukirmizi{background:#5F0000;}
.renk-gold{background:#FEE9AE;}
.renk-sari{background:#F7D100;}
.renk-siyah{background:#000;}
.renk-dumanrengi{background:#F5F5F5;}
.sola-daya{float:left;}
.saga-daya{float:right;}
.beyaz-text{color:#fff;}
.siyah-text{color:#1e1e1e;}
.gradient{background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3)));background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%);background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);background: linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);}
.ara-bosluk{margin:5px;}

2. Adım: METRO Menüyü Ekleme:


  • Şimdi tümüyle bu menüyü yerleştirmek isteyen kişiye bağlıdır. Sadece ana başlığı altında eski menünüzün yerinde olacak şekilde eklenmesi ideal bir yer. Ama Menüyü sitenizde görmek istediğiniz her yere aşağıdaki kodlamayı kopyalayıp yapıştırabilirsiniz. İsterseniniz alttaki footer bölümüne ekleyebilirsiniz. İsterseniz normal menü, isterseniz sosyal medya menüsü olarak kullanabilirsiniz.

  • <div class="MEFmetromenu">
    <div class="karo-mf-extralarge renk-meneksekirmizi shadow-siyah ara-bosluk sola-daya MEFMetroMenu">
    <a href="#" class="gradient">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwuFXBtW_43gXFa7-Kz_WZ72BVKhBJkFW8L-DnaQf7uC0rhSEndxb_Cl0G6sY3ccjii8GwP_9JBPxLeCgdZSnwwJvafyV4S2q9j1CZPrW4UKYirG2DYkn25jUEPNITvGLRSbfAg7Sq6DI/s1600/home.png" border="0" alt="home" />
    <span class="beyaz-text">Ana Sayfa</span>
    </a>
    </div>
    <div class="karo-mf-large renk-mercankirmizisi shadow-siyah ara-bosluk sola-daya MEFMetroMenu">
    <a href="#" class="gradient">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Z72DSLgyNWU65yP2JaLO4KAHw1NLv5CCme-R5cdrEYjK4N3WkXmhzBdn-SfsJZNazZ3nzoqPrrmPRAQKv9wmC6hSSCxGxbaWERKyCVKIRQqtHW5dq8LclT-9aHQQWcizWGRoQpahI-w/s1600/messanger.png" border="0" alt="messanger" />
    <span class="beyaz-text">Hakkımızda</span>
    </a>
    </div>
    <div class="karo-mf renk-mor shadow-kirmizi ara-bosluk sola-daya MEFMetroMenu">
    <a href="#" class="gradient">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMnXfntCDuf6IaGwqb6ORKFQSQu1ZfgTJKC9GORixVi8ra95V4XKpkvug9MnStZohDRBS6Ch93odW32L4rAD7lXzHYzANvQBlj1QjW5dJtRjPVtFp1gbhtb_JOC5OaYAnQEZZyoicKtx0/s1600/rss.png" border="0" alt="rss" />
    <span class="beyaz-text">RSS Feeds</span>
    </a>
    </div>
    <div class="karo-mf-large renk-turuncu shadow-siyah ara-bosluk sola-daya MEFMetroMenu">
    <a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxw0hSCtTwfWJim-WJZUiFqhVV2i8L_Dl3gkyoTQqyLj1CG_IIKjqvLJaCyeG-AORH3bQN8mU9sX7p9Et0sZ2ygHtMZMkbIqN2JwAA4kJ9ieyWAu0tVROQpEbhXQGmX7RJGwKImxvtYIA/s1600/search.png" border="0" alt="search" />
    <span class="beyaz-text">Arama</span>
    </a>
    </div>
    <div class="karo-mf renk-koyukirmizi shadow-kirmizi ara-bosluk sola-daya MEFMetroMenu">
    <a href="#" class="gradient">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWl9WxqBq5aRtiS-OgqN9HK9C8g13_QmSVj-dI5H17dUSlzoeJknc7DNHEfMCe2PVgKRhQwmYb7tb7Ujc9X9owQO-uOrfO-7SsReRxjrKTI4CcO-gSZBSB36qrz4pTfLRQIrxCCMpVoZo/s1600/mail.png" border="0" alt="mail" />
    <span class="beyaz-text">İletişim</span>
    </a>
    </div>
    <div class="karo-mf renk-siyah shadow-siyah ara-bosluk sola-daya MEFMetroMenu">
    <a href="#" class="gradient">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE1WXXGyiunZk39tW_vjNrGfoNQsN6b-Odla1Xt3C0FD18XQoTm0_lgRRw-Zp1bMhkbgAR8klpUI11RF2u1nMZ-HUz0OMtFIfk85fuX_VZg8601CE2K7xUzs1YEcJiKQ-RVS7gaHP4dwc/s1600/help.png" border="0" alt="help" />
    <span class="beyaz-text">Yardım</span>
    </a>
    </div>
    <div class="karo-mf renk-kirmizi shadow-kirmizi ara-bosluk sola-daya MEFMetroMenu">
    <a href="#" class="gradient">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3MiFQNiPf6XgrQvaUEjf2wLDBUsa5kocKfteRECzo_aj2rC9gAaYqauO7GLhhcycfI3KL8AaEOMcDEybNkgxDNe3aHCMsGgxtpbtkG1cNJELNvY6Vf9qMW6HwWRu4pt1FuksMJTbFrYI/s1600/youtbe.png" border="0" alt="YouTube" />
    <span class="beyaz-text">YouTube</span>
    </a>
    </div>
    <div class="karo-mf renk-koyumavi shadow-mavi ara-bosluk sola-daya MEFMetroMenu">
    <a href="#" class="gradient">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPk-JAyuQODLa2S0H7ak5R53W6gj7nQb2j5HcGdDqarNZWX0gghxFDxt7oNm6BkM0pVMhM_YB3mjEv2-Vtc1WGE9Nx8lpeskyMx4i0D4X7I9cDrIJBCXiGRO0t18qlmY8B78acHvi2fwM/s1600/face.png" border="0" alt="Facebook" />
    <span class="beyaz-text">Facebook</span>
    </a>
    </div>
    <div class="karo-mf-large renk-mavi shadow-mavi ara-bosluk sola-daya MEFMetroMenu">
    <a href="#" class="gradient">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggvKowkRuysmv-Zr0qNcoVQ-eNSh9vUVWyTP1C_uOAww35L5DJj0iqtHaVyhkmyC9S-epXycvRtjnbw3-tFXEOc8jm-vxscvkP5UXFUSOIjza9wnQ0z3sNVKrEofLpWB5e1tT0cZOOIoM/s1600/photo.png" border="0" alt="photo" />
    <span class="beyaz-text">Fotoğraflar</span>
    </a>
    </div>
    <div class="karo-mf renk-zeytinyesili shadow-yesil ara-bosluk sola-daya MEFMetroMenu">
    <a href="#" class="gradient">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjS1DScxfreGGsTRdHHx1ZzumShlgg0N23Pwuf3uYIN-nRzDxJ8ITXHh4vYKkKvwxU2om07TzbWJS67S5QkPIgt_MUXfwYFi7ua7R0Y21WIUtTsYhUrno0dbpo_UbQtN63O5Q3e2qe2Ko/s1600/music.png" border="0" alt="music" />
    <span class="beyaz-text">Müzik</span>
    </a>
    </div>
    <div class="karo-mf-large renk-mavi-2 shadow-mavi ara-bosluk sola-daya MEFMetroMenu">
    <a href="http://MeftunMede.Blogspot.com" class="gradient">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjnC7Yn4agJNtujlM7_ETk9gZNTBv9S1tC1ovCcVxaGGrC36yAyO2HfCgUz2RDQuabJFIBgNmOvb-NlVg31QzAyy9L7y7gKLFTvZr6AQpvjztZzo5lXGSd2I5t1DC985hzZEGJxkgyWfc/s1600/MEF.png" border="0" alt="Meftun" />
    <span class="beyaz-text">Meftun MEDE</span>
    </a>
    </div>
    </div>

    3. Adım: Özelleştirme:


  • 1. Adımdaki eklediğimiz stil kodlarındaki renk bölümünden menünüzün buton rengini, gölge rengini ayarlayabilirsiniz. Hepsi anlaşılır ve Türkçe yazılmıştır.
    Örneğin 2. adımdaki kodlardan Ana Sayfa butonu "renk-meneksekirmizi", buton gölgesi "shadow-siyah", buton boyutu ekstra büyük "karo-mf-extralarge"; Bunu değiştirmek için "renk-cimenyesili", buton gölgesi "shadow-pembe", buton boyutu büyük "karo-mf-large" yada kücük "karo-mf" olarak değiştirebilirsiniz. Bu bölümleri kırmızı renkle işaretledim.
  • Mavi rekle işaretlediğim ( # ) yerlere butona basıldığında açılacak sayfa HTML'nizi yazın.
    Örnek: <a href="http://örnek.com/örnek.html" class="gradient">
  • Buton arka plan resimlerinizide hemen altındaki 2. adımdaki <img src="Buraya..." border="0" alt="help" /> ekleyebilirsiniz
  • Son olarak <span class="beyaz-text">Arama</span> beyaz-text, siyah text olmak üzere rengini ve sayfa link ismini yazın.

  • <div class="buton boyutu buton-rengi gölge-rengi ara-bosluk sola-daya MEFMetroMenu">
    <a href="Link url'nizi buraya" class="gradient">
    <img src="Resim url'niz" border="0" alt="home" />
    <span class="beyaz-text">Sayfa adı</span>
    </a>

    Biraz karışık gibi görünüyo ama öyle değil. Gerçekten basit ve güzel bi menü. Windows 8 görünüm metro stil Navigasyon menüsü web sitenize entegre edilmiştir.
    Not olarak: Bu menü HTML ya da CSS yani WordPress, Joomla ve destekleyen herhangi Platformu kullanılabilir. Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

    15 Ücretsiz Online Fotoğraf Editörü

    Görseller blog yazarlığının her zaman önemli bir parçası olmuştur. Yazı içerisine eklenen fotoğraflar ve blog tasarımında kullanılan grafikler buna en güzel örnektir. Peki blogumuzda kullanacağımız resimleri düzenlemek gerektiğinde illa Photoshop veya GIMP benzeri profesyonel bir programa mı ihtiyacımız var? Tabi ki hayır.

     

    Yaklaşık 2 yıl önce dönemin en iyi 5 resim düzenleme aracını derlediğim bir yazı paylaşmıtım fakat aradan geçen 2 yılda bu araçlardan bazıları kapandı. Ayrıca yeni ve çok kullanışlı yeni araçlar da kullanıma açıldı. Bu yüzden daha kalabalık ve daha güncel bir liste yapma gereği duydum.

     

    1. Pixlr

     

    pixlr

     

    Bu araç için Photoshop’un online ve ücretsiz versiyonu diyebiliriz. Mobil uygulamalarının da olması önemli bir avantaj. Aracı kullanmak için Flash plug-in’in bilgisayarıınızda yüklü olması gerekir. Pixlr’ın blogunda, araç kullanılarak yapılan çalışmaların örneklerini görebilir ve kendinizi geliştirebilirsiniz.

     

    2. BeFunky

     

    befunky

     

    Fotoğraflarıma biraz daha tarz katmak istiyorum ve kolajlar yapmak istiyorum diyenler için harika bir alternatif. Yine mobil uygulamaları olan Be Funky, kullandıkça kendini size bağllayacak bir araç.

     

    3. iPiccy

     

    iPiccy

     

    Çok amamtör bir giriş sayfasın ve arayüze sahip olmasına rağmen sunduğu özellikler için oldukça profesyonel diyebilirim. Klasik renk ve düzenleme araçlarının yanı sıra, layerlarla, framelerle ve texture’larla da çalışabiliyorsunuz. Profil fotoğrafları için oluşturulan özel sekmeyi de mutlaka denemeniz gerekir.

     

    4. PicMonkey

     

    picmonkey

     

    PcMag tarafından 2013’ün en 100 web sitesi arasında gösterilen PicMonkey, online resim düzenleme piyasasının 1 numarası diyebiliriz. Bazı özellikleri kullanmak için pro üyelik gerekse de ücretsiz sunulan özellikleri de oldukça kaliteli. Buradan ücretsiz Picmonkey derslerini görebilirsiniz.

     

    5. FotoFlexer

     

    FotoFlexer

     

    Bu aracın en güzel özelliklerinden biri Facebook, Picasa veya online kaynaklardaki fotoğrafları da düzenleyebiliyor olması ve Türkçe dil desteğinin bulunması. Layerlar dahil, standart tüm resim düzenleme komutlarını Türkçe kullanmak isterseniz FotoFlexer’ı deneyebilirsiniz.

     

    6. LunaPic

     

    LunaPic

     

    Reklamların çokluğu sinir bozucu olsa da, aracın sunduğu efektler ve animasyonlar sayesinde bu listeye dahil ettiğimi söyleyebilirim. Animasyon seçeneklerinden tek tıklama ile resimlerinizi hareketli hale getirebiliyorsunuz.

     

    7. Fotor

     

    fotor

     

    Çoğu araçta yer alan standart özelliklere sahip olan Fotor’un en güzel yanlarından biri düzenlediğiniz resimleri sosyal medya hesaplarınıza direkt atarabilmeniz. Fotor’un blogunda öğretici dersler ücretsiz olarak paylaşılmakta.

     

    8. Phixr

     

    Phixr

     

    Geleneksel bir fotoğraf düzenleme aracı olan Phixr, birkaç efekt dışında diğer raçlarla baş edecek kadar özelliğe sahip olmasa da, blogunda paylaşılan dersleri ve çalışmaları görünce bu listeye dahil ettim. Siz de bu anlatılanları okuyarak ortaya güzel işler çıkarabilirsiniz.

     

    9. Ribbet!

     

    Ribbet

     

    Tek tıklmayla resimlerinizde hoş değişikler yapabileceğiniz bir araç fakat en güzel özelliklerini kullanmak için premium üyelik istiyor ne yazık ki. Yine de temel araçlar, stickerlar ve frameler fena değil.

     

    10. FreeOnlinePhotoEditor

     

    freeonlinephotoeditor

     

    İsmi gibi kendi de açık ve net olan bir resim düzenleme aracı. Hiçbir arayüz yüklemesine plugine gerek kalmadan açılıyor ve temel düzenleme işlemlerinizi yapabiliyor bu araç. Diğer alternatiflerin yanında zayıf kalsa da işinizi çabucak halledebilirsiniz.

     

    11. Aviary

     

    aviary

     

    Mobil cşhazlar için geliştirilmiş bir araç olan Aviary ile saniyeler içinde harika fotoğraflar oluşturabiliyorsunuz. Filtreleri, çerçeveleri, stickerları ve efektleri ile mobil cihazlarınızın vazgeçilmez aplikasyonlarından biri olabilir.

     

    12. PhotoCat

     

    PhotoCat

     

    Bayanlar bu aracı kullandıktan sonra bildikleri diğer tüm resim editörlerini unutacaklar. Kolaj ve DIY çalışmaları oluşturmak için onlarca hazır şablonu, cilt ve yüz düzeltmek için gelişmiş araçları, eğlenceli arayüzüyle bayan bloggerlar için ideal.

     

    13. Pho.to

     

    Pho-to

     

    Buna bir resim düzenleme aracından çok, resimi oluşturma aracı diyebiliriz. Kendi fotoğraflarınızı kullanarak eğlenceli ve yaratıcı montajları kolayca yapabiliyorsunuz. Blogundaki örnekleri ve buradaki ipuçlarını inceleyerek daha profesyonel çalışmalr yapabilirsiniz. Üstelik bu aracı Türkçe kullanabiliyorsunuz.

     

    14.  PhotoFunia

     

    PhotoFunia

     

    Yine Pho.to gibi resimleri düzenlemekten çok eğlenceli ve orijinal montajlar yapmaya yarayan bir araç. Özel efektleri frameleri sayesinde çok ilginç çalışmalar yapabilirsiniz.

     

    15.  Picadilo

     

    Picadilo

     

    Gelişmiş retouch efektleriyle insan ve yüz fotoğrafları için ideal bir araç gibi gibi gözükse de blogundaki örneklerden de yola çıkarak kendinize güzel kolajlar hazırlayabilirsiniz.

     

     

    Son sözler

     

    Listeyi oluştururken güncel ve gerçekten işe yarar araçlar olmasına dikkat ettim. Bu araçlarla grafik programlarına ihtiyaç duymadan, resim düzenleme işlerinizi yapabilirsiniz. Üstelik program yükleme, güncelleme, satın alma gibi dertleriniz olmaycak.

     

    Bilmediğim ya da henüz keşfetmediğim, sizin kullandığınız ve önerdiğiniz bir online fotoğraf düzenleme aracı varsa lütfen yorum bölümünden paylaşın.

    17 Mart 2014 Pazartesi

    Bloglovin Kullanma Kılavuzu

    Google Reader’ın kapatılmasıyla blogları tek bir yerden kolayca takip etmeyi sağlayan çevrimiçi RSS okuyucular arasında Google Reader kullanıcılarını kapma savaşı başlamıştı. Bu savaşın bana göre 2 galibi oldu. Birincisi Feedly, ikincisi ise bu yazıda tanıtacağım Bloglovin.

     

    Bloglovin Nedir? Ne İşe Yarar?

     

    Bloglovin, takip etmek istediğiniz blogları tek bir yerden kolayca takip etmenizi sağlayan, ayrıca yeni bloglar keşfetmenizi sağlayan bir platformdur. Takip etmek istediniz blogları Bloglovin sayfanıza eklersiniz. Bloglovin sizin için o blogun beslemelerini otomatik kontrol eder ve yeni bir yazı olduğunda okumanız için size hatırlatır. Bildiğimiz RSS okuyucuların biraz daha sosyal hali diyebiliriz sanırım :) Üstelik Bloglovin’i sadece bilgisayarınızda değil, iPhone, Android ve iPad’inizde de kullanabilirsiniz.

     

    Bloglovin’e Nasıl Kayıt Olunur?

     

    Bloglovin’e kayıt olmak için buraya gittikten sonra iki seçeneğiniz var. İsterseniz direkt Facebook hesabınızı kullanabilir, isterseniz de Sign up with email linkine tıklayarak e-posta hesabınızla üye olabilirsiniz.

     

    bloglovin kayıt

     

    - Kayıt formunu doldurup, e-mail adresinize gelen aktivasyon linkine tıkladıktan sonra, takip etmek için 3 adet blog seçmeniz istenecek. Takip listenizi daha sonra istediğiniz gibi düzenleyeceğiniz için bu adımda vakit harcamanıza gerek yok aslında. Önerilen blogları seçebilir veya arama kutusuna herhangi bir blog adı yazabilirsiniz (örneğin bloghocam). 

     

    - 3 adet blogun yanındaki Follow butonlarına tıkladıktan sonra Next diyerek bir sonraki adıma geçebilirsiniz. Bu aşamada size başka bloglar  önerilecek. İlginize çekenleri takip edebilir veya Next butonuna basarak bu aşamayı geçebilirsiniz.

     

    - Sıradaki adımda Facebook’taki arkadaşlarınıza bağlanarak onları takip etmeniz için bir seçenek sunulacak. Sayfanın altındaki next butonuna tıklayarak bu adımı da geçebilirsiniz.

     

    - Son olarak, Bloglovin’de takip ettiğiniz bloglarda yeni bir yazı olduğunda sie haber vermesini sağlayan tarayıcı uzantısını yükleyip yüklemeyeceğiniz sorulacak. Şart değil ama isterseniz yükleyebilirsiniz. Eğer yüklemek istemiyorsanız Not now linkine tıklayabilirsiniz.

     

    Bloglovin Nasıl Kullanılır?

     

    Bloglovin’e kayıt işlemini tamamladıktan sonra aşağııdaki gibi bir panelle karşılaşacaksınız. Bu, sizin Bloglovin sayfanız. Bu sayfayı nasıl kullanabileceğinizden bahsedelim.

     

    bloglovin kullanımı

     

    Gördüğünüz gibi Bloglovin’in sade ve kullanıcı dostu bir arayüzü var. Sayfadaki ana bölümlerini numaralandırarak açıklamaya çalışayım.

     

    1  Bu bölümde takip ettiğiniz blogları ve kaç adet yeni yazı olduğunu görebiliyorsnuz. Takip listenize yeni bloglar eklemek isterseniz, buradaki Follow more blogs linkine tıklayabilirsiniz. Friend activity ise işin sosyal kısmı. Bloglovin’de sadece blogları değil, insanları da takip edebiliyorsunuz. Bu bölümden arkadaşlarınızın sayfalarındaki aktiviteleri görebilirsiniz.

     

    2  Bu bölüm feed sayfanızdaki blogları yönetmek için. Feed sayfanızdaki yeni yazıların özetlerine bakıp, okumaya değer bulmadığınızda Mark all as read butonuna basarak bu yzıları okundu olarak işaretleyebilirsiniz. Okundu olarak işaretlenen yazılar feed sayfanızdan kalkar. Yanındaki çark ikonunda ise yazıları sıralama seçenekleri vardır. Eskiden yeniye, yeniden eskiye, resimler büyük veya küçük gözüksün gibi seçenekleri seçebilirsiniz.

     

    3 Bu bölüm, anlyacağınız üzere yeni yazının olduğu kutu. Bu kutuda blog ismi, yazı başlığı, yazının belli bir kısmı ve yazıdaki görsellerden biri yer alır. Bu bilgiler yazıyı okuyup okumayacağınıza karar vermek için yeterlidir. Eğer yazıyı okumaya karar verip başlığa tıklarsanız, Bloglovin penceresinde direkt o bloga ve o yazıya bağlanırsınız.

     

    4  Bu bölümde yazının ne zaman yayınlandığı, kaç Bloglovin kullanıcısının beğendiği gibi bilgilerle birlikte yazıyı beğenmeniz veya sosyal alarda paylaşmanız için gerekli butonlar da yer alır. Ayrıca Mark as read yazan linke tıklayarak adece o yazıyı okundu olarak işaretleyebilirsiniz.

     

    Bloglovin Widgetları Nasıl Eklenir?

     

    Bloglovin’in widgets sayfasında, blogunuzda kullanabileceğiniz buton, sayaç ve ikon widgetları var. Blogunuza eklemek istediğiniz widgetın altındaki Get this icon linkine  tıkladıktan sonra açılan iarama kutrusuna blogunuzun ismini yazın ve bulun. Ardından AddWidget butonuna tıklyarak veya verlen kodu Blogger kumanda panelinden Yerleşim > Gadget ekle > HTML/JavaScript yolunu takip ederek blogunuza ekleyin.

     

    Blog Hocam’ı Bloglovin’de Takip Edin

     

    Eğer Blog Hocam’da yayınlanan yeni yazıları Bloglovin kolaylığıyla takip etmek isterseniz buraya tıklayarak Blog Hocam’ı takip listenize ekleyebilirsiniz.

    16 Mart 2014 Pazar

    Blogger İçin renkli JQuery Menü

    Renkli JQuery Menu

    Bugün hem yatay hem de dikey liste görünümü ile, Blogger için renkli JQuery Navigasyon Menüleri sizlerle paylaşmak istiyorum. Bu menü fare üzerindeyken her sekme için renk değiştirir. Düzgün ve temiz geçiş efektleri üretmek için basit bir JavaScript işlevleri kullanır. CSS Drop Down Açılır Menü Eklentisi gibi Geleneksel dikey açılan listeden menü öğeleri yerine alt görüntüleme, birbirleriyle tek bir satır içine sığacak şekilde hizalanmıştır.Diğer menülerin aksine, bu eklenti tasarım problemi olmadan herhangi bir Blogger şablonuna uygundur. Blogunuzun üst kısmında konumlandırılmış okuyucularınızın ilgisini çekecek bir menü.Kurulumu son derece kolay ve menü tüm tarayıcılarda çalışıyor: IE7+, Safari, Chrome, Mozilla ve Opera. Blogunuzun varolan menüsünden memnun değilseniz veya sıkıldıysanız bu menüyü kolayca uygulayıp kullanabilirsiniz.


    Blogger'a eklemek için:

    1. Blogger > Şablon
    2. Şablonunuzun yedeğini alın
    3. HTML'yi Düzenle > tıklayıp devam edin
    4. <head> kodunu bulun ve hemen altına bu komut dosyasını yapıştırın:
    <script src='http://meftun-mede.googlecode.com/svn/trunk/Meftun_Jquery_rekli_menu.js' type='text/javascript'></script>

    5. Şimdi body kodunu bulun.

    body {
    ----
    ---
    )

    Bu sınıfın içine aşağıdaki değerleri yapıştırın:

    body {
    margin:0px;
    padding:0px;

    ---
    ---
    }

    6. Bir sonraki arama:

    <body>

    veya bu:

    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

    7. Hemen altına aşağıdaki sıkıştırılmış kodu yapıştırın:

    <style>
    .MEF-Nav-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfCTLoPwUkp91VDmOntjajAbAK2Or7R1ejUKqtnHHNjjZ-m3NwW7-Gw-yeYUKnmniICGOcKaz4qMrKDGm5DRGhmrn_VFZA0-0Jt85-0X4Rvs8KoPxOsBywCdBJeqgd6OxyFgDjOp6QrQg/s400/menu-bgd.png) bottom left repeat-x;position:relative;border:1px solid #cfcfcf;margin:0;padding:0;}
    ul#nav{width:960px;border-left:1px solid #cfcfcf;border-right:0 solid #cfcfcf;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfCTLoPwUkp91VDmOntjajAbAK2Or7R1ejUKqtnHHNjjZ-m3NwW7-Gw-yeYUKnmniICGOcKaz4qMrKDGm5DRGhmrn_VFZA0-0Jt85-0X4Rvs8KoPxOsBywCdBJeqgd6OxyFgDjOp6QrQg/s400/menu-bgd.png) bottom left repeat-x;position:relative;font-size:12px;font-family:helvetica, arial, sans-serif;list-style:none;margin:0 auto;padding:0;}
    #nav ul{margin:0;}
    :focus{outline:0;}
    *html ul#nav{clear:both;height:1%;}
    ul#nav li a{display:block;float:left;text-transform:uppercase;font-weight:700;line-height:33px;color:#333;text-decoration:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpSIuyDsneh62M9ouxvLKBON9vaAxTQaTznzOGwcQ79wXn7H6ph53BN5NvcBKBMTyUU_QgtOGEBrJzhyShovS-QGKLSiGT3PTKwhwgeFKWBK1h-dKzfYM7N-7QkO5zpcI9Ejsp1DQr9gc/s400/menu-rule.png) right 2px no-repeat;padding:0 13px 0 10px;}
    ul#nav li a:hover,ul#nav li a.open{color:#fff;}
    ul#nav li#mef a:hover,ul#nav li#mef a.open{background:#0f1f37;}
    ul#nav li#link-haberler a:hover,ul#nav li#link-haberler a.open{background:#cf3c02;}
    ul#nav li#link-yasam a:hover,ul#nav li#link-yasam a.open{background:#724375;}
    ul#nav li#link-teknoloji a:hover,ul#nav li#link-teknoloji a.open{background:#02b0cf;}
    ul#nav li#link-top10 a:hover,ul#nav li#link-top10 a.open{background:#353533;}
    ul#nav li#links-2 a:hover,ul#nav li#links-2 a.open{background:#289728;}
    ul#nav li#links-3 a:hover,ul#nav li#links-3 a.open{background:#666;}
    ul#nav li#link-home a{text-indent:-9999px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3RrMBicjHGpbkKVNdFIk0eOg_Gj_UIr1t4_WPrunfu3b8TgcNZT5tIrHPcDY6x5Lfqz3MWLuFNNiOz8lPDNFs40SWcJdWiT_hzy7gUTue6gjjR6XdJtA86jktwcY1broQfgRU-jP0AzM/s400/home-icon.png) right 0 no-repeat;padding:0 33px 0 10px;}
    *html ul#nav li#link-home a{width:43px;padding:0;}
    ul#nav li#link-home a:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3RrMBicjHGpbkKVNdFIk0eOg_Gj_UIr1t4_WPrunfu3b8TgcNZT5tIrHPcDY6x5Lfqz3MWLuFNNiOz8lPDNFs40SWcJdWiT_hzy7gUTue6gjjR6XdJtA86jktwcY1broQfgRU-jP0AzM/s400/home-icon.png) right -33px no-repeat;}
    ul.sub-nav{position:absolute;width:960px;top:33px;left:-1px;overflow:hidden;display:none;z-index:999;list-style:none;padding-left:0;}
    ul#nav li#mef ul.sub-nav{background:#6f7987 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJTiLTfePtq5L8gLIexRcv7UHdvMU27oWPlgieknUSp_PrNr-DRDUwdHbxVOD8IDgWAOq3eWrmwu_QIxgCxjto216wEASXGO_PfStCtduT5sGL8rSDEk8ScR91NorvaMF-dYmNdNju3fA/s400/business-subnav-bgd.png) top left repeat-x;}
    ul#nav li#link-sanat ul.sub-nav{background:#d46b8e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivhAnCOqxdEzcTvUyifHUfBZ6mUajBvnI4diViWMpNmkxN3shCcobK-stn_wMSTinJvSxCLv3edbZMQdsGeOxtmjcPKZVC-r2-rzg9EPY5C2Y7i-dBzwULiojH3-dafxsUJCx_2qbVjIw/s400/entertainment-subnav-bgd.png) top left repeat-x;}
    ul#nav li#link-haberler ul.sub-nav{background:#e28a67 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTi_2DtYW6S2zgDxJckT35MDRVEvsPN8w2SquJ2g5RhFUVBb1Ys-_XdfBR7yawEtCGVUly7ezgnwE6ROo6mH36f-PR-ugU0cGBawhQBDxK0Jak1LYNjDLbAUGuMUmq__5Vwm0uVE66vG0/s400/news-subnav-bgd.png) top left repeat-x;}
    ul#nav li#link-yasam ul.sub-nav{background:#aa8eac url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjO9z33Romz8nxJPSgeC-XTc79loT-TVfAACrGQAYHVvNpuQr-1NgOABSODcZ94qw-uz5IcuHwnsqbaHSsUasHW_AQcUNVz32dpTZnbjfEDv5b7gAl0LLLK5r13ALpgex8gMr4t6bnSpY/s400/life-subnav-bgd.png) top left repeat-x;}
    ul#nav li#link-teknoloji ul.sub-nav{background:#67d0e2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXIpp7nqR2DSFdky2_rUb8Oo24hDQnKFmJzoWqnTRDXJT6IXiuyVHzQyahiqMwvpR3vNIOoRJRillP2NrrzM0Blz9vkcklwaH03DA1oHd9GdGNOuw61STTj0e8A9zwelkvjXerkSqfnpI/s400/technology-subnav-bgd.png) top left repeat-x;}
    ul#nav li ul.sub-nav li{float:left;}
    ul#nav li ul.sub-nav li a{float:none;background:none;font-size:11px;text-transform:none;color:#fff;line-height:25px;}
    ul#nav li#mef ul.sub-nav li a:hover,ul#nav li#mef ul.sub-nav li a.active-cat{background:#0f1f37!important;}
    ul#nav li#link-sanat ul.sub-nav li a:hover,ul#nav li#link-sanat ul.sub-nav li a.active-cat{background:#b70943!important;}
    ul#nav li#link-haberler ul.sub-nav li a:hover,ul#nav li#link-haberler ul.sub-nav li a.active-cat{background:#cf3c02!important;}
    ul#nav li#link-yasam ul.sub-nav li a:hover,ul#nav li#link-yasam ul.sub-nav li a.active-cat{background:#724375!important;}
    ul#nav li#link-teknoloji ul.sub-nav li a:hover,ul#nav li#link-teknoloji ul.sub-nav li a.active-cat{background:#02b0cf!important;}
    *html ul#nav li.top-link,:first-child+html ul#nav li.top-link{float:left;padding-top:2px;margin:0 0 -13px;}
    ul#nav li#link-sanat a:hover,ul#nav li#link-sanat a.open,ul#nav li#links-1 a:hover,ul#nav li#links-1 a.open,ul#nav li#links-4 a:hover,ul#nav li#links-4 a.open{background:#b70943;}
    </style>
    <div class='MEF-Nav-container'>
    <ul id='nav'>
    <li class='non-vertical-link top-link' id='link-home'><a class='open' href='#'>Ana Sayfa</a></li>
    <li class='top-link' id='mef'><a href='#'>TAB 1</a>
    <ul class='sub-nav'>
    <li><a href='#'>SUB TAB 1.1</a></li>
    <li><a href='#'>SUB TAB 1.2</a></li>
    <li><a href='#'>SUB TAB 1.3</a></li>
    <li><a href='#'>SUB TAB 1.4</a></li>
    </ul>
    </li>
    <li class='top-link' id='link-sanat'><a href='#'>TAB 2</a>
    <ul class='sub-nav' style='display: none;'>
    <li><a href='#'>SUB TAB 2.1</a></li>
    <li><a href='#'>SUB TAB 2.2</a></li>
    <li><a href='#'>SUB TAB 2.3</a></li>
    <li><a href='#'>SUB TAB 2.4</a></li>
    <li><a href='#'>SUB TAB 2.5</a></li>
    </ul>
    </li>
    <li class='top-link' id='link-haberler'><a href='#'>TAB 3</a>
    <ul class='sub-nav' style='display: none;'>
    <li><a href='#'>SUB TAB 3.1</a></li>
    <li><a href='#'>SUB TAB 3.2</a></li>
    <li><a href='#'>SUB TAB 3.3</a></li>
    <li><a href='#'>SUB TAB 3.4</a></li>
    </ul>
    </li>
    <li class='top-link' id='link-yasam'><a href='#'>TAB 4</a>
    <ul class='sub-nav' style='display: none;'>
    <li><a href='#'>SUB TAB 4.1</a></li>
    <li><a href='#'>SUB TAB 4.2</a></li>
    <li><a href='#'>SUB TAB 4.3</a></li>
    <li><a href='#'>SUB TAB 4.4</a></li>
    <li><a href='#'>SUB TAB 4.5</a></li>
    <li><a href='#'>SUB TAB 4.6</a></li>
    <li><a href='#'>SUB TAB 4.7</a></li>
    </ul>
    </li>
    <li class='top-link' id='link-teknoloji'><a href='#'>TAB 5</a>
    <ul class='sub-nav' style='display: none;'>
    <li><a href='#'>SUB TAB 5.1</a></li>
    <li><a href='#'>SUB TAB 5.2</a></li>
    <li><a href='#'>SUB TAB 5.3</a></li>
    <li><a href='#'>SUB TAB 5.4</a></li>
    <li><a href='#'>SUB TAB 5.5</a></li>
    </ul>
    </li>
    <li class='non-vertical-link top-link' id='link-top10'><a href='#'>TAB 6</a></li>
    <!-- Daha fazla sekme oluşturabilirsiniz -->
    <!-- <li class='non-vertical-link top-link' id='links-1'><a href='#'>TAB 7</a></li> -->
    <!-- <li class='non-vertical-link top-link' id='links-2'><a href='#'>TAB 8</a></li> -->
    <!-- <li class='non-vertical-link top-link' id='links-3'><a href='#'>TAB 9</a></li> -->
    <!-- <li class='non-vertical-link top-link' id='links-4'><a href='#'>TAB 10</a></li> -->
    <li style='clear: both;'/>
    </ul>
    </div>

    8. Kaydet ve bitti!

    Özelleştirme:



    • Sayfanın URL'sini "#" değiştirin ve Sayfa Başlığı ile "TAB" isimlerini değiştirin
    • Menü genişliğini ayarlamak için; Style kodları içinde ul#nav ve ul.sub-nav bölümündeki width: 960px blogunuzun genişliğine göre değiştirin.
    • Herhangi bir alt yeni sekme oluşturmak için aşağıdaki kodu yukarıdaki örnekdeki gibi </ul> kodu arasına yazın

    <li><a href='#'>SUB TAB</a></li>

    Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...