cummolog

tasarım: skinpress.com
dil: ingilizce
özellikler: kırmızı, siyah, gri, açık kahve renkler, sağda kenar çubuğu, rss ikonu.

önizle | indir

burada ayrıntılı olarak anlattığım colorbox uygulamasının diğer bir çeşidine geldi sıra. önizleme için tıklayın: colorbox - 2

efektin uygulanışı:

yerleşim>html'yi düzenle bölümü açılır ve </head> etiketinin öncesine aşağıdaki kod eklenir:

<link type='text/css' media='screen' rel='stylesheet' href='http://www.hotlinkfiles.com/files/2689601_f1wqf/colorbox2.css' />
<link type='text/css' media='screen' rel='stylesheet' href='http://www.hotlinkfiles.com/files/2689602_2imnk/colorbox2-custom.css' />
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://www.hotlinkfiles.com/files/2689603_j2cv4/colorbox2-custom-ie.css' title='example' />
<![endif]-->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type='text/javascript' src='http://www.hotlinkfiles.com/files/2689600_qqia9/jquery.colorbox2.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$.fn.colorbox.settings.bgOpacity = '0.5';
$('.rsm').colorbox();
$('#ajax').colorbox({contentWidth:'300px', contentHeight:'195px'});
$('#flash').colorbox({contentAjax:'../content/flash.html'});
$('#web').colorbox({contentWidth:'600px', contentHeight:'450px', contentIframe:true});
$('#inline').colorbox({contentWidth:'500px', contentInline:'#inline-content'});
});
</script>

geri kalan işlemlere buradan ulaşabilirsiniz.

tasarım: ericulous.com
blogger'a dönüştürme: btemplates.com
dil: ingilizce
özellikler: mavi, beyaz, turuncu renkler, yuvarlanmış köşeler, sağda kenar çubuğu, wordpress'ten uyarlama.

önizle
indir: blogger | wordpress

colorbox, sayfada bulunan görsellerin, web adreslerinin, ajax ve flash dosyalarının özel bir efektle görüntülenmesini sağlayan lightbox benzeri bir uygulamadır. resmi web sitesi colorpowered.com'dur. aşağıda uygulanışı açıklanan colorbox örneğini görmek için tıklayın : colorbox - 1

açık anlatımını ilk olarak teknomobi.net'te gördüğüm bu efektin uygulanışına bakalım:

yerleşim>html'yi düzenle bölümü açılır ve </head> etiketinin öncesine aşağıdaki kod eklenir:

<link href='http://www.hotlinkfiles.com/files/2689386_odgnx/colorbox.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='http://www.hotlinkfiles.com/files/2689383_6dsxx/colorbox-custom.css' media='screen' rel='stylesheet' type='text/css'/>
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://www.hotlinkfiles.com/files/2689385_wuxpu/colorbox-custom-ie.css' title='example' />
<![endif]-->
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>google.load(&#39;jquery&#39;, &#39;1.3.2&#39;);</script>
<script src='http://www.hotlinkfiles.com/files/2689384_ydsp0/jquery.colorbox.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$.fn.colorbox.settings.transition = 'elastic';
$.fn.colorbox.settings.bgOpacity = '0.9';
$.fn.colorbox.settings.contentCurrent = 'Görsel {current} / {total}';
$('.rsm').colorbox();
$('#ajax').colorbox({contentWidth:'300px', contentHeight:'195px'});
$('#flash').colorbox({contentAjax:'../content/flash.html'});
$('#web').colorbox({contentWidth:'800px', contentHeight:'600px', contentIframe:true});
$('#inline').colorbox({contentWidth:'500px', contentInline:'#inline-content'});
});
</script>

şablon kaydedilir.

sıradaki işlem eklenen görsele efektin verilmesidir, bunun için görselin kodlarına kırmızı renkli kodlar eklenmelidir:

<a class="rsm" title="Açıklama Bölümü" onblur="try {parent.deselectBloggerImageGracefully();}
catch(e) {}" href="http://i31.tinypic.com/2hdz28z.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;
cursor:pointer; cursor:hand;width: 200px; height: 130px;" src="http://i31.tinypic.com/2hdz28z.jpg" border="0" alt="" /></a>


