Gimpci.Blogspot.Com

“Sexy Share” Sosyal İmleme Eklentisi

Yazar: Gimpci on 28 Mayıs 2009 Perşembe

Bu hoş blogger eklentesi CSS kullanarak kodlanmış bir “Sosyal İmleme” eklentisidir.Kodları blogunuza ekleyerek yukarıdaki gibi widget ile okurlarınızın beğendikleri yazılarınızı imlemesinisi sağlayabilirsiniz.Hoş tasarımıyla kullanılabilir nitelikte bir eklenti.

İlk olarak şablonunuzdaki <head> tagını bulun ve hemen altına aşağıdaki kodları yerleştirin;

<style type='text/css'>
div.beauty-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
}

div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.beauty-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.beauty-bookmarks ul.socials li{
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.beauty-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}

.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {

background:url('http://i44.tinypic.com/1znbj83.png') no-repeat !important;
}

.beauty-furl {
background-position:-300px top !important;
}

.beauty-furl:hover {
background-position:-300px bottom !important;
}

.beauty-digg {
background-position:-500px top !important;
}

.beauty-digg:hover {
background-position:-500px bottom !important;
}

.beauty-reddit {
background-position:-100px top !important;
}

.beauty-reddit:hover {
background-position:-100px bottom !important;
}

.beauty-stumble {
background-position:-50px top !important;
}

.beauty-stumble:hover {
background-position:-50px bottom !important;
}

.beauty-delicious {
background-position:left top !important;
}

.beauty-delicious:hover {
background-position:left bottom !important;
}

.beauty-yahoo {
background-position:-650px top !important;
}

.beauty-yahoo:hover {
background-position:-650px bottom !important;
}

.beauty-blinklist {
background-position:-600px top !important;
}

.beauty-blinklist:hover {
background-position:-600px bottom !important;
}

.beauty-technorati {
background-position:-700px top !important;
}

.beauty-technorati:hover {
background-position:-700px bottom !important;
}

.beauty-myspace {
background-position:-200px top !important;
}

.beauty-myspace:hover {
background-position:-200px bottom !important;
}

.beauty-twitter {
background-position:-350px top !important;
}

.beauty-twitter:hover {
background-position:-350px bottom !important;
}

.beauty-facebook {
background-position:-450px top !important;
}

.beauty-facebook:hover {
background-position:-450px bottom !important;
}

.beauty-mixx {
background-position:-250px top !important;
}

.beauty-mixx:hover {
background-position:-250px bottom !important;
}

.beauty-script-style {
background-position:-400px top !important;
}

.beauty-script-style:hover {
background-position:-400px bottom !important;
}

.beauty-designfloat {
background-position:-550px top !important;
}

.beauty-designfloat:hover {
background-position:-550px bottom !important;
}

.beauty-syndicate {
background-position:-150px top !important;
}

.beauty-syndicate:hover {
background-position:-150px bottom !important;
}

.beauty-email {
background-position:-753px top !important;
}

.beauty-email:hover {
background-position:-753px bottom !important;
}

</style>
</div>

Sıra geldi yazılarınızın altında bu eklentiyi göstermek için yerleştireceğimiz kodlara.Bu kodları <data:post.body/> tagının hemen altında yerletirin.

<b:if cond='data:blog.pageType == "item"'>
<div class='beauty-bookmarks'>
<ul class='socials'>

<li class='beauty-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='beauty-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='beauty-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='beauty-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='beauty-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='beauty-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='beauty-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='beauty-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='beauty-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='beauty-syndicate'><a href='Your-Feed-Link-Here' title='Subscribe to RSS'/></li>

<li class='beauty-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

</ul>
<span class='beauty-rightside'/></div>
</b:if>

Bu arada kırmızı yazdığım “Your-Feed-Link-Here” yazısının yerine RSS adresinizi yazmayı unutmayın.

Kolay gelsin.

Devamını Oku

İyi Bir Websitesi Nasıl Olmalı?

Yazar: Gimpci on 7 Mayıs 2009 Perşembe

İnternet site sahipleri için altı altın kural: İnternet kullanıcıları, arama yaparken aynı kategoride birçok internet sitesi karşılarına gelir. Bu siteler arasında, sizin sitenizde vardır. Kullanıcılar, bir internet sitesine geldiklerinde kalıp, kalmamaya 3–4 saniyede karar verir. Onların dikkatini çeken bir şey olmayınca tek tıkla başka internet sitesine yönlenirler.

