TeknoMobi | Profesyonel ve Ücretsiz Blogger Tema

tasarım etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Web Tasarımda Dikkat Edilmesi Gereken Temel İlkeler

Gönderen TeknoMobi | Pazartesi, Şubat 04, 2019 | Comments

Herkes web sitesinin Google, Yandex, Bing vb. gibi arama motorlarında üst sıralarda olmasını ister. Arama motorlarında üst sıralara gelmek için dikkat etmeniz gereken temel kurallar vardır.

Web Sitesinin Hızlı Yüklenmesi Gerekir

Günümüzde akıllı telefonların, tabetlerin artması ile birlikte web sitelerinin önemi çok fazla arttı. İnsanlar web aramalarını artık çoğunlukla mobil üzerinden gerçekleştiriyor. Eğer siteniz yavaş açılıyor ise kullanıcı sitenizi açmaktan vazgeçer. Başka arayışlara yelken açar. Web sitenizi tasarlarken eklenti vb. dış etkenleri en aza indirmeniz gerekmektedir.

Devamı »

MultiBox Blogger Entegrasyonu Ders 1

Gönderen TeknoMobi | Cuma, Kasım 28, 2008 | Comments

Buradaki yazımda MultiBox ile ilgili bir giriş yazısı yayınlamıştım. Artık MultiBox uygulamasının anlatımına başlıyoruz. İlk yazımda anlatım yapmamıştım. Dediğim gibi onu giriş yazısı niyetine yayınlamıştım. MultiBox uygulamasının Blogger'e entegrasyon işlemi biraz zahmetli ve detaylı olduğundan tek bir yazıda değil bir kaç yazı halinde yayınlayacağım.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Entegrasyon işlemimize aşama aşama başlayalım. İlk olarak temamızı entegrasyon işlemine hazır hale getirelim.

1. Aşama

İlk olarak Yerleşim - HTML Düzenle - Widget Şablonlarını Genişlet diyoruz. Ardından her ihtimale karşı Tam Şablonu Yükle diyerek Şablonumuzun bir tane yedeğini alıyoruz.

2. Aşama

Şimdi Ctrl+F yaparak şablonumuzda ]]></b:skin> kodunu aratıyoruz.

3. Aşama

Temamızda bulduğumuz ]]></b:skin> kodunun hemen altına aşağıdaki kodları yapıştırıyoruz.

<link href='http://dl.getdropbox.com/u/1704149/Mbox/css/multibox.css' rel='stylesheet' type='text/css'/>


<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1704149/Mbox/js/overlay.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1704149/Mbox/js/multibox.js' type='text/javascript'/>

<style type='text/css'>

#htmlElement {
padding: 10px;
background-color: #000;
}

</style>

4. Aşama

Şimdi ise şablonumuzun en altına gidip </body> kodunu buluyoruz ve hemen üstüne aşağıdaki kodu yapıştırıyoruz.

<script type="text/javascript">
var box = {};
window.addEvent('domready', function(){
box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true});
});
</script>

5. Aşama

Artık şablonumuzu kaydedip blogumuzu kontrol ediyoruz. Herhangi bir sorun yok ise bir sonraki yazımı bekliyorsunuz.

MultiBox uygulamasının bütün dosyalarını kendi hostumda barındırıyorum. Kodlar ve dosyaları yüklemek ile uğraşmanıza gerek kalmadı.

Aşağıdaki videoda anlatımını yaptığım aşamaların eğitim görseli... Kodları nereye nasıl yerleştireceğinizi görsel olarak izleyebilirsiniz!. İster online olarak izleyin! İsterseniz de HD Çözünürlükteki xViD dosyasını bilgisayarına indirerek izleyin!..

MultiBox Blogger Entegrasyonu Ders 1 Hazırlayan TeknoMobi on Vimeo.

Buradaki linke tıklayarak eğitim videosunun HD kalitesindeki avi dosyasını bilgisayarınıza indirebilirsiniz!..

