Blogger için Flash Etiket Bulutu

Wordpress bloglarında gördüğümüz flash etiket bulutunu Blogger Buster'de blogger'a uygulanışı anlatılmış.İngilizcesi olmayanlar için anlatıyım.Baştan söyliyim Türkçe karakterler çıkmıyor js bilgisi olanlar bunu düzeltebilirler sanırım.
Yerleşim>Html düzenlede Ctrl+F Tuşlarına basıp aşağıdaki kodu arıyoruz.

<b:section class='sidebar' id='sidebar' preferred='yes'>

Daha sonra yukarıdaki kodun altına aşağıdaki kodu yapıştırıyoruz.

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Sıra geldi etiket bulutunun genişliğine ve rengine

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

240 ve 300 genişlik için temanıza göre ayarlamanız lazım.

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Kırmızı işaretli yer reng kodu ,etiket bulutunun arkaplan rengini burdan değiştiriyorsunuz

Ve bunları yaptıkdan sonra temamızı kaydediyoruz.Daha sonra sayfa öğesi ekle kısmından etiketler i uygun bir yere sürüklüyoruz.Bitti bu kadar.Hayırı olsun.

Not: Her temada olmuyor,yapılabilmesi için temanızda ilk aramanız için verdiğim kodun olması lazım.Kendi bloğuma yapmaya çalıştım yapamadım.Bende şuraya yaptım. :)

Blogger Buster'da ayrıntılı olarak anlatılmış.Daha detaylı bilgi için oraya bakın.

Page Navigation Menu Blogger için Widget

Şu adresteki blogda yukarıda gördüğünüz gibi blog yazıları sayfalama widgeti anlatılmış.Yalız birinci sayfadan ikinci sayfaya geçince birden fazla yazı değil bir sonraki yazıyı gösteriyor.

Yapmanız gereken aşağıda verilen kodu kopyalıp sayfa öğesi ekle kısmından HTML/JAVASCRİPT'i şeçip oraya yapıştırmak.Ve widgeti blog yazılarının altına yerleştirmek.Kod:

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;

}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>

<script type=”text/javascript”>

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==”.blogspot.com/”;
var isLablePage = thisUrl.indexOf(”/search/label/”)!=-1;
var isPage = thisUrl.indexOf(”/search?updated”)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(”/search/label/”)+14,thisUrl.length) : “”;
thisLable = thisLable.indexOf(”?”)!=-1 ? thisLable.substr(0,thisLable.indexOf(”?”)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= ”;
var upPageHtml =”;
var downPageHtml =”;

var pageCount=5;
var displayPageNum=3;
var firstPageWord = ‘First’;
var endPageWord = ‘Last’;
var upPageWord =’Previous’;
var downPageWord =’Next’;

var labelHtml = ‘<span class=”showpageNum”><a href=”/search/label/’+thisLable+’?&max-results=’+pageCount+’”>’;

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=”){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = ‘/search/label/’+thisLable+’?updated-max=’+timestamp+’T00%3A00%3A00%2B08%3A00&max-results=’+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=”){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=”) postNum++;
htmlMap[htmlMap.length] = ‘/search?updated-max=’+timestamp+’T00%3A00%3A00%2B08%3A00&max-results=’+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +’</a></span>’;
}else{
upPageHtml = ‘<span class=”showpage”><a href=”/”>’+ upPageWord +’</a></span>’;
}
}else{
upPageHtml = ‘<span class=”showpage”><a href=”‘+htmlMap[p]+’”>’+ upPageWord +’</a></span>’;
}

fFlag++;
}

if(p==(thisNum-1)){
html += ‘&nbsp;<span class=”showpagePoint”><u>’+thisNum+’</u></span>’;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+’1</a></span>’;
}else{
html += ‘<span class=”showpageNum”><a href=”/”>1</a></span>’;
}
}else{
html += ‘<span class=”showpageNum”><a href=”‘+htmlMap[p]+’”>’+ (p+1) +’ </a></span>’;
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = ‘<span class=”showpage”> <a href=”‘+htmlMap[p]+’”>’+ downPageWord +’</a></span>’;
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = ‘<span class=”showpage”><a href=”/”>’+ firstPageWord +’ </a></span>’+upPageHtml+’ ‘+html +’ ‘;
}else{
html = ”+labelHtml + firstPageWord +’ </a></span>’+upPageHtml+’ ‘+html +’ ‘;
}
}

html = ‘<div class=”showpageArea”><span style=”padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-” class=”showpage”>Page ‘+thisNum+’ of ‘+(postNum-1)+’: </span>’+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += ‘<span class=”showpage”><a href=”‘+htmlMap[htmlMap.length-1]+’”> ‘+endPageWord+’</a></span>’;
}

if(postNum==1) postNum++;
html += ‘</div>’;

if(isPage isFirstPage isLablePage){
var pageArea = document.getElementsByName(”pageArea”);
var blogPager = document.getElementById(”blog-pager”);

if(postNum <= 2){
html =”;
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html =”;
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src=”/feeds/posts/summary?alt=jso
n-in-script&callback=showpageCount&max-results=99999″ type=”text/javascript”></script>
<div style=”text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;”> <a href=”http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.html”>
Grab this Widget ~ Blogger Accessories
</a></div>

Blogger Sağ Tarafta Kayan Banner

Bir çok websitesinde görmüş olduğunuz sağ tarafta bulunan siz hareket ettikçe aynı doğrultuda hareket eden kayan bannerların blogger için nasıl yapıldığını bu yazıda bulabilirsiniz.
Birçok arkadaş biliyordur belki ama ben yinelemekte fayda buluyorum herkes kaynak sayfasından bu kodları bulmakla uğraşmasın burada elinin altında bulunsun.Bu kod ile reklamlarınızı kayan banner olarak yayınlayabilir ziyaretçinizin ilgisini biraz daha çekebilirsiniz bu ne kadar faydalı olur hiç bilemiyorum test etme imkanım olmadı.Neyse gelelim uygulama aşamasına;

1. Sayfanın herhangi bi yerine HTML/JavaScript ile eklemeniz gereken kod:
   

   
   <style type="text/css">
   
   #topbar{
   position:absolute;
   border: 0px solid black;
   padding: 0px;
   background-color: white;
   width: 111px;
   visibility: hidden;
   z-index: 0;
   }
   
   </style>
   
   <script type="text/javascript">
   var persistclose=1 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
   var startX = 10 //set x offset of bar in pixels
   var startY = 5 //set y offset of bar in pixels
   var verticalpos="fromtop" //enter "fromtop" or "frombottom"
   
   function iecompattest(){
   return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
   }
   
   function get_cookie(Name) {
   var search = Name + "="
   var returnvalue = "";
   if (document.cookie.length > 0) {
   offset = document.cookie.indexOf(search)
   if (offset != -1) {
   offset += search.length
   end = document.cookie.indexOf(";", offset);
   if (end == -1) end = document.cookie.length;
   returnvalue=unescape(document.cookie.substring(offset, end))
   }
   }
   return returnvalue;
   }
   
   function closebar(){
   if (persistclose)
   document.cookie="remainclosed=1"
   document.getElementById("topbar").style.visibility="hidden"
   }
   
   function staticbar(){
   barheight=document.getElementById("topbar").offsetHeight
   var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
   var d = document;
   function ml(id){
   var el=d.getElementById(id);
   if (!persistclose || persistclose && get_cookie("remainclosed")=="")
   el.style.visibility="visible"
   if(d.layers)el.style=el;
   el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
   el.x = startX;
   if (verticalpos=="fromtop")
   el.y = startY;
   else{
   el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
   el.y -= startY;
   }
   return el;
   }
   window.stayTopright=function(){
   if (verticalpos=="fromtop"){
   var pY = ns ? pageYOffset : iecompattest().scrollTop;
   ftlObj.y += (pY + startY - ftlObj.y)/8;
   }
   else{
   var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
   ftlObj.y += (pY - startY - ftlObj.y)/8;
   }
   ftlObj.sP(ftlObj.x, ftlObj.y);
   setTimeout("stayTopright()", 0);
   }
   ftlObj = ml("topbar");
   stayTopright();
   }
   
   if (window.addEventListener)
   window.addEventListener("load", staticbar, false)
   else if (window.attachEvent)
   window.attachEvent("onload", staticbar)
   else if (document.getElementById)
   window.onload=staticbar
   </script>
   
   
   <div id="topbar">
   Reklam kodunuzu buraya ekleyin
   </div>
   

   
   
   
2. Görmüş olduğunuz kodu eklerken en alt kısımda "Reklam kodunuzu buraya ekleyin" ibaresine dikkat edip gereken düzenlemeyi yapınız.
3. Daha sonra sayfanızda bir yere ekleyin ve Kaydettikten sonra reklamınız yayınlanıcaktır.İşte hepsi bu kadar basit.
4. Örnek görebilmek isteyen arkadaşlar için buyrun demo
   

Vibrant Blogger XML Template

Gosublogger kısa tatil döneminde ki sessizliğini güzel bir xml tema ile bozmuş herşeyi devletten beklemeden bu sefer onun yapmış olduğu bu hoş temayı ben sizlere tanıtıyorum.

Not: Bu yazı BloggerDestek Tema bloguna taşınmıştır.
http://tema.bloggerdestek.com/2009/08/vibrant-blogger-xml-template.html

Progress Bar Oluşturmak

Merhabalar.
Blogger Destek Merkezi üzerinde ilk yazım. Umarım faydalı ve güzel işler başarırız.
Bu yazıda size nasıl progress bar oluşturacağınızı anlatacağım. Her şey bittiğinde şöyle bir görüntü elde edebileceksiniz:

Peki bunu nerede kullanabiliriz? En basitinden makale yayınladığınız ya da derleme yaptığınız bloglarınızda mevcut projenizin durumunu gösterebilirsiniz. Fikir sizin.

Öncelikle şu kodları <head>...</head> arasına yerleştirelim.

<!-- Progess bar widget, by Matthew Harvey (matt at smallish.com) -->
<!-- Licensed under a Creative Commons Attribution-Share Alike 2.5
License (http://creativecommons.org/licenses/by-sa/2.5/) -->
<style type="text/css">
div.smallish-progress-wrapper
{
/* Don't change the following lines. */
position: relative;
border: 1px solid black;
}

div.smallish-progress-bar
{
/* Don't change the following lines. */
position: absolute;
top: 0; left: 0;
height: 100%;
}
div.smallish-progress-text
{
/* Don't change the following lines. */
text-align: center;
position: relative;
/* Add your customizations after this line. */
}
</style>
<script type="text/javascript">
function drawProgressBar(color, width, percent)
{
var pixels = width * (percent / 100);

document.write('<div class="smallish-progress-wrapper" style="width: ' + width + 'px">');
document.write('<div class="smallish-progress-bar" style="width: ' + pixels + 'px; background-color: ' + color + ';"></div>');
document.write('<div class="smallish-progress-text" style="width: ' + width + 'px">' + percent + '%</div>');
document.write('</div>');
}
</script>

Daha sonra progress barı nereye koyacağınıza karar verin ve şu kodları yapıştırın:

<script type="text/javascript">drawProgressBar('#987654', 200, 34);</script>

Buradaki değiştirebileceğiniz değerler:
200: Progress barın genişliği
#987654: Progress barın dolgu rengi
34: Progress barın % değeri

Kolay gelsin.

Scour ile arama yaparak para kazanın

Günde kaç kez arama yaptığınızı hiç düşündünüzmü ? Eğer işiniz gücünüz yoksa zamanınızın büyük bölümünü internette harcıyorsanız , büyük ihtimalle 500'e yakın bir arama yapıyorsunuzudur , benim için bu rakam daha da fazla , peki bu aramalarla sadece Google'a kazandırmak yerine cep harçlığınızı çıkarmaya ne dersiniz ?

Scour bahsini ettiğimiz programın adı , merak etmeyin yeni bir arama motoru değil , Scour'dan arama yapıyorsunuz , Scour da size 3 dev arama motorundan yani Google , Yahoo ve Live ' den sonuçlar sunuyor isteğe bağlı olarak sonuçları sadece bu motorların birinden de isteyebiliyorsunuz , demek istediğim Google da aradığınızla Scour ile aradığınız arasındaki tek fark Scour'un size para ödemesidir.

Peki iyi güzel de nasıl kazanacağım diyorsanız , Scour puan sistemine bağlı ödeme yapıyor örneğin 6.500 puana 25 dolar veriyor , 12.500 puana 50 dolar ve 25.000 puana 100 dolar veriyor.

Tamam bu da güzel puanı nasıl toplayacağım diyorsanız o da basit.

1. Üye olarak - 50 puan
2. Arama yaparak - 1 puan
3. Arama sonuçlarını oylayarak - 2 puan
4. Arama sonuçlarına yorum yaparak - 3 puan

kazanıyorsunuz . Bununla birlikte davet ettiğiniz arkadaşlarınızın kazandığı puanların %25'i size de veriliyor. Anlayacağınız avantajı bol.

Ödemeleri Visa Gift Card ile yapıyor Scour , yani size hediye kartı gönderiyor ve bu kartla paralarınızı harcayabiliyorsunuz.

BURAYA TIKLAYARAK SCOUR'A DAVETİMLE ÜYE OLABİLİRSİNİZ !

GabFire Blogger Teması

Bloggrazzi'de en iyi 20yi gezerken Mehmet'i farkettim , güzelde wordpress temaları vardı Mehmet kardeşimizin , beğendiğim bir tanesini uyarlayabilirmiyim diye sordum o da sağolsun izin verdi , ben az önce Mehmet'in Gabfire Maq adlı temasını Blogger'a uyarladım. Beğeneceğinizi umuyorum.

Not: Bu yazı BloggerDestek Tema bloguna taşınmıştır.
http://tema.bloggerdestek.com/2009/08/gabfire-blogger-temas.html