Google Arama ve Twitter Güncellemeleri Bölümlerinin Özelliştirilmesi (Javascript)

Blog yazarlarının sayısının artıyor olması kişileri hazır tasarımlar üzerinde kendi becerileri ile daha farklı görünümler kazanmalarına yöneltiyor. Hal böyle olunca artık sosyal ağlara da bloglar üzerinde yer verildi ve bunların bloglar üzerine uygulanış şekilleri kişilere farklı şekiller ile sergilenmeye başladın. Aslında hem yaratıcılık hemde kodlama bilgisi bu sayede her seferinde bir adım daha ileri gidiyor. İşte benimde bu temada uygulamış olduğum hem Google Arama Motoru hem de Twitter güncellemelerim blogumda farklı bir şekilde aksediyor.

Hemen anlatmaya başlayayım! Öncelikle Google Arama Motoru’nun işleyişi şöyle oluyor; kullanmış olduğum javascript kodları ile blogda yapılan google aramasında sayfa yeniden yüklenmeden, mevcut sonuçlar hemen aynı sayfada gösteriliyor. Bu sayede daha aktif bir sayfa yapısına kavuşulmuş olunuyor ve sonuçlara tıklandığında ilgili konuya hemen gidilebiliyor. Şimdi gelelim bu güzel çalışmanın temaya uygulanmasına;

<div id='cse' style='width:100%;'>Yükleniyor...</div> 
<script src='http://www.google.com/jsapi' type='text/javascript'></script> 
<script type='text/javascript'> 
google.load('search', '1');
google.setOnLoadCallback(function(){
var cse = new google.search.CustomSearchControl();
cse.enableAds('pub-XXXXXXXXXXXXXXX');
cse.draw('cse');
cse.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
}, true);
</script> 

Yukarıda XXXXXXXXXXXXXXX olarak görmüş olduğunuz yere google hesabınızın numarasını yapıştırmanız ile kazançlarınız sizin hesabınıza aktarılacaktır.

Gelelim şimdi Twitter için oluşturacağınız bölüme bunu için de aşağıdaki kodları temanız da twitter güncellemeleriniz görüntülemek istediğiniz yere yapıştırın.

<style type='text/css'>

#twitter_update_list li {
padding-bottom:6px;
border-bottom:solid 1px #DEDEDE;
margin-bottom:6px;
}

.twitter-follow{ 
background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SgxdH2E0JsI/AAAAAAAAEDE/HTXaxE7_KaU/twitter.png) right  no-repeat;
font-size:11px;
float:right;
margin-top:7px;
margin-right:4px;
padding-right:20px;
height:16px;
font-weight:bold;
}


</style>

<h2><span class='twitter-follow'><a href='http://www.twitter.com/sanalduvar'>Twitter Takip! </a></span>Tweetlerim</h2> 
<div id='twitter_div'> 
<ul id='twitter_update_list'>Tweetler Yükleniyor...</ul> 
</div> 

<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'></script> 
<script src='http://twitter.com/statuses/user_timeline/sanalduvar.json?callback=twitterCallback2&count=5' type='text/javascript'></script> 

Yukarıda görmüş olduğunuz http://www.twitter.com/sanalduvar adresini kendi twitter adresiniz ile değiştirin. <style> ve </style> bölümleri arasından bu bölüm için görsel değişikliği yapabilirsiniz.

Kodlama konusunda fazla bilgi olmayan arkadaşlar dahi bunları yapması sonucu sayfalarında bahsettiğim bu uygulamaları kullanabilirler. Teşekkürler!..