Blogger Mobil uygulaması Yükle

Sonunda Blogger mobil telefonlarımız için mobil uygulamasını yayınladı blogger altyapısına sahip olan siteler için sitelerinde  yazı veya resim gün içersinde konu paylaşımı yapmak artık daha kolay hale geldi diyebiliris. blogger bu aralar kendini sürekli yeniliyor  gün geçtikce de blogger`a ilgi dahada büyüyor gibime geliyor
ve bu uygulama şimdiden bayağı ilgi görmeyi başardı. Fakat daha üzerinde çalışılması gereken bir uygulama. Android ve ios işletim sistemli cihazlar için ekran görüntüleri ise şu şekilde

• Download

Blogger Yorum Paneli Yenilendi

Blogger Yorum Gönder paneli Yenilendi..

Blogger gün geçtikçe Yeni güncellemeler Yaparak Karşımıza Çıkar oldu biliyorsunuzki ilk html editörü yenilendi şimdi en son olarak  blogger yorum gönderme paneli yenilenmiş durumda eskisine göre daha şık olmuş :) sizlerde farkettinizmi bilmiyorum ama ben yorum lara bakarken baktım bi değişiklik olmuş :) gibime geldi..

Bakalım Blogger`da ilerliyen zamanlarda. Daha Neler Yenilencek veya güncellencek Bekliyoruz..

Blogger YouTube Teması

blogger için güzel  bir video teması  youtube  temasıdır. gerçekten benim hoşuma gitti  video paylaşmayı sevenler için güzel bir tema başka yerde yayınlandımı bilmiyorum ama ben  hemen yayınlamak istedim arşivime aldım :)

Demo

indir

Blogger Wrench İconlarını Kaldırma

merhaba arkadaslar bugun  herkezin en  rahatsız edici Görüntüden kolayca nasıl kurtulurus onu anlatacağız bildiğiniz gibi sitelerimizde eklenti veya  gadget eklediğimizde eklentilerin sağ alt köşesinde  ufak  bir icon belirir bu hızlı düzenle buttonudur. ve hiçte hoş bir görüntü oluşmuyor ben kendi adıma bundan çok rahatsız oluyorum :) bunun nasıl daha kolay yoldan kaldırırs onu göstericez tabiki bunun iki yolu var aslında

1.cisi  şablonu genişletip şu kodu aramamız.
<b:include name='quickedit'/> bu kodu bulduğunuz zaman  üstü sarı olur zaten  sona  bu kodu komple kaldırmak şunuda sölemek gerekir  hepsini tek tek aratıp kaldırdığınızda bloğunuzda kaymalar olabilir. o yüzden kaldırdığınız yeri unutmamanız  yada önceden temanızın bir yedeğini almanızdır. Bu 1 ci yöntemdi
Gelelim 2 ci kısa ve en kolay yönteme


2.cisi  tekrardan şablonumuzu genişletiyoruz. ve bu kodu buluyoruz ]]></b:skin> bu kodu bulduğunuz zaman  hemen  üstüne aşağıdaki kodu ekliyoruz  Hepsi Bukadar :) sonra kaydediyoruz.


.quickedit {
display:none;
}


Ve sonuç olarak aşağıdaki resimden görebilirsiniz.

Attractive Css3 Sleek Menu Bar For Blogger

bu menüler blogger için kullana bileceğiniz en iyi menüler diye bilirim çok şık bir css3 olarak hazırlanmıs bir menü  kodu kullana bilmeniz için html editörünü açıp ]]></b:skin> kodunu arattırıp hemen üstüne aşağıdaki kodu yapıştırınız..

 

/* The CSS Code for the menu starts here bloggertrix.com */
#container1 {
width: 960px;
margin: 0 auto;}
.menu33{height:40px;border-right:1px solid rgba(255,255,255,0.3);float:left;}a{text-decoration:none;color:#FFFFFF;text-transform:uppercase;font-size:15px;font-weight:bold;}ul{margin:0;padding:10px 10px ;}
a:link {color:#ffffff;}
a:hover {color:#ffffff;text-decoration: none;}
a:visited {color: #FFFDFD;text-decoration: none;}
ul.menu33 li{list-style:none;float:left;height:40px;text-align:center;background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}
ul li a{display:block;padding:0 20px;border-left:1px solid rgba(255,255,255,0.1);border-right:1px solid rgba(0,0,0,0.1);text-align:center;line-height:40px;background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));-webkit-transition-property:background;-webkit-transition-duration:700ms;-moz-transition-property:background;-moz-transition-duration:700ms;}
ul li a:hover{background:transparent none;}
ul[rel=sam1] li a{background:#606060;}
ul[rel=sam1] li a:hover{background:transparent none;}
ul li.active a{background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}

ve daha sonra HTML/Javascript gadget olarak ekliceğiniz kod aşağıdadır..

DEMO

<div id="container1">
<ul class="menu33" rel="sam1">
<li class="active"><a href="http://tolgagonul.net/">Home</a></li>
<li><a href="http://tolgagonul.net/">About</a></li>
<li><a href="http://tolgagonul.net/">Blog</a></li>
<li><a href="http://tolgagonul.net/">Services</a></li>
<li><a href="http://tolgagonul.net/">Support</a></li>
<li><a href="http://tolgagonul.net/">Sales</a></li>
<li><a href="http://tolgagonul.net/">Contacts</a></li>
</ul>
</div>

Blogger Transition Css3 Menubar

yine blogger için yabancı bir sitede gördüğüm süper bir menü :) gerçekten çok güzel duruyo hemen görüp paylaşmak istedim ve menüyü veriyorum önce ]]></b:skin> kodunu aratıp buluyorus ve daha sonra aşağıdaki kodu ekliyorus 

DEMO
 

/* The CSS Code for the menu starts here bloggertrix.com */

@import url(http://fonts.googleapis.com/css?family=Dosis:400,700);


.navbar {
 font-family: 'Dosis', sans-serif;
 position:relative;
 display:table;
 float:none;
 list-style-type:none;
 padding:0;
 margin:20px auto 250px auto;
}
.navbar:before {
 position:absolute;
 display:block;
 content: "";
 z-index:-1;
 width:100%;
 height:18px;
 bottom:-9px;
 left:2px;
 background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 75%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.7)), color-stop(75%,rgba(0,0,0,0)));
 background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%); 
 background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
 background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
 background: radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=1 );
 opacity:.4;
}
.navbar:after {
 position:absolute;
 display:block;
 content: "";
 z-index:-1;
 width:100%;
 height:100%;
 top:0;
 left:0;
 -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
 box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}
