02 Haziran 2009

Blogger için Arşiv Takvim Widgeti Yapmak

Sevgili dostlar ne zamandır aradığım bir aleti buldum.Birkaç gün önce bir önceki yazımı yazarken phydeaux3 de uğramışken biraz sağı solu kurcalayayım dedim. Sağa sola bakarken (ARCHİVE CALENDER) ARŞİV TAKVİM gözüme çarptı. Daha önce görmemiştim. Ya da vardı da sanki benim dikkatimi çekmemişti. Her neyse hemen blogun sağını solunu aramaya başladım ve de buldum.

Evet yanılmamışım phydeaux3 BLOGGER kullananlar için bir ARŞİV TAKVİM tasarlamış. Takvimi denedim ve de çok güzel çalıştığını gördüm. Benim hoşuma gitti belki sizin de hoşunuza gider düşüncesiyle burada BLOGGER a nasıl uyarlayacağınızı anlatmaya çalışacağım. Bu takvimi denerken gördüm takvimin hazır birkaç değişik görünüşünün de hazır kodlarını vermiş sayın phydeaux3. Ama bu da sizi kesmezse takvim görünüşünü istediğiniz gibi basitçe düzenleyebileceğiniz kodları da vermiş. Ama yok ben daha değişik bir takvim istiyorum derseniz de gerisi artık sizin sınırsız yeteneğinize kalıyor. Bu arada belirtmeden geçemeyeceğim . phydeaux3 bilmenizi isterim bu takvim için epeyce emek harcamış. Her neyse ARŞİV TAKVİM Blogger’a nasıl uyarlanacak onu anlatmaya başlayalım.

Bu sadece Yeni Blogger Şablonlarında HTML’yi Düzenle kullanarak uygulanabilir. (Blogspot veya özel alan).. Klasik Şablonlara uygulanamaz.

Ayrıca, mesaj için beslemeler için ayarlar bölümünde (Blogger> Kontrol Paneli> Ayarlar> Site Beslemesi> Yazı Beslemesi ya Tam veya Kısa ayarlı olabilir) etkin olmalıdır. Özel herkesin ziyaret edemediği izine bağlı bloglarda da uygulanamaz, bu yüzden beslemeler desteklenmez.

1. ADIM :

İşleme başlamadan evvel her zamanki gibi şablonunuzun bir yedeğini alın. Şablonda Git > HTML’yi Düzenle sekmesine. Bu Widget Şablonlarını Genişlet kutusunu da (varsayılan) işaretlemeyin

Bu kod Arşiv widgeti yerini alacak. Aşağıdaki kod satırlarını şablon kodları içinde bulun. Bu kod satırları aşağıdaki gibi bir şey olacaktır.

Yukarıda vurgulanmış mavi renkli satırı aynı şekilde seçin ve aşağıdaki kod kümesini kopyalayıp seçili satırın üstüne yapıştırın.

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>

</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>

<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>

</caption>

<thead id='bcHead'></thead>



<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>

<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>

</div>

<script type='text/javascript'> initCal();</script>

</b:includable>
<b:includable id='posts' var='posts'>

</b:includable>
<b:includable id='menu' var='data'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='interval' var='intervalData'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>

Bu noktada siz şablonu kaydetmek isteyebilirsiniz. Eğer yukarıdaki kodları doğru kopyalayıp yine tarif edilen yere doğru yapıştırdığınızdan tekrar kontrol ederek emin olun. Şablonu bence henüz bu aşamada kaydetmeyin. Çünkü daha kopyalayıp yapıştıracağımız çok kod var.

Şimdi, kopyalama yapıştırma işlemine devam edelim. Eğer bir dış sunucu yani kullandığınız online dosya depolama alanınız varsa (hiçbir düzeltme yapmadan / script etiketleri ile biten) ve. Js uzantılı bir dosya olarak aşağıdaki script kodlarını not pad e kopyalayıp yapıştırın ve kaydedin, daha sonra bu dosyaya bağlantı vererek de bu dosyayı script kodlarını çalıştırabilirsiniz. Ya da şu anda tarif edeceğim yere aşağıdaki script kodlarını direk kopyalayıp yine tarif edeceğim yere yapıştırın. Bu işlem daha kolay gibi geliyor bana. Yinede tercih sizin. Evet artık devam edebiliriz.

2.ADIM :

Şablonunuzda Bu bitiş etiketini à ]]></ b: skin> ve kapanış à </ head> etiketini bulun. Bu etiketler aynen yazıldığı gibi olacaktır.

Yukarıdaki resimde mavi renkle vurguladığımız daha önce bahsettiğimiz iki kapanış etiketinin arasına aşağıdaki kodları kopyalayıp yapıştıracağız. Bu bölümde daha önce bu bölüme konmuş başka script kod kümeleri olabilir. O zaman kafanızın karışmaması ve yanlış yapmamanız için ya </head> kapanış etiketinin hemen üstüne veya ]]></ b: skin> kapanış etiketinin hemen altına da yapıştırabilirsiniz.

<script type='text/javascript'>
//<![CDATA[

var bcLoadingImage = "http://phydeauxredux.googlepages.com/loading-trans.gif";
var bcLoadingMessage = " Loading....";
var bcArchiveNavText = "View Archive";
var bcArchiveNavPrev = '◄';
var bcArchiveNavNext = '►';
var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"];

// Nothing to configure past this point ----------------------------------
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new Array ();

//Initialize Fill Array
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];
function openStatus(){
document.getElementById('calLoadingStatus').style.display = 'block';
document.getElementById('calendarDisplay').innerHTML = '';
}
function closeStatus(){
document.getElementById('calLoadingStatus').style.display = 'none';
}
function bcLoadStatus(){
cls = document.getElementById('calLoadingStatus');
img = document.createElement('img');
img.src = bcLoadingImage;
img.style.verticalAlign = 'middle';
cls.appendChild(img);
txt = document.createTextNode(bcLoadingMessage);
cls.appendChild(txt);
}
function callArchive(mth,yr,nav){
// Check for Leap Years
if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
calMonth = mth;
calYear = yr;
if(mth.charAt(0) == 0){
calMonth = mth.substring(1);
}
callmth = mth;
bcNavAll = document.getElementById('bcFootAll');
bcNavPrev = document.getElementById('bcFootPrev');
bcNavNext = document.getElementById('bcFootNext');
bcSelect = document.getElementById('bcSelection');
a = document.createElement('a');
at = document.createTextNode(bcArchiveNavText);
a.href = bcNav[nav];
a.appendChild(at);
bcNavAll.innerHTML = '';
bcNavAll.appendChild(a);
bcNavPrev.innerHTML = '';
bcNavNext.innerHTML = '';
if(nav < bcNav.length -1){
a = document.createElement('a');
a.innerHTML = bcArchiveNavPrev;
bcp = parseInt(nav,10) + 1;
a.href = bcNav[bcp];
a.title = 'Previous Archive';
prevSplit = bcList[bcp].split(',');
a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;};
bcNavPrev.appendChild(a);
}
if(nav > 0){
a = document.createElement('a');
a.innerHTML = bcArchiveNavNext;
bcn = parseInt(nav,10) - 1;
a.href = bcNav[bcn];
a.title = 'Next Archive';
nextSplit = bcList[bcn].split(',');
a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;};
bcNavNext.appendChild(a);
}
script = document.createElement('script');
script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';
document.getElementsByTagName('head')[0].appendChild(script);
}

function cReadArchive(root){
// Check for Leap Years
if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
closeStatus();
document.getElementById('lastRow').style.display = 'none';
calDis = document.getElementById('calendarDisplay');
var feed = root.feed;
var total = feed.openSearch$totalResults.$t;
var entries = feed.entry || [];
var fillDate = new Array();
var fillTitles = new Array();
fillTitles.length = 32;
var ul = document.createElement('ul');
ul.id = 'calendarUl';
for (var i = 0; i < feed.entry.length; ++i) {
var entry = feed.entry[i];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
var link = entry.link[j].href;
}
}
var title = entry.title.$t;
var author = entry.author[0].name.$t;
var date = entry.published.$t;
var summary = entry.summary.$t;
isPublished = date.split('T')[0].split('-')[2];
if(isPublished.charAt(0) == '0'){
isPublished = isPublished.substring(1);
}
fillDate.push(isPublished);
if (fillTitles[isPublished]){
fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;
}
else {
fillTitles[isPublished] = title;
}
li = document.createElement('li');
li.style.listType = 'none';
li.innerHTML = '<a href="'+link+'">'+title+'</a>';
ul.appendChild(li);

}
calDis.appendChild(ul);
var val1 = parseInt(calDay, 10)
var valxx = parseInt(calMonth, 10);
var val2 = valxx - 1;
var val3 = parseInt(calYear, 10);
var firstCalDay = new Date(val3,val2,1);
var val0 = firstCalDay.getDay();
startIndex = val0 + 1;
var dayCount = 1;
for (x =1; x < 38; x++){
var cell = document.getElementById('cell'+x);
if( x < startIndex){
cell.innerHTML = ' ';
cell.className = 'firstCell';
}
if( x >= startIndex){
cell.innerHTML = dayCount;
cell.className = 'filledCell';
for(p = 0; p < fillDate.length; p++){
if(dayCount == fillDate[p]){
if(fillDate[p].length == 1){
fillURL = '0'+fillDate[p];
}
else {
fillURL = fillDate[p];
}
cell.className = 'highlightCell';
cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>';
}
}
if( dayCount > fill[valxx]){
cell.innerHTML = ' ';
cell.className = 'emptyCell';
}
dayCount++;
}
}
visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1;
if(visTotal >35){
document.getElementById('lastRow').style.display = '';
}
}

function initCal(){
document.getElementById('blogger_calendar').style.display = 'block';
var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
document.getElementById('bloggerCalendarList').style.display = 'none';
calHead = document.getElementById('bcHead');
tr = document.createElement('tr');
for(t = 0; t < 7; t++){
th = document.createElement('th');
th.abbr = headDays[t];
scope = 'col';
th.title = headDays[t];
th.innerHTML = headInitial[t];
tr.appendChild(th);
}
calHead.appendChild(tr);
for (x = 0; x <bcInit.length;x++){
var stripYear= bcInit[x].href.split('_')[0].split('/')[3];
var stripMonth = bcInit[x].href.split('_')[1];
bcList.push(stripMonth + ','+ stripYear + ',' + x);
bcNav.push(bcInit[x].href);
}
var sel = document.createElement('select');
sel.id = 'bcSelection';
sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
q = 0;
for (r = 0; r <bcList.length; r++){
var selText = bcInit[r].innerHTML;
var selCount = bcCount[r].innerHTML.split('> (')[1];
var selValue = bcList[r];
sel.options[q] = new Option(selText + ' ('+selCount,selValue);
q++
}
document.getElementById('bcaption').appendChild(sel);
var m = bcList[0].split(',')[0];
var y = bcList[0].split(',')[1];
callArchive(m,y,'0');
}

function timezoneSet(root){
var feed = root.feed;
var updated = feed.updated.$t;
var id = feed.id.$t;
bcBlogId = id.split('blog-')[1];
upLength = updated.length;
if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";}
else {timeOffset = updated.substring(upLength-6,upLength);}
timeOffset = encodeURIComponent(timeOffset);
}

//]]>
</script>
<script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=timezoneSet'></script>

4 Mayıs 2007 itibariyle yazılar için saat dilimi ayarlarınız Autodetect olacaktır. Yani otomatik algılanacaktır. Burada bazı şeyler değiştirilebilir olmalı, ama bir kaç şey, bazı insanlar yapılandırmak isteyebilir. (özellikle İngilizce olmayan bloglar) ama şimdi varsayılan normal ayarlarda da yaptık. Eğer bazı şeyleri değiştirmek istiyorsanız (özellikle de) sonra bunu da yapabileceğiniz CSS kodlarını da birazdan aşağıda vereceğim.

Sonra, şablonda bitiş ]]></b:skin> etiketini bulun ve aşağıdaki verilen CSS stil kodlarını tarif edeceğimiz yere kopyalayıp yapıştırın.

Şimdi vereceğimiz kodlar tamamen takvimin biçimini belirleyen kodlardır. Aşağıda çeşitli hazır stil kodları da bulacaksınız.

3.ADIM :

Plain Base Style

Bu stil sizin için uygun olabilir, ancak tüm diğer stilleride denemek isteyebilirsiniz. Ben sizin için bir kaçını denedim.

/* Calendar
----------------------------------------------- */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:98%;}

/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #000;padding:2px;margin:10px 0 0}

/* The Archive Select Menu */
#bcaption select {}

/* The Heading Section */
table#bcalendar thead {}

/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px solid #000; font-family:Tahoma; font-weight:normal;}

/* The calendar Table */
table#bcalendar {border:1px solid #000;border-top:0; margin:0px 0 0px;width:95%;}

/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px solid #000;}

/* Links in Calendar */
table#bcalendar tbody tr td a {font-weight:bold;}

/* First Row Empty Cells */
td.firstCell {visibility:visible;}

/* Cells that have a day in them */
td.filledCell {}

/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}

/* Cells with a Link Entry in them */
td.highlightCell {background:#FFFF99;border:1px outset #000!important}

/* Table Footer Navigation */
table#bcNavigation {width:95%;}
table#bcNavigation a {text-decoration:none;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a{}

Basic styles for Dark Templates

Bu sadece bazı çok temel tarzı olduğu için karanlık şablonlar. Bu, bir vurgulamak ile takvim girişleri etrafında beyaz sınırları vardır. İçinde gawdy yellow. bir gawdy sarı kullanılmıştır. Bu takvimde varsayılan bağlantı renkleri tutmalı.

/* Calendar
----------------------------------------------- */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:98%;}

/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #fff;padding:2px;margin:10px 0 0;}

/* The Archive Select Menu */
#bcaption select {}

/* The Heading Section */
table#bcalendar thead {}

/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px solid #fff; font-family:Tahoma; font-weight:normal;color:#fff;}

/* The calendar Table */
table#bcalendar {border:1px solid #fff;border-top:0; margin:0px 0 0px;width:95%;}

/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px solid #fff;color:#fff;}

/* Links in Calendar */
table#bcalendar tbody tr td a {font-weight:bold;}

/* First Row Empty Cells */
td.firstCell {visibility:visible;}

/* Cells that have a day in them */
td.filledCell {}

/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}

/* Cells with a Link Entry in them */
td.highlightCell {background:#FFFF99;border:1px outset #000}

/* Table Footer Navigation */
table#bcNavigation {width:95%;}
table#bcNavigation a {text-decoration:none;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a{}

Plain White

Bu bir düz beyaz isteyenler içindir. Ve takvim içinde siyah harflerle siyah sınırlar kullanılmıştır.

/* Calendar
----------------------------------------------- */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:98%;}

/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #000;padding:2px;margin:10px 0 0;background:#fff;}

/* The Archive Select Menu */
#bcaption select {border:1px solid #000;}

/* The Heading Section */
table#bcalendar thead {}

/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px solid #000; font-family:Tahoma; font-weight:normal;color:#000;}

/* The calendar Table */
table#bcalendar {border:1px solid #000;border-top:0; margin:0px 0 0px;width:95%;background:#fff;}

/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px solid #000;color:#000;}

/* Links in Calendar */
table#bcalendar tbody tr td a {font-weight:bold;color:#000;}

/* First Row Empty Cells */
td.firstCell {visibility:visible;}

/* Cells that have a day in them */
td.filledCell {}

/* Cells that are empty, after the first row */
td.emptyCell {}

/* Cells with a Link Entry in them */
td.highlightCell {background:#FFFF99;border:1px outset #000}

/* Table Footer Navigation */
table#bcNavigation {width:95%;background:#fff;border:1px solid #000;border-top:0;}
table#bcNavigation a {text-decoration:none;color:#000;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a{}

Blue/Black

Bu stilde mavi, gri, olaylar için siyah ile açık mavi kullanılmıştır.

/* Calendar
----------------------------------------------- */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:98%;}

/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #000;padding:2px;margin:10px 0 0;background:#1F1FFF;}

/* The Archive Select Menu */
#bcaption select {border:0px;background:#1F1FFF;color:#fff;font-weight:bold;}

/* The Heading Section */
table#bcalendar thead {background:#000;}

/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px solid #000; font-family:Tahoma; font-weight:bold;color:#fff;}

/* The calendar Table */
table#bcalendar {border:1px solid #000;border-top:0; margin:0px 0 0px;width:95%;background:#fff;}

/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px solid #000;color:#1F1FFF;}

/* Links in Calendar */
table#bcalendar tbody tr td a {font-weight:bold;color:#000;}

/* First Row Empty Cells */
td.firstCell {}

/* Cells that have a day in them */
td.filledCell {}

/* Cells that are empty, after the first row */
td.emptyCell {}

/* Cells with a Link Entry in them */
td.highlightCell {background:#ddd;border:1px outset #000}

/* Table Footer Navigation */
table#bcNavigation {width:95%;background:#1F1FFF;border:1px solid #000;border-top:0;}
table#bcNavigation a {text-decoration:none;color:#fff;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a{}

Dusty Blue

Tozlu olayları ile Kinda açık mavi, alt menüsü içinse yine açık mavi kullanılmıştır.

/* Calendar
----------------------------------------------- */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;padding:3px;1px solid #000;background:#FFF ; width:100%;}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px outset #000;background:#CCD9FF;padding:2px;margin:10px 0 0}
/* The Archive Select Menu */
#bcaption select {background:#CCD9FF;color:#fff;font-weight:bold;border:0 solid #CCD9FF;text-align:center;}
/* The Heading Section */
table#bcalendar thead {background:#FFF2CC ;color:#111;}
/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px inset #000; font-family:Tahoma; font-weight:normal;}
/* The calendar Table */
table#bcalendar {border:1px solid #000;border-top:0; margin:0px 0 0px;width:95%;}
/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset #000;}
/* Links in Calendar */
table#bcalendar tbody tr td a {font-weight:bold; color:#527DFF;}
/* First Row Empty Cells */
td.firstCell {visibility:visible;}
/* Cells that have a day in them */
td.filledCell {background:#fff;}
/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}
/* Cells with a Link Entry in them */
td.highlightCell {background:#FFF2CC;border:1px outset #000!important}
/* Table Navigation */
table#bcNavigation {width:95%;background:#FFF2CC;border:1px inset #000;border-top:0;color:#fff;}
table#bcNavigation a {color:#527DFF;text-decoration:none;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a{ color:#527DFF}

Blogger Yazı tiplerini/ Renkleri Ayarlayıcı: (Yazı Tipleri ve Renkler)

Bu çoğunuz için en iyi seçenek olabilir. Bu kodlarla, takvimin tüm renkleri ve yazı tipleri ile iyi bir şekilde oynama yapabilirsiniz. Bu kod bölümü Blogger Yazı Tipleri ve Renkler bölümünden görerek anında istediğiniz değişiklikleri yapabilmenizi sağlayacak.. NOT: Yalnız burada ayarlama yaparken, Blogger Arşiv betiklerini tamamen ön izleme de göremeyebilirsiniz. Burada sadece takvim biçim değişikliklerini görebilirsiniz. Ama yok yeterli görmezseniz o zaman yaptınız her değişiklikten sonra şablonu kaydedin daha sonra başka bir pencere veya sekmede blogunuzun ön izlemesine bakabilirsiniz. Bu şekilde her şeyi görebilirsiniz. Sadece seçimler yapın, sonra, kaydedin ve başka bir sekmede görüntülemek için blogunuzu açın ve görünümü kontrol edin.

Bu kurmak için, sadece gerekli olan CSS ile tüm değişken tanımlamalarının WYSIWYG editörü ile düzenleme ihtiyaçlarınız için aşağıdaki kodu kopyalayıp CSS Style bölümüne yapıştırmanız gerekiyor. Tüm CSS dosyaları gibi görev yapar, sadece aşağıdaki kodları kopyalayıp bitiş ]]></ b: skin> etiketini bulun. hemen üstüne yapıştırın

(buraya yapıştırın) ß

]]></b:skin>

Arşiv Takvim Değişken kurulum ve ARŞİV TAKVİM kodları:

/* Archive Calendar Variable Setups
Do not modify unless you know what's what
=========================================

<Variable name="bcCalenderFonts" description="Calendar Font Sizes"
type="font" default="normal normal 100% Tahoma, Arial, Sans-serif" / value="normal normal 100% Tahoma, Arial, Sans-serif">
<Variable name="bcTableBackgroundColor" description="Calendar Background Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="bcTableBorderColor" description="Calendar Border Color"
type="color" default="#000000" value="#000000">
<Variable name="bcTableTextColor" description="Calendar Text Color"
type="color" default="#000000" value="#000000">
<Variable name="bcMenuBackgroundColor" description="Calendar Menu Select Background Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="bcMenuTextColor" description="Calendar Menu Select Text Color"
type="color" default="#000000" value="#000000">
<Variable name="bcTableHeaderBackgroundColor" description="Calendar Header Background Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="bcTableHeaderTextColor" description="Calendar Header Text Color"
type="color" default="#000000" value="#000000">
<Variable name="bcTableHighLightColor" description="Calendar Highlight Color"
type="color" default="#cccccc" value="#cccccc">
<Variable name="bcCalenderLinksColor" description="Calendar Links Color"
type="color" default="#0000ff" value="#0000ff">
<Variable name="bcCalenderLinksHoverColor" description="Calendar Links Hover Color"
type="color" default="#0000ff" value="#0000ff">
<Variable name="bcTableFooterBackground" description="Calendar Footer Background Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="bcFooterLinksColor" description="Calendar Footer LinksColor"
type="color" default="#0000ff" value="#0000ff">

===========================================
End Archive Calendar Variables */

/* Archive Calendar CSS
----------------------------------------------- */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:98%;}

/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid $bcTableBorderColor;padding:2px;margin:10px 0 0;background:$bcMenuBackgroundColor;font:$bcCalenderFonts}

/* The Archive Select Menu */
#bcaption select {background:$bcMenuBackgroundColor;border:0 solid $bcMenuBackgroundColor;color:$bcMenuTextColor;font-weight:bold;text-align:center;}

/* The Heading Section */
table#bcalendar thead {}

/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px outset $bcTableBorderColor; font:$bcCalenderFonts;background:$bcTableHeaderBackgroundColor;color:$bcTableHeaderTextColor}

/* The calendar Table */
table#bcalendar {border:1px solid $bcTableBorderColor;border-top:0; margin:0px 0 0px;width:95%;background:$bcTableBackgroundColor}

/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset $bcTableBorderColor; color:$bcTableTextColor;font:$bcCalenderFonts;}

/* Links in Calendar */
table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:$bcCalenderLinksColor;}
table#bcalendar tbody tr td a:hover {color:$bcCalenderLinksHoverColor;}

/* First Row Empty Cells */
td.firstCell {visibility:visible;}

/* Cells that have a day in them */
td.filledCell {}

/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}

/* Cells with a Link Entry in them */
td.highlightCell {background:$bcTableHighLightColor;border:1px solid $bcTableBorderColor}

/* Table Footer Navigation */
table#bcNavigation {width:95%;background:$bcTableFooterBackground;border:1px solid $bcTableBorderColor;border-top:0;color:$bcTableTextColor;font:$bcCalenderFonts;}
table#bcNavigation a:link {text-decoration:none;color:$bcFooterLinksColor}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a:link {}

Artık şablonumuzu kaydedebilirsiniz. Bu aşamada en aşağıda resimde görülen düzeltmeyi yazı sonunda bulacaksınız. O düzeltmeyide yaptıktan sonra artık takvimimize bakabiliriz. Şu ana kadar yaptığınız işlemlerin doğru olup olmadığını kontrol edebilirsiniz.

Daha sonra, sadece Yazı Tipleri ve Renkler bölümünden renkleri ve yazı tiplerini uygun şekilde değiştirebilirsiniz.. Takvim için ilk giriş "Takvim Yazı Boyutları", ve geri kalanı Arşiv Takvim Widgeti Unutmayın, tamamen Fontlar ve Renkler değildir hemde aynı zamanda arşivinizi oluşturan yazılarınızın tümünü içerir takvim olacaktır.

Daha ileri düzeyde kullanıcılar için unutmayın. Eğer istiyorsanız ve ne yaptığınızı biliyorsanız bu değişkenler bölümüne kadar bozulmadan taşımak için güvenli olduğundan emin olduğunuz diğer değişkenler Şablonun üstündeki kurulum şablonun da da vardır. İnsanlar bu şekilde, diğer verilen stil kodlarını temiz bulabilir ve CSS stil kodlarında değişiklikler yapabilirler. Aksi takdirde, sadece verdiğimiz orijinal kodları olduğu gibi bırakırsanız Arşiv Takvim doğru çalışacaktır.

Şimdi şablonunuzu kaydedin. Bu yaptığımız işlemleri hatasız kaydetmek gerekir Yukarıda ki tarif edilen adımları tekrar takip ederek kontrol edebilirsiniz... Bir şey daha var sizin Arşiv Widget'iniz yapılandırılmış olması gerekir. Blogger Arşiv Takvim Ayarlar Sayfasında bulunan tam liste özellikleri bölümünde aşağıda gösterildiği gibi ufak bir düzeltme yapmamız gerekiyor. Şimdi artık Sayfa Öğelerini Ekleyin ve Düzenleyin bölümüne gidip Arşiv Takvim Widget'ini bulmak ve düzenlemek için tıklayın. Aşağıdaki resimdeki gibi düzenlemeleri yapın.

Örnek ARŞİV TAKVİM örneğini sağda side barda bulabilirsiniz. Nasıl çalıştığını kurcalayıp görebilir inceleyebilirsiniz.Hepinize kolay gelsin.

Devamını Oku >>

01 Haziran 2009

Blogger için Etiket Bulutu widgeti oluşturmak

Dostlar bugün konumuz ETİKET BULUTU ingilizcesi TAG CLOUD veya LABEL CLOUD. Bu blog da sidebar da TECHNORATİ ve DELİCİOUS sitelerinin ETİKET BULUTU widgetlerini görebilirsiniz. Şimdi diyenleriniz çıkabilir “Nereden çıktı bu ETİKET BULUTU olayı?” ETİKET BULUTU olayını TECHNORATİ veya DELİCİOUS gibi siteler vasıtasıyla oluşturup bu sitelerin verdiği kodları GADGET EKLE araçlarından HTML/JavaScript aracı ile benim yaptığım gibi blogunuzda dilediğiniz yere koyabilirsiniz.

Ama bugün benim burada değineceğim ETİKET BULUTU olayı başka. Yani ETİKET BULUTU üretme özelliğini kullandığınız BLOGGER şablonuna kazandırmak. WORDPRESS kullananlar bilirler. WORDPRESS de bu özellik zaten vardır. BLOGGER da bu özellik yoktur. Şimdi bugün bu özelliği kullandığımız şablona nasıl ekleyebiliriz onu anlatacağım. Bu konuyu bir şablonu kurcalarken phydeaux3 da anlatıldığını gördüm. Bu blog benim sıkça takılıp yararlandığım, epeyce şey öğrendiğim bloglardan biri. Bu konuda ki orijinal İngilizce anlatıma buradan ulaşabilirsiniz.

Yeni Blogger için Tag Cloud / Etiket Bulutu oluşturmak

İşte kod ve kurulum bilgileri:

Yeni Blogger'da Etiket Bulutu oluşturmak için ilk önce yine Yeni Blogger'da bir blog olmalı ve HTML’yi Düzenle bölümü olması gerekiyor, (bu klasik şablonlar veya FTP bloglarında mevcut değildir) ve en önemlisi zaten yazılarınızın etiketlere sahip olması gerekiyor. (En az bir etiket bir veya birden fazla kullanılmalı . Bu yüzden başlamadan önce birden fazla kullanılmış etiket veya en az bir etiketin olduğundan emin olun).

Herhangi bir değişiklik yapmadan önce şablonu yedeklediğinizden emin olun!

Blogger'a giriş yapın ve yerleşim bölümüne gidin. Ve 'Sayfa Öğeleri' kurulum sayfasında (bir etiketler widgeti zaten olması lazım. Bu etiketler widgetinin yüklü olduğundan emin olun yüklü değilse yükleyin). Sonra HTML'yi Düzenle bölümüne gidin. Burada öncelikle şablonunuzu yedekleyin. Daha sonra aşağıda sırasıyla vereceğim kodları tarif edeceğim yerlere kopyala yapıştır yöntemiyle yerleştirin.

Şimdi bu işlemi 3 aşamada gerçekleştireceğiz. Stil, bölümünde bir yapılandırma gerçekleştireceğiz. İlk bölüm için stil (style sheet) bölümünde Aşağıdaki kodu kopyalayıp yapıştırmak gerekiyor. bunun içinde <b:skin> etiketi ile başlayan style (style sheet), bölümünde düzenlemeyi gerçekleştirmek için kapanış etiketi olan bu bu kodları bulacağız.

aşağıdaki kodları bu kapanış etiketinin hemen üst bölümüne kopyalayıp yapıştıracağız.

/* Label Cloud Styles ----------------------------------------------- */ #labelCloud {text-align:center;font-family:arial,sans-serif;} #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;} #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;} #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0} #labelCloud a{text-decoration:none} #labelCloud a:hover{text-decoration:underline} #labelCloud li a{} #labelCloud .label-cloud {} #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000} #labelCloud .label-cloud li:before{content:"" !important}

Bu bölüm ETİKET BULUTU yapılandırma bölümüdür. Bu bölümü oluşturmak için stylesheet tag kapanış etiketini bulmamız yeterli olacaktır.

Bu kez ikinci aşamada verilen kodu yukarıdaki kapanış kodundan hemen sonra yani hemen altına veya </ head> etiketinin hemen önüne yani üstüne İşte burada.

aşağıda verdiğim kodları yine kopyalayıp hemen yukarıda tarif ettiğim yere yapıştıracağız.

<script type="text/javascript">

// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;</script>

Tüm bu ayarlar değiştirilebilir daha sonra bunları açıklayacağım. Şimdilik Varsayılan özellikler çalışacaktır.
Şimdi son aşamada widgetin kendisini gerçekleştireceğiz.. Aşağı gidin ve aşağıdaki kod satırını bulun

aşağıdaki kodu kopyalayın ve daha sonra bulduğumuz satırda dahil olmak üzere </b:widget> kapanış kodunu da bulup onu da dahil ederek aşağıda verdiğimiz kod kümesini yerine yapıştıracağız. Yani yukarıda bulduğumuz kod satırı ile başlayan ve kapanış kodu ile biten kod kümesini seçip üstüne aşağıdaki kod kümesini kopyalayıp yapıştırarak kod kümesini yenisi ile değiştirmiş olacağız.

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
   <h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
    if(a>b){
      var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
       }
    else{
      var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
      }
    return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
   if (!labelCount[ts[t]]){
      labelCount[ts[t]] = new Array(ts[t])
      }
     }
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
   if(ts[t] < cloudMin){
    continue;
    }
   for (var i=0;3 > i;i++) {
       c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
        }
     var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
     li = document.createElement('li');
     li.style.fontSize = fs+'px';
     li.style.lineHeight = '1';
     a = document.createElement('a');
     a.title = ts[t]+' Posts in '+t;
     a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
     a.href = '/search/label/'+encodeURIComponent(t);
     if (lcShowCount){
       span = document.createElement('span');
       span.innerHTML = '('+ts[t]+') ';
       span.className = 'label-count';
       a.appendChild(document.createTextNode(t));
       li.appendChild(a);
       li.appendChild(span);
       }
      else {
       a.appendChild(document.createTextNode(t));
       li.appendChild(a);
       }
     ul.appendChild(li);
     abnk = document.createTextNode(' ');
     ul.appendChild(abnk);
   }
lc2.appendChild(ul);
</script>

<noscript>
   <ul>
   <b:loop values='data:labels' var='label'>
    <li>
     <b:if cond='data:blog.url == data:label.url'>
      <data:label.name/>
     <b:else/>
      <a expr:href='data:label.url'><data:label.name/></a>
     </b:if>
     (<data:label.count/>)
    </li>
   </b:loop>
   </ul>
</noscript>
   <b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Bu yaptığımız üçüncü aşamadan sonra şablonumuzu kaydedip yeni haline bakabiliriz. Side Bar da Label Cloud adlı widgeti görmemiz lazım. Daha sonra widgeti düzenle linkine tıklayıp Label Cloud başlığını türkçesi yani ETİKET BULUTU olarak düzeltebilirsiniz.

Eğer widgeti göremediyseniz bir şeyler yanlış yapılmış demektir. Şimdi eğer her şeyi doğru olarak yaptıysanız yani her şey yolunda gitti ise ve etiketli yazılar zaten var ise, sonra eğer blogunuzun ön izlemesinde siz Label Cloud u, Etiket Bulutunu bir şekilde görmeniz gerekir. Eğer görünmüyorsa, bir şey ters gitti demektir. Muhtemelen bir yerlerde yanlış yapmışsınız demektir. Daha sonra yukarıda anlattığımız aşamaları sırasıyla yeniden başlayıp tekrar deneyin.

Güncelleme: Eğer, etiket bulutu gösterilmiyorsa ilk kontrol edeceğimiz şeyleri tespit edelim. İlk olarak en az bir etiket için birden fazla girişe sahip olunduğuna emin olun. Herhangi bir etiket için birden fazla kayıt varsa, o zaman her şey uygun olacaktır.Kodlar içindeki işaretlere ( " ) Apostrophes olmamalı ve tek ( ' ) Ticks Tırnak olmalı.

Etiket Bulutu olasılıkla varsayılan ayarlara göre oluşacaktır. Daha sonra bu ayarlar ile oynayarak istediğimiz biçimde Etiket Bulutu oluşmasını sağlayabiliriz. Ama tüm renkleri ve boyutları kendi zevkinize uyacak şekilde ayarlayabilme imkanı vardır. Tabii eğer Etiket Bulutu önizleme yaptığımızda görünüyorsa ki ancak o zaman bir takım bazı değişiklikleri yapmamız mümkün olacaktır.

Değişkenler bölümünde hangi ayarları değiştirirsek en iyi olacak şimdi onu anlatmaya çalışacağım.. Burada kullanılan kodların ne ifade ettiğini öncelikle açıklayalım.

var cloudMin= 1;

Siz etiketlerin gösterilme sayısını sınırlamak için bu ayarı kullanabilirsiniz (örneğin) etiket çok var. 1 ayarı girilen tüm etiketleri gösterir. Eğer daha yüksek bir sayı girilirse, en az bu kayıtların sayısı kadar bulut görünür. Daha sonra sadece etiket girmeniz yeterli olacaktır..

var maxFontSize = 20; var maxColor = [0,0,255]; var minFontSize = 10; var minColor = [0,0,0]; var lcShowCount = false;

Bu değerler ise

Yine boyutunu piksel olarak, renginide RGB biçiminde İkisi arasındaki tüm etiketler kendi renkleri / boyutlarına dayalı kaç etiket, nerede ve giriş sayısı, çok istediğiniz Bulutun oluşmasını sağlıyor. Birkaç denemeden sonra birçok faktörlerle oluşan efekt etkisi ile hoş görünümlü bulut oluşuyor.Görünüm etiket sayısına renk / boyut seçimine, ne kadar kayıtları arasında iyi dağıtılırsa etiketlerin burada çalışması o kadar iyi görünen bir bulut oluşturacaktır. Bunu deneyerek zaman içinde takip edip görebiliriz.

ÖNEMLİ NOT: biçimlerinden tutun renklerine kadar ayarları değiştirmekle sağlanır. Arasındaki [In] ve sayılar virgül ile ayrılmış. Varsayılan renk maksimum siyaha dek için mavidir. Herhangi bir geçerli RGB renk kombinasyonu seçebilirsiniz. RGB renk kodları geçerlidir

Endişe etmeyin RGB ifadesi bir renk tanımlaması yoludur. Siz Internet’te var olan bir çok renk tablosunu kullanabilirsiniz, çalışmalarınızda istediğiniz renk için doğru RGB değerini alırız. İşte böylece oldukça iyi olduğunu ancak o zaman görürüz

RGB Renk Kodu Tablosu

Unutmayın, eğer doğru olarak girmek için sayı setleri en az 3 harf veya sayıdan oluşmalı.virgül ile ayrılmış olmasına ayrıca dikkat edin.

Farklı yazı tipi boyutları ile de deneyebilirsiniz. Tekrarlanan kayıt sayıları bulut görüntüsü üzerinde dağınık olmasına bağlıdır.

Son bir Değişken vardır.

lcShowCount

Burada (kullanılan varsayılan değerler) doğru veya yanlış olabilir. Genellikle 'geleneksel bulut içinde etiket sayısı, yayınlama tarihi gibi şeyler bulunmaz. Tüm bunlar görsel olarak ifade edilir. Ama eğer 'düz liste' ise söz konusu olan o zaman etiket sayısı tarih gibi şeyler yararlı olabilir.

Style bölümünde de bir çok düzenleme yapabiliriz. Çoğu insan için bu kadar bilgi gerekli değildir. Tüm bu kayıtların ne için olduğunu anlamamız yeterlidir bence. En azından edindiğimiz bilgilerle bir tasarım yapmak için yeterlidir sanırım.

sayfanızın geri kalan öğeleri içinde etiket bulutu sadece bir tanesidir. Ancak birkaçını size uygun şekilde değiştirmek isteyebilirsiniz.

İlk satır

#labelCloud {text-align:center;font-family:arial,sans-serif;}

Eğer Etiket Bulutunu oluşturan yazı biçimi yani font hoşunuza gitmiyorsa gerekli değişikliği buradan yapabilirsiniz. Burada kullanılan Font değişebilir.

Ayrıca, oluşan metin hizalamasını da değiştirilebilirsiniz. Ben varsayılan olarak merkeze ayarladım sizin için ama siz bunu kullanabilirsiniz veya değiştirebilirsiniz.

Grup için daha iyi olanını siz belirleyeceksiniz. Bir sonraki satıra geçebiliriz.

#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}

Estetik görünüş için CSS yani style sheet bölümündeki kodlara ağırlık vermek gerekir. Bunun önemini anladığınız konusunda bir endişem yok. Gerçekte ilk giriş çok önemlidir.

display:inline;

Bu özelliği de değiştirebilirsiniz

display:block;

Üzerindeki (her giriş için ayrı bir hat) ağırlıklı kayıtların listesinin alfabetik sıralama gibi ayarlarını kendiniz yapabilirsiniz. Sayfa Öğeleri sekmesinden Etiket Bulutu aracının düzenleme linkine tıklayarak gerekli ayarlamaları basit olarak yapabilirsiniz.

Ve son olarak söz edeceğimiz son bitim satırıdır

#labelCloud .label-count

Eğer yazı göstermek için lcShowCount değişken takımını, bu değişiklik sayılır renk / boyut da Giriş sayılarını ifade eder

Devamını Oku >>

22 Mayıs 2009

ONLİNE DEPOLAMA ALANLARI

Dostlar GMAİL hesabı olanlar bilirler. Eğer bir tane GMAİL hesabınız varsa GOOGLE bir yığın bedava kullanabileceğiniz ürün sunuyor. Bunlardan bir tanesi de epeydir kullandığımız GOOGLE PAGES CREATOR dü. Bu ürün sayesinde bir web sayfası yapıp yayınlayabiliyor ve sunulan 100 mb depo alana da mesela blogger da olan bir blog sayfanızda çalıştırmak istediğiniz bazı dosyaları ( .js, .png, .jpeg, .gif, .doc, .css v.s ) buraya yüklüyor buradan uzakdan sorunsuz çalıştırıyorduk.

Ancak bu hizmet artık yok. Daha doğrusu yeni GMAİL hesabı olanlar artık bu hizmetten yararlanamıyor. Eski hesabı olanlarda buraya yükledikleri dosyaları bu şekilde hizmet veren başka sitelere taşımak durumunda kalacak. Çünkü hizmet çok yakın zamanda sonlandırılacak. Ben de bu durumda kullanabileceğimiz bu online depolama alanlarının hangisi nasıl ve ne şekilde hizmet veriyor diye araştırdım. BİLDİRGEÇ gibi birkaç sitede konuyla ilgili yayınlanmış yazıları okudum. Bu yazılarda bahsi geçen siteleri inceledim hatta birçoğunu bizzat denedim. Sırasıyla bu siteleri bende tekrar yayınlayarak sizlerle paylaşmaya karar verdim. Bu arada bu araştırmayı yaparken çok yararlı ve kullanışlı başka amaçlı siteleri de keşfettim. Bu siteleri de sunduğukları hizmetleri ve bizim gereksinimleri karşılayacak işlevleri kısaca açıkalyıp tanıtmaya çalışacağım. Sizler bu siteleri kurcalayıp diğer özelliklerini keşfedebilirsiniz. Hepside çok ilginç. Umarım işinize yarar. Ben bu sitelerin çoğunun varlığından haberim bile yoktu. Bu açıdan bakıldığında bu derleme sizinde çok işinize yarayacaktır. Çünkü bu siteler şimdi olmasa da önümüzdeki günlerde bana lazım olduğu gibi sizlere de lazım olacak. Umarım sizlerinde işine yarar. Hepinize kolay gelsin.

ONLİNE DEPOLAMA ALANLARI:

Gerek bildirgeç'te gerekse internette bir sürü adreste çeşitli online depolama alanları ile karşılaşıyoruz. peki ama hangisini kullanmalıyız? Aşağıdaki çalışmayı mümkün olduğunca sitelere üye olarak ve deneyerek yaptım umarım faydalı olur.

1.Google Gmail Storage

gmail Ücretsiz depolama kapasitesi : 7,3 GB ve sürekli artıyor. Ayrıca ilave yazılımı indirip kurmanız gerekiyor. Bu küçük programı kurduktan sonra (gmail drive) ilave bir sürücü gibi çalışabiliyor. yüklenebilecek maksimum dosya büyüklüğü ise 20 mb. Ücretli olarak da şu fiyatlarla hizmet veriyor.
10 gb/$20 yıllık
40 gb/$75 yıllık
150 gb/$250 yıllık
400 gb/$500 yıllık

2.Microsoft Skydrive

Bu siteyi HOTMAİL hesabınız olmadan kullanamıyorsunuz.
Ücretsiz depolama kapasitesi : 25 gb
Yüklenebilecek maksimum dosya büyüklüğü ise 50 Mb.

3. boxstr

Ücretsiz depolama kapasitesi : 5 gb
Bant genişliği : 1 Gb/Gün
Ücretli olarak : 25 gb/$25 yıllık
100 gb/$100 yıllık
200 gb/$140 yıllık
Ayrıca ücretsiz olarak dosyalarınızdan flash mp3 çalar hizmeti veriyor. Fakat bant genişliği kullanıcılar için rahatsızlık verici olabilir.

4.Opendrive

opendrive ücretsiz depolama kapasitesi : 1 gb
Ücretli olarak : 10 gb/$10 yıllık
25 gb/$25 yıllık
50gb/$50 yıllık
100 gb/$100 yıllık
Belirtmekte fayda var, depolama kapasitesi düşük olmakla birlikte aynı GMAİL DRIVE gibi özel yazılımı kurulmak suretiyle ev-iş gibi birden fazla bilgisayar kullanıcıları için online depolama alanını bilgisayarınızın bir sürücüsü veya klasörü gibi kullanabiliyorsunuz.

5.Orbitfiles

orbitfiles Ücretsiz depolama alanı : 6 gb
Aylık 5$ karşılığında sınırsız depolama alanına erişebilirsiniz.

6. Mozy

ücretsiz depolama alanı : 2 GB
aylık 4,95 $ karşılığında sınırsız depolama alanına erişebilirsiniz. Ayrıca site kendini "Secure Strorage" şeklinde tanımlıyor, güvenlik sevdalılarına duyrulur. Kendi yazılımı da mevcut.

7.idrive

ücretsiz depolama alanı : 2,5 gb
Ücretli olarak 150 gb/$4,95 aylık.
Kendi özel yazılımı aracılığıyla bilgisayarınızın bir sürücüsü gibi kullanılabiliyor.

8. Ziddu

ücretsiz depolama alanı : Sınırsız
yüklenebilecek maksimum dosya büyüklüğü ise 200 mb.

9.Dropboks

Ücretisiz depolama alanı : 1 Gb
yüklenebilecek maksimum dosya büyüklüğü ise 500 mb.
Ücretli olarak 2 gb/2$'lık paket de mevcut.

10.get dropboX

ücretsiz depolama alanı : 2 gb
özel yazılımı aracılığıyla sürücü izlenimi veriyor.
Özel yazılımı kurulmak suretiyle ev-iş gibi birden fazla bilgisayar kullanıcıları için online depolama alanını bilgisayarınızın bir klasörü gibi kullanabiliyorsunuz ( Çok Başarılı ).

11.syncplicity

Ücretsiz depolama alanı : Limitsiz

12.esnips

Ücretsiz depolama alanı : 5 gb
ayrıca ücretsiz olarak müzik dosyalarınızdan widget oluşturabiliyorsunuz, playlist oluşturabiliyorsunuz.

13.box.net

Ücretsiz depolama alanı : 1 gb
Maksimum dosya büyüklüğü : 10 mb
Bant genişliği : 10 gb/aylık

SONUÇ :
Sonuç olarak limit sorunu olanlar için limitsiz hizmet veren siteler, blog sitesinde müzik dinletmek isteyen kullanıcılar için widget veya flash player yaratabilen siteler, ayrıca güvenliği ön planda tutanlar veya ev-iş-okul gibi birden fazla bilgisayar kullananlar için taşınabilir disk görevi gören siteler tercih edilebilir. Yani herkesin gereksinimine cavap verecek mutlaka bir site var kanısındayım.

Ayrıca çok işinize yarayacak 20 web sitesi:

ThinkFree Office

MS Officei ve diğerlerini unutun. İşte size internet üzerinde bulunduğu için her yerden erişilebilen bir online ofis adresi. Google (Gmail) hesabı olanlar bu siteyi üye olmadan aynı hesap ad ve şifrelerini girerek kullanabiliyorlar. Eğer google hesabınız yoksa siteye abone oluyorsunuz. ThinkFree Office, Word tarzı kelime işlemciden Excel ve PowerPoint tarzı uygulamalara kadar önemli ofis araçlarını bir araya getiriyor. 11 kadar dil desteğine sahip olan ThinkFree Office, 1GBa kadar da depolama imkanı sunuyor.

ThinkFree Office

Zoho

Bir kelime işlemciden ve görev yöneticisinden çok daha fazlası olan Zoho, not almaktan kişi rehber bilgilerine ve proje yönetimine kadar birçok ufak çaplı web uygulamasını da içerisinde barındırıyor. Slayt gösterileri de hazırlayabildiğiniz Zoho platformunda Word ve Excel türevi uygulamalar da bulunuyor.

Zoho

EditGrid

Microsoft Officete yer alan Excel uygulamasını bir yana bırakın ve EditGride göz atın. Excele göre birçok farklı fonksiyona ev sahipliği yapan ve online olarak her bilgisayardan anında ulaşılabilen EditGrid, Internet Explorer 6 dışında hemen her web tarayıcısında sorunsuz bir şekilde çalışabiliyor.

EditGrid

SlideShare

SlideShare ile devasa boyutlardaki video ve fotoğrafların yer aldığı kendi sunumlarınızı dünyanın neresinde olursun olsun herkesle tek bir tıklamayla paylaşabilirsiniz.

SlideShare

Box

Bir online depolama portalı olan box.net, sosyal ağ ilişkili fonksiyonlarıyla dikkat çekiyor. Diğer kullanıcılar, dosyalarınız üzerinde yorumda bulunabiliyor ya da dosyalarınızı etiketleyebiliyor(tabii ki gerekli izni vermeniz durumunda). Ücretsiz üyeliğinin yanında aylık 20 Dolarlık ücrete sahip olam Premium hesabının da edinilebildiği box.net, kullanıcılara 5 ila 15GB depolama alanı sunuyor.

Box.net

Pando

E-posta aracılığıyla büyük dosyaların gönderilmesi her zaman için büyük bir sorundur. Ancak Pando ile bu problem artık ortadan kalkıyor. 1GBa kadar kapasite sunan Pandoya gönderdiğiniz dosyaların boyutu ne olursa olsun, arkadaşlarınıza bu dosyaları kolayca ulaştırabilmeniz mümkün. Yapmanız gereken tek şey dosyalarınızı Pandoya yüklemek ve buradan edindiğiniz bağlantıyı arkadaşınıza göndermek.

Pando

Office Live Workspace

Microsoftun hazırladığı ve kullanıcılarına sunduğu depolama ve paylaşım merkezi Workspace ile dokümanlarınızı kolayca bu adrese gönderebilir ve izin verdiğiniz kişilerle dokümanlarınızı dünyaya açabilirsiniz.

Workspace

Zoto

Fotoğraf paylaşımı konusunda alanının önde gelen web sitelerinden biri olan ve Linux, Mac ve Windows platformlarında sorunsuz bir şekilde çalışabilen Zoto ile fotoğraflarınızı sevdiklerinizle paylaşın.

Zoto

Carbonite

Sistem çubuğunuzda yer alan ve önemli dosyalarınızı yedekleyebileceğiniz Carboniteın kapasite sınırı bulunmuyor. Yazılımı yükledikten sonra bilgisayarın yeniden başlatılması gerekiyor.

Carbonite

Dafont.com

7000 kadar fonta ev sahipliği yapan dafont.com, Mac ya da Windows altında sorunsuz bir şekilde çalışabiliyor. Linux kullanıcılarının ise fontları uygun formata dönüştürmesi gerekiyor. Farklı fontlarla yazılarınızı renklendirmek istiyorsanız bu site tam size göre.

Dafont.com

Bluestring

AOLnin sahibi olduğu Bluestring, bir web sitesinin dijital medya koleksiyonu olarak bir kullanıcının işine ne kadar çok yarayabileceğini de gözler önüne seriyor. Bluestring ile müzik, fotoğraf ve videolarınızı kolayca paylaşabilirsiniz. Kullanışlı durum çubuğu sayesinde upload ve download işlemleri oldukça basite indirgenmiş durumda.

Bluestring

Imagekind

Çeşitli resim çerçeveleri üzerinde yer alan müze fotoğraflarına ulaşabileceğiniz Imageking, kendine özgün bir yapıya sahip. Sitede yer alan materyallerin maliyeti ise yaklaşık 40YTL. Bunun yanında kendi basılı resimlerinizi de site üzerinden satışa çıkarabiliyorsunuz.

Imagekind

Picnik

Photoshop Expresse benzer şekilde gelişmiş resim düzenleme efektleri, histogramları ve renk düzeltme fonksiyonlarıyla dikkat çeken Picnike PCnizde yer alan fotoğrafları da upload edebiliyorsunuz.

Picnik

InterfaceLIFT

InterfaceLIFT, içerisinde birçok simge, fotoğraf ve duvar kağıdı bulunan içeriği geniş bir web portalı.

InterfaceLIFT

1001freefonts

Sitenin isminde yer alan 1001 rakamının aksine 7000 kadar fontu içerisinde barındıran 1001freefontstaki fontları yakından incelemek istediğinizde ufak önizleme fotoğraflarından da sonuna kadar faydalanabilirsiniz. Bunun yanında tek tıklamayla da tüm fontları sisteminize indirebilmeniz mümkün.

1001freefonts

Martindale

Kullanıcı dostu bir tasarıma sahip olmasa da işlevi bakımından çok önemli bir görevi yerine getiren Martingale, bir konu hakkında araştırma yapmak istediğinizde başvuracağınız web portallarının başında yer alıyor. Birçok materyale içerisinde yer alan bağlantılar ile dolaylı yoldan ulaşabileceğiniz Martindalede bilim veri tabanından para çevirici programlara, göz testinden aklınıza gelebilecek hemen her konuya ulaşabilmeniz mümkün.

Martindale’s

eHow

Aklınıza takılabilecek birçok sorunun yanıtını içerisinde barındıran eHow, merak ettiğiniz birçok konuda sizi aydınlatmaya aday bir web sitesi.

eHow

Toluu

Eğer bir RSS okuyucu kullanıyorsanız, Toluuyu atlamamanızda fayda var. Toluu ile birçok RSS kaynağını çeşitli kaynaklardan toplamanız mümkün.

Toluu

Keepm

Web üzerinde yer alan bir iş kartı yöneticisi. Ekleyeceğiniz kişinin ismini girin ve ardından telefon ve adres bilgilerini girin. Bu kayıtları gerektiğinde Outlook yazılımından da edinebilmeniz mümkün.

Keepm

OVGuide

OVGuide, ünlü dizinin de yer aldığı birçok video içerikleriyle ilgili geniş bir veri tabanına sahip.

OVGuide

Devamını Oku >>

18 Ocak 2009

Tütün: Dünyanın En Eski Blogcusu

Dostlar geçen gün bir süredir uğramadığım bir blogu ziyaret ettim. Ziyaret nedenim ise kendi blogumda verdiğim linkleri kontrol etmekti. Ziyaret ettiğim blog ise ALTI ÜSTÜ TASARIM. Sahibi çok yetenekli, başarılı bulduğum, yazılarını beğendiğim ve sırf bu nedenle de kitabını yayınlar yayınlamaz aldığım Mehmet DOĞAN. Şimdi bu adam ne anlatıyor diyebilirsiniz. Ne anlattığıma gelince.

Mehmet Doğan’ın Kanada’da yaşadığını şimdilerde ise artık Dübai’de yaşadığını biliyorum. Fakat öncelikle bu ziyaretim sonunda çok üzüldüm. Çünkü artık Mehmet Doğan blogunda yazma işine son vermiş. Artık çok değer verdiğim zeka pırıltısını yansıttığı yazılarından mahrum kalacağız. Onu blogunda yayınladığı ve çok beğendiğim bir yazısını iznini almadan sizlere aktaracağım. Umuyorum önümüzdeki günlerde Mehmet Doğan’ın yazılarını tekrar zevkle okuma ve değerli fikirlerinden yararlanma fırsatını buluruz. Değerli kardeşim Mehmet Doğan’a yeni yaşamında mutluluklar ve başarılar dilerim. Aşağıdaki yazısını sizlerde beğenirsiniz umarım.

Tütün: Dünyanın En Eski Blogcusu

mehmet Acemi Blogcu sayesinde öğrendiğim gerçekten ilginç bir konu tartışılıyor Postitler blogunda. Kisaca konu, Türkiye'deki blog dizinlerinin yeteri kadar yeterli olup olmadığı ve bu blog karmaşası içinde “öksüz bırakılan” bloglar.

Konu ile ilgili yorumlarımı Postitler’in ilgili yazısına ekledim ama biraz daha bu konu hakkında yazmak istiyorum.

Ama öncellikle ben birçok kişinin çok iyi bildiği, sinsi, keyifli, öldürücü, en kötü kolonya kokulu bir bitkiden bahsetmek istiyorum: Tütün.

Tütün, isim olarak, belki de dünya üzerinde en iyi tanınan bitkilerden biri. Görünüş olarak diğer bitkilerden çok farklı olmasa da özünde, çok ilginç bir bitki. İlginçliği, insanoğlunun ürettiği sigara ya da o iğrenç kokulu kolonya yapımı ile alakalı değil. Esas ilginç olan, tütün bitkisinin, belki de dünyanın en eski blogcusu olmasında. Evet haklısınız! Tütün bitkisinin blogunu ne blogspotda, ne bloglar aleminde ne de blog kardeşliğinde gördünüz. Hiçbir yazısını okumadınız. Gerçi tütün bitkisinin blogundaki yazılar çok ilginç olmasa da; yazıların içeriği birbirine benzese de, sizin bu blogu okumamanızın sebebi bunlar değil. Çünkü bu bitkinin yazılarını, mesajlarını okuyan bizler değil, Polistes adı verilen bir çeşit arı.

Danimarkalı bir çiftçi Thomas Harttung, bu tütün bloğunun nasıl oluştuğunu bakın nasıl anlatıyor:

Her şey, karnı aç bir hornworm adı verilen tırtılın, en sevdiği yemek olan, tütün yapraklarına tırmanması ile başlar. Tırtıl, göze ve dişe gelir bir yaprağın üzerinde mola verir. Tütün yaprağı bu gelişmeden habersizdir çünkü tütün yaprağını ziyaret eden birçok canlı vardır. Her canlının, her böceğin tehlikeli olacağını bilemez. Fakat bahsi geçen tırtılın, ilk ısırığı sayesinde, bu tırtılın tükürüğünü tanıyan tütün yaprağı, bu ziyaretin iyi bir ziyaret olmadığını anlar ve buna karşılık, kendisi kimyasal bir sıvı salgılamaya başlar (blog yazısı). Kimyasal madde salgılandıktan sonraki tırtıl ısırıkları, bu kimyasal salgının, tırtılın vücuduna girmesini sağlar ve tırtıl bir müddet sonra, tok olduğunu hisseder. Halbuki yeni başlamıştır yemeğe. Fakat tütün yaprağı, zamanının az olduğunu bilmektedir çünkü tırtılın tokluk hissi çok uzun sürmeyecek ve yaprağı yeniden yemeye başlayacaktir. Fakat tütünün salgıladığı bu kimyasal maddeyi fark eden (blog yazısını) yalnızca tırtıl değildir. Hani bizim blog yazıların başka bloglardan linklenmesi, Technorati’de indekslenmesi gibi, bu kimyasal madde, kilometreleri aşarak, polistes adı verilen bir çeşit arıya kadar ulaşır (bir nevi RSS). Kimyasal maddenin içeriği “yardıma ihtiyacım var, üzerimde bir tırtıl, yapraklarımı yiyor. Biliyorum senin yumurtalarını koyacak bir yere ihtiyacın var. İşte aradığın fırsat” demektedir. O küçücük arı, kilometrelerce yolu kateder, binlerce tütün yaprağı içinden, bu yardımı blog yazısını yazan tütün yaprağını, eliyle koymuş gibi bulur. Tabi ki tırtılı da (artık bu arı, blog kardeşliğini mi, bloglar alemini mi, Technorati’yi mı yoksa Google Haritayı mı kullanıyor, o kısmı belirsiz). Arı, bu sorun yaratan tırtılın,üzerine, yumurtalarını yerleştirir çünkü tırtılın yüzeyi, arının yumurtaları için mükemmel bir ortamdır. Tırtılın, bu durumda, çekip gitmek, ya da orada yumurtalara gömülüp, arının ataklarıyla ölmekten başka şansı yoktur. Böylece hem arının gelecek nesilleri hem de tütün yapraklarının yaşamı garantilenmiş olur.

İşte basit bir iletişim, etkili bir networkun doğada oluşturduğu efekt. Tütün bitkisi bile, yaşamı için network, link ve iletişime ihtiyacı varken, blogların böyle bir ortamdan yaşamalarını devam ettirmek için yararlanamayacağını düşünmek bence hata olur.

Siz ne dersiniz?

Dipnot: Eğer tütün işiyle uğraşan bir çiftçi tanıdığınız varsa, yukarıda anlatılanların kendi tütün tarlalarında gerçekleşmediğini, o tırtılların, insan yapımı kimyasal madde (DDT gibi) ile öldürüldüğünü size söyleyecektir. Doğru! Bunun nedeni, günümüzde tütünün ticari bir değeri olması ve bu nedenle, tütünün, gerçek habitatında değil, koşullandırılmış, ticari tarım alanlarında yetiştirilmesi. Bu nedenle, tütün, doğa içinde oluşturulduğu networkden yoksun. Blogunu okuyan arılardan uzak.

KAYNAK: ALTI ÜSTÜ TASARIM

YAZAN: Mehmet DOĞAN

Devamını Oku >>

06 Ocak 2009

BLOGLARA MESAJ FORMU EKLEMEK

DDostlar bugün yazacaklarım bana sürekli sorulan bir konu hakkında. Yine nette alakasız bir şey ararken Blogger ve diğer web sitelerinde ihtiyaç duyulan bu hadiseyi şu anda hepiniz merak ediyorsunuzdur. Bloglarınızı veya web sayfalarınızı ziyaret edenlerle aranızda iletişim sağlayan bu araçla ilgili daha önce bir yazı yazmıştım. Yine bu gün iki siteden bahsedeceğim bu siteler size mesaj göndermek isteyen ziyaretçilerin bu isteğini yerine getiriyor. Her ikisinide de blogunuza adapte etmek çok basit.

Yada bana öyle geldi. HTML yani web tasarımı bilmeyen dostlar için söylüyorum. Bilenler zaten hemen bloglarında buna uygun düzenlemeleri hemen yapacaklardır. Bilmeyenler içinse tavsiyem, öncelikle kendinize buna uygun şablon seçmenizi öneririm. Yok ben şablonumdan memnunum diyenler içinde önerilerim olacak tabii. Şimdi gelelim bahsi geçen sitelerin bu hizmetlerini sırayla anlatmaya.

İlk anlatacağım site CONTACTİFY adlı bir site. Burada yapılan işlem çok basit. Bu sitenin giriş sayfasındaki üyelik formunu dolduruyorsunuz. Daha sonraki aşamada size bir link ile birlikte bir hesap numarası veriliyor. Bu verilen linki şablonunuzda varsa eğer yoksa da bir iletişim düğmesi veya resmi yapıp bu yarattığınız düğmeye veya resme atayabilirsiniz. Eğer bu size zor gelirse CONTACTİFY bunu da düşünmüş ve bir WİDGET yapmış. Size bu widget’in embed kodlarını veriyor sizde bunu blogunuzda uygun bir yere koyuyorsunuz. Nasıl mı? Embed kodlarını kopyalıyorsunuz. Blogunuzda Yerleşim sekmesinde sayfa öğeleri bölümünde Gadget Ekle ye tıklıyorsunuz. HTML/JavaScript'i Yapılandır aracını açıp kopyaladığınız kodları yapıştırıp kaydet diyorsunuz. Bu kadar basit….

Bu sitenin verdiği url linkini bir düğmeye veya bir resme de atayabilirsiniz. Bu bir posta kutusu resmi veya İLETİŞİM kelimesi de olabilir

ÖRNEK KOD:

Görünüş:

İLETİŞİM

şeklinde görünecek. Yine bunu HTML/JavaScript aracı ile istediğiniz yere koyabilirsiniz..

Resme atama işini ise ya benim gibi bir resim yapacaksınız veya uygun bir resim bulacaksınız o resme aşağıdaki gibi atama yapacaksınız. Yine HTML/JavaScript aracı ile blogunuzda istediğiniz uygun bir yere koyacaksınız.

Örnek Kod:

GÖRÜNÜŞ:

Gelelim ikinci siteye; Bu sitenin adı ise Email Me Form. Bu siteye de üye oluyorsunuz. Daha sonra birkaç aşamada kendi formunuzu oluşturuyorsunuz. Daha önce anlattığım CONTACTİFY ve Email Me Form un paralı hizmeti de var. Her ikisinde de paralı hizmetlerde extra ilaveler sunuyorlar. Bu sitelerden başka bu hizmeti bedava veren yüzlerce site var. Diğerlerini de google da aratırsanız onları da inceleme fırsatı bulabilirsiniz.

Email For Me size hem Mesaj formunun kodlarını veriyor. Hem de bir link veriyor. Hangisini isterseniz kullanabilirsiniz. Daha önce CONTACTİFY de anlattığım uygulama aşamaları bunun içinde aynen geçerli. Örneklerin uygulama linkleri aşağıda verilmiştir.

ÖRNEK:

Yukarıdaki örnek formu bir düğmeye ataması yapılmış çalışan örneği buradan görebilirsiniz. Diğer örnek uygulamalarıda aşağıdaki linklerden görebilirsiniz.

RESİM UYGULAMASI ÖRNEK: test ediyorum

DÜĞME ÖRNEK: DENEME

BLOG İÇİ UYGULAMASI ÖRNEK: DENİYORUS (Blogda burda olduğu gibi en alta konabilir.)

Devamını Oku >>

03 Ocak 2009

image (Resimli) Blockquote

Dostlar sizlere bugün rutin kullandığımız bir olaydan bahsedeceğim. Bu olayın adı blockquote.Yani yazılarımız arasında bir yerlerden alıntı bir yazı yayınladığımız zaman genelde kullanırız. Blogger 'ın bu özelliği yok mu var. Bazen bu özellik kullandığımız şablon yani tema'nın css özelliklerine göre de değişiklik gösterir. Eğer şu anda benim gibi var olan özellikden memnun olmayanlar için bu uygulamayı anlatmayı gerekli gördüm.

Daha önce bu konuda bir yazı yayınlamıştım zaten. Ama bu gün anlatacağım ise daha farklı bir şey. Önceki anlattığım blockquote uygulama açısından biraz zahmetli idi ve ayrıca farklı tarayıcılarda farklı sonuçlar veriyordu. Bu nedenle bugün anlatacağım uygulama daha basit bir uygulama. Uygulama bittiğinde yandaki resimdeki blockquote (Blok Alıntı) düğmesine basmanız yeterli olacak. Uygulaması zahmetli gelebilir. Kolaya kaçmaktan hoşlanmayanlar ve özgün bir şeyler yapmak isteyenlerin hoşuna gidecek bir uygulama olacak bu.

İşe başlayalım hemen. Öncelikle Yerleşim sekmesinde HTML 'yi düzenle bölümüne geleceksiniz orada css style kodlarına ufak bir özellik ekleyeceksiniz. Nereye mi söyleyeyim, tarayıcının düzen menüsünden bu sayfada bul ibaresine tıklayacaksınız. Arama penceresine blockquote yazıp aratacaksınız. CSS kodlarında bulduğunuz blockquote style kodları yerine kopyala yapıştır yaparak aşağıda verdiğim kodları aynen yazacaksınız veya değiştireceksiniz.

CSS STYLE KODLARI:

.post blockquote {
    text-align: justify;
    width: 400px;
    margin-left: 20px;
    padding: 10px 0px 0px 30px;
    background-position:top left;
    background-repeat: no-repeat;
    background: transparent url("http://i73.photobucket.com/albums/i235/aziz52/azizname_image/quote-1.gif") top left no-repeat;
}
.post blockquote p {
    margin-right: 20px;
    padding-right: 30px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-top: 0px;
    background: transparent url("http://i73.photobucket.com/albums/i235/aziz52/azizname_image/unquote-1.gif") bottom right no-repeat;
    background-position: bottom right;
    background-repeat: no-repeat;
}

Eğer beklediğiniz gibi bir sonuç vermesse blog temanızın özelliklerine göre düzeltmeler yapabilirsiniz. Yazılarınızı yazarkende HTML'yi Düzenle sekmesinde yazınızın kodları aşağıdaki gibi görülmeli.

Yazı Kodu:

Uygulama böyle görünecek :

Blockquote için bir başlangıç resmi birde kapanış resmi hazırlıyacağız. Benim yaptığım gibi bir image host, Photo Host sitesine yükleyeceğiz.

Oradan alacağımız resmin URL Adresini yukarıda CSS Style kodlarındaki benim background: URL ("http://adresiniz.com") adresindeki yerine koyacaksınız. İşiniz bittiğinde uygulama aşağıdaki örnekde görüldüğü gibi görülecek. Kolay gelsin...

Devamını Oku >>

28 Aralık 2008

YENİ YILINIZ KUTLU OLSUN

Devamını Oku >>

21 Aralık 2008

BLOGGER DA YENİ BİR WİDGET

Dostlar bugün yine nette sağı solu kurcalarken yine google un harika olarak bulduğum iki hizmetini daha keşfettim. Birincisi bir çoğunuzun hoşuna gidecek bir hadise. GOOGLE CONNECT ne işe mi yarıyor? MyBloglog, gibi sosyal aleti kendi blogunuzda veya sitenizde oluşturuyorsunuz. Yani kısaca dostlar dayanışması aracı. Dilediğiniz gibi tasarlama şansına da sahipsiniz.

Örneğini ben deneme ve Ankara bloglarına koydum. Nasıl çalıştığını görebilirsiniz. Bütün bloglarınıza bu aleti koyabilirsiniz.

Ayrıca ebatlarını blogunuzda koyacağınız yere göre ayarlayabilirsiniz. Aracın renklerini de kendinize göre düzenleyebilirsiniz. Gelelim nasıl yapacağımıza. Google Friend Connect ana sayfasına buradan gidiyorsunuz. Gmail hesabınızla giriş yapıyorsunuz. Başlıyorsunuz yapmaya. En sonunda verilen kodu kopyalıyorsunuz. Blogunuz da Yerleşim sekmesinde Gadget Ekle linkine tıklıyorsunuz HTML/JavaScript Ekle aracına uygun bir başlık yazıp kopyaladığınız kodu yapıştırıyorsunuz ve kaydedip blogunuzda ki görünüşüne bakıyorsunuz. İlk girişi siz yapın ve daha sonra aklınıza takılan veya yapamadığınız bir şey olursa bana sorarsınız. Aracın resimleri aşağıda….

Bu arada bu yazıyı yayınladıktan sonra farkettim. Daha doğrusu kurcalarken farkettim. Aynı yerde başka değişik widgetlerde varmış. Hatta aynı yerden kendi widgetinizide yayınlama imkanı var. Ben denedim ahanda oda side barda var. Diğer bir kaçını da buraya yan side bara koydum.

Add a Sign In gadget
Wall gadget
Review/Rate gadget
OpenSocial demonstration
LameGame demonstration
Custom gadget (kendi widgetinizi buradan yayınlayacaksınız)

Widgetlerin yani yorumların falan yönetiminide doğal olarak Friend Connect'ten yapacaksınız. Birden fazla hesabınız ve birçok blogunuz mu var? Hepsine tek yerden yapıp, koyup vede yönetebilirsiniz. Ama yalnız bir hesapla girebilirsiniz. Benim tavsiyem Friend Connect'e Firefox tarayıcısı ile girdiyseniz bloglarınızı İnternet Explorer veya başka tarayıcılarla girin. Yoksa problem çıkıyor. Evet daha ne diyeyim kolay gelsin. Hoşunuza gider umarım.

Gelelim yeni keşfettiğim ikinci Google Hizmetine. Buda bir çoğunuzun hoşuna gidecek umarım. Ancak yalnız burayı henüz tam olarak çözemedim. Çünkü burası diğer bir hizmetle ortak çalışan bir hizmet. Bende İngilizce olmadığı için biraz ağır çözüyorum. Malum biraz da serde morukluk olduğu için gençlerdeki gibi beyin loblarımın performansı pek iyi değil. Hoş gençken de iyi çalışmıyordu ama zeka konusunda genetik bir halde var herhalde. He he … sonuç olarak diğer yerleri de tam olarak çözünce anlatırım herhalde. Bu google hizmetlerini şimdilik söylemeyeceğim.. Nedeni ise biraz merak edip sık sık ziyaret etmeniz için….Şimdilik kolay gelsin…

Devamını Oku >>

12 Aralık 2008

Kendi Widgetinizi Nasıl Yaparsınız?

Dostlar bugün bir kardeşim "BLOGGER SİDE BAR ARAÇLARI (GADGET)" Yazıma “hocam bişey sorcam ben. gadget ekleme kısmında kendinizinkini ekleyin diye biyer var. nasıl ekleniyor? nasıl gadget yapılıyor? bi bilgi verirsen sevinirim.” diye bir yorum bırakmış. Bende bu gün bu konuya değinmeye karar verdim.

Daha önce anlattım mı hatırlamıyorum ama ben yine de anlatacağım. Hani bazı bloklarda butonlar görürüz. Technorati, feedburner, furl, magnolia sosyal sitelerin bookmark butonları gibi bende kendi butonumu yaptım. Sizlerde benimki gibi bir butonu FİREWORKS veya PHOTOSHOP gibi bir grafik, resim editörü programı ile yapın. Dosya boyutu küçük olacak bir resim formatında kaydedin. Bu butonun ebatlarını ben 100X36 yaptım.

Siz istediğiniz boyutta yapabilirsiniz. Her neyse butonu yapın ve photobucket gibi bir beleş siteye yükleyin. Tam bu noktada sizlere google unda elinizin altında böyle bir imkanı var. Bir zamanlar kapasitesi 100 mb idi şimdi ne kadar bilmiyorum ama bayağı işimi görüyor. Buraya her türlü dosya yükleyip blogger da link vererek çalıştırabilirsiniz. Bilgisayarınızda kullandığınız tarayıcınızı açın. Burada google ın arama ana sayfasına yani http://www.google.com.tr/ ye gidiyorsunuz. Burada sağ üst köşede oturum açın linkine tıklıyorsunuz. Gmail hesabınıza ait e-mail inizi ve şifrenizi girip oturum açıyorsunuz. Açılan sayfada google hizmetleri var. Aşağıda resimde görüldüğü gibi daha fazla linkine tıklıyorsunuz. Açılan sayfada yine aşağıda ki resimde görüldüğü gibi ya türkçe sayfa oluşturucu olarak yada ingilizce google page creator linki şeklinde olan linki bulup tıklıyorsunuz.

Açılan sayfada da size daha basit bir web sayfası yapma olayı geliyor. Gelişigüzel bir sayfa oluşturun ve devam edin. Sayfayı oluşturduktan sonra sağ üst köşede aşağıda ki resimde görüldüğü gibi bir yer de uploaded stuff diye bir kutu var. Kutunun altında upload yazan linke tıklayın.

Gözat linkine tıklayın ve hazırladığınız buton resmini bulup yükleyin. Resim yüklendikten sonra listede resim dosyasının adını göreceksiniz. Bu dosyanın üstüne tıklayın. Yeni bir tarayıcıda resminiz açılacak. Tarayıcının adres satırındaki adres resminizin URL si. Bu URL ile Resminizi artık her yerde yayınlayabilirsiniz. Sonuçta resmininizi nereye yüklerseniz oradaki adresini widgetteki yerine koyacaksınız. İşte bu bölüme resim haricinde her türlü formatta dosya da yükleyebilirsiniz. Resminize aşağıdaki resimde görüldüğü gibi blogunuzun adresini gireceksiniz. Yani resme tıkladığınızda tarayıcı sizin blogunuzu açacak. Diğer yerede resmi yüklediğiniz yerdeki adresini gireceksiniz.

Widget bittiğinde widget xhtml kodunun tamamında renkli görülen bölümler aşağıda görüldüğü gibi size ait bölümler olacak.

Şimdi tekrar bir tarayıcı açın ve adres satırına http://code.google.com/intl/tr/apis/gadgets/docs/legacy/gs.html#GGE adresini kopyala yapıştır deyip yapıştırın veya üşenmeyip aynen yazın.

Açılan sayfada yukarıda resimde ki yeri bulun ve aşağıdaki kodu kendinize göre daha önce resimlerle anlattığım gibi düzenleyip aşağıda resimlerle sırasıyla gösterdiğim gibi widget html kodunu ilgili yere koyuyorsunuz.

Kopyala Yapıştır Kodu:

Title başlığı yani aşağıdaki resimde görüldüğü gibi düzenliyorsunuz.

Daha sonra aşağıda resimde görüldüğü gibi widgetimizin Preview sekmesine tıklayıp ön izlemesine bakıyoruz.

Daha sonra sırasıyla resimlerdeki gibi save e tıklayıp kaydetme işlemine geçiyoruz. Widgetimize bir ad veriyoruz.

Kaydettikten sonra resimde görüldüğü gibi widgetimizin adına tıklıyoruz.

Tarayıcıda açılan sayfada resimdeki gibi adresi kopyalıyoruz.

İşte eylem artık çok kolay. Yerleşim sekmesinde side bar da gadget ekle linkine tıkladınız,

Gadget Ekle aracı açıldı, solda aşağıda Kendinizinkini ekleyin linkine tıklıyorsunuz, açılan pencerede Blogunuza eklemek istediğiniz widget in kopyaladığımız URL'sini giriyoruz..

Resimlerdeki gibi işlemleri sırasıyla yapıyoruz.

Ta taaaaa…. He he! Widgetiniz tamam. Kolay gelsin….

Devamını Oku >>

26 Kasım 2008

Blogger Şablon Siteleri

Dostlar birkaç gündür bazı konularda araştırma yaparken sizlere çok faydası olacağına inandığım bazı yeni ve ilginç konulara rastladım. Bir tanesi yüzlerce blogger şablonu. Eğer Blogger ın klasik şablonlarından hoşlanmıyorsanız bu yazı epeyce ilginizi çekecek ve sizi mutlu edecek demektir. Hepsi çok güzel ve de yeni. Ama dediğim gibi hala üzerlerinde ufak tefek düzenlemeler yapmak gerekiyor. Bu düzenlemeler bazılarınız için basit ama bazılarınız için se biraz zor olabilir.

Ben her açıdan sizlere yardımcı olmaya hazırım. Bu şablonları ben çok beğendim. Bir çoğunu da denedim. Üzerlerinde ufak tefek değişiklikler de yaptım. Ama benim yaptığım değişiklikler daha çok TÜRKÇE olması gereken kısımlar ve de bana uygun değişiklikler. Özde tasarımların orjinallerine, sahiplerine saygımdan dolayı ve de diğer özgün hadiselere dokunmadım. Bu şablonların bir çoğunun CSS Style Sheet kısmında Variable definitions bölümü yok. Ama merak etmeyin ben olmayanların Variable definitions bölümlerini düzenleyip yayınlayacağım.Ayrıca arzu edenlere daha doğrusu ben uğraşamam hazır isterim diyenlere de elimde olan XML şablonları gönderebilirim. Denediğim şablonları aşağıda linklere tıklayarak görebilirsiniz.

Bu şablonların en çoğunu Btemplates de bulabilirsiniz. Daha sonra da Blog and Web i ziyaret edip orayı karıştırabilirsiniz. Buralarda blogger, css, web tasarımı ve grafik tasarım konularında bayağı çok bilgiye ulaşabilirsiniz. Eminim buraları kurcalarken epeyce işe yarar şey bulacaksınız. Mesela Smashing Magazine ilginç sitelerden biri. Ayrıca Design Disease, Blogcut, Gosublogger gibi yerleri de çok yararlı ve ilginç bulacaksınız. Bu arada Türkçe bloglardan Teknomobi ve diğer blogu Düşüngeç ‘e de uğramadan etmeyin. Sizlere kolay gelsin.....

Not : Denediğim şablonları aşağıda linklerine veya resimlerine tıklayarak görebilirsiniz.

Smashing Theme ;

TÜRKÇE DEMO : hukukguguk Design By : Design Disease

Download Link: Btemplates

Blogy - iPlantilla Theme;

TÜRKÇE DEMO : webokulu Design By : Blogger adaptasyon Blog and Web (Orijinal Wordpress Theme Ndesign-Studio )

Download Link: Btemplates

Netspiel Theme;

TÜRKÇE DEMO : Test ve Test Design By : blogcut

Download Link: Btemplates

Blogy-illacrimo Theme;

TÜRKÇE DEMO : Gımıl Badıllı Design By : Design Disease

Download Link: Btemplates

Blogy – Dilectio Theme;

TÜRKÇE DEMO : Morukus Design By : Blogger adaptasyon Blog and Web (Orijinal Wordpress Theme design disease)

Download Link: Blog And Web

Notepad Chaos Theme;

TÜRKÇE DEMO : Webarus Design By : Blogger adaptasyon Gosublogger (Orijinal Wordpress Theme Evan Eckard )

Download Link: Türkçe Teknomobi

Download Link: Btemplates

Devamını Oku >>

12 Kasım 2008

BLOGGER SİDE BAR ARAÇLARI (GADGET)

Dostlar bugün buraya yine yazacak nefis şeyler keşfettim. Belki bazılarınızın haberi vardır ama ben bu yazıyı bu olaydan haberi olmayanlar yada farkında olmayanlar için kaleme aldım. Yandaki BLOGGER ın logosunu gördüğünüzden zaten yazının içeriğinin BLOGGER ile ilgili olduğunu hemen anlamışsınızdır. Yazının içeriği henüz BLOGGER ile yeni tanışanların da özellikle ilgisini çekecektir.

Şimdi yeni başlayanlar için blogger da bir blog yaratmayı başardınız yada zaten bir blog sahibi olanlar blogger a giriş yapsınlar. Kumanda panelinde blogunuzun yerleşim linkine tıklayınız. Daha sonra side barda ki kutucukların üstünde Gadget Ekle linkine tıklayınız. Ta taaa....Evet yeni gadget lerle tanışınız. Hatta burada kendi gadget inizi bilem yapıp yayınlayabilirsiniz.

Yukarıdaki resimde görüldüğü gibi sol tarafdaki sütunda gadget çeşitleri ve sınıflandırmaları yer alıyor onları tıklayarak kurcalamaya başlayabilirsiniz. Benim en çok hoşuma giden gadgetler İzleyiciler : Blogunuzu izleyen kullanıcıların bir listesini görüntüler ve Abonelik Bağlantıları (yeni!). Tabii bunların başlık adını değiştirebilirsiniz. Özellikle Abone Bağlantıları ile Okuyucularınızın popüler içerik takibi yapmalarını sağlamak için okuyucularınızın blogunuza abone olmasını sağlayın. Diğer gadgetleri de artık siz kurcalayın keşfedin. Kolay gelsin..

Devamını Oku >>

04 Kasım 2008

BLOGGER ÖZELLİKLERİ

Dostlar epeydir buraya yazı yazmıyordum. Bu gün buraya yazacak birşey buldum. Belki bazılarınızın haberi vardır ama ben bu yazıyı bu olaydan haberi olmayanlar yada farkında olmayanlar için kaleme aldım. Yandaki BLOGGER ın logosunu gördüğünüzden zaten yazının içeriğinin BLOGGER ile ilgili olduğunu hemen anlamışsınızdır. Yazının içeriği henüz BLOGGER ile yeni tanışanların da özellikle ilgisini çekecektir.

Şimdi yeni başlayanlar için blogger da bir blog yaratmayı başardınız yada zaten bir blog sahibi olanlar blogger a giriş yapsınlar. Herhangi bir postu (daha önce yayınlamış olduğunuz bir yazıyı) yada yeni bir yazı yazıp yayınlayın. Yayınlama durumu sekmesine geleceksiniz. Yani aşağıda resmi görülen bölüm.

Bu bölümde sağ alt köşede görülen kutucukdaki Blogger Features Page yazan linke tıkla. Aşağıda resmi görülen kutucuk.

Ta taaa...İşte aşağıda BLOGGER ÖZELLİKLERİ sayfasına hoş geldiniz. Çok detaylı hemde türkçe hazırlanmış. Hoşunuza gidecektir umarım. Ben BLOGGER la tanışıp da ilk blog hazırladığım günlerde böyle bir kolaylık yoktu, ya da vardı da belki ingilizce yazdığı için böyle bir hadiseden şahsen benim haberim yoktu. Hem türkçe kaynak bulmamızda çok zordu. Hemen hemen hiç yokdu desem yeridir. Sonra EMREX(Yunus Emre) konuyla ilgili bir grup oluşturdu. Tabiiki yine konuyla ilgili de bir blog. Ondan çok şey öğrendim. Buradan ona sevgilerimi gönderiyorum. Belki şu anda kulaklarıda çınlıyordur. Hepinize kolay gelsin. BLOGGER ÖZELLİKLERİ sayfasının da resmi ahanda aşağıda.......

Hala bir blog hazırlamadıysanız bu sayfaya direk buradanda Blogger Features Page gidebilirsiniz. Kolay gelsin.......

Devamını Oku >>

24 Şubat 2008

PDF lerinizi E_DERGİ olarak yayınlayın

Evet dostlar epeydir buraya yazı yazmıyordum ancak bu gün WOLKANCA'nın Volkan’ı bana bir sitenin adresini göndermiş. Bende bu siteyi inceledim ve de çok hoşuma gitti. Sitenin adı issuu, siteye buradan ulaşabilirsiniz. WEB 2.0 sitesi. Bu siteye önce üye oluyorsunuz daha sonrada hazırladığınız PDF formatındaki belgeleri yüklüyorsunuz.

Yine daha sonrada sitenizde veya başka bir yerde aşağıdaki gibi yayınlayıp herkesle paylaşıyorsunuz. Site hizmeti beleş. Sizlerde den eyip eğer hoşunuza giderse kullanabilirsiniz. Kolay gelsin….

Devamını Oku >>

08 Şubat 2008

Web Tasarım kaynakları

Dostlar bu gün çok güzel bir kaynak keşfettim. Bu nedenle de sizlerle paylaşmadan edemedim. WEB DEVELOPERS FIELD GUIDE. Web sayfası tasarlamak yeni nesil yazılımlarla mesele olmaktan çıktı ancak fark yaratmak için hâlâ tasarımcının dikkat etmesi gereken birçok ayrıntı var.

Bu adreste tek bir sayfa içinde web tasarımı üstüne hemen her konudaki en etkin kaynaklara ulaşmanız mümkün. Kolay gelsin….

Kaynak Adres : http://webdevelopersfieldguide.com/

Devamını Oku >>

15 Ekim 2007

CSS Inline Style (shadow Filter)

Float Right

Origin of
Dubya

The origin of 'Dubya' from us a weekend says that the columnist Molly Ivins coined it in 1995; it's the spelled-out Texas-drawl version of Bush's middle initial (for "Walker"). Her editor at the Fort Worth Star-Telegram tells us Ivins "owned 'Dubya' from the mid-'90s to 1999, then it caught on with everyone else." Well, not really everyone.

Close friends call Bush "George W." His dad sometimes calls him "Quincy," a reference to John Quincy Adams, the only son of a president to become president. And almost everybody else calls him "Mr.President.""

Yukarıda Cördüğünüz uygulamanın kodlarını aşağıda yayınlıyorum. Kopyala yapıştıır yaparak sizde deneyerek uygulamayı yapablirsiniz. İngilizce yazan metin yerinede istediğiniz gibi yazınızı yazabilirsiniz. Aynı uygulamayı solda da gösterebilirsiniz. Sadece float: right; ifadesini float: left; olarak değiştireceksiniz.

UYGULAMA KODU :

<div align="justify"><p><span style="font-weight: bold; font-size: large; color: #ffcc33">Float Right</span> <div style="padding-left: 20px; filter: shadow(color:silver); float: right; padding-bottom: 12px; font: 24pt haettenschweiler; width: 135px; color: navy">Origin of <br />Dubya</div> <p style="text-align: justify"><span style="font-weight: bold; font-size: large">"</span>The origin of 'Dubya' from usaweekend.com says that the columnist Molly Ivins coined it in 1995; it's the spelled-out Texas-drawl version of Bush's middle initial (for "Walker"). Her editor at the Fort Worth Star-Telegram tells us Ivins "owned 'Dubya' from the mid-'90s to 1999, then it caught on with everyone else." Well, not really everyone. Close friends call Bush "George W." His dad sometimes calls him "Quincy," a reference to John Quincy Adams, the only son of a president to become president. And almost everybody else calls him "Mr. President."<span style="font-weight: bold; font-size: large">"</span></p></p></div>

Devamını Oku >>

Matted Style CSS Border Gold

Dostlar yandaki resmi ve çerçevesini beğendinizmi. Hah işte bu gün resimlerinizi şık ve hoş bir şekilde nasıl yayınlayacağızı tarif edeceğim. Yine burada CSS in nimetlerinden yararlanacağız. Yani anlayacağınız sayfalarınızda bu tür uygulamaları CSS ile daha kolay halledebilirsiniz. Burada "inline CSS" yöntemini kullanacağız. Yani makalemizi yazarken gereken kodları da aynı yerde yazacağız.

Kodlar arasınada makalenizi yerleştireceksiniz anlayacağınız.. Aşağıda bu makalenin uygulama kodunu bulacaksınız. Blogunuza kopyala yapıştır yöntemiyle deneyebilirsiniz. Bu makale yazısının da yerine kendi makalenizi yerleştirebilirsiniz. Yalnız Kodlar içindeki bold yani kalın yerlere kendi resimlerinizin ölçülerini ve adresini yazmayı unutmayın lafın kısacası. Kolay gelsin...

UYGULAMA KODU :

<div align="justify"> <p><span style="border-right: black 1px solid; padding-right: 10px; border-top: black 1px solid; padding-left: 10px; background: gold; float: left; padding-bottom: 10px; margin: 15px; border-left: black 1px solid; padding-top: 10px; border-bottom: black 1px solid"><img style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid" height="<strong>100</strong>" src="<strong>http://i151.photobucket.com/albums/s125/ihtiyarus/ataturk14vh7-1.jpg</strong>" width="<strong>75</strong>" /></span></p> <p><span style="border-right: darkkhaki 1px solid; padding-right: 5px; border-top: darkkhaki 1px solid; margin-top: 5px; font-size: 80px; background: khaki; float: left; border-left: darkkhaki 1px solid; color: white; line-height: 60px; margin-right: 6px; padding-top: 2px; border-bottom: darkkhaki 1px solid; font-family: times">D</span>ostlar yandaki resmi ve çerçevesini beğendinizmi. Hah işte bu gün resimlerinizi şık ve hoş bir şekilde nasıl yayınlayacağızı tarif edeceğim. Yine burada CSS in nimetlerinden yararlanacağız. Yani anlayacağınız sayfalarınızda bu tür uygulamaları CSS ile daha kolay halledebilirsiniz. Burada "inline CSS" yöntemini kullanacağız. Yani makalemizi yazarken gereken kodları da aynı yerde yazacağız. Kodlar arasınada makalenizi yerleştireceksiniz anlayacağınız.. Aşağıda bu makalenin uygulama kodunu bulacaksınız. Blogunuza kopyala yapıştır yöntemiyle deneyebilirsiniz. Bu makale yazısının da yerine kendi makalenizi yerleştirebilirsiniz. Yalnız Kodlar içindeki bold yani kalın yerlere kendi resimlerinizin ölçülerini ve adresini yazmayı unutmayın lafın kısacası. Kolay gelsin... </p></div>

ÖRNEK UYGULAMA :

UYGULAMA KODU :

Devamını Oku >>

21 Eylül 2007

Digg butonunun Blogger a uygulanması

Evet dostlar yine bugün ne zamandır (daha çok wordpress veya typepad) birçok blog da gördüğüm ama nasıl yapıldığını ve acaba tema özelliğimidir? Diye merak ettiğim bir uygulamadan bahsedeceğim. Digg denen sosyal network oluşumunu bilmeyeniniz yok dur sanıyorum. Bilmeyenler de buradan ne olduğunu hem öğrenip hem de buraya üye olabilirler.

Evet şimdi dediğim gibi birçok blog da ne zamandır dikkatimi çeken bir hadise vardı. Bu da postların sol üst tarafında veya sağ üst tarafında pul şeklinde digg düğmesinin olması. Bu nasıl oluyor diye benimde üyesi olduğum digg i kurcalarken orada bunun nasıl blog veya web sayfalarına adapte edilebileceğinin tarif edildiği sayfayı bulmamla bu merakım çözüldü. Ancak tarif İngilizce olduğundan bende de İngilizce nizani oluşundan dolayı sevgili genç dostum emrex den bu sayfayı okuyup bana anlatmasını rica etmiştim. Oda sağolsun yememiş içmemiş google da benim akıl edemediğim gerekli (ihtiyarlık işte beyin lopları artık eski performansını yitirdiğinden) aramayı yaparak bana iki site adresi verdi. Ancak bunların da İngilizce dil ile tarif yapıyor olmasına rağmen bir tanesinde buradakinde resimlerle anlatımından da yararlanarak iyi kötü ne demek istediğini anladım ve orda anlatılanları aynen uyguladım. İşte burada sayfayı incelerseniz uygulamanın örneğini post başlarındaki digg düğmelerini de göreceksiniz

Bende şimdi bunu sizlere anlatacağım. Bu düğmeleri sol tarafa veya sağ tarafa hatta altta bir yere koymanız mümkün o artık sizlere kalıyor hatta digg sitesinde daha başka düğme çeşitleri de var. Onlardan herhangi birinide beğeninize göre koyabilirsinizde.

Önce kontrol panelden blogunuzun yerleşim düzenine geçmek için resimdeki yerleşim ibaresine tıklıyoruz. Daha sonra yine aşağıdaki resimde de gösterilen HTML 'yi Düzenle ibaresine tıklıyoruz. Yine daha sonra aşağıdaki resimde de gösterilen Widget Şablonlarını Genişlet ibaresinin yanındaki kutuyu işaretliyoruz. Daha sonra aşağıdaki kod bölümündeki seçili ifadeyi tarayıcımızın toolbarındaki düzen menüsünden bu sayfada bul arama kutusuna aşağıdaki kodu aynen yazıp HTML kodları içerisindeki bulunduğu yeri buluyoruz.

<p><data:post.body/></p>

Bu seçili kodların üzerine aşağıdaki gibi dolgun siyah yazan kodları aynen kopyalayıp yukarıda ki bulduğumuz kod satırının üstüne aynen yapıştırıyoruz. Aşağıda görüldüğü gibi. Daha sonra şablonumuzu kaydedip yayınlıyoruz.

Daha sonra yayınlayıp baktığımızda aşağıdaki gibi görülecektir.

Yok solda olsun derseniz Kod içerisinde aşağıda siyah seçilmiş bölümleri yine aşağıdaki gibi düzelteceksiniz.

Daha sonra yayınla düğmesine basıp aşağıdaki gibi göreceksiniz.

Yok ben aşağıda postun yani yazılarımın altında yayınlansın derseniz de yine kodları aşağıda gösterildiği gibi yukarıda bulduğumuz kod satırının bu sefer altına koyacaksınız.

Yayılanmış hali yani butonun aşağıda yer alması da resimde görüldüğü gibi olacaktır.

eğer diğer buradan Digg buton şekillerini ve uygulanış biçimlerini merak ediyorsanızda her ne kadar ingilizce de olsa benim yararlandığım kaynağa buradan da bakabilirsiniz. Bu uygulamalar digg in kendi sitesinde de anlatılıyor ama ben oradaki anlatımı anlamakta biraz zorluk çektim. Sana da çok teşekkür ediyorum emrex. Hepinize kolay gelsin.

Devamını Oku >>

17 Eylül 2007

Resimli (image) Blockquote

Sevgili dostlar sizlere bu gün rutin kullandığımız bir uygulamadan bahsedeceğim. Bu uygulamanın adı blockquote. Yani yazılarımız arasında bir yerlerden alıntı bir yazı yayınladığımız zaman genelde kullanırız. Blogger ‘ın bu özelliği yok mu var. Bazen bu özellik kullandığımız şablon yani tema ‘nın css özelliklerine göre de değişiklik gösterir.

Eğer şu anda benim gibi var olan özellik den memnun olmayanlar için bu uygulamayı anlatmayı gerekli gördüm. Lazım olanlara birazcık kolaylık olsun diye. Esasında herkes bunu kullanabilir. Uygulaması zahmetli gelebilir. Kolaya kaçmaktan hoşlanmayanlar ve özgün bir şeyler yapmak isteyenlerin hoşuna gidecek bir uygulama.

Öncelikle şablon sekmesinde HTML ‘yi düzenle bölümüne geleceksiniz orada css style kodlarına ufak bir özellik ekleyeceksiniz. Nereye mi söyleyeyim, tarayıcının düzen menüsünden bu sayfada bul ibaresine tıklayacaksınız. Arama penceresine blockquote yazıp aratacaksınız. CSS kodlarında bulduğunuz blockquote style kodlarının hemen altına da aşağıda verdiğim kodları aynen yazacaksınız.

CSS CLASSES KODU :

blockquote.withquote {background:url(http://www.mandarindesign.com/images/quote.gif)
no-repeat;background-position:top left;padding-left:20px;text-align:justify;}

p.withunquote {background: url(http://www.mandarindesign.com/images/unquote.gif) no-repeat;background-position:bottom right;padding-right:5px;}

Daha sonrada normal yazınızı yazarken de aşağıda ki şekildeki gibi aynen span class kodlarının arasına da benim yaptığım gibi yazılarınızı yazacaksınız. Yalnız burada url leri verilmiş resimleri kendi resim yüklediğiniz yere yüklerseniz daha iyi olur. Yada yerlerine istediğiniz veya kendi yapacağınız resimleri de kullanabilirsiniz. Kolay gelsin.

UYGULAMA KODU :

Daha sonrada normal yazınızı yazarken de aşağıda ki şekildeki gibi aynen span class kodlarının arasına da benim yaptığım gibi yazılarınızı yazacaksınız. Yalnız burada url leri verilmiş resimleri kendi resim yüklediğiniz yere yüklerseniz daha iyi olur. Yada yerlerine istediğiniz veya kendi yapacağınız resimleri de kullanabilirsiniz. Kolay gelsin.

UYGULAMA AYNEN BÖYLE GÖRÜNECEK

Daha sonrada normal yazınızı yazarken de aşağıda ki şekildeki gibi aynen span class kodlarının arasına da benim yaptığım gibi yazılarınızı yazacaksınız. Yalnız burada url leri verilmiş resimleri kendi resim yüklediğiniz yere yüklerseniz daha iyi olur. Yada yerlerine istediğiniz veya kendi yapacağınız resimleri de kullanabilirsiniz. Kolay gelsin.

Devamını Oku >>

16 Eylül 2007

Windows Live Writer

Dostlar bu gün sizlere şahsen benim çok hoşuma giden Microsoftun hazırlayıp free yani tamamıyle bedava dağıttığı bu küçük bir nevi web editörü olan programı tanıtacağım. Yani Windows Live Writer sizlerinde hoşunuza gider umarım.

Windows Live Writer (Beta)

Writer, blogunuzda zengin içerik yayımlamayı kolaylaştıran bir masaüstü uygulamasıdır.

Blog hizmetinizle uyumlu

Writer uygulaması Windows Live Spaces, Sharepoint, WordPress, Blogger, LiveJournal, TypePad, Moveable Type, Community Server ve diğer birçok weblog hizmetinde içerik yayımlayabilir.

WYSIWYG düzenleme

Writer blogunuzun görsel temasını bilir. Bu nedenle, postalarınızı yazarken tam olarak nasıl görüneceklerini yayımlamadan önce görebilirsiniz. Postalarınızın çevrimiçi önizlemesine bakmak için zaman ayırmanız gerekmez.

Zengin medya yayımlama

Writer zengin medya yayımlama işlemini e-posta göndermek kadar basitleştirir. Fotoğrafları, haritaları, etiketleri ve daha birçok başka ilginç malzemeyi ekleyin ve özelleştirin—sonra da “Yayımla” düğmesini tıklatın. İşte bu kadar kolay.

Güçlü düzenleme özellikleri

Tabloları ekleme ve düzenleme, yazarken yazım denetimi yapma, içeriği biçimlendirme ve köprü ekleme yetenekleri elinizin altında olduğunda, çekici blog postaları oluşturmak çok daha kolay olur.

Çevrimdışı düzenleme

Artık istediğiniz zaman, istediğiniz yerden blog yayımlayabilirsiniz. Writer blogunuzdaki taslaklarla çevrimdışı olduğunuz sırada yaptığınız değişiklikleri eşitler, böylece farklı sürümleri birbirine uydurmak için uğraşmak zorunda kalmazsınız.

Zengin ilave eklentiler

Onlarca ilave Plugin ile yine onlarca uygulamayı çok kolay ve gelişmiş özelliklerle yapma ve yayınlama. Eklentileri buradan inceleyip indirebilirsiniz. Şu ana kadar anlattığımız bu küçük programı yani Windows Live Writer Beta 'yı ise buradan indirebilirsiniz.

Devamını Oku >>

27 Ağustos 2007

AJAX NEDİR? AJAX TÜRKİYE

Evet dostlar bu gün yine güzel bir konudan yani bununla ilgili nette gezinirken ne zamandır zaten takip ettiğim başarılı gençlerin üç sitesi bahse konu olacak. XHTML ve CSS bilmek bazen de yeterli olmuyor. Zaman zaman rastladığım harika uygulamaların, hiç bilmediğim belki ölmezde yaşarsam mutlaka öğreneceğim WEB sayfalarının PROGRAMLAMA ayağı yani XML, DOM, PHP, MySQL ve AJAX meselesi Nasılda atlamışım.

Şu aralar merak sardığım PHP ve buna bağlı hadiseler. Bunlardan biride AJAX. İlk önce Burcu DOĞAN ‘dan bahsetmeden geçersem olmaz. Çünkü PHP meselesinde daha doğrusu WordPress ‘ den dolayı dürtükledi beni. Nasılmı? Önce Burcu Doğan ‘ı TÜRKÇE BLOG YAZARLARI ‘ndan tanıdım. Daha sonrada EMREX bu gence dikkatimi çekti. Bende gittim blogunu inceledim. Bir baktım ki ne göreyim bu genç bu kadar şeyi ne zaman öğrenmiş?, neler yapmış? ve de yapmakta. Kendimden utandım. Her neyse onun sayfalarında dolaşırken zaten ne zamandır duyduğum, rastladığım AJAX konusu üzerine yazdıkları ilgimi çekti. Hemen bahsettiği siteleri gezmeğe ve AJAX üstüne nette ne var ne yok altını üstüne getirmeye başladım. Bana bir tarihlerde gfxdizayn ın yaratıcısı dostum Yassi (kulakları çınlıyordur kim bilir) bahsetmişti de o zamanlar pek Türkçe kaynak bulamadığım içinde AJAX ‘ın peşini bırakmıştım. Neyse ilk baktığım yerden yani buradan ajaxnedir? den epeyce güzel şeyler öğrendim. Bu sayfanın yaratıcısının gerçek adını merak ediyorsanız gidip sayfalarını karıştırmanız gerekiyor. He he :) Efendim esas AJAX konusunda gerçekten bir şeyler öğrenmek istiyorsanız ve birkaç blogları varki onların yaratıcıları YAKUTER, EBURHAN ve diğer adlarını sayamadığım arkadaşları kimdir diye de merak ediyorsanız Türkiye AJAX adlı sitelerine mutlaka bakın. Eh be bre yakışıklı gençler eğitimciyken eğitimciliğimden utandırdınız beni. İşte eğitici site buna derim. OpenSource Community ‘e deki editörlere bildireceğim. Bu siteleri eğitim kategorisinde ilk sıraya alsınlar. Sizlerin de buradan gözümde büyüttüğüm AJAX ı öğrenmeden ayrılmayacağınızdan eminim. Hatta ben burada her gün herhalde iki saatimi en azından geçiririm. Bu konudaki cehaletimden ilerde nasılsa öğreneceğim de sabredemedim onlara bazı şeylerde sordum herhalde bu başarılı ve de güzel işleri çıkartan gençler beni umarım aydınlatacaklardır. Sizlerde eğer AJAX , yukarıda bahsettiğim diğer konular ve kişiler hakkında öğrenmek istiyorsanız ki eminim mutlaka çook şeyler öğreneceksiniz . Buralara, bu kişilere uğramadan geçmeyin, ayrıcana da mimleyin. Böyle başarılı gençleri nedense çok seviyorum….

Devamını Oku >>