Bir sonraki yazımda MultiBox uygulamasını yazılarımızda kullandığımız resimlerde, Mp3'lerde, Videolarda, Youtube - Google Video - DailyMotion - Yahoo Video - Vimeo - Msn SoapBox gibi sitelerdeki videoları kendi sitemizde görsel olarak nasıl kullanabileceğinizi tek tek ele alacağım.

MultiBox Giriş Yazısı , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 6 , MultiBox Ders 7

MultiBox İle Blogger'inizi Coşturun!..

Gönderen TeknoMobi | Salı, Kasım 25, 2008 | Comments

Bir önceki yazımda sizlere yeni bir yazı dizisi ile karşınızda olacağımdan bahsetmiştim. Ehh artık Blogger kukllanıcılarını fazla bekletmeden blogunuzu çok daha kullanışlı hale getirebileceğimizi gösterelim. Şimdi bazılarının aklına yazı dizisi neden yapıyorsun bir yazıda anlatsan olmaz mı diyenler çıkabilir. Ama yapacağımız işlemlerin detaylı olması ve acemi kullanıcıların kolaylıkla anlayabilmesi için yazı dizisi olarak yayınlamayı uygun gördüm. Ama şunu belirtmeliyim ki ülkemizde Blogger uygulamaları ile uğraşan pek fazla kişi yok olanlarda bir süre sonra kendini kenara çekiyor. Neden diye kendimize sorarsak yazılara yeterli ilginin gösterilmemesi daha doğrusu yazılara geri dönütün sağlanmaması diyebiliriz. Yorum yapılmaması vb.

Bende elimden geldiğince Blogger alt yapısı ile yayın yapan blogculara bloglarını daha kullanışlı hale getirebilmeleri için çalışıyorum. Ama yukarda bahsettiğim gibi gerekli geri dönütleri aldığım pek söylenemez. Neyse konuyu fazla uzatmayacağım.

LightBox uygulamasını çoğu kullanıcı biliyordur. Mutlaka bir blogda veya sitede denk gelmiştirsiniz. LightBox ile resimleri blogumuzdan ayrılmadan hoş bir şekilde gösteriyoruz. LightBox'un Blogger'e entegre etme işlemini Düşüngeç'teki yazımda anlatmıştım.

Şimdi ise LightBox'un çok daha gelişmiş bir türevi olan MultiBox uygulamasını Blogger için kullanılabilir hale getirdim. MultiBox ile neler mi yapabiliriz.

Resimleri blogumuzdan ayrılmadan açılır hale yani pop-up şeklinde açabiliriz.
swf, flv gibi flash videoları
mov uzantılı quicktime videoları
wmv uzantılı windows media videoları
rv / rm / rmvb uzantılı real mediavideolarını
mp3 formatındakimizik dosyalarını
ve Youtube, Vimeo, Dailymotion, Google Video, Yahoo Video sitelerindeki videoları blogunuzdan hiç ayrılmadan ziyaretçilerinize dinletebilir / izletebilirsiniz. Bunların hepsinin örneklerini aşağıda verdiğim demo sayfasındaki bağlantılara tıklayarak görebilirsiniz.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Multibox uygulamasının tarayıcı uyumluluğu : Firefox 3/3.5 , Chrome 2-3 , Safari 3-4 , İnternet Explorer 7-8 , Opera 9-10

MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 6 , MultiBox Ders 7

İntenseDebate Yorum Formunu Blogger'e Entegre Edelim Video Anlatım

Gönderen TeknoMobi | Pazartesi, Kasım 24, 2008 | Comments

Buradaki yazımda yeni yorum formuna geçiş yaptığımı yazmıştım. İntenseDebate yorum formu gerçekten çok kullanışlı ve özellik olarakta harika... İntenseDebate'nin sitesindeki kurulum anlatımları beni pek tatmin etmedi. Acemi Türk blogger kullanıcıları için bir tane eğitim videosu hazırladım. Bu videoyu izleyerek İntense Debate yorum formunu blogunuza nasıl entegre edeceğinizi öğrenebilirsiniz.

