jQuery ile Twitter Alanı oluşturma [Videolu]

[ErenKeskin]

Bir önceki yazımda haftasonu jQuery ile Twitter Alanı oluşturmayı anlatacağım demiştim ve bunu haftasonuna bırakmadım ve bugün anlattım o dersi.Yaptığım sistem çok basit bir mantıkla iş yapıyor.Bunları videoda adım adım anlattım fakat burada da adım adım anlatmayı istiyorum.

1.Adım Alanları Oluşturma

Biz bu alanları oluştururken öncelikle kendimize bir düzen belirlemeliyiz ve işe ardından başlamalıyız.Ben kendi düzenimi oluşturdum ve kodlarımı ekledim.

<div class="tw_alani">
<figure>
<img src="<?php echo bloginfo("template_url"); ?>/images/twkusu.png" alt="Twitter"/>
<a href="https://twitter.com/Eren_Keskin" data-lang="tr">Takip Et @Eren_Keskin</a>
</figure>
<p><?php echo parse_feed($twitterFeed);?></p>
</div>
<div class="ackapa">
<div class="acil">
<div class="ac">
Bak bakalım nevar?
</div>
<div class="kapat">
Kapat İstersen artık!!
</div>
</div>
</div>

Bunun CSS düzenlemesini ise bu şekilde yapabiliriz.

.tw_alani {background-color: #323232; padding: 8px 0; overflow: auto;}
.tw_alani figure{float: left; padding: 5px;}
.tw_alani figure img {width: 110px; height: 20px;}
.tw_alani p {color: #fff; font: 12px Tahoma; margin: 8px 10px 3px 0;}
.ac {background-color: #323232; padding: 10px; float: right; color: #fff; font: 12px Tahoma;
border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}
.kapat {background-color: #323232; padding: 10px; float: right; color: #fff; font: 12px Tahoma;
border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}

2.Adım jQuery kodlarımızı girerek alanı dinamikleştirme

Bu alanımız şuan için dinamik bir görünme sahip değil.Biz bu alanı dinamikleştirmek için öncelikle sayfamızda jQuery’nin ana dosyasını çağırmamız gerekli.Bunun için 2 yöntem var.Birincisi jQuery.com’a girerek oradan çağırmak ikincisi ise Googleapis üzerinden çağırmak.Google Sunucuları daha hızlı olduğundan dolayı ben Google üzerinden çağırıyorum.

Bu jQuery.com üzerinden gelen dosya

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

Buda Googleapis üzerinden gelen dosya

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Bu adımıda tamamladıktan sonra kendi yazmamız gereken kodları ekliyoruz.

<script type="text/javascript">
$(document).ready(function () {
 
$(".tw_alani").hide();
$(".kapat").hide();
$(".ackapa").click(function(){
$(".acil").toggle(ac, kapat);
});
 
function ac(){
$(".tw_alani").slideDown(700);
$(".ac").hide();
$(".kapat").show();
$("header").css("height","270");
}
 
function kapat(){
$(".tw_alani").slideUp(700);
$(".ac").show();
$(".kapat").hide();
$("header").css("height","190");
}
 
});
 
</script>

Tüm işlem bu kadar.Artık bizimde bir jQuery’li alanımız var.Bu çalışmanın Demosuna ve İndirme linkine aşağıdaki adresten ulaşabilirsiniz.

Ayrıca bu yazımdan sonra sitemde yeni yeni kategorilere yer vermeye karar verdim.Yavaş Yavaş HTML5 ve CSS3 makaleleri yayınlayacağım.

Bu videoda da bu işlemi gerçekleştirmeyi anlattım.

Yazar: Eren Keskin
Kategori: jQuery
Web Adresi: ErenKeskin.com

[ArtemisTr]

Çok hoş olmuş. Bende nereden çıkacak diye bakıyordum yukarıdaymış

[bekchur]

Bak bakalım nevar? yazan yer bi link olarak gözükürse mousla üzerine geldiğimizde tıklamamız gerektiğini anlamış oluruz

[FOMOCO]

teşekkürler hocam güzel anlatmışsınız. emeğinize sağlık.

birde notepad++ da divleri otomatik kapaması için hangi kısayolu kullanıyorsunuz

[Enes ve Blogu]

Eren gerçekten güzel bir çalışma olmuş, tebrik ediyorum seni kardeşim..

[admin]

Eline sağlık Eren, güzel bir makale olmuş yine.

Ayrıca .ac ve .kapat class'ına şunu da eklersek çok daha güzel olur gibi

cursor: pointer;

[ErenKeskin]

Burak Adlı Üyeden Alıntı

Eline sağlık Eren, güzel bir makale olmuş yine.

Ayrıca .ac ve .kapat class'ına şunu da eklersek çok daha güzel olur gibi

cursor: pointer;

Evet öyle daha iyi olur CSS'e burada pek önem vermedim aslında

Enes ve Blogu Adlı Üyeden Alıntı

Eren gerçekten güzel bir çalışma olmuş, tebrik ediyorum seni kardeşim..

Teşekkürler

FOMOCO Adlı Üyeden Alıntı

teşekkürler hocam güzel anlatmışsınız. emeğinize sağlık.

birde notepad++ da divleri otomatik kapaması için hangi kısayolu kullanıyorsunuz

Teşekkür ederim Burada anlattığım Zen Coding eklentisi ile çok kolay bir şekilde yapılabilir.

bekchur Adlı Üyeden Alıntı

Bak bakalım nevar? yazan yer bi link olarak gözükürse mousla üzerine geldiğimizde tıklamamız gerektiğini anlamış oluruz

Yapılabilir birşey

[Psycho]

Tebrik ediyorum. Çok güzel bir çalışma olmuş

[ErenKeskin]

m4gnet Adlı Üyeden Alıntı

Tebrik ediyorum. Çok güzel bir çalışma olmuş

Çok Teşekkür ederim

[senolsengul]

güzel bir anlatım eline sağlık