İnternet sitesi broşür tarzında değil, kullanıcıları birtakım mesajlarla başka sayfalara çekecek şekilde olmalıdır. En çok yapılan hata da rakiplerin internet sitelerine benzeme çabasıdır. Çünkü internet kullanıcıları ‘Ben bunu gördüm’ diyerek siteyi kapatır.

Ana sayfalara “intro” ve "flash" uygulamaları koymayın. Hoplayan, zıplayan nesneler internet kullanıcılarının dikkatini dağıtır ve kaçmalarına neden olur. İnternet sitenizin kurumsal kimliğinizi yansıtacak şekilde olmasına dikkat edin. Aksi takdirde kurumsal markanız zarar görebilir. Bu nedenle, ilgisiz içerikler, ilgisiz renkler, eksik tanıtımlardan kaçının.

İnternet siteleri, fotografik, okunmaya yatkın ve ferah olmalıdır. Üç sütun halindeki internet siteleri daha okunaklı olur.

İnternet analitik araçlarıyla sitenizi ölçümleyin. (İnsanların internet sitenize nereden ve hangi kelimeleri yazarak geldiğini öğrenin.) Herkesi memnun etmeye çalışmayın. Hedef kitlenizi kategorilere ayırın. İnternet sitenizin içeriğini başlangıçta 3 veya 4 hedef kitleye hitap edecek şekilde oluşturun.

Devamını Oku

Arama Motoru Optimizasyonu Nedir?

Yazar: Gimpci

Arama Motoru Optimizasyonu, bir web sitesine arama motorlarının organik sonuçlarından kaynaklanan trafiğin ve trafik kalitesinin arttırılması sürecidir (Search Engine Optimization-SEO).

Arama Motoru Optimizasyonu, arama motorlarının web sitelerini indeksleme algoritmalarını dikkate alarak, hedef kitle olan intenet kullanıcılarının, neyi, ne şekilde aradıklarının belirlenmesi ile gerçekleştirilen bir pazarlama aktivitesidir. Arama motoru optimizasyonu teknikleri içinde, aslında internet kullanıcılarının fark etmeyecekleri, ama, arama motorlarının robot programlarının web sitelerini indekslerken dikkate aldıkları faktörlere göre, web sitesinin ve web sayfalarının kodlama yapısında yapılacak optimizasyon çalışmaları da yer alır. Bunun yanında, ilgili web sitesinde, arama motorlarının indeksleyebileceği ve ziyaretçileri de tatmin edecek düzeyde, ilgili ve zengin içeriğin bulundurulmasının sağlanması da bu çalışmalarda büyük önem taşır. Unutulmamalıdır ki, içeriği yetersiz olan bir web sitesi, diğer optimizasyon çalışmalarında ne yapılırsa yapılsın, yeterli başarı sağlayamayacaktır.

Arama motoru optimizasyonu, ilgili site sahibi kurum ve/veya kişilerce gerçekleştirilebileceği gibi, bu konuda bağımsız ve profesyonel servis sunan Arama Motoru Optimizasyonu Uzmanları tarafından da sağlanabilir. Arama Motoru Optimizasyonu çalışmaları, büyük oranda sitenin kod yapısında değişiklikler gerektirdiğinden, eğer mümkünse, web sitesinin ilk tasarlanma aşamasından itibaren, arama motoru optimizasyonu teknikleri dikkate alınarak yapılandırılması ve kodlanması etkin bir yaklaşım olacaktır.

Devamını Oku

Blogger Navbar Kaldırma

Yazar: Gimpci

Navbar blogger tarafından sayfanın üstüne yerleştirilen ufak bir araç çubuğudur.Çoğu blogger kullanıcısı bu araç çubuğunu kötü göründüğü için yada şablonlarına uymadığı için kaldırmak ister.Size navbarı nasıl kaldıracağınızı anlatacağım:

Yerleşim > HTML Düzenle ‘ye gidin.
Widget Şablonlarını Genişley kutucuğunu işareleyin.
Aşağıdaki kodu bulun:

<b:skin><![CDATA[/
Hemen altına aşağıdaki kodu ekleyin:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
Şablonu kaydedin.

Bunu yaptıktan sonra navbar tamamen kalkacaktır.

Devamını Oku

Blogunuzdaki Toplam Yazı Ve Yorum Gösterimi

Yazar: Gimpci

Eski blogcuların çoğu bloglarının ne kadar popüler olduğunu göstermek için toplam yazı ve toplam yorum sayılarını sayfalarına koyarlar.Sizde bunu blogunuza ekleyeceğiniz bir eklentiyle kolayca yapabilirsiniz.

Ekleyeceğiniz kod :

<script type="text/javascript">
function TotalPosts(json) {
document.write('<b>Toplam Yazı: '+json.feed.openSearch$totalResults.$t+'</b>');
}
function TotalComments(json) {
document.write('<b>Toplam Yorum: '+json.feed.openSearch$totalResults.$t+'</b>');
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&callback=TotalPosts"></script>
<br/>
<script src="/feeds/comments/default?alt=json-in-script&callback=TotalComments"></script>

Bu eklenti tarafımca kendi blogumda denenmiş ve hatasız çalışmıştır.Rahatça blogunuzda kullanabilirsiniz.

Devamını Oku

CSS Menü Tasarımı

Yazar: Gimpci

XHTML kodlarıyla hemen başlayalım;

<ul class="menu">
     <li id="mAnasayfa"><a href="#">Ana Sayfa</a></li>
     <li id="mUrunler"><a href="#">Ürünler</a></li>
     <li id="mHizmetler"><a href="#">Hizmetler</a></li>
     <li id="mBizeUlasin"><a href="#">Bize Ulaşın</a></li>
</ul>

Menümüzün resimlerini tek bir resim dosyası olarak hazırlayacağız. Biz burada normal ve fare imleci üzerine geldiğindeki halini(:hover) koyduk ama bunlara seçili ve tıklama durumlarınıda eklenebilir.

Şimdi CSS kodlarımızı yazalım.

ul için genel sıfırlama kodlarımızı yazalım

ul.menu{
   margin:0;
   padding:0;
   list-style:none;
   width:480px;
   height:40px;
}

Sırasız listelerin her nesnesini(li) yan yana dizmek için float:left tanımını yapmalıyız.

ul.menu li{
float:left;
}

Linkler için genel tanımlarımızı yapalım

ul li a{
   display:block;
   width:120px;
   height:40px;
   text-indent:-9999px;
   outline:none;
   text-decoration:none;
   background:url(images/basit_resimli_menu.jpg) 0 0 no-repeat;
}

Her bir menü nesnesinin yukarıdaki resimdeki konumunu belirlemeye geldi sıra.

li#mAnasayfa a{background-position:0 0;}
li#mUrunler a{background-position:-120px 0;}
li#mHizmetler a{background-position:-240px 0;}
li#mBizeUlasin a{background-position:-360px 0;}

Basit bir şekilde resimli bir menü oluşturduk. Tabi buna birde fare üzerine geldiğindeki durumu ekleyerek daha belirgin bir hale getirebiliriz.

li#mAnasayfa a:hover{background-position:0 -40px;}
li#mUrunler a:hover{background-position:-120px -40px;}
li#mHizmetler a:hover{background-position:-240px -40px;}
li#mBizeUlasin a:hover{background-position:-360px -40px;}

Örnek için buraya bakabilirsiniz

Devamını Oku

Notebookları Kaplama Zamanı

Yazar: Gimpci

Kişisel Bilgisayar Etiketi, yani Kişiket, HP’nin kişisel bilgisayar dünyasında kazandırdığı bir yenilik. Kişiket ile dizüstü bilgisayarlarınız siz nasıl isterseniz öyle görünür.

Bilgisayarınızın içi kadar dışıyla da farkınızı ortaya koyabilirsiniz. Kişiketleri etiket-siz adresindeki galeriden seçebileceğiniz gibi tamamen sizi yansıtan Kişiketler hazırlayıp siteye yükleyebilirsiniz. İster en sevdiğiniz fotoğraf ve çizimlerle kendi Kişiket’inizi yaratın, isterseniz onlarca göz alıcı Kişiket'ten birini seçin. Bilgisayarınız bundan sonra başkalarınınkine benzemesin.

HP'nin etiket-siz sitesini mutlaka inceleyin, farkı hissedin...

Devamını Oku

Adsense İle Kazanmak Mümkün

Yazar: Gimpci

Google Adsense sayesinde pek çok kişi iyi rakamlar kazanıyor.

Bu kişilerin sitelerini aslında 2ye ayırabiliriz;

> Genel içerikli hitli siteler,
> Özel içerikli, özgün siteler.

Eğer gerçekten hitli bir siteye sahipseniz, hitinizle doğru orantılı olarak çok iyi rakamlar kazanabilirsiniz. Tıklardan çok fazla para alamayabilirsiniz ama sürümden kazanırsınız (: Bu noktada önemli olan bandan korunmak ve reklam alanlarını en iyi şekilde ayarlayabilmektir.

Hitiniz arttıkça banlanma riskinizde artacaktır. Çok fazla kişi girdiği zaman normal olarak kontrol zorlaşır. Bu açıdan webmasterlar çeşitli önlemler almalıdır. Çok fazla reklam alanı kullanıp, tık oranı düşük olan alanlara reklam koyarak cpm oranını düşürmek yerine daha az ve daha etkili alanlara reklam koymak her zaman daha karlıdır.

Bu noktada webmasterlar çeşitli yerleşimlerle kullanıcıyı reklama yönlendirebilirler. Bağlantı reklamlarını menü altına veya üstüne koyarak, menü gibi göstererek tık artırılabilir. Ayrıca içerik reklamları, içerikle bütünleşmiş gibi koyulursa her zaman daha etkili olur. Renkler devreye girer bu konuda. Arkaplanın, site arkaplan rengiyle aynı olması avantajdır.

–

Diğer bir iyi para kazanma metodu ise özel içeriktir. Bazı kelimeler Google için değerlidir. Yani reklamverenlerin talebi doğrultusunda. Örneğin travel, hotels gibi.. Bu tür kelimelerde ziyaretçiler zaten belli bir amaç için sitenizi ziyaret ederler. Bu ziyaret esnasında aradıklarıyla alakalı olan reklamlara tıklamaları işten bile değildir. Yani az hit - çok tık - çok kazanç. Tabii reklam yerleşimi biraz önce bahsettiğimiz gibi olsa iyi olur.

Devamını Oku

Site Geçerlilik Servisleri

Yazar: Gimpci

Web sayfalarımızın kodlama geçerliliğini (Markup Validation) her zaman W3C‘nin Validation servisleriyle test ederiz. Bildiğiniz üzere Xhtml geçerliliği için Xhtml Validator ve Css geçerliliği için de Css Validator sayfalarını kullanırız. Tabi başvuracağımız en büyük merci şu anda W3C ancak internette sitelerimizi geçerlilik yönünden test edebileceğimiz birçok servis bulunmakta. Bu yazımızda sizlere bu birkaç siteden söz edeceğiz.

Xhtml-Css.com: Bu siteye sıkça başvuruyorum. Sitenin en büyük avantajı verdiğiniz URI ile sitenizin hem Xhtml hem de Css geçerliliğini test etmesi. Basit ve sade tasarımı ile göz dolduruyor. Yerimlerimde her zaman ziyaret ettiğim bir geçerlilik sitesi. Ayrıca okunası bir blogları da mevcut. Göz atmadan geçmeyin.

Validome.org: Bir başka geçerlilik servisi. Ancak diğerlerine nazaran biraz daha zengin olduğu kesin. Bu sitede websayfanızın Xhtml, Xml, Wml kodlamalarını da test edebiliyorsunuz. Sonuçları bazen W3C’den farklı çıkabiliyor. DTD testini birçok sitede görmedim ancak burada bulunuyor ve sitenizi bu bakımdan da test edebiliyorsunuz.

Validator.ca: Bu site websayfanızın tümünü veya sadece istediğiniz bir sayfasını test ediyor. Zaten sitede “Multipage Validator” olarak bir tanımlama yapılmış. Web sitenizin tüm sayfalarını tarayarak size bilgi veriyor ve gerekli durumda taranan sayfalar üzerine tıklayarak W3C Xhtml validator sayfasına gönderebiliyorsunuz.

Xhtmlvalidation.com: Basit bir site ve sadece Xhtml geçerliliğinizi test ediyor. Ancak sloganlarının güzelliği takdire şayan :) (How “sexy” is your Xhtml?)

Devamını Oku