DailyMotion : İntenseDebate Yorum Formu Blogger Entegrasyon İşleminin Videosu

Vimeo : İntenseDebate Yorum Formu Blogger Entegrasyon İşleminin Videosu

Bilgi için : İntenseDebate Ana Sayfa

Blogger Css Dock Menu Tasarımı

Gönderen TeknoMobi | Salı, Eylül 23, 2008 | Comments

Evet yeni bir Ajax uygulamasının bloggere uyarlanması işlemiyle karşınızdayım. Önceki yazımızda köşeden açılan reklam yani pageear yapımını anlatmıştık. Bu yazımızda ise Css Dock Menü'nün blogger alt yapısında nasıl kullanılabileceğini uygulamalı olarak anlatacağız. Css Dock Menünün ne olduğunu veya nasıl göründüğünü merak ediyorsanız burayı ziyaret edin!..

1. Öncelikle buradan üzerinde çalışacağımız dosyaları indirelim. Dosyayı indidikten sonra images klasörü içindeki resimlerin hepsini herhangi bir resim barındırma sitesine veya googlepagesinize yükleyin.

2. Ardından stlye dosyasını Notepad ++ ile veya herhangi bir metin editörü ile açarak url(images/main-bg.gif)şeklinde olan yerlere yüklediğiniz resim dosyasının linkini kopyalayın. Örnek olarak url(http:www.test.googlepages.com/images/main-bg.gif) vb. gibi... Resim linklerini kpyaladıktan sonra dosyayı kaydedin.

3. Şimdi stlye.css , iepngfix , interface.js , jquery.js dosyalarını googlepagesinize veya alternatif bir siteye yükleyin.

4. Artık blogumuza entegre işlemine geçebiliriz. Şimdi HTML düzenleme moduna geçiyoruz. Öncelikle herhangi bir sorunla karşılaşmamak için temamızın bir yedeğini alıyoruz. Şablonu genişlet diyerek işlemimize başlayalım.

5. <head> kodunun hemen altına

<script src='http://denemeler.weebly.com/uploads/1/1/4/2/1142610/jquery.js' type='text/javascript'/> <script src='http://denemeler.weebly.com/uploads/1/1/4/2/1142610/interface.js' type='text/javascript'/> <link href='http://denemeler.weebly.com/uploads/1/1/4/2/1142610/style.css' rel='stylesheet' type='text/css'/>

<style>

kodunu kopyalıyoruz. Yukarıdaki kod içindeki dosya bağlantılarını kendi yüklediğimiz dosyaların bağlantıları ile değiştiriyoruz.

6. <body> kodunun hemen altına bu kodu kopyalıyoruz. Burası işlemlerimizin son aşamasıydı artık buradaki ikonları ve bağlantıları kendi isteğinize göre düzenleyebilirsiniz. Temanızı kaydetmeden önce önizleme yaparak işlemleri doğru yapıp yapmadığınızdan emin olabilirsiniz. Her temada aynı düzende görünmeyebilir.

Css Dock Menünün bloggere uygulanması biraz zahmetli ama yine de çok zor değil takıldığınız bir yer olduğunda yorum yaparak sorununuzu / isteğinizi açıkça belirtirseniz elimden geldiğince yardımcı olmaya çalışırım.

Yazan : TeknoMobi Editörü
Not : Eğer bu yazıyı kendi siteniz veya blogunuzda yayınlamak isterseniz yazınızın altında TeknoMobi ve yazının tam linkini vermelisiniz.

Blogger için Pageear Hazırlama - Köşeden Açılan Reklam

Gönderen TeknoMobi | Pazartesi, Eylül 08, 2008 | Comments