.navbar > li {
 position:relative;
 float:left;
 display:inline-block;
 list-style-type:none;
 text-align:center;
 margin:0;
 border-left:0;
 border:1px solid rgba(0,0,0,0.5);
 line-height:35px;
 -webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
    box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
 -webkit-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -ms-transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 transition: all 300ms ease-in-out;
}
.navbar.color1 > li {
 background:#ea7900;
}
.navbar.color2 > li {
 background:#336277;
}
.navbar.color3 > li {
 background:#3e781b;
}
.navbar.color4 > li {
 background:#ad2259;
}
.navbar.color5 > li {
 background:#b20a22;
}
.navbar > li:before {
 position:absolute;
 display:block;
 content: "";
 z-index:1;
 width:100%;
 height:100%;
 left:0;
 top:0;
 background: -moz-linear-gradient(top,  rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.16) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.15)), color-stop(100%,rgba(0,0,0,0.16)));
 background: -webkit-linear-gradient(top,  rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
 background: -o-linear-gradient(top,  rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
 background: -ms-linear-gradient(top,  rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
 background: linear-gradient(top,  rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26ffffff', endColorstr='#29000000',GradientType=0 );
}
.navbar > li:after {
 position:absolute;
 display:block;
 content:"";
 width:100%;
 height:100%;
 top:0;
 left:0;
 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OERFQkEzRUJDNUM5MTFFMUE3NzBCMTZBMEExNEQ5NUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OERFQkEzRUNDNUM5MTFFMUE3NzBCMTZBMEExNEQ5NUQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4REVCQTNFOUM1QzkxMUUxQTc3MEIxNkEwQTE0RDk1RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4REVCQTNFQUM1QzkxMUUxQTc3MEIxNkEwQTE0RDk1RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiSp0pIAAAAySURBVHjaYmBgYOAHYmYGCADR/CDiDxDzQAW5gPgLlM3ACsQKUBqhBYjZkY3CMBMgwACvHQKnyUp+6gAAAABJRU5ErkJggg==");
}
.navbar > li.drpdown a > span{
 margin-right:30px;
}
.navbar > li.drpdown > a:after {
 position:absolute;
 content: "\0025bc";
 z-index:1;
 font-size:8px;
 top:0;
 right:10px;
 color:#fff;
 text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.8);
    filter: dropshadow(color=#000, offx=0, offy=-1);
 -webkit-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -ms-transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 transition: all 300ms ease-in-out;
}
.navbar > li.drpdown a:hover:after,.navbar > li a:hover {
 color:#ccc;
}
.navbar > li.drpdown:hover .drpcontent {
 display:block;
}
.navbar > li:first-child {
 border-left:1px solid #1a1a1a;
}
.navbar > li:last-child {
 -webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
    box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25), inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25); 
}
.navbar > li > a {
 position:relative;
 display:block;
 width:100%;
 text-decoration:none;
 font-size:12px;
 color:#fff;
 text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
    filter: dropshadow(color=#000, offx=0, offy=-1);
 z-index:4;
 -webkit-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -ms-transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 transition: all 300ms ease-in-out;
}
.navbar > li:hover {
 -webkit-box-shadow: inset 0px -2px 8px 0px rgba(0, 0, 0, 0.35);
 box-shadow: inset 0px -2px 8px 0px rgba(0, 0, 0, 0.35); 
}
.navbar > li > a > span {
 position:relative;
 font-weight:bold;
 margin:0 15px 0 0;
}
.navbar > li  .drpcontent {
 position:absolute;
 display:none;
 margin:0;
 padding:20px 0 0 0;
 z-index:5;
 top:36px;
 min-width:200%;
 float:none;
 list-style-type:none;
 border:1px solid #737373;
 border-top:0;
 -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),inset 0px 6px 4px -4px rgba(0, 0, 0, 0.5);
 box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),inset 0px 6px 4px -4px rgba(0, 0, 0, 0.5);
 -webkit-border-radius: 0px 0px 4px 4px;
 border-radius: 0px 0px 4px 4px;
 background: rgb(249,249,249);
 background: -moz-linear-gradient(-45deg,  rgba(249,249,249,1) 0%, rgba(229,229,229,1) 100%);
 background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(229,229,229,1)));
 background: -webkit-linear-gradient(-45deg,  rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
 background: -o-linear-gradient(-45deg,  rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
 background: -ms-linear-gradient(-45deg,  rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
 background: linear-gradient(135deg,  rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e5e5e5',GradientType=1 );
 -webkit-transition: opacity 300ms ease-in-out;
 -moz-transition: opacity 300ms ease-in-out;
 -ms-transition: opacity 300ms ease-in-out;
 -o-transition: opacity 300ms ease-in-out;
 transition: opacity 300ms ease-in-out;
}
.navbar > li:not(:last-of-type) .drpcontent {
 left:-1px;
}
.navbar > li:last-child .drpcontent {
 right: -1px;
}
.drpcontent li {
 position:relative;
 text-align:left;
 border-bottom:1px solid rgba(0, 0, 0, 0.2);
 font-size:12px;
 line-height:35px;
 height:35px;
 font-weight:bold;
 -webkit-box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.2);
 box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.2);
 overflow:hidden;
}
.drpcontent li:before {
 position:absolute;
 display:block;
 content: "";
 width:100%;
 height:100%;
 top:-100%;
 left:0;
 background: #cecece;
 -webkit-transition: all 500ms ease-in-out;
 -moz-transition: all 500ms ease-in-out;
 -ms-transition: all 500ms ease-in-out;
 -o-transition: all 500ms ease-in-out;
 transition: all 500ms ease-in-out;
 opacity:0;
}
.drpcontent li:after {
 position:absolute;
 display:block;
 content: "\0025b6";
 height:20px;
 width:20px;
 top:0;
 left:6px;
 font-size:8px;
 -webkit-transition: all 500ms ease-in-out;
 -moz-transition: all 500ms ease-in-out;
 -ms-transition: all 500ms ease-in-out;
 -o-transition: all 500ms ease-in-out;
 transition: all 500ms ease-in-out;
}
.drpcontent li:hover:before {
 top:0;
 opacity:0.8;
}
.drpcontent li:hover:after {
 color:#fff;
 left:12px;
}
.drpcontent li:last-child:hover:before {
 -webkit-border-radius: 0px 0px 4px 4px;
 border-radius: 0px 0px 4px 4px;
}
.drpcontent li a {
 display:block;
 height:100%;
 width:100%;
 position:relative;
 color:#000;
 text-decoration:none;
 width:100%;
 padding-left:20px;
 -webkit-transition: all 500ms ease-in-out;
 -moz-transition: all 500ms ease-in-out;
 -ms-transition: all 500ms ease-in-out;
 -o-transition: all 500ms ease-in-out;
 transition: all 500ms ease-in-out;
}
.drpcontent li:hover a{
 color:#fff;
 padding-left:26px;
}
.drpcontent li:first-child {
 border-top:1px solid #a6a6a6;
}
.drpcontent li:last-child {
 border:0;
 -webkit-box-shadow:none;
 box-shadow:none; 
 -webkit-border-radius: 0px 0px 4px 4px;
 border-radius: 0px 0px 4px 4px;
}
.icon20{
 position:relative;
 float:left;
 display:block;
 width:20px;
 height:20px;
 margin:6px 8px 0 8px;
 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAoCAYAAAA16j4lAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjJERkRDNTBDNUQ0MTFFMUI3QjJDOTZFNDMzQ0IwMjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjJERkRDNTFDNUQ0MTFFMUI3QjJDOTZFNDMzQ0IwMjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MkRGREM0RUM1RDQxMUUxQjdCMkM5NkU0MzNDQjAyNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MkRGREM0RkM1RDQxMUUxQjdCMkM5NkU0MzNDQjAyNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Psj8MzMAAA91SURBVHja7FxbbBTV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") no-repeat;
 -webkit-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -ms-transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 transition: all 300ms ease-in-out;
}
.icon20.home {background-position:0 0;}
.icon20.upload {background-position:-20px 0;}
.icon20.download {background-position:-40px 0;}
.icon20.comments {background-position:-60px 0;}
.icon20.theme {background-position:-80px 0;}
.icon20.login {background-position:-100px 0;}
.navbar > li:hover .icon20.home {background-position:0 -20px;}
.navbar > li:hover .icon20.upload {background-position:-20px -20px;}
.navbar > li:hover .icon20.download {background-position:-40px -20px;}
.navbar > li:hover .icon20.comments {background-position:-60px -20px;}
.navbar > li:hover .icon20.theme {background-position:-80px -20px;}
.navbar > li:hover .icon20.login {background-position:-100px -20px;}

ve daha sonra html/javascript olarak gadget olarak eklicemis kod ise aşağıdadır..

<ul class="navbar color1">
<li><a href="http://www.tolgagonul.net"><i class="icon20 home"></i>Home</a></li>
<li><a href="http://www.tolgagonul.net"><i class="icon20 upload"></i>Upload</a></li>
<li><a href="http://www.tolgagonul.net"><i class="icon20 download"></i>Download</a></li>
<li class="drpdown"><a href="http://www.tolgagonul.net"><i class="icon20 comments"></i>Posts</a>
  <ul class="drpcontent">
<li><a href="http://www.tolgagonul.net">Latest Posts</a></li>
<li><a href="http://www.tolgagonul.net">Popular Posts</a></li>
<li><a href="http://www.tolgagonul.net">Private Posts</a></li>
</ul>
</li>
<li><a href="http://www.tolgagonul.net"><i class="icon20 login"></i>Login</a></li>
<li class="drpdown"><a href="http://www.bloggertrix.com/"><i class="icon20 theme"></i>Themeselector</a>
  <ul class="drpcontent" id="themeselect">
<li><a data-color="color1" href="http://www.tolgagonul.net">Orange</a></li>
<li><a data-color="color2" href="http://www.tolgagonul.net">Marine</a></li>
<li><a data-color="color3" href="http://www.tolgagonul.net">Green</a></li>
<li><a data-color="color4" href="http://www.tolgagonul.net">Purple</a></li>
<li><a data-color="color5" href="http://www.tolgagonul.net">Red</a></li>
</ul>
</li>
</ul>

Attractive Pure CSS3 Menu Bar for Blogger

blogger sitenize güzel bir pure css3 menu daha  3 de birbirinden güzell duruyo unu eklemeniz için html editör açıp ]]></b:skin> arattırıp hemen üstüne aşağıdaki kodları ekleyin