class="rsm" ile görsele colorbox efekti atanır.
title="Açıklama Bölümü" ile tercihen görselin altına açıklama eklenebilir.

eğer bir albüm oluşturmak istiyorsanız, albümde yer alacak görsellere aşağıdaki gibi bir "rel" etiketi eklenir:

<a class="rsm" rel="album" title="Açıklama Bölümü" onblur="try {parent.deselectBloggerImageGracefully();}
catch(e) {}" href="http://i31.tinypic.com/2hdz28z.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;
cursor:pointer; cursor:hand;width: 200px; height: 130px;" src="http://i31.tinypic.com/2hdz28z.jpg" border="0" alt="" /></a>


web site görüntüleme için gereken kod şu şekilde:

<a id="web" href="http://www.google.com.tr/">google</a>


diğer kullanım alanları ise id="flash", id="ajax", id="inline" etiketleriyle aktif hale getirilebilir.

not:

1. "rel" etiketine verilen "album" ismini değiştirebilirsiniz ancak bu değişikliği albümde yer almasını istediğiniz tüm görsellerin kodlarına uygulamalısınız.

2. "rsm" ve "web" gibi sınıf isimlerini değiştirmek istiyorsanız, javascript kodunda kırmızı renkle belirtilmiş isimleri değiştirmeniz yeterlidir.

diğer colorbox türleri: colorbox efekti - 2

microsoft office'in yeni sürümü 2010 yılında piyasaya sürülecek. office 2010, word, excel, powerpoint ve onenote'un web üzerinden kullanılabilecek sürümlerini de bünyesinde barındıracak. kullanıcılar bu programları bilgisayarlarına kurmak ve kurulum için ücret ödemek zorunda olmayacaklar. uygulamalar, web reklamlarıyla finanse edilecek.

yeni sürüm office'in dağıtımına 2010 yılının ilk yarısında başlanması hedefleniyor. pakette word, access, excel, powerpoint, onenote, outlook, infopath, project, publisher, sharepoint designer, sharepoint workspace ve visio olacak.

microsoft, bu atağıyla google docs ile rekabetinin süreceği sinyalini veriyor.

office 2010'un ilk ekran görüntüleri ise şu şekilde:

ntfs:

microsoft tarafından fat dosya sisteminin yeniden yapılandırılmasıyla, windows işletim sistemi için geliştirilmiş dosya sistemidir. açılımı "new technology file system"dır.

özellikleri:


- veri kurtarma işleminin gerçekleştirilmesini sağlar.
- güvenlik önlemi için dosya şifrelenmesi özelliğini barındırır.
- istenen seviyede güvenlik düzenlenmesini destekler.
- "remote storage" sayesinde taşınabilir saklama alanlarının yönetilmesini sağlar.
- disk aktivite "log"larının tutulmasını ve güç kesintisi ile oluşabilecek veri kaybını önler.
- disk kotaları ile sınırlı disk alanı kullanımını sağlar.
- büyük disk alanlarını destekler ve performans kaybına yol açmaz. 120 gb'lık bir ntfs disk 16 kb'lık cluster kullanılırken, fat32 tipi diskte 64 kb'lık cluster kullanılır. cluster boyutu ne kadar küçük olursa disk performansı o kadar yüksek olur.

fat:

ms-dos ile kullanılmaya başlanan eski tip bir dosya sistemidir. kısıtlı bir alanın sadece tek parça olarak kullanılmasına izin verir. tekil alan boyutu 2 gb'dır. açılımı "file allocation table"dır.

fat32:

fat dosya sistemine nazaran daha küçük boyutlu cluster kullanır. bu yüzden fat dosya sisteminden daha performanslı bir sistemdir.