Daha önce Harun Güven'in (Hrn) blogunda yayınladığı pageearı kullanıyordum. Efekt olarak göze çok hoş gelen bu eklenti sayesinde blogunuzun sağ üst köşesinin sayfa yaprağı gibi açılmasını sağlıyoruz, Pageear'dan eklenti diye bahsettim ama aslında blogumuzda ufak bir javascript kodu entegre ediyoruz. Şimdi gelelim bu yazıyı neden kaleme aldığıma.. Hrn blogunda anlattıklarını sorunsuz yapmıştım. Hatta blogunda ve BloggerDestek sitesinde yazdığı yazılarda verdiği JavaScript Kodunu indirmede sorun yaşadığım içinde .js kodunu bloguna entegre eden Taytanik'ten rica ettim oda sağolsun beni kırmadı ve js dosyasını gönderdi. Bende bloguma entegre ettim ve bir kaç gün öncesine kadarda sorunsuz kullanıyordum. Ne olduysa pageear açılmamaya başladı. Sorunun nereden kaynaklandığını araştırırken gördüm ki .js kodlarının içinde .swf dosyalarının yüklendiği sitede sorun var. Bende pagearı kendim düzenlemeye daha doğrusu bloggere entegre etmeye çalıştım. Bu çalışmamda Hrn'un yazısından öğrendiklerimin çok faydası oldu.

Şimdi gelelim Blogger'de Pageear'ın (PagePeel) efektini nasıl vereceğimize öncelikle buradan bize gerekli düzenlemeleri yapacağımız dosyaları indirelim. Ardıdan klasörün içindeki pageear.js dosyasını herhangi bir metin editörü ile açalım tavsiyem Notepad ++ dır. Tabi siz istediğinizi kullanbilirsiniz. açtığınız pageear.js dosyasında var pagearSmallImg = yazan satırdaki resim linki 100x100 px boyutlarında köşe açılmadan önceki resmimiz. var pagearBigImg = ise köşe açılınca görünecek olan 500x500 px boyutundaki büyük resmimiz. Ben sizler için şablon hazırladım ve bir sunucuya yükledim. Siz isteğinize göre düzenleyip pageear.js içindeki linkleri değiştirerek kendi resimlerinizin görünmesini sağlayabilirsiniz.

Köşe açıldığında gidilmesini istediğimiz linki değiştirmek için ise yine pageear.js dosyasında var jumpTo = satırındaki bağlantı linkini değiştiriyoruz.

Artık pageear.js dosyamızı hazırladık. Şimdi yapmanız gereken pageear.js ve AC_OETags.js dosyalarını googlepages gibi herhangi bir barındırma sitesine yüklemek. Googlepages'e alternatif olarak Weebly'i de kullanabilirsiniz.

Şimdi ise hazırladığımız pageear.js dosyalarını blogumuza kod ekleyerek çağırmalıyız. HTML düzenleme moduna geçerek şablonu genişlet diyoruz Tabi öncelikle temazını yedeğini almayı unutmayın. Ardından <title><data:blog.pageTitle/></title> kodunu ctrl+f ile aratarak hemen altına


kodlarını yapıştın.

En son olarak ise </div></div>  kodunun hemen altına veya </body> kodunun hemen üstüne
<script language='javascript' src='http://www.weebly.com/uploads/1/1/4/2/1142610/ac_oetags.js'/>
<script src='http://www.weebly.com/uploads/1/1/4/2/1142610/pageear.js' type='text/javascript'/>

<script type='text/javascript'>
writeObjects();
</script>

kodunu yapıştırın. Artık işlemlerimiz bitti şablonu kaydetmeden önce önizleme yaparak doğru düzenlediğinize emin olun.

Yazı sizlere biraz karışık gelebilir ama korkmayın hiçbir zorluğu yok. Yapamadığınız bir yer veya anlamadığınız bir yer olursa yorum yazarak veya iletişim formunu kullanarak sorununuzu / isteğinizi açıkça yazabilirsiniz.

Yazan : TeknoMobi Editörü

Not : Eğer bu yazıyı kendi sitenizde veya blogunuzda yayınlamak isterseniz yazınızın altında kaynak olarak TeknoMobi ve sayfanın tam linkini vermelisiniz.