Demo

/* The CSS Code for the menu starts here bloggertrix.com */
ul.btrix_cssTabs   {
 
 background: #848383;
 border:solid 1px #606060;
 padding: 0 75px;
 width: 705px;
 margin:20px 0;
 font-size:12px;
 font-weight:bold;
 background:-moz-linear-gradient(0% 100% 90deg,#737373, #9a9a9a);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#9a9a9a), to(#737373));
  box-shadow: inset 0 1px 0 0 #dfdfdf;
 -moz-box-shadow: inset 0 1px 0 0 #dfdfdf;
 -webkit-box-shadow: inset 0 1px 0 0 #dfdfdf;
 border-radius: 8px 8px;
 -moz-border-radius: 8px 8px;
 -webkit-border-radius: 8px 8px;
 
}
ul.btrix_cssTabs > li {
 background:#989898;
 color:#3a3a3a;
 border:solid 1px #606060; 
 border-bottom:0; 
 display: inline-block;
 margin: 10px 1px -1px;
 padding: 8px 20px;
 background:-moz-linear-gradient(0% 100% 90deg,#9a9a9a, #888888);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#888888), to(#9a9a9a));
 box-shadow: inset 0 1px 0 0 #dfdfdf;
 -moz-box-shadow: inset 0 1px 0 0 #dfdfdf;
 -webkit-box-shadow: inset 0 1px 0 0 #dfdfdf;

 text-shadow: 1px 1px 0 #d3d3d3;
}

ul.btrix_cssTabs > li.active,ul.btrix_cssTabs > li:hover {
 background:#ededed;
 background:-moz-linear-gradient(0% 100% 90deg,#f0f0f0, #d1d1d1) !important;
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d1d1), to(#f0f0f0)) !important;
 box-shadow: inset 0 1px 0 0 #fff;
 -moz-box-shadow: inset 0 1px 0 0 #fff;
 -webkit-box-shadow: inset 0 1px 0 0 #fff; 
 text-shadow: none;
 cursor:pointer;
}

ul.btrix_cssTabs.blue{
 
 background: #237e9f;
 border-color:#20617f;
 background:-moz-linear-gradient(0% 100% 90deg,#217092, #2d97b8);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#2d97b8), to(#217092));
 box-shadow: inset 0 1px 0 0 #a8e3f0;
 -moz-box-shadow: inset 0 1px 0 0 #a8e3f0;
 -webkit-box-shadow: inset 0 1px 0 0 #a8e3f0;

}
ul.btrix_cssTabs.blue > li,ul.btrix_cssTabs.blue > li:hover {
 background:#2ca0c1;
 color:#1a4760;
 border-color:#20617f;
 background:-moz-linear-gradient(0% 100% 90deg,#2ca1c3, #2687aa);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#2687aa), to(#2ca1c3));
box-shadow: inset 0 1px 0 0 #a8e3f0;
 -moz-box-shadow: inset 0 1px 0 0 #a8e3f0;
 -webkit-box-shadow: inset 0 1px 0 0 #a8e3f0;
text-shadow: 1px 1px 0 #8cd9e8;
 
}

ul.btrix_cssTabs.blue > li.active {
  box-shadow: inset 0 1px 0 0 #fff;
 -moz-box-shadow: inset 0 1px 0 0 #fff;
 -webkit-box-shadow: inset 0 1px 0 0 #fff; 
 text-shadow: none;
}

ul.btrix_cssTabs.orange{
 
 background: #d75125;
 border-color:#9c2c09;
background:-moz-linear-gradient(0% 100% 90deg,#d44b22, #ea753d);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ea753d), to(#d44b22));
 box-shadow: inset 0 1px 0 0 #f5b497;
 -moz-box-shadow: inset 0 1px 0 0 #f5b497;
 -webkit-box-shadow: inset 0 1px 0 0 #f5b497;

}
ul.btrix_cssTabs.orange > li, ul.btrix_cssTabs.orange > li:hover {
 background:#e1693e;
 color:#5a2818;
 border-color:#9c2c09;
 background:-moz-linear-gradient(0% 100% 90deg,#e47a48, #dd5733);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#dd5733), to(#e47a48));
box-shadow: inset 0 1px 0 0 #f5b497;
 -moz-box-shadow: inset 0 1px 0 0 #f5b497;
 -webkit-box-shadow: inset 0 1px 0 0 #f5b497;
text-shadow: 1px 1px 0 #f3c6b3;
 
}
ul.btrix_cssTabs.orange > li.active {
 box-shadow: inset 0 1px 0 0 #fff;
 -moz-box-shadow: inset 0 1px 0 0 #fff;
 -webkit-box-shadow: inset 0 1px 0 0 #fff; 
 text-shadow: none;
}

Daha Sonra html/javasicript olarak yani gadget olarak aşağıdaki kodları ekliceksiniz.. Gri menü için

Home
Points
Percent
Contact Us

Mavi Menü için

Home
Points
Percent
iContact Us

Turuncu Menü için

Home
Points
Percent
Contact Us

blogger bubble style commen

bu yorum alanıda çok farklı buble görünümlü ve de çok güzel görünüyo :) bunuda diğer anlattığım yorum alanları gibi öncelikle html editörünü açıp  ]]></b:skin> arattırıp buluyorus da sonra üstüne aşağıdaki kodu ekliyorus ama yine siz kendi comment kısmınızı silip bununla değiştirin 

 
/* Start Comment Style Code http://techtrickhome.blogspot.com */ .comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px} .comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left} .comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer} .comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none} .comments .comments-content .inline-thread{padding:0} .comments .comments-content .comment-thread{margin:8px 0} .comments .comments-content .comment-thread:empty{display:none} .comment-replies{margin-top:1em;margin-left:40px;background:#fff} .comments .comments-content .comment{margin-bottom:0;padding-bottom:0} .comments .comments-content .comment:first-child{padding-top:16px} .comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0} .comments .comments-content .comment-body{position:relative} .comments .comments-content .user{font-style:normal;font-weight:normal} .comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none} .comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px} .comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none} .comment-content{margin:0 0 8px;padding:0 5px} .comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px} .comments .comments-content .owner-actions{position:absolute;right:0;top:0} .comments .comments-replybox{border:none;height:230px;width:100%} .comments .comment-replybox-thread{margin-top:0} .comments .comment-replybox-single{margin-top:5px;margin-left:48px} .comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center} .comments .thread-toggle{cursor:pointer;display:inline-block} .comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0} .comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden} .comments .thread-chrome.thread-collapsed{display:none} .comments .thread-toggle{display:inline-block} .comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px} .comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent} .comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent} .avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj1AssdrEdtA_wPgiAw1umqz-gqYUldUVxRfnqKy7Y0K-xdKBGS7H0NGtjTNCV36V64sBrviIs8KgH2KTDZbsnL5rtzO9qJvXuQjXHdj9Y00-1JTGOQtfTl-FXVlCRotJrUc1w0t5gvgg/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important} .comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important} .comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px} @media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}} /* End Comment Style Code http://techtrickhome.blogspot.com */

blogger Yorum alanı özelliştirme Renkli

buda farklı bir yorum alanı renkli ve güzel  bir görüntü çıkıyo :) tabi bunu eklemeniz için html editörü açıp ]]></b:skin> arattırıp hemen üstüne aşağıdaki kodu eklemeniz siz kendi comments kısmını silip eklerseniz daha iyi olucaktır.