fat ve fat32, özellikle "dual-boot" denilen eski işletim sistemlerinde kullanılır.
bilgisayarda windows 95/98 gibi işletim sistemlerinin kullanılması gerekmiyorsa ntfs kullanılması önerilir. ntfs, windows nt/xp/2000/server 2003-2008/vista/7'de kullanılmaktadır.

"image opacity" denilen resim şeffaflaştırma son zamanlarda web tasarımcılar tarafından sıkça tercih edilmektedir. resim yarı saydam halindedir, fare imleci ile üzerine gelindiğinde saydamlık kaybolur ve resim normal bir şekilde gözükür. şeffaflaştırılmış bir resim örneği:

bunu gerçekleştirmek gayet basit:

yerleşim>html'yi düzenle bölümü açılır ve </head> etiketi öncesine aşağıdaki kod eklenir:

<style type='text/css'>
a.op img {
filter:alpha(opacity=60);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.op:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

şablon kaydedilir.

not: kodlardaki 60 ve 100 değerlerini değiştirerek şeffaflığı arttırabilir ya da azaltabilirsiniz.

bundan sonra yapılması gereken eklenen resme şeffaflık özelliğini vermek.
bunun için aşağıda bir kısmına yer verilmiş resim koduna, kırmızı renkle yazılmış kodları eklemek:

<a class="op" onblur="try {parent.deselectBloggerImageGracefully ...

cummolog'un her postasında görülen "devamını oku" özelliğini eklemek için aşağıdaki yolu takip edin:

öncelikle şablonun yedeği hata ihtimaline karşın kaydedilmelidir.

ardından yerleşim>html'yi düzenle bölümüne gelinip "widget şablonlarını genişlet" seçeneği seçilir. <head> etiketi bulunup, hemen altına aşağıdaki kod eklenir:

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

bu işlemden sonra <data:post.body/> etiketi bulunup, hemen altına aşağıdaki kod eklenir:

<b:if cond='data:blog.pageType != "item"'><br/><a expr:href='data:post.url'>devamını oku..</a>
</b:if>

ardından şablon kaydedilir.

not: "devamını oku.." bölümünü değiştirip istediğinizi yazabilirsiniz.

sıradaki işlem ise yazının istenen kısmının nasıl gizleneceği. bir örnek:

Bu kısım yazının gözükecek kısmıdır ve yazının hemen altına "devamını oku" linki gelir.
<span class="fullpost"> Bu kısım ise yazının saklanan kısmıdır ve gözükmesi için "devamını oku" linkine tıklanmalıdır.</span>

cummolog'da örneğini gördüğünüz son yorumlar eklentisini blogunuza yerleştirmek için;

yerleşim>sayfa öğeleri>gadget ekle>html/javascript i seçin ve aşağıdaki kodu yapıştırın:





<script style="text/javascript" src="http://www.hotlinkfiles.com/files/2670198_ggr0z/sy_cummolog.js"></script>
<script style="text/javascript">var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script>
<script src="http://adresiniz.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>


"5" yorum sayısını, "100" ise karakter sayısını gösterir. "adresiniz" yazan yere blog adresinizi yazmayı unutmayın.

ad ve soyad adlı iki değişkene değer atama aşağıdaki gibi gerçekleştirilir:







<html>
<head>
<meta http-equiv="Content-Language"content="tr">
<meta http-equiv="Content-Type"content="text/html charset=windows,1254">

<title> değişken aktarma </title>
<body>

<?php
/* değişkenleri tanımlayalım*/
$ad="Rasmus";
$soyad="Lerdorf";
/* değişkenleri sayfaya yazdıralım*/
echo "Adım:$ad,Soyadım:$soyad<br>";
echo 'Adım:$ad,Soyadım:$soyad<br>';
/*tek tırnak ile çift tırnak arasındaki farkı görüntülemede görebilirsiniz.*/
?>

</body>
</html>

yeni sekmede açılan link örneği: cummolog
bunun için aşağıdaki kırmızı renkle belirtilmiş kodlardan birisini eklemeniz gerekmektedir:

<a href="http://site_adresi" target="_blank">site_ismi</a>

<a href="http://site_adresi" target="_blogView">site_ismi</a>