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

google-arama-tiwtterBlog 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;

http://img695.imageshack.us/img695/6543/googlearamajs.jpg

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

Veysel

Veysel

Sosyal Medya ve İnternetteki gelişmeleri inceleyen, Web Tasarım Araçları, CMS(İçerik Yönetim Sistemi)leri, özellikle WordPress üzerine haberleri araştıran, 2007 yılında yayın hayatına başlayan SanalDuvar.Com'un yöneticisidir. Ana Bilim Dalı Elektrik-Elektronik Mühendisliği olan bir Sistem Mühendisidir.

You may also like...

2 Responses

  1. Babylon indir dedi ki:

    twitter de kendi sayfamıza ekleme ile ilgili kısmı tam anlayamdım. Sayfa değiştir tamam. Sonrasında sytle bölümleri için görsel değişiklik yapabilirsiniz diyorsun. Burasını biraz daha detaylı anlatırsan sevinirim.

  2. Zimin dedi ki:

    Bravo, I think this is a great idea

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.