@font-face {
  font-family: 'Philosopher';
  font-style: normal;
  font-weight: 400;
  src: local('Philosopher'), url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
.comment .avatar-image-container {
border: 1px solid #B6B6B6;
max-height: 70px !important;
margin-top: -5px;
width: 70px !important;
position: relative;
z-index: 50;
}
.comment .comment-block {
margin-left: 75px !important;
}
.comment .comment-header {
background: none repeat scroll 0 0 #A9F5D0;
color: #333;
font-size: 15px;
font-weight: bold;
margin-left: 60px;
}
.comment .comment-header a {
color: white !important;
text-decoration: none;
}
.comment .comment-content {
background: none repeat scroll 0 0 #FEFFF9;
border-bottom: 2px solid #E6E6E6;
font-size: 14px;
margin: 0 0 30px;
padding: 5px 5px 10px 10px;
}
.comment .comment-actions a {
background: none repeat scroll 0 0 #DDD;
color: #333;
display: inline-block;
line-height: 1;
margin: 0 3px;
padding: 3px 6px !important;
text-decoration: none;
}
.comment .comment-actions a {
background: none repeat scroll 0 0 #DDD;
color: #333;
display: inline-block;
line-height: 1;
margin: 0 3px;
padding: 3px 6px !important;
text-decoration: none;
}
.comment-header cite {
background: none repeat scroll 0 0 #DF7401;
border: 1px solid white;
color: white;
padding: 2px 20px;
position: relative;
z-index: 99;
margin-left: -20px;
}
cite.blog-author {
background: none repeat scroll 0 0 #8181F7 !important;
}
.icon.blog-author {
display: none !important;
background: url("") no-repeat scroll 0 0;
margin-left: 90px;
width: 60px !important;
height: 60px !important;
position: absolute;
right: 5px;
bottom: 5px;
top: 10px;
}
.comment .comment-header {
color: #333;
font-size: 15px;
font-weight: bold;
}

.comment .avatar-image-container img {
border: medium none !important;
height: 70px !important;
width: 70px !important;
max-height: 70px !important;
max-width: 70px !important;
}
.comment .comment-actions a {
background: none repeat scroll 0 0 #DDD !important;
color: #333 !important;
display: inline-block !important;
line-height: 1 !important;
margin: 0 3px !important;
padding: 3px 6px !important;
text-decoration: none !important;
font-size:16px;
}
.comment .comment-actions a:hover {
background: #CCC !important;
text-decoration: none !important;
}

.comments {
font-family: 'Philosopher', arial, serif !important;
font-size: 1em;
color: black;
}
.comments .continue a {  
display: block !important;
font-weight: bold !important;
padding: .5em !important;
color:#E34600;
font-size:16px;
}
.comments .continue a:hover {color:#4D3123;text-decoration:none;}
.item-control {
display: none !important;
}
.comments .continue {
border-top: 2px solid transparent !important;
}

Blogger Yorumları Yanıtla Butonu Hatası Çözümü

bloggerde yorum yanıtlama butonu sorunu çözümü bazı blogger temalarda tema değişikliği olduğu zaman bu yorum yanıtlama özelliği çalışmıya biliyo bu benimde başıma geldiği için anlatıyorum o sorunu uzun arayışlarla bi sitede bulup uyguladım ve su an  o sorun ortadan kalktı :) size kodu nasıl ekliceğinizi anlatıcağım öncelikle
html editörünü açıp sonra bu kodu arattırıp <b:includable id='threaded_comment_js' var='post'>
daha sonra bu kodu sonuna kadar silip yerine aşağıda verceğim kodu ekliyosunuz

<b:includable id='threaded_comment_js' var='post'>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var config = <data:post.commentConfig/>;
// <![CDATA[
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}
var bodyFromEntry = function(entry) {
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + entry.content.$t + '</span>';
}
}
}
return entry.content.$t;
}
var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == config.authorName
&& comment.author.profileUrl == config.authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return config.baseUri + '/delete-comment.g?blogID='
+ config.blogId + '&postID=' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};
var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;
var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};
var hash = (window.location.hash || '#').substring(1);
var startThread, targetComment;
if (/^comment-form_/.test(hash)) {
startThread = hash.substring('comment-form_'.length);
} else if (/^c[0-9]+$/.test(hash)) {
targetComment = hash.substring(1);
}
// Configure commenting API:
var configJso = {
'maxDepth': config.maxThreadDepth
};
var provider = {
'id': config.postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initComment': targetComment,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};
var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};
// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>
</b:includable>

blogger Yorum alanı özelleştirme

merhaba arkadaslar bugun kendi buloğumda kullandım  yorum alanı kodunu paylaşmak istiyorum
bu konuda çok meil geldiği için paylaşma  gereksimi duydum :) aşağıdaki kodu html şablonu genişletim ]]></b:skin> kırmızı ile seçilmiş kodu arattırıp hemen üstüne yerleştiriceksiniz tabi kendi bloğunuzdaki comments ile değişirseniz daha mantıklı olur :)

/* Comments

----------------------------------------------- */

.comments {background: none repeat scroll 0 0 #FFFFFF;clear: both;margin-top: 10px;padding: 10px;width: 96%;}

#comments{overflow:hidden}

#comments h4{display:inline;padding:10px;line-height:40px}

#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}

#comments h4,.comments .continue a{background:#2693ba}

#comments h4,.comments .user a,.comments .continue a{font-size:16px}

#comments h4,.comments .continue a{font-weight:normal;color:#fff}

#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #2693ba;border-right:20px solid transparent;width:0;height:0;line-height:0}

.comments .avatar-image-container{width:42px;max-height:42px;height:42px;padding:2px;border:1px solid #CCCBCB}

.comments .avatar-image-container img{max-width:42px;width:100%}

.comments .inline-thread .avatar-image-container{width:36px;height:36px}

.comments .comment-block{margin-left:53px;padding:5px 10px;border:1px solid #CCCBCB;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px}

.comments .inline-thread .comment-block{margin-left:48px}

.comments .comment-block::before,.comments .comment-block::after{content:"";width:0;height:0;border-width:10px 8px;border-style:solid;border-color:transparent #CECECE transparent transparent;position:absolute;top:8px;right:100%}

.comments .comment-block::after{border-color:transparent white transparent transparent;right:auto;left:-15px}

.comments .comments-content .comment-header{border-bottom:1px solid #CCCBCB;padding-bottom:3px;margin:-1px -3px 10px}

.comments .comments-content .comment{margin-bottom:12px;padding:0}

.comments .comments-content .icon.blog-author{position:absolute;right:10px;top:-3px;width:65px;height:20px;background-color:#2693ba;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;-o-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px}

.comments .comments-content .icon.blog-author::after{content:"Admin";position:absolute;color:white;text-shadow:0 1px 2px #646464;top:0px;left:10px}

#comments-block{margin:1em 0 1.5em;line-height:1.6em}

.comment-form{max-width:100%}

#comments-block .comment-author{margin:.5em 0}

#comments-block .comment-body{margin:.25em 0 0}

#comments-block .comment-footer{margin:-.25em 0 2em;line-height:1.4em;text-transform:uppercase;letter-spacing:.1em}

#comments-block .comment-body p{margin:0 0 .75em}

#mybtips-form iframe{

background:#ffffff url(http://1.bp.blogspot.com/-TjJflzKETo4/ToB8PzdeWdI/AAAAAAAAAO4/e39aQolo8c8/s1600/238+%25281%2529.jpg) repeat;

border:1px solid #ddd;

-moz-border-radius:6px;

-webkit-border-radius:6px;

box-shadow: 5px 5px 5px #CCCCCC;

padding:5px;

font:normal 12pt "ms sans serif", Arial;

color:#ffffff;

width:560px; height:213px !important;

}

#mybtips-form a{

color:#000;

}

Twitter yayın akışı eklentisi

yine kendi sitemde kullandığım  bir eklenti twitter yayın akışı eklentisi gerçekten çok kullanışlı demosunu  yine sitemde göre bilirsiniz kod aşağıdadır değiştirmeni gereken yeri kırmızıyla belirticem
maviyle belirttiğim yerden twitter sayısı artırıp azalta biliyosunuzuz...

<div style="background:#000 url(http://s1.postimg.org/r7tcuekgf/tweettt.png) no-repeat;padding-top:52px;padding-left:10px">
<script src="http://rbcode.googlecode.com/files/Twitter-feed-widget.js"></script>
<script>
/*Twitter Feed Widget By RealcomBiz.com*/
new TWTR.Widget({
version: 25,
type: 'profile',
rpp: 25,
interval: 3000,
width: 287,
height: 127,
theme: {
shell: {
background: 'transparent',
color: '#000'
},
tweets: {
background: 'transparent',
color: '#000',
links: '#DC143C'
}
},
features: {
scrollbar: true,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'default'
}
}).render().setUser('Sohbetche_blog').start();
</script>
</div>

Son Yorumlar Eklentisi

yine bir eklentiyle baslıyalım  yine kendi sitemde kullandığım son yorumlar  wigdeti gerçekten çok kullanışlı kullanmak istiyen olur diye bunuda paylaşıyorum  değişmeniz gereken yeri kırmızıyla belirledim bunuda yine yerleşim ve gadget html/javascript olarak ekliyorus..kırmızıyla belirttim yere kendi site adresinizi yazınız.
demosunu  yine sitemde görebilirsinz

<style type="text/css">
ul.sg_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sg_recent_comments li {
    background: none!important;
    margin: 5px!important;
    padding: 5px!important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}

.sg_recent_comments li {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
.sg_recent_comments li:hover {
    background: #C9FD7A !important;
    border-radius: 100%;
}
.sg_recent_comments li .avatarImage {
    padding: 3px;
    background: #fefefe;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}
.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.sg_recent_comments li img {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: block;
}
.sg_recent_comments li span {
    margin-top: 3px;
    color: #666;
    display: block;
    font-size: 12px;
    line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 45,
 roundAvatar = true,
 characters  = 75,
 showMorelink = false,
 moreLinktext = "Devamı ?",
 defaultAvatar  = "http://softglad.at.ua/images/avatar-pic.png",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://softglad.at.ua/widgets/recent-comments.js"></script>
<script type="text/javascript" src="http://www.sohbetcheblog.net/feeds/comments/default?alt=json&callback=sg_recent_comments&max-results=5"></script>

kullandığım Sosyal Medya Wigdetini paylaşıyorum

Kendi sitemdede kullandığım sosyal medya  kodunu paylaşıyorum eminim çok işinize yarıyıcaktır benim yarıyo çünki :) hepsini bi yerde yayınlıyabiliyon tabber  hep fazla dağınık bir sidebar olmuyo herneyse kod aşağıdadır  değiştirmeniz gereken yerleri kırmızıyla yazdım kendinize göre ayarlıya bilirsiniz.
Demosunu sitemde  göre bilirsiniz.. bu kodu nasıl ekliceksiniz. yerleşim bölümünden  gadget html/javascript olarak ekliceksiniz. hepsi bu kadardır..



<a href='https://www.facebook.com/Blog.SohbetcHe'><img class="" alt="facebook" src="http://cdn1.iconfinder.com/data/icons/inFocus_social_media/40/facebook-logo-square.png" /></a>
  <a href='https://twitter.com/SohbetcHe_BLog'><img class="" alt="twitter" src="http://cdn5.iconfinder.com/data/icons/inFocus_social_media/40/twitter-logo-square.png" /></a>
 
    <a href='https://plus.google.com/u/0/102333023600349452965/posts'><img class="" alt="google" src="http://cdn5.iconfinder.com/data/icons/inFocus_social_media/40/google-logo-square.png" /></a>
 
  <a href='http://feeds.feedburner.com/SohbetcheNet'><img class="" alt="rss" src="http://cdn5.iconfinder.com/data/icons/inFocus_social_media/40/rss-cube.png" /></a>







<div class='tabber'>

<div class='tabbertab section' id='tab1'>
<h2>Twitter</h2>

<!-- eryweb.blogspot.com kod başlangıcı -->
<div class="textwidget">
<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox">
<script type="text/javascript">fanbox_init("sohbetche_blog");</script></div>
</div>
<style>
.FB_SERVER_IFRAME {
width: 280px !important; /* Ancho */
height: 350px !important; /* Alto */
}
</style>
<!-- eryweb.blogspot.com kod sonu -->


</div>
<div class='clear'></div>

<div class='tabbertab section' id='tab2'>
<h2 class='title'>Facebook</h2>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fblog.sohbetche&amp;width=292&amp;height=590&amp;show_faces=true&amp;colorscheme=light&amp;stream=true&amp;show_border=true&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowtransparency="true"></iframe>

</div>
<div class='clear'></div>

<div class='tabbertab section' id='tab3'>
<h2>Google+</h2>

<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/u/0/102333023600349452965/posts" data-source="blogger:blog:followers" data-width="300"></div>


</div>
<div class='clear'></div>

<div class='tabbertab section' id='tab4'>
<h2 class='title'>Rastgele</h2>

<style>#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Yorum Var';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLYcHleZQH1HL2MBHMmjXGxg9N8FBSVCetqzaqNrmvw3O8HGMZ7gfgLfC3x0BnSojesEbn4NLv9bKWf8N34qSwEZYy7X0qxoTYj5MNb4DNMEqbNwmPx7Yak0CFsS1IuGz9tk292o0UKw0/s1600/na_image.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

</div>


<div class='clear'></div>

</div>


**************************************************************
javascript kodu
   
<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>nav<tabnumberone>';
for (arg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
this.tabs = new Array();
if (this.div) {
this.init(this.div);
this.div = null;
}
}

tabberObj.prototype.init = function(e)
{

var
childNodes,
i, i2,
t,
defaultTab=0,
DOM_ul,
DOM_li,
DOM_a,
aId,
headingElement;
if (!document.getElementsByTagName) { return false; }
if (e.id) {
this.id = e.id;
}
this.tabs.length = 0;
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {
t = new Object();
t.div = childNodes[i];
this.tabs[this.tabs.length] = t;

if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;

for (i=0; i < this.tabs.length; i++) {

t = this.tabs[i];

t.headingText = t.div.title;

if (this.removeTitle) { t.div.title = ''; }

if (!t.headingText) {

for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
  t.headingText.replace(/<br>/gi," ");
  t.headingText = t.headingText.replace(/<[^>]+>/g,"");
}
break;
}
}
}

if (!t.headingText) {

t.headingText = i + 1;
}

DOM_li = document.createElement("li");

t.li = DOM_li;

DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;

DOM_a.tabber = this;
DOM_a.tabberIndex = i;

if (this.addLinkId && this.linkIdFormat) {

aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));

DOM_a.id = aId;
}

DOM_li.appendChild(DOM_a);

DOM_ul.appendChild(DOM_li);
}

e.insertBefore(DOM_ul, e.firstChild);

e.className = e.className.replace(this.REclassMain, this.classMainLive);

this.tabShow(defaultTab);

if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}

return this;
};

tabberObj.prototype.navClick = function(event)
{

var
rVal,
a,
self,
tabberIndex,
onClickArgs;

a = this;
if (!a.tabber) { return false; }

self = a.tabber;
tabberIndex = a.tabberIndex;

a.blur();

if (typeof self.onClick == 'function') {

onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};

/* IE uses a different way to access the event object */
if (!event) { onClickArgs.event = window.event; }

rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}

self.tabShow(tabberIndex);

return false;
};

tabberObj.prototype.tabHideAll = function()
{
var i;

for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};

tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;

if (!this.tabs[tabberIndex]) { return false; }

div = this.tabs[tabberIndex].div;

if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);

return this;
};

tabberObj.prototype.tabShow = function(tabberIndex)
{

var div;

if (!this.tabs[tabberIndex]) { return false; }

this.tabHideAll();

div = this.tabs[tabberIndex].div;

div.className = div.className.replace(this.REclassTabHide, '');

this.navSetActive(tabberIndex);

if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}

return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{

this.tabs[tabberIndex].li.className = this.classNavActive;

return this;
};

tabberObj.prototype.navClearActive = function(tabberIndex)
{

this.tabs[tabberIndex].li.className = '';

return this;
};

function tabberAutomatic(tabberArgs)
{

var
tempObj,
divs,
i;

if (!tabberArgs) { tabberArgs = {}; }

tempObj = new tabberObj(tabberArgs);

divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {

if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {

tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}

return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{

var oldOnLoad;

if (!tabberArgs) { tabberArgs = {}; }

oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}

/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */

if (typeof tabberOptions == 'undefined') {

tabberAutomaticOnLoad();

} else {

if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}

}

//]]>
</script>

<style type='text/css'>
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:#fff;
border:1px solid #fff;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid #fff;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid #fff;
border-bottom:none;
background:#6c6c6c;
text-decoration:none;
color:#ffffff;
}
.tabbernav li a:hover {
color:#6c6c6c;
background:#ffffff;
border:1px solid #fff;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:#ffffff;
color:#6c6c6c;
border-bottom: 1px solid #ffffff;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid #fff;
border-top:0;
background:#ffffff;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid #fff;
margin:0 5px;
padding:2px 0 5px 0;
}
</style>

Blogger Yeni Gatget'i İletişim Formu

Blogger ın yeni bir eklentisi iletişim formu hepimizin  bildiniz gibi iletişim formu kurmak için iletişim formu sitelerinden kodlar ekleyip öle kurmamızdı artık ona gerek kalmadı blogger de sadece gadget olarak  ekleyip iletişim formunuzu  siderbar kısmında yayınlıya biliyosunuz :) güzel bir eklenti ama  ben yine kendi iletişim formumu kullanmaktayım :) gadget eklemek için öncelikle

Blogger Kumanda Paneli'ne girin oradana Yerleşim >> Gatget Ekle diyoruz daha sonra ekranda çıkan gatgetlerin sol üstünde Diğer Gatget'ler var onu tıklıyoruz.

Son olarak karşımıza çıkan yeni gatget'lerdan İletişim Formu eklebiliyoruz

Sexy Sliding JavaScript Side Bar Menu

Blogger için javascript slidermenü solda çok güzel  bir menü

bunu kullana bilmeniz için aşağıdaki komutları takip ediniz

yapmamız gereken sadece

'HTML/Javascript' olarak kodu yağıştırmamız



<script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/prototype.js" type="text/javascript"></script> <script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/effects.js" type="text/javascript"></script> <script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/side-bar.js" type="text/javascript"></script> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a> <style> body{ font-size:75%; } a{ outline: none; } a:active{ outline: none; } #sideBar{ text-align:left; } #sideBar h2{ color:#F0FFFF; font-size:110%; font-family:arial; margin:10px 10px 10px 10px; font-weight:bold !important; } #sideBar h2 span{ font-size:125%; font-weight:normal !important; } #sideBar ul{ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; } #sideBar li{ margin:0px 5px 5px 10px; padding: 0 0 0 10px; list-style-type:none; display:block; background-color:#DA1074; width:177px; color:#FFFFFF; } #sideBar li a{ width:100%; } #sideBar li a:link, #sideBar li a:visited{ color:#FFFFFF; font-family:verdana; font-size:100%; text-decoration:none; display:block; margin:0px 0px 0px 0px; padding:0 0 0 20px; width:100%; } #sideBar li a:hover{ color:#FFFF00; text-decoration:underline; } #sideBar{ position: fixed; width: auto; height: auto; top: 140px; left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf8XeNgfqsQEfrUjHlMl5sjpT4rA5fWSTeMy1Nl6REkubRUGSeMFX_xiqRilZmvGqP4k_39eOMftz08BVwC_Wy8gJ80mD-vlOr9DXQITetnmg32c_jhHHr3igZ62aN9B9kVlmPhyadXiOr/s320/left.collapse.border.png); background-position:top right; background-repeat:repeat-y; } #sideBarTab{ float:left; height:137px; width:28px; } #sideBarTab img{ border:0px solid #FFFFFF; } #sideBarContents{ float:left; overflow:hidden !important; width:200px; height:320px; } #sideBarContentsInner{ width:200px; }</style> <div id="sideBar"> <div id="sideBarContents" style="display:none;"> <div id="sideBarContentsInner"> <h2> Left<span>Menu</span></h2> <ul> <li><a href="#">Link One</a></li> <li><a href="#">Link Two</a></li> <li><a href="#">Link Three</a></li> <li><a href="#">Link Four</a></li> </ul> </div> </div> <a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj4wKtdPbkiyageokr19Fi_5AnmylXYlutR3uetmzFBae6zSjtagqgESlqk4E9Dnda9bsWuXeKMX9Q79TqNBglG17UF0a8eWzpVXyvry14_UbaWrH7KUPbN37H_fHu-tPemKlTsnS2FOtE/s320/sidebarcollapse.png" title="sideBar" /></a> </div>

Tree House Blogger Teması

Blogger kullananlar için çok farklı ve  güzel bir tema :)

Download    Demo

Blogger’da yazı etiketleri ile kategorileri birbirinden ayırmak

Blogger kullanıcılarının ister istemez sıkıntısını çektiği kategori sorunu için daha önceki yazılarımızda çözümler sunmuştuk. Sadece seçili olan etiketlerden kategori menüsü hazırlamak da bunlardan biriydi. Ancak bazı kullanıcıların başını ağrıtan benzer bir sorun ise yazı için seçtiğimiz kategori etiketini, yazıya eklenen diğer etiketlerden ayrı tutamamaktı. Bu önemli sorunu daha iyi anlayabilmek için aşağıdaki örneği incelemek de fayda var. Diyelim ki, yazılarımız için düzenlediğimiz;

Tarih: 07.09.2012 | Kategori: Genel | Yorum: 0

gibi bilgilerin yer alacağı bir bölüm hazırladık. Burada kategori olarak ifade edilen de aslında yazı için seçtiğimiz bir etiketti. Eğer birden fazla etiket seçmek isteseydik de aşağıdaki görüntü oluşacaktı.

Tarih: 07.09.2012 | Kategori: Genel – blogger ipuçları – blogger yazı ekleme | Yorum: 0

İşte bu durumda, asıl kategori ile diğer etiketleri ayırmak; yani yazımızda sadece kategori etiketimizi göstermek, diğer etiketleri gizlemek istiyorsak aşağıdaki yöntemi kullanıyoruz.

Öncelikle Blogger panelimizin Tasarım > Html’yi Düzenle bölümünü açıyor ve ‘Widget Şablonlarını Genişlet’ kutucuğunu aktif ediyoruz.

Açtığımız pencerede ‘Ctrl + F’ tuşları yardımıyla arama yaparak aşağıdaki kodları buluyoruz.

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if></span>

Bulduğumuz bu kodları silerek onların yerine aşağıdaki kodları ekliyoruz.

<span style='margin-right:1px;'>Kategori:</span><b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><b:if cond='data:label.name == "kategoriAdı"'><data:label.name/><b:else/></b:if></a>
</b:loop>
</b:if>

İşlemimiz burada tamamlanıyor.

Önemli not:

• Yukarıdaki kodlarda kırmızıyla belirtilen ‘kategoriAdı’ ifadesi yerine kategori olarak kullandığınız etiketin adını yazınız. (etiket adınızı yanlış yazmamaya dikkat ediniz)

Blogger için en iyi 15 eklenti!

Blogger için bugüne kadar paylaştığımız tüm eklentilerden en çok işe yarayabilecek 15 eklentiyi sizler için derleyip her birinden kısaca bahsetmek istiyorum. Slayt eklentisinden, facebook’ta paylaş eklentisine; benzer yazılar eklentisinden, arşiv eklentisine kadar Blogger sayfanız için gerek duyabileceğiniz birçok eklentiyi bu yazıda görebilirsiniz. Her biri sitenizin gelişmesi adına oldukça faydalı olacaktır. Eklentileri incelemek için başlıklarına tıklamanız yeterli. Bu yazımızda yer almayan diğer eklentileri de görmek için ‘Blogger’ kategorimizdeki tüm yazılara göz atabilirsiniz.

Not Bu konu alıntıdır : http://www.teknobeyin.com/ adresinden alınmıştır....

1. İç içe geçen alternatif menü yapımı

Basit olarak iç içe geçmiş dairelerden oluşan bu menü, farklılık isteyen Blogger kullanıcıları için sitelerine estetik katacaktır. Menüde yer alan bağlantılardan tıklanmak için üzerine gelinen, diğer dairelerin önüne geçiyor. Normal durumda ise arka arkaya dizilmiş daire dizisi görünümünde duruyor.

2. Linkwithin ile resimli benzer yazılar eklentisi

Blogger için yazılı benzer yazılar eklentisini sanıyorum ki birçok kişi biliyordur. Fakat bir de, resimli benzer yazılar eklentisi mevcut. Kaldı ki, bu eklentiyi kurmak gerçekten çok ama çok basit. Çünkü bu eklentiyi LinkWithin sitesi ile anında kurabiliyoruz. Dolayısı ile yazılarımız içerisinde diğer yazılarımıza da resimli olarak link vermiş oluyoruz.

3. Gelişmiş önceki ve sonraki yazı eklentisi

Bildiğiniz gibi önceki ve sonraki yazı bağlantıları yerine farklı ifadeler ya da resim koyabiliyorduk. Bu eklenti sayesinde ise, bağlantıların blog sayfamızın sağ ve sol köşelerine yerleştirilecek oklarla kullanılmasını sağlıyoruz. Böylece blogumuza hem daha etkileyici bir görünüm katmış hem de yazılar arasındaki geçişleri daha belirgin hale getirmiş oluyoruz.

4. Alternatif slayt eklentisi

Blogger için en çok tercih edilen eklentilerden biri de elbette slayt geçişleridir. Birçok farklı çeşidi olan bu eklentinin bugün bahsedeceğim şekli ise, kolay kurulumuyla birlikte hem sade hem de etkileyici bir yapıya sahip. Slaytımız herhangi tıklama işlemine gerek duymadan da çalışmasının yanı sıra, üzerindeki numaralara tıklayarak da hareket ettirilebilmektedir.

5. Otomatik olarak çalışan slider (manşet) eklentisi

Bu dersimizde, otomatik olarak çalışan bir manşet eklentisini anlatacağım. Anlatacağım eklenti gerçekten fazlası ile kullanışlı. Şöyle ki; eklenti otomatik olarak çalışıyor. Yani siz sağ ve sol butonlara basmasanız da, manşet kısmı çalışmaya devam ediyor. Fakat elbette, isterseniz sağ ve sol butonlara basarak manşette ilerleyebiliyor veya geri gelebiliyorsunuz.

6. E-posta ile takip et eklentisi

Bu dersimizde WordPress‘te de yer alan E-Posta ile takip etme eklentisini kurmayı ve kullanmayı öğreneceğiz. Belki önceden Blogger için bu tarz eklentiler paylaşılmış olabilir. Fakat bu eklentinin diğer eklentilerden olan farkı şu ki; tasarım ve ilgi çekme bakımından daha iyi. Yani eklentide, RSS adresinin yanı sıra Facebook ve Twitter gibi bağlantılar da yer alıyor.

7. Yazının ortasına sosyal paylaşım butonları eklemek

Bu eklenti ile yazınızın tam ortasına sosyal paylaşım sitelerine ait butonlar ekleyebileceksiniz. Ayrıca “Share” kısmı sayesinde de diğer birçok sosyal paylaşım sitelerinde yazılarınızı paylaşabileceksiniz. Kullanım için aşağıdaki kodlama haricinde başka hiçbir şey yapmanıza da gerek yok.

8. Facebook’ta paylaş eklentisi

Bu eklenti sayesinde, blogunuzdaki her yazının en altına ‘Facebook’ta Paylaş’ butonu ekleyebileceksiniz. Ve dolayısı ile, ziyaretçileriniz tarafından da bu butona tıklandığı zaman yazılarınız Facebook’ta paylaşılmış olacak. Akabinde, bu durum da yazılarınızın bir çok kişiye ulaşılmasına zemin hazırlamış olacak diyebiliriz.

9. Arşiv sayfası oluşturmak

Bu eklenti sayesinde blogunuzdaki yazıları ayrı bir sayfa içerisinde ve ayrı bir tasarımda gösterebileceksiniz.

10. Son yazılar ve son yorumlar eklentisi

Bu eklenti sayesinde, çok kolay bir şekilde, blogunuza yazdığınız son yazılarınızı ve blogunuz için yapılan son yorumları, blogunuzda gösterebilirsiniz.

11. Bu yazıya nereden ulaştın eklentisi

Bu eklenti sayesinde, yazılarınızın üst kısmında, yazınızın bulunduğu kategori yer alıyor. Yani; yazınıza hangi kategoriden ulaşıldı ise, o kategorinin ismi yazıyor.

12. Toplam yazı ve toplam yorum sayısını göstermek

Bu eklenti sayesinde blogunuzda yer alan yazı ve yorum sayısını ziyaretçileriniz ile paylaşabiliyorsunuz. Eklentinin renk kodları ile de oynayarak, kendinize göre özelleştirebilirsiniz. Eklentinin kullanımı ise çok basit.

13. Yan menüde bütün yazıları listelemek

Bu eklenti; yan menünüzde blogunuzda bulunan bütün yazılarınızı listelemenizi sağlıyor. Dolayısı ile bir nevi arşiv görevini görse de, kullanmak isteyenlerin olabileceğini düşünerek paylaşmak istiyorum.

14. ‘Etiketine sahip yayınlar gösteriliyor’ yazısını kaldırmak

Bu yazımızda, etiketlere tıkladığımız zaman karşımıza çıkan ‘…etiketine sahip yayınlar gösteriliyor.’ yazısını kaldırmayı öğreneceğiz. Yani, artık blogunuzdaki herhangi bir etikete tıklandığı zaman karşınıza böyle bir uyarı çıkmayacak.

15. ‘Kaydol: Kayıtlar (Atom)’ linkini kaldırmak

Günümüzde, birçok kişi FeedBurner kullanıyor. Dolayısı ile, FeedBurner kullanırken Blogger temalarında yer alan ‘Kaydol: Kayıtlar (Atom)’ linkine de hiç gerek kalmıyor. Bu yazımızda da işte bu linki kaldırmayı anlatmak istiyorum.

Not: Eklentilerle ilgili sorularınızı her bir eklentinin kendi yazısındaki yorum formu aracılığıyla iletebilirsiniz.