jQuery ile Twitter Alanı oluşturma [Videolu]

**WpMert** · 02-21-2012, 07:16 PM

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.

HTML-Kodu:

<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.

Kod:

.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

HTML-Kodu:

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

Buda Googleapis üzerinden gelen dosya

HTML-Kodu:

<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.

HTML-Kodu:

<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.

+ YouTube Video

Alintidir.

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

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder
Stil
Normal Hybrid-Şeklinde gösterime geç Ağaç şeklinde gösterime geç

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)