Blogger Android Teması

Blogger kullanıcıları android uygulamalar üzerine bir blog sitesi açacaksanız bu tema tam size göre tema zaten adında belli olduğu gibi bu iş için yapılmış, Tema tamamen seo dostu olarak kodlanmıştır.

ÜCRETSİZ İNDİR

Blogger Yazıların Kaç Defa Okunduğunu Göster

Blogger Kullanıcıları için yazdıkları makalelerin kullanıcıları tarafından kaç defa okunduğunu gösteren kod., Artık bloglarınızın altında o yazının kaç defa okunduğunu gösteren bir değeriniz olacak.

• Blogger kumanda paneline gelip Şablon >> HTML’yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widgetleri genişlet kutucuğunu işaretliyoruz.
• Ardından CTRL+F yardımı ile <data:post.body/></div> kodunu bularak hemen altına aşağıda ki Blogger yazılarım kaç kere okundu eklentisi kodlarını ekliyoruz.

1 2 3 4

<div style='text-align: left;'> <b:if cond='data:blog.pageType == &quot;item&quot;'><span style='color: magenta;'> <b> Bu yazı daha önce  <img alt='counter' expr:src='&quot;http://www.e-zeeinternet.com/gd-count.cgi?page=&quot; + data:post.id + &quot;&amp;style=times&amp;nbdigits=1&amp;reloads=1&quot;'/> kişi tarafından okundu.</b> </span><b:else/></b:if></div>

Kolay gelsin.

Youtube Blogger Teması

Blogger kullanan arkadaşlar için çok yararlı bir tema olacağını düşünüyorum tema ücretsizdir.

Fazla uzatmadan demosunu ve indirme linkini veriyorum.
DEMO
İNDİR

Blogger Oyun Vakti Teması

Blogger Oyun Vakti Teması ile karşınızdayız bloggera uygun oyun teması bulmak çok kolay değil ama KodPerest sayesinde onuda çok kısa bir süre içinde halledebilirsiniz.Neyse fazla reklam yapmadan demoyu ve bedava ve reklamsın indirebileceğiniz linki vereyim.

Demo

Dosyayı Reklamsız ve Ücretsiz İNDİR

Blogger Film Teması

Blogger Film Teması sayesinde wordpressdeki kadar uğraşmadan wordpress düzeyinde tema sahibi olacaksınız.Hemde bu tema sayesinde kolayca hit alabileceksiniz neyse lafı fazla uzatmadan temanın demosunu ve indirme linkini veriyorum.

Demo


Dosyayı Ücretsiz ve Reklamsız İNDİR

Blogger Partizan V3 Teması

Bu temayı başka bir blogda gördüm çok etkilendim editlenerek çok güzel bir tema elde edebilirsiniz inşallah işiniza yarar indirme linki demo görüntünün altındadır.

DEMO

Dosyayı Ücretsiz ve Reklamsız İNDİR

Blogger Footer Eklentisi

Resime tıklayarak resmin orijinal boyutunu görebilirsiniz.
Ayrıca Teşekkürler Cadam.

Arkadaşlar çok şık muhteşem bir footer eklenitisi buldum ve sizlere paylaşayım dedim çok kullanışlı aslında 3 bölüm var biri araç kutusu olarak kullanıyorum , 2 adet metin alanı var buraları istediğiniz gibi kullanabilirsiniz en büyük 2. özelliği ise bu eklentiyi  çoğu kişi arıyor üzerinde hareketli swf var neyse çok uzatmadan kodlara geçelim.

İlk Olarak Alttaki Kodu Bulun :
]]></b:skin>
Ve Üstüne Şu Kodları ekleyin :

.footer h2{font:bold 14px Arial;padding-bottom:5px;margin-bottom:5px;line-height:1.3em;text-transform:uppercase;color:#333}
.footer{color:#666;line-height:1.3em;font:normal 12px Tahoma;text-shadow:-1px -1px #fff;}
.footer ul{list-style:none;color:#EAE9E8;margin:0;padding:0}
.footer li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0LR2NVHgpRGb_MdZtFdCGziKQCcTXSeH7hcf-xMLxTtqMUdAi_WjVk0YihUB95MR-XAANML_htwyHfm_Yc04ixNBClCH7-J4-rvMar0A2g7CfqyhXn5J-z4y6R53E5SaA84hwlzNRjEA/s1600/footerli.png) no-repeat 1px 5px;font:normal 12px Tahoma;color:#626262;text-indent:0;line-height:1.2em;margin:0;padding:2px 0 3px 13px}
.footer a:link,.footer li a:visited{color:#222;text-decoration:none}
.footer li a:hover{color:#014579}
.footer .widget{margin:0 0 8px;padding:6px 0}
.footer .widget-content{padding:0}
.picfooter{border:1px solid #C4C4C4; text-shadow:0 -1px 0 white; text-decoration:none; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; background:#EDEDED; background:-webkit-gradient( linear,left top,left bottom,color-stop(.2,white),color-stop(1,#E5E5E5) ); background:-moz-linear-gradient( center top,white 20%,#E5E5E5 100% );width:938px;margin-left:auto;margin-right:auto;text-align:center;font:normal normal 12px Tahoma}
#footer-wrapper{width:910px;text-align:left;font:normal normal 11px Tahoma;margin:0 auto;padding:0 10px 10px}
#footer1-wrapper{width:300px;float:left;word-wrap:break-word;overflow:hidden}
#footer2-wrapper{margin-left:0px;width:300px;float:left;word-wrap:break-word;overflow:hidden;padding:0 10px}
#footer3-wrapper{width:280px;float:right;word-wrap:break-word;overflow:hidden} 

İkinci Olarak Şu Kodu Bulun :
</body>
Ve Üstüne Şu Kodu Ekleyin

<!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>


    </div> <!-- end content-wrapper --><style>
#footer-outer{background:#2d2d2d url(http://d1303.hizliresim.com/17/q/lbdlt.png);color:#fff;width:100%;height:247%;clear:both;margin:0;padding:0;float:left;border-top:2px solid #bd423e;font:12px/23px Tahoma, Geneva, sans-serif;}#footer-wrap{margin:0 auto;width:900px;margin-bottom:20.3em;padding:15px 0 10px 0}#footer-wrap .col-c h2{font-size:17px;font-family:arial,sans serif;font-style:normal;font-weight:normal;color:#2eb9f4;margin:0 0 6px 0;padding:10px 0 6px 0;border-bottom:2px solid #444}#footer-wrap .col-c h2 span{color:#aaa}#footer-wrap .col-a h2{font-family:arial,sans serif;font-style:normal;font-weight:normal;font-size:17px;margin:0 0 6px 0;padding:10px 0 6px 0;color:#cb3833;border-bottom:2px solid #444}#footer-wrap .col-a h2 span{color:#aaa}#footer-wrap .col-a{float:left;width:290px;margin-left:12px}#footer-wrap .col-b h2{font-family:arial,sans serif;font-style:normal;font-weight:normal;font-size:17px;margin:0 0 6px 0;padding:10px 0 6px 0;color:#8ccb33;border-bottom:2px solid #444}#footer-wrap .col-b h2 span{color:#aaa}#footer-wrap .col-a{float:left;width:286px;margin-left:9px}#footer-wrap .col-c{float:left;width:285px;margin-left:7px}#footer-wrap .col-b{float:right;width:295px;margin-right:9px}#footer-outer .col-c ul{list-style:none outside none;margin:0;padding:0}#footer-outer .col-c ul li{border-bottom:1px dashed #444;margin:0;list-style-type:none}#footer-outer .col-c ul li span{float:right;margin:-20px 0 0 0;color:#555}#footer-outer .col-c ul li a{border:medium none;color:#888;display:block;line-height:1.5em;margin:0;padding:5px 0;width:98%}#footer-outer .col-c ul li a span{font-family:Verdana,Sans-Serif;font-size:.95em;font-style:italic;font-weight:normal}#footer-outer .col-c ul li a:hover,#footer-outer .col-a ul li a:hover span{color:#f4f4f4}#footer-outer .col-a ul{list-style:none outside none;margin:0;padding:0}#footer-outer .col-a ul li{border-bottom:1px dashed #444;list-style-type:none;margin:0}#footer-outer .col-a ul li span{float:right;margin:-20px 0 0 0;color:#555}#footer-outer .col-a ul li a{border:medium none;color:#888;display:block;line-height:1.5em;margin:0;padding:5px 0;width:98%}#footer-outer .col-a ul li a span{font-family:Verdana,Sans-Serif;font-size:.95em;font-style:italic;font-weight:normal}#footer-outer .col-a ul li a:hover,#footer-outer .col-a ul li a:hover span{color:#f4f4f4}#footer-bottom{clear:both;background:0;margin:0 auto 0 auto;font-family:&#39;Trebuchet MS&#39;,&#39;Helvetica Neue&#39;,Arial,sans-serif;font-size:12px;padding:5px 0;color:#FFF;width:900px}#footer-bottom a{color:#888;font-weight:bold}#footer-bottom a:hover{color:#fff}#footer-bottom .bottom-left{float:left;padding-left:15px}#footer-bottom .bottom-right{text-align:right;padding-right:22px}</style>
<br/>
<param name='allowfullscreen' value='true'/><param name='allowscriptaccess' value='sameDomain'/><param name='pluginspage' value='http://www.adobe.com/go/getflashplayer'/>
<object data='http://dl.dropbox.com/u/88724674/alt.swf' height='90' id='flash_dz' style='visibility: visible; ' type='application/x-shockwave-flash' width='100%'><param name='quality' value='high'/><param name='scale' value='noScale'/><param name='wmode' value='transparent'/><param style='background-image: url(file:);'/></object>
</div><div class='clear' id='footer-outer'>
<div id='footer-wrap'>
<div class='col-c'>     
<h2><b>Öneri </b><span><b>Makaleler !</b></span></h2>
<ul>
<li><a href='http://kodperest.blogspot.com/2013/10/canl-tv-izleme-scripti.html'>Canlı TV İzleme Scripti</a><span><img src=''/></span></li>
<li><a href='http://kodperest.blogspot.com/2013/10/sfv2-blogger-temas.html'>SFV2 Blogger Teması</a><span><img src=''/></span></li>
<li><a href='http://kodperest.blogspot.com/2013/10/acces-tokenli-durum-begendirme-scripti.html'>Acces Tokenli Durum Beğendirme Scripti </a><span><img src=''/></span></li>
<li><a href='http://kodperest.blogspot.com/2013/09/birkez-gorunen-facebook-begen-kodu.html'>Birkez Görünen Durum Beğendirme Scripti</a><span><img src=''/></span></li>
<li><a href='http://kodperest.blogspot.com/2013/10/metin2-imleci.html'>Metin2 İmleci </a><span><img src=''/></span></li>
</div>
<div class='col-a'>
<h2><b>Dost  </b> <span><b>Bloglar.</b></span></h2>
<ul>
<li><a href='http://kodperest.blogspot.com'>Siteni Ekle</a></li>
<li><a href='http://kodperest.blogspot.com'>Siteni Ekle</a></li>
<li><a href='http://kodperest.blogspot.com'>Siteni Ekle</a></li>
<li><a href='http://kodperest.blogspot.com'>Siteni Ekle</a></li>
<li><a href='http://kodperest.blogspot.com'>Siteni Ekle</a></li>
<li><a href='http://kodperest.blogspot.com'>Siteni Ekle</a></li>

</ul>
</div>
<div class='col-b'>
<h2>Araç <span>Kutusu!</span></h2>
<br/>
<a href='http://www.alexa.com/siteinfo/http://ramazandgn.blogspot.com/'><script src='http://xslt.alexa.com/site_stats/js/t/a?url=http://ramazandgn.blogspot.com/' type='text/javascript'/></a>
<a href='http://www.dmca.com/Protection/Status.aspx?ID=79af0bef-df47-426f-9817-015597ce079f' title='DMCA'> <img alt='DMCA.com' src='http://images.dmca.com/Badges/dmca_protected_30_120.png?ID=79af0bef-df47-426f-9817-015597ce079f'/></a>
<br/>
<script id='_waudut'>var _wau = _wau || []; _wau.push([&quot;small&quot;, &quot;ra13z7g50kgu&quot;, &quot;dut&quot;]);
(function() {var s=document.createElement(&quot;script&quot;); s.async=true;
s.src=&quot;http://widgets.amung.us/small.js&quot;;
document.getElementsByTagName(&quot;head&quot;)[0].appendChild(s);
})();</script>
<br/>
<div style='float:middle;'>


  Copyright &#169; 2013|9|Temmuz| <b><a href='http:/ramazandgn.blogspot.com' rel='dofollow' title='RamazanDgn'><b><font color='white'>Ramazan Doğan</font></b></a></b>
<p class='text'>Sitemiz Dmca ile lisanslanmıştır.Kaynak gösterilmeden alıntı yapılamaz!
</p>


</div></div>
  </div></div> <!-- end outer-wrapper -->
&lt;!--




Kırmızı ile belirttiğim yerleri kendinize göre düzenleyin.
Düzgünüz yapmanız sonucunda yukarıdaki resimdeki  footere sahip olacaksınız.

Blogger .. Günden Beri Hizmet Veriyoruz Eklentisi

Arkadaşlar bu kodu bizim sitemizden başka bir sitede 

görmeniz %10 civarlarında :) bu kodu çok aradım İnşallah

 işinize yarar neyse çok uzatmadan kod içerisinde mavi ile 

işaretlediğim yerleri kendinize göre düzenlersiniz.

<script type='text/javascript'>
function dcountup(startingdate, baseunit){
    this.currentTime=new Date()
    this.startingdate=new Date(startingdate)
    this.timesup=false
    this.baseunit=baseunit
    this.start()
}

dcountup.prototype.oncountup=function(){} //default action for "oncountup"

dcountup.prototype.start=function(){
    var thisobj=this
    this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
    var timediff=(this.currentTime-this.startingdate)/1000 //difference btw target date and current date, in seconds
    var oneMinute=60 //minute unit in seconds
    var oneHour=60*60 //hour unit in seconds
    var oneDay=60*60*24 //day unit in seconds
    var dayfield=Math.floor(timediff/oneDay)
    var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
    var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
    var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
    if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
        hourfield=dayfield*24+hourfield
        dayfield="n/a"
    }
    else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
        minutefield=dayfield*24*60+hourfield*60+minutefield
        dayfield=hourfield="n/a"
    }
    else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
        var secondfield=timediff
        dayfield=hourfield=minutefield="n/a"
    }
    var result={days: dayfield, hours:hourfield, minutes:minutefield, seconds:secondfield}
    this.oncountup(result)
    setTimeout(function(){thisobj.start()}, 1000) //update results every second
}
    </script>
<div id='cpcontainer'>
</div>
<script type='text/javascript'>
//SYNTAX: myvariable=new dcountup(past_date_and_time_string, "baseunit")
var princewedding=new dcountup("July 29, 2013", "days")

princewedding.oncountup=function(result){
    //result is an object containing the current count up date/time, updated every second
    //Available properties: result["days"], result["hours"], result["minutes"], and result["seconds"]
    var mycountainer=document.getElementById("cpcontainer")
    mycountainer.innerHTML=""+result['days']+" Gündür Sizlere Hizmet Veriyoruz..."
}
</script>

SFV2 Blogger Teması

SFV2 Blogger Teması

Tasarım tamamen Türkçedir.
Bu tasarım sayesinde sade ve güzel bir görünüm elde edeceğinize eminim.
Blogger temasını kurmayı bilmiyen varsa Google dan araştırıp öğrenir çok zor bir şey değil zaten.
Ama yapamazsanız iletişim bölümünden bize mesaj atarak yardımcı olmamızı istiyebilirsiniz.
Neyse lafı fazla uzatmadan link vereyim.
Bu arada reklamlarla karşılaşmamanız için dosyaları yandex disk den atıyorum :) ve rar pass koymuyorum. :)

DOSYAYI İNDİRMEK İÇİN TIKLAYIN

Demo

Modern Blogger Temaları: DownTown

Blogger teması arayanların mutlaka bakması gereken modern bir tema diyebiliriz. Bu yazımızda DownTown modern Blogger temasını tanıtacağız. Gayet aktif bir slider ve hızlı yapısıyla bizlere seo açısından da destek olan DownTown Blogger temasının özelliklerine geçelim.

Üst sayfa menü sosyal paylaşım eklentisi

Şablonun en üst kısmında bulunan bir menü sayfalarınız için ideal bir kullanım sunuyor. Bunun yanında aynı yere entegre edilmiş sosyal takip et butonlarıyla birlikte sosyal ağlara bağlantılarınızı sağlayabilirsiniz. Küçük ve hoş görüntüleriyle blogunuza hem hız hem de estetik bir görünüm kazandırıyorlar.

Modern menü

Logonun alt kısmında yer alan modern menü isterseniz etiketlerinizi basitçe sergileyebileceğiniz bir yer olarak size hizmet ediyor. Açılır menü özelliği bulunan modern menüye isterseniz alt sayfalarda ekleyebilirsiniz.

Gelişmiş slider özelliği

DownTown'da yer alan slider eklentisi, gerçekten bugün Blogger şablonlarında kullanılan çoğu sliderdan daha kaliteli. Bir resimle birlikte yayınınızla ilgili bir çok bilgiyi paylaşabilirsiniz.

Gelişmiş yazı başlığı

Yazı başlıkları blogunuza uygun şekilde düzenlenmiş. DownTown blogger şablonunda blog başlığınız hiç gözden kaçmayacak. Koyu gri bir bant üstünde yer alan başlık yanında birde tarih içeriyor.

İki stun özelliği

DownTown modern temada iki adet sağ stun bulunuyor. Bu stundaki her widgetin kendine özgü rengi bulunmasıda şablonu diğerlerinden ayırıyor ve ön plana çıkarıyor. Bunun yanında gelişmiş footer özelliği ile ziyaretçilerinize daha rahat bir blog deneyimi yaşatacaksınız.

DownTown temasını incelemek için http://downtown-blg.blogspot.com/ kullanmak için http://www.soratemplates.com/2013/09/downtown-blogger-template.html adresini ziyaret edin.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Kodlarınızı Bloga Uygun Hale Getirin

Kodlarınızı özellikle Blogger sisteminde yazı içerisinde yayınlayamayabilirsiniz. Bunun en büyük sebebi çeşitli eksikliklerden dolayı kodun bloga uygulanmasıdır. Sayfaya yapıştırdığınız koda, html kısmına da yapıştırsanız, görsel kısmada yapıştırsanız, blog tarafından algılanır ve sayfaya uygulanır. Bu durum kodun sayfada görünmemesine veya uygulanmış şekilde görünmesine neden olur. Blogcular bu durumda oldukça rahatsız.

Bu yöntem için çeşitli kod gösterim alanları veya

<code></code>

şeklinde çözümler kullanılsada insanlar yinede sıkıntı çekmektedir. Kodlarınızın uygulanabilir ve sadece kod şeklinde blogunuzda görünmesi için kodunuzu formatlamanız gerekmektedir.

http://formatmysourcecode.blogspot.com/ bu site sayesinde kodunuzu yazı içinde görünecek şekilde formatlayabilirsiniz. Kodunuzda görünüş olarak değişiklikler olacaktır; fakat işlev olarak aynı kalacaktır. Bu site ayrıca Adsense reklam kodlarının yazı içerisine eklenmesinde kullanılabilir. Kullanımı çok basittir. Formatlamak istediğiniz kodu yapıştırıp format text butonuna tıklayın. Alttan yeni kodu kopyalayıp kullanın.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Magzon: Blogger Seo Şablonu

Blogger kullanıcıları için hem seo açısından geliştirilmiş, hem de görsel olarak üst düzey bir şablon tanıtmak istiyorum. Webmasterlar arasında magazin sitili denilen bu şablon görsel olarak bir çok Blogger şablonunda iyi durumda. Seo açısından da desteklenmesi ayrıca işimize yarayacaktır. Hemen tanıtıma geçelim; işte Magzon Blogger şablonu...

Magzon Blogger Şablon Özellikleri

• Hafif tasarım, hızlı açılış
• Özenle seçilmiş renkler; mavi, beyaz, gri
• Magazin sitili
• Sayfayı kaplayan bir tasarım
• Sosyal entegrasyon; içerikte paylaş butonları, üstte takip et butonları
• Sayfa başı reklam alanı
• Gelişmiş etiket sistemi
• Yazı sonlarında yazar tanıtım kısmı
• Gelişmiş menü
• Gelişmiş footer
• Resimli önerilen içerik

Bir çok özelliği bulabileceğini bu gelişmiş Blogger şablonunda şu ayarları yapmanız seo açısından iyi olacaktır. Yıldızları * ben ekledim. Kod görünsün diye...

<*meta content='blogunuzun tanımı buraya' name='description'*/>
<*meta content='anahtar kelimeleriniz buraya' name='keywords'*/>

Şablonun html düzenleme kısmına geldikten sonra aşağıdaki kodları bulup kırmızı ile gösterilmiş yerleri kendi bilgilerinizle doldurun.

Tema Templatify sitesine ait. Bunu belirtmeden geçmeyelim. Kesinlikle footer linklerini değiştirmeyin. Sadece İngilizce içerikleri Türkçeye çevirebilirsiniz. Değiştirebileceğiniz yerler kısaca menüler ve gördüğünüz diğer İngilizce içerik. Bunları şablon düzenlemeye girip ctrl+f ile aratıp bulabilir ve düzenleyebilirsiniz.

Temayı incelemek ve sonra kullanmak istiyorsanız bulink... Kullanmak için alternatif link...

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger Etiket Sitilini Değiştirin

Blogger'da etiket sitili, biraz sade ve bazı bloglara hiç uygun değil. Şimdi onu düzenlemeniz için size bir kod vereceğiz. Etiketlerinizi kutu şeklinde göstermek ister misiniz? Bazı Wordpress eklentilerinde bu yöntem kullanılıyor. Bizde etiketlerimizi tıpkı yazımıza eklediğimiz görsel gibi şekillendireceğiz.

Bricks Sitili Etiketler

Yapmanız gereken ilk şey blogger blogunuza etiket widgeti eklemek. Eğer çok fazla etiketiniz varsa aralarından seçmenizi tavsiye ederiz. Etiket widgetini ayarlarken bulut şeklinde gösterilsin seçeneğini işaretleyin.

Bu aşamadan sonra şablonunuzun yedeğini alın. Aynı yerden HTML düzenle kısmına geçin ve ctrl+f ile aşağıdaki kodu bulun.

]]>< /b:skin>

Bu kodu bulduktan sonra hemen üstüne aşağıdaki kodu yapıştırın.

/*CSS3 Bricks etiketler, düzenleyen http://webmaster.10line.net/ */
#textwidget {
    color: #666;
    font-size: 0.925em;
    font-style: italic;
    line-height: 1.6em
}

a.tag {
    color: #777;
    font: 9px verdana;
    text-transform: uppercase;
    transition: border-color .218s;
    background: #f4f4f4;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    border: solid 1px #ccc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin: 0 4px 4px 0;
    padding: 3px 5px;
    text-decoration: none
}

a.tag:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15)
}

a.tag:active {
    color: #000;
    border-color: #444
}

.slides {
    font-size: 85%;
    line-height: 130%;
    overflow: hidden;
    padding: 0;
    margin: 30px 0 10px;
    border-bottom: 1px solid #000
}
/*CSS3 Bricks sitili etiketler, düzenleyen http://webmaster.10line.net/ */

Bu kodları ekledikten sonra "Widget'a Atla" sekmesinden Label1 kısmına tıklayın. Görselde görüldüğü gibi. Eğer blogunuza ilk başta söylediğim etiket widgetini eklemediyseniz ve blogunuzda hali hazırda böyle bir widget kullanılmıyorsa bu kısmı göremezsiniz. Göremiyorsanız etiket widgetini eklediğinizden emin olun. Görselde gördüğünüz gibi Label 1 etiketine gidin... Yine görselde görüldüğü gibi kodlar kapalıysa açın.

Bu aşamadan sonra aşağıdaki verdiğim kodların tamamını seçip silin. Burda dikkatli olmanızı tavsiye ederim. Fazla kod silmeyin. Silinecek kodların tamamı şunlar;

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>

Silinecek kodları Google Code ile görüntüle... https://10line-code.googlecode.com/files/etiket-kutu-widget-1.txt

Bu kodları sildikten sonra yerine aşağıdaki kodları yapıştırın.

<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>
<data:title/>
</h2>
</b:if>
<div class='textwidget'>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(
<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(
<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit' />
</div>
</div>
</b:includable>
</b:widget>

Kullanacağınız kodları Google Code ile görüntüle: https://10line-code.googlecode.com/files/etiket-kutu-widget-2.txt

Şablonunuzu kaydedin ve artık etiketleriniz görselimizde gördüğünüz gibi kutucuklu şekilde olacak. Kodlarda sıkıntı çekenler kodları Google Code linkimizden indirip, o şekilde kullanabilirler.

 Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İletişim Formu

Blogger kullanıcılarının sıklıkla aradıkları “Blogger İçin İletişim Formu” bu yazımızda sizlerle. Yakın zaman önce Blogger'ın faliyete geçirdiği Widgetlerden “Contact Form” widgetini bir sayfaya adapte etmekle Wordpress benzeri bir iletişim formuna sahip olacağız. Bildiğiniz gibi Blogger için henüz böyle bir eklenti veya herhangi bir iletişim aracı geliştirilmedi. Şimdi teknik detaylara geçelim ve Blogger için harika bir iletişim formu yapalım. Herşeyden önce şablonunuzun yedeğini mutlaka alın.

Adım 1 – Blogger'a iletişim formu ekleyin

Bunun için yönetim panelinden yerleşim sekmesine geçtiğinizde Gadget Ekle deyip “Diğer Gadgetler” kısmından iletişim formunu buluyoruz. Bu formu blogumuza görselde de görüldüğü gibi eklediğimiz zaman ikinci adıma geçebiliriz.

Adım 2 – İletişim formu sayfası oluşturun

Bunun için yönetim panelinden sayfalara tıklayın. Görselde görüldüğü gibi işlemleri sırayla yapın. Daha sonra oluşturduğunuz bu sayfaya bir isim verin. HTML kısmına geçip aşağıdaki kodları sayfaya yapıştırın. Kodda değişiklik yapabileceğiniz yerlere kırmızı şekilde düzenlenmiştir.

<form name='contact-form'>
<div>İsminiz: </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>E-Posta Adresiniz: <em>(Gerekli)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Mesajınız: <em>(Gerekli)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

Kodu yerleştirdikten sonra bu sayfada yorum yörülmemesi için bir kaç ayar yapmamız lazım. Sağ tarafta bulunan seçeneklere tıklayın. Okuyucu yorumları kısmını “izin verme, mevcut olanı gizle” şeklinde düzenleyin. Oluşturma modunu ise “yazılan htmli yorumla” şeklinde işaretleyin. Görselde herşey gösterilmiştir. Bu işlemden sonra sayfayı kaydedlim.

Adım 3 – Contact Form Widgetini silmek

İlk adımda eklediğimiz Widget'i blogumuzdan kaldırmalıyız. Heryerde görünmesini istemiyorsak eğer. İletişim sayfamızdakinin görünmesi için bazı bölgelerini kaldıracağız. Bu sayede sayfadaki görünecek ve çalışacak. Widget kısmındaki kaybolacak.

Yönetim panelinden şablon sekmesine gelin ve html düzenleye tıklayın. Bundan sonra görselde gördüğünüz üzere Widget'a Atla sekmesinden ContactForm1 kodlarına direk ulaşın. Bu kodlar içerisinden aşağıdaki kodu silin.

Kodun son hali şu şekilde görülmelidir.

Bu işlemleri yaptıktan sonra şablonunuzu kaydedin. Blogger iletişim formunuzu doya doya kullanın. Bu formdan size iletilen mesajlar blogunuzun kayıtlı olduğu maile gönderilecektir. Gayet estetik olduğunu söylemekte fayda var. Bu işlemleri yapma esnasında herhangi bir kısımda sıkıntı yaşayanlar mutlaka bana “Blogger iletişim formumuz” :) ya da yorum yoluyla bize ulaşsınlar.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

KodPerest Blogger Tasarımı

KodPerest Blogger Tasarımı

KodPerest adlı sitemizsin şu an kullandığımız tasarımını siz değerli ziyaretçilerimizin beğenisine sunuyoruz.Bu tasarım içinde sizden herhangi bir ücret talep etmiyoruz.Sadece sitemizi takip etmeye devam etmenizi istiyoruz.Temayı indirmek için butona tıklamanız yeterli.

Bloggerda Sayfa Navigasyon

Blogger tabanlı bloglarda sayfa navigasyon eklentisi kodunu bu yazımızda sizlerle paylaşacağız. Burda ayrıca kodla birlikte kodun içinde hangi kısımları değiştirebileceğinizden bahsedeceğiz. Bu sayede kodu kendinize özgü bir şekilde düzenleyebilecek, Blogger sayfa navigasyon eklentisini blogunuza uyarlayabileceksiniz.

<style type="text/css">#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV8QPxteicSYQccv1OR_tP2mOZjoyr1pl6CroiTvjS-hG2Ij2OOzBbNFQFEZS-Qh9j_ft-5fGh3v1ynuyXuyZpGHwHVj16OWZkMa3p8YWKQ_psmaPYk5-wk5J0Lh7sGtlbhGvoRM16DwI/s1600/wp5.jpg) 0 -50px repeat-x}.showpageNum a:hover{background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV8QPxteicSYQccv1OR_tP2mOZjoyr1pl6CroiTvjS-hG2Ij2OOzBbNFQFEZS-Qh9j_ft-5fGh3v1ynuyXuyZpGHwHVj16OWZkMa3p8YWKQ_psmaPYk5-wk5J0Lh7sGtlbhGvoRM16DwI/s1600/wp5.jpg) 0 -25px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#06a2b9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV8QPxteicSYQccv1OR_tP2mOZjoyr1pl6CroiTvjS-hG2Ij2OOzBbNFQFEZS-Qh9j_ft-5fGh3v1ynuyXuyZpGHwHVj16OWZkMa3p8YWKQ_psmaPYk5-wk5J0Lh7sGtlbhGvoRM16DwI/s1600/wp5.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0} </style>
<script style='text/javascript'>
var postperpage=10;
var numshowpage=5;
var upPageWord="Önceki Sayfa";
var downPageWord="Sonraki Sayfa";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://code.helperblogger.com/10page-navi.js'></script>

Yukardaki kodumuzu bir Blogger sayfa navigasyon eklentisi gibi kullanabilmek için aşağıdaki işlemleri gerçekleştirin.

• Blogger yönetim paneline gidin.
• Yerleşim sekmesine gidin
• Gadget ekleye tıklayın
• Html/Javascript ekleye tıklayın
• Yukardaki kodu yapıştırıp kaydedin

Bu işlemlerden sonra sayfa navigasyon eklentisini kullanabileceksiniz. Şimdi gelelim kodda değişiklik yapabileceğiniz kısımlara. Kod üzerinde kırmızı yazıları değiştirebilirsiniz. Belirgin olsun diye birde kalın yaptım. Kırmızılar haricinde değişiklik yaparsanız kodun çalışmama ihtimali var.

Font Family kısmı yazı fontuyla ilgili bir kısım. Color ve Backgroun kısmı renklerle alakalıdır. Eğer blogunuza uyarlamak istiyorsanız buraya uygun renk kodlarını yazabilirsiniz. Kırmızı ile işaretlediğimiz görsel linkleridir. Bu görselleri kendinizinkiyle değiştirebilirsiniz. Son olarak postperpage sayfada gösterilecek yazı anlamına gelir, rakamı dilediğiniz gibi ayarlayın. Aynı yerde numshowpage kodu ise gösterilecek rakam sayısını belirler. Açıklanması gereken başka birşey yok... Çözemediğiniz bir durum olduğunda yorum vasıtasıyla bizimle iletişime geçebilirsiniz.


Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Gamemix Teması İndir!

Blogger bloğunuza resim ağırlıklı oyun konuları girecekseniz bu tema idealdir. Temayı bloğunuza yüklediğiniz zaman slayt şeklinde resimler geçecek. Sizin yüklediğiniz resimler de o şekilde slayta eklenecek. Temanın denemesini görmek için bu bağlantıya tıklayın. Temayı indirmek için de bu bağlantıyı kullanabilirsiniz.Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Aşağı Doğru Açılır Menü Eklentisi

Blogger’ınıza yeni bir açılır menü eklemek istiyorsanız bu eklenti tam size göre. Bu eklenti eklendiği zaman üzerine gediğiniz zaman aşağı doğru tıklayabileceğiniz sekmeler açılıyor. Görselden de gördüğünüz gibi bir menü karşınıza çıkıyor. 

Bu eklentiyi edinmek için aşağıdakileri yapabilirsiniz. 

Yerleşim – Gatget Ekle – HTML/JavaScript yolunu takip ederek aşağıdaki kodu yapıştırın. 

Kod: 

<style text-type="CSS">
#bmenu{
position:fixed;
right:5px;
center:0px;
background-color:#2059DC;
border-radius:10px;
-moz-border-radius:10px;
border:2px solid #FFF;
width:202px;
height:20px;
color:#FFFFFF;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}


#bmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}


#bmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#9AB2EA;
margin:15px 0;
padding:0 15px;}


#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}


#bmenu li a:hover{
color:#fff;}


#bmenu:hover{
z-index:5;
height:175px;
</style>


<div id="bmenu">
<h3>
Açılır Menü</h3>
<ul>
<li><a href="#">MENÜ 1</a></li>
<li><a href="#">MENÜ 2</a></li>
<li><a href="#">MENÜ 3</a></li>
<li><a href="#">MENÜ 4</a></li>
<li><a href="#">MENÜ 5</a></li>
</ul>
</div> 

Kodlar bunlar. Kırmızı yere görüntü başlığınızı, mavi yerlere menü başlıklarınızı, sarı yere de menülere tıklandığı zaman gidilmesini istediğiniz linkleri koyun. Bu eklentinin demosu bu bağlantıdadır. Bakabilirsiniz.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.