Blog Mimarı: blog dersleri

blog dersleri etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

blog dersleri etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

30 Ekim 2012 Salı

Blogger Disqus Yorum Formu Entegrasyonu

13:51 Unknown 9 comments

Bloggerin yorum formu çok sade bir şekilde tasarlanmış, gerçektende görüntü olarak da kötü ve kullanışsız olduğunu bir çok blogger arkadaş biliyor ve bunu kabul ediyor,bu yüzden yorum kutusu değiştirme ile ilgili bir çok eklenti ve kodlar geliştirilmiş durumda, blogger yorum kutularını birkaç eklenti ile güzelleştiren arkadaşlar var, biz size bu eklentileri değilde, dünyanın önde gelen sitelerinin ve türkiyede devleşmiş sitelerin kullandığı yorum formu olan disqus yorum formunu blogunuza nasıl ekliyebileceğinizi anlatacağız.

Devamını Oku>>

.

28 Ekim 2012 Pazar

Blogger Slayt Alani (NivoSlider)

10:18 Unknown 1 Yorum

Bloglardaki slayt alanlarının, yada türk bloggerler arasında blogger manşet alanı olarak adlandırılan geçişleri farklı animasyonlarla süslenmiş blogger nivo slider olarak bilinen müthiş bir blogger slayt alanı yada blogger manşet alanı eklentisi ile karşınızdayız.Blogger nivo slider slayt alanını blogunuza ekleme işlemi oldukça basit.Üstellik emsallerine göre yani bu kadar kaliteli olan slayt alanlarına göre ilk etapta açılış hızı da oldukça iyi.

Devamını Oku>>

.

24 Ekim 2012 Çarşamba

Blogger Başlık Yerine Resim Koyma

06:59 Unknown 1 Yorum

http://img841.imageshack.us/img841/3406/blogbasl.jpg

Blogger Başlık Yerine Resim Koyma konusunu sizlere videolu olarak anlatacağız.Blogger başlık resmi sayesinde blogunuz daha çekici ve göze daha hoş görünecek.Sadebir yazı yerine blogger başlığınıza resim koyup yazı ile birleştirip blogculukta profesyonelliğe bir adım daha yaklaşabilirsiniz. Blogger Başlık Yerine Resim Koymak için Eklediğimiz Videoyu İzleyin.

Devamını Oku>>

.

9 Ekim 2012 Salı

Blogger Kategori Mesaj Kutusunu Silme

11:34 Unknown 1 Yorum

Bildiğiniz gibi blogger de kategorilendirme yok, etiketleri kullanarak kategori oluşturuyoruz.Bu noktada etiketlerin de blogger için vazgeçilmez olduğu gerçeği kaçınılmaz oluyor.Kategorileri etiketlerle oluşturduğumuz için etiketlerden birine yada kategori linkine tıkladığımızda resimde de gördüğünüz gibi blog kayıtlarının hemen üstünde blogger eklentileri kategorisine sahip kayıtlar gösteriliyor.Tüm Kayıtlarşeklinde bir etiket isminin ve diğer yazılarınıza ait linkin (tüm kayıtlar) bulunduğu kutu içerisinde bir mesaj çıkıyor.

Aslında bence pek zararı olmayan ama bazı kullanıcıların görüntü kirliliği yaptığını iddia ettiği bu mesaj kutusunu eğer istemiyorsanız blogunuzdan kaldırabilirsiniz.Blogger kategori mesaj kutusunu blogunuzdan kaldırmak için.

Öncelikle şablonumuzun yedeğini alıyoruz.
Kumanda Paneli>Şablon>Htmlyi Düzenle>Devam Et yolunu takip edip widget şablonlarını genişlet kutucuğunu işaretliyoruz.
Html kodları içerisinde Ctrl+F yardımı ile aşağıdaki kodları buluyoruz.

<b:includable id='status-message'>
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>
</b:includable>

Yukarıda bulduğumuz kodların yerine aşağıdaki kodları kopyalayıp, yapıştırıyoruz.

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

son olarak şablonumuzu kaydedip çıkıyoruz.

Devamını Oku>>

7 Ekim 2012 Pazar

Blogger Resim Boyutlandırma

09:50 Unknown Yorum

Bloggerda yayınladığınız yazıları ilgili resimlerle desteklemeniz çok önemli.Örneğin bir yemek blogunuz var mükemmel bir çorba tarifi yapıyorsunuz ama resim yok, bu büyük bir eksiklik tarif nekadar güzel olursa olsun resmin önemi çok büyük.Mükemmel tarifinizin yanına birde üzeri soslanmış bir çorba resmi koydunuzmu bu iş tamam.Ddikkat ettiyseniz her yazıma mutlaka en az bir resim koyarım yada koymaya çalışırım.

Devamını Oku>>

.

30 Eylül 2012 Pazar

Blogger Slayt Alanı Otomatik

23:58 Unknown 18 comments

Blogger slayt alanı eklentilerine bir yenisini daha ekliyoruz.Seçtiğiniz bir etikete göre slayt alanınıza yayınladığınız içeriklerden görüntü taşıyabilen bir slayt alanından bahsediyoruz.Örnek verecek olursak:Slayt alanını blogunuza ekledikten sonra sizin seçtiğiniz bir etiketi örneğin etiketimiz slayt olsun slayt alanında görüntülemek istediğimiz yazılara ekliyoruz.

Şimdi blogger kullanıcıları için tasarlanmış bu şık görünümlü slayt alanını blogunuza eklemeyi anlatalım. Demo Görünüm 1-Blogger Hesabımızla giriş yapıyoruz.Her ihtimale karşı şablonumuzun yedeğini alıyoruz 2-Kumanda Paneli>Şablon>Htmlyi Düzenle>Devam Et yolunu takip ediyoruz.Widget şablonlarını genişlet kutucuğunu işaretliyoruz. 3-Html kodları içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp buluyoruz. 4-Aşağıdaki kopdu kopyalayıp bulduğumuz ]]></b:skin> kodundan önceki kısma yapıştırıyoruz.

.shadow{width:950px; height:39px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmWOv4obkFch_94o4LNO6kvH01mMdlDzbRu27fo5dvGeTpwvIrUKCfcfnrswVH4fdGXBxSQ56QmE9_VZfaIzNS9ElaXrWttWseUtx3ilOu3fzd5h8Lhd0JhiLJFQcubaMrYD5eI5hdinOn/s1600/shadow1.png) no-repeat center;margin:0 auto}
#featured-slider{position:relative;overflow:hidden;width:950px;height:325px;background:#fcfcfc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlf3E8cWzkh6H7x6ibzMyOtBg7GCDZqPFWnAJLXWgn-aXpzH3dHRomMoS0zRy796EyH0VjGFojjinphkxXNWqSY0-YVD48AX3zfMAS7D8t2kDlJ4SjHP9re7aa2fuBRMlDh44jR_TaEQtw/s1600/slider-bg.png) repeat-x top;margin:0 auto;padding:0 auto}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:20px;top:10px;z-index:1;width:305px}
#featured-slider .contentdiv img{background:#fff;padding:2px;border:1px solid #ccc;width:297px;height:297px;overflow:hidden}
#featured-slider .sliderPostPhoto{position:relative;height:305px;width:305px;overflow:hidden}
#featured-slider .sliderPostInfo{position:absolute;top:0;left:345px;color:#a1a1a1;background:url();height:190px;width:540px;padding:5px 0 0}
#featured-slider .sliderPostInfo p{color:#0a0a0a;line-height:1.6em;font-size:14px;padding-top:1px}
#featured-slider .featuredPostMeta a{color:#a1a1a1}
#featured-slider .order a {display:block; width:98px; height:40px; bottom:14px; left:0px;background:url() no-repeat 0 0; position:absolute;  font-size:15px; line-height:13px; text-transform:uppercase; text-decoration:none; font-family: 'Open Sans', sans-serif; color:#fff; font-weight:700; padding:11px 0 0 6px;}
#featured-slider .order a:hover{ color:#515151;}
.featuredTitle{font:bold 24px Tahoma;color:#719429;line-height:1cm}
.featuredTitle a{color:#719429}
.featuredTitle a:hover{color:#0a0a0a}
#paginate-featured-slider{position:absolute;right:0;top:250px;z-index:1;width:595px;height:80px;overflow:hidden}
#paginate-featured-slider ul{width:595px;list-style:none}
#paginate-featured-slider .featured_thumb{float:left;margin-right:15px;width:65px;height:65px;padding:0}
#paginate-featured-slider .featured_thumb:hover{opacity:0.7}

kod içerisinde renkli olarak verdiğimiz 950px ve 325px değerlerini değiştirip slayt alanını kendinize göre boyutlandırabilirsiniz. 5-Html kodları içerisinde Ctrl+F yardımı ile</head> kodunu aratıp buluyoruz. 6-Aşağıdaki kodu kopyalayıp bulduğumuz </head>kodundan önceki kısma yapıştırıyoruz.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8v1Y5FJiZoKuEIyoC5_cgRC_gfJzH_ViLgSSzSNHKCkNa2UNMRfE-jtM2xzqX7GX6jyv9lpykKmDThgyZ4kX9K7T9RLBdTbaGgKqMZWOTkUSXl8pRyDZpxjIC4tu5p506W84BD9FtY4A/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 400;
summaryTitle = 25;

numposts2 = 7;

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}

function showrecentposts1(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
  
   for (var i = 0; i < numposts2 ; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }
  
  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }
  
     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
     
     postdate = entry.published.$t;
 
 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];
 
 s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

 if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];

 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }

 var daystr = day+ ' ' + m + ' ' + y ;
 
 var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a class="crop-foto" href="'+posturl+'"><img width="200" height="150" class="alignright" src="'+img[i]+'"/></a></div><div class="sliderPostInfo"><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><span class="featuredPostMeta">'+daystr+' | <a href="'+posturl+'">'+pcm+' Comments</a></span><p>'+removeHtmlTag(postcontent,summaryPost)+'...   <a href="'+posturl+'" class="meta-more">devamını oku... </a></p></div><p class="order"><a href="'+posturl+'"></a></p></div>';
  document.write(trtd);     
    
     j++;
 }
 
}

function showrecentposts2(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
  
   for (var i = 0; i < numposts2 ; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }
  
  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }
  
     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
     
     postdate = entry.published.$t;
 
 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];
 
 s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

 if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];

 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }

 var daystr = day+ ' ' + m + ' ' + y ;
 
 var trtd = '<ul class="featured_thumb"><a rel="'+i+'" class="toc" href="#"><img width="65" height="65" title="our product" alt="our product" class="featured_thumb" src="'+img[i]+'"/></a></ul>';     
  document.write(trtd);     
    
     j++;
 }
 
}
//]]>
</script>

7-Son olarak yine html kodları içerisinde Ctrl+F yardımı ile <div id='main-wrapper'>kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz <div id='main-wrapper'> kodundan önceki kısma yapıştırıyotruz. Not:Eğer kodlar içerisinde <div id='main-wrapper'> kodunu bulamazsanız; <div class='column-center-outer'> kodunu bulun ve aşağıdaki kodu kopyalayıp bu kodun bir üst satırına yapıştırın

<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'>
<b:widget id='HTML82' locked='false' title='blogmimarı slayt alanı' type='HTML'>
<b:includable id='main'>
<div id='featured-slider'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</ul>
</div>
</div>    
<script type='text/javascript'>
featuredcontentslider.init({
id: &quot;featured-slider&quot;, //id of main slider DIV
contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
toc: &quot;markup&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
nextprev: [&quot;&quot;, &quot;&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; to hide.
revealtype: &quot;click&quot;, //Behavior of pagination links to reveal the slides: &quot;click&quot; or &quot;mouseover&quot;
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</b:includable>
</b:widget>
</b:section>
      </div>
</b:if>
<div class='shadow'/>

şablonumuzu kaydedip çıkıyoruz. 8-Şablonumuzu kaydedip çıktığımızda kumanda paneli>yerleşim yolunu takip ettiğimizde aşağıdaki gibi bir "blogmimarı slayt alanı" başlıklı blogger slayt alanı gadgetinin blogumuza eklenmiş olduğunu göreceğiz.Başlığı silmeyin slayt alanında görünmeyecek zaten.

Resimde de gösterdeğimiz blogger slayt alanına ait gadgette düzenle linkini tıklıyoruz.Düzenle linkine tıkladığımızda aşağıdaki gibi bir pencere açılacak.

Slayt alanımızın etiket bazlı olduğunu söylemiştik, burdaki gadget içerisine yazdığınız kelime yazılarınızda etiket olarak yazdığınız ve slayt alanında görünmesini istediğiniz yazılarda bulunması gereken kelimedir.Örnekle açıklayalım:Bir yemek blogunuz var bu yemek blogunuzda günün menüsü etiketine sahip 5 adet yazınız var.Günün menüsü etiketine sahip yazılarınızın slayt alnında görünmesini istiyorsunuz, ozaman yukarda verdiğimiz resimdeki alana günün menüsü diye yazıp kaydediyorsunuz.Blogger slayt alanı kullanıma hazır.

Devamını Oku>>

29 Eylül 2012 Cumartesi

Blogger Yazı Kısaltma Özelliği

05:24 Unknown Yorum

Bildiğimiz gibi ana sayfada ne kadar fazla ve uzun içerik olursa sayfamızın açılma süresi bir okadar uzuyor.Yapılan araştırmalarda da bir sayfa en fazla 12 sn içerisinde açılmıyorsa ziyaretçi o sayfayı terk ediyor(kendi üzerim de de denedim:)).Blogger, kullanıcılarına ana sayfada 10 dan fazla içerik olmamasını olduğu takdirde de sayfanın açılış hızını etkiliyebileceğini söylüyor.Bugün sizlere uzun içeriklerinizi ana sayfada kısa kısa nasıl gösterebileceğinizi anlatacağız;

"Atlama Aralığı Ekle" Fonsiyonu sayesinde uzun olan bir içeriğinizin ana sayfada hepsini değilde görünmesini istediğimiz kısmını gösterebiliyoruz.Örneğin beş paragraflık yazınızın sadece ilk iki paragrafının ana sayfanızda görünmesini istiyorsanız "Atlama Aralığı Ekle" fonksiyonu ile bunu yapabilirsiniz.Bu sayede ana sayfada hızlı açılan daha fazla içerik gösterme imkanına sahip olursunuz.İçeriğin hepsini görmek isteyen kişi otomatik olarak eklenen "devamı" linkini tıklayıp içeriğin hepsini görüntüleyebilir.

Şimdi sizlere "Atlama Aralığını" Nasıl Ekleyeceğinizi Resimli Olarak Anlatalım;

İmleci görünmesini istemediğiniz kısmın başlangıcına getiriyoruz, ardından şekilde gördüğümüz "Atlama Aralığı Ekle" butonuna tıklıyoruz.Butona tıklayınca kesik çizgilerden oluşan bir satır ekleniyor.Bu satırın yukarı kısma ana sayfada görünecek alt kısmı ise görünmeyecek.

Devamını Oku>>

26 Eylül 2012 Çarşamba

Bloggerden Oyun Sitesi Olur mu?

23:43 Unknown 9 comments

Blogger tabanlı oyun sitesi gördünüzmü bilmiyorum, varsa da pek nadirdir diye düşünüyorum, uzun uğraşlar sonunda bloggerdan yaptığım oyun sitesini sizlere tanıtmak istedim, blogger üzerinden alan adını satın aldığım www.oyun04.com sitesini ziyaret edip hoş vakit geçirebileceğiniz araba oyunları, motor yarışları, mario oyunları, spor oyunları, futbol oyunları gibi kategorilerden oluşan bir oyun sitesi yapmaya çalıştık,Sizlerinde yeni yaptığımız www.oyu04.com sitemiz geliştirebilmek için sitemiz hakkında görüş,öneri ve katkılarınızı bekliyoruz. ...............................Reklam.................................
Şimdi oyun oynama zamanı...

Devamını Oku>>

25 Eylül 2012 Salı

Resimlerinize Efekt-Animasyon Ekleyin (5 Farklı Efekt)

01:59 Unknown 2 comments

Bloggerde artık nerdeyse yapamıyacağınız şey yok, uçsuz bucaksız bir web dünyası, yeter ki kafayı biraz çalıştırıp neyaptığının farkında olup amaca giden yolda doğru araçları seçebielim.Bugünde size resimlerinize efekt katacak animasyonlandıracak bir eklntiyi araç olarak size vereceğiz, sizde amacınız doğrultusunda kullanın.Blogger resimlerinize efekt yada animasyon olarak 5 ayrı şekilde ve istediğiniz resme uygulayıp istediğinize uygulamama insiyatifini tamamen kullanıcıya bırakarak blogger resim efekti eklentisini sizlere sunuyoruz:
DEMO GÖRÜNÜM
Blogger Resim Efekti 1:Maus üzerine geldiğinde resim büyüyerek öen doğru çıkıyor.

Blogger Resim Efekti 2:Resim başlangıçta hafif gölgeli görünüyor,maus ile resmin üzerine geldiğinizde dilim dilim ve sırayla animasyonlu bir şekilde resim açılarak netleşecek.
Blogger Resim Efekti 3:Resim başlangıçta hafif puslu görünüyor,maus ile resmin üzerine geldiğinizde kare kare kutular rastgele animasyonlu bir şekilde açılarak resim netleşecek.
Blogger Resim Efekti 4:Resim başlangıçta hafif gölgeli görünüyor,maus ile resmin üzerine geldiğinizde dilim dilim katlanmış kağıt yelpazesi gibi akordiyonlu bir şekilde animasyonla resim üzerindeki perde kalkacak.

..............................Reklam...............................

Blogger Resim Efekti 5:Resim başlangıçta hafif puslu görünüyor,maus ile resmin üzerine geldiğinizde kare kare puslar animasyonlu olarak çaprazlamasına açılacak
Blogger Resim Efektini-Animasyonunu Katma:
1-Blogger hesabımızla giriş yapıyoruz.
2-Kumanda Panali>Şablon>Htmlyi Düzenle>Devam Et yolunu takip edip kodlarımızın bulunduğu alana geliyoruz.Blogumuzun yedeğini alıyoruz.
3-Widget Şablonlarını genişlet kutucuğunu işaretliyoruz.
4-Kodlar içerisinde Ctrl+F yardımı ile </head> kodunu aratıp buluyoruz.
5-Aşağıdaki kodu kopyalayıp bulduğumuz </head> kodundan önceki kısma yapıştırıyoruz.

<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/143237963/jquery.adipoli.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
jQuery(function($pice){
$pice('.effect1').adipoli({
'startEffect' : 'normal',
'hoverEffect' : 'popout'
});
$pice('.effect2').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'sliceDown'
});
$pice('.effect3').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRandom'
});
$pice('.effect4').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'foldLeft'
});
$pice('.effect5').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRainGrowReverse'
});

});
/*]]>*/

</script>

6-Yine kodlar içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp buluyoruz ve aşağıdaki kodu kopyalayıp bulduğumuz ]]></b:skin> kodundan önceki kısma yapıştırıyoruz.

.adipoli-wrapper{position:relative;display:inline-block;margin:auto}
.adipoli-slice{display:block;position:absolute;z-index:0;height:100%}
.adipoli-box{display:block;position:absolute;z-index:0}
.post img{border:0!important;margin:0!important;padding:0!important}
.adipoli-wrapper>img,.adipoli-before,.adipoli-after{position:absolute;z-index:0}

7-Şablonumuzu kaydedip çıkıyoruz.
Blogumuza Resim Eklerken:
Yukardaki 7 maddeyi uyguladıktan sonra yapmanız gereken hangi resme hangi efekti uygulayacağınıza karar vermek.Aşağıda verdiğimiz efekt kodlarından uygulamak istediğinize kodu uygulamanız yeterli.
Normalde blogunuza eklediğiniz bir resmin html kodu aşağıdaki gibidir.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0M1NWnM3-looEQjQlygGxd2DQ6fOmUoTMxy77Utk4ey6-zpRkaGvxMsz4Rjw1P69oBKQM4817a0ZqYIIlZwELwFe56v0yZNdZOa0fSanCxsQr5VfhwNpeCQ-6RMS_64JEdY8I44IcjvCe/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0M1NWnM3-looEQjQlygGxd2DQ6fOmUoTMxy77Utk4ey6-zpRkaGvxMsz4Rjw1P69oBKQM4817a0ZqYIIlZwELwFe56v0yZNdZOa0fSanCxsQr5VfhwNpeCQ-6RMS_64JEdY8I44IcjvCe/s1600/image-effects-image-2.png" /></a></div>

Eğer eklediğiniz resme efekt vermek istiyorsanız bu resim koduna aşağıda gösterdiğimiz yere class="effect1" kodunu eklemeniz yeterli olacaktır.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0M1NWnM3-looEQjQlygGxd2DQ6fOmUoTMxy77Utk4ey6-zpRkaGvxMsz4Rjw1P69oBKQM4817a0ZqYIIlZwELwFe56v0yZNdZOa0fSanCxsQr5VfhwNpeCQ-6RMS_64JEdY8I44IcjvCe/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="effect1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0M1NWnM3-looEQjQlygGxd2DQ6fOmUoTMxy77Utk4ey6-zpRkaGvxMsz4Rjw1P69oBKQM4817a0ZqYIIlZwELwFe56v0yZNdZOa0fSanCxsQr5VfhwNpeCQ-6RMS_64JEdY8I44IcjvCe/s1600/image-effects-image-2.png" /></a></div>

Yukarıda verdiğimiz 5 adet efekt türünden hangisini uygulamak istiyorsanız ona göre kırmızıyla belirttiğimiz class="effect1"kodunu düzenliyoruz.
Blogger Resim Efekti 1 için: class="effect1"
Blogger Resim Efekti 1 için: class="effect2"
Blogger Resim Efekti 1 için: class="effect3"
Blogger Resim Efekti 1 için: class="effect4"
Blogger Resim Efekti 1 için: class="effect5" kodlarını kullanıyoruz.
Örnek olarak eklediğimiz resme 4 numaralı blogger resim efektini uygulamak istiyoruz.
Normalde eklediğimiz resmin kodu aşağıdaki gibidir.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0M1NWnM3-looEQjQlygGxd2DQ6fOmUoTMxy77Utk4ey6-zpRkaGvxMsz4Rjw1P69oBKQM4817a0ZqYIIlZwELwFe56v0yZNdZOa0fSanCxsQr5VfhwNpeCQ-6RMS_64JEdY8I44IcjvCe/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0M1NWnM3-looEQjQlygGxd2DQ6fOmUoTMxy77Utk4ey6-zpRkaGvxMsz4Rjw1P69oBKQM4817a0ZqYIIlZwELwFe56v0yZNdZOa0fSanCxsQr5VfhwNpeCQ-6RMS_64JEdY8I44IcjvCe/s1600/image-effects-image-2.png" /></a></div>

Resmimizi efektli hale getirmek için koda aşağıda renkli olarak gösterdiğim class="effect4"kodunu ekliyoruz.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0M1NWnM3-looEQjQlygGxd2DQ6fOmUoTMxy77Utk4ey6-zpRkaGvxMsz4Rjw1P69oBKQM4817a0ZqYIIlZwELwFe56v0yZNdZOa0fSanCxsQr5VfhwNpeCQ-6RMS_64JEdY8I44IcjvCe/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="effect4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0M1NWnM3-looEQjQlygGxd2DQ6fOmUoTMxy77Utk4ey6-zpRkaGvxMsz4Rjw1P69oBKQM4817a0ZqYIIlZwELwFe56v0yZNdZOa0fSanCxsQr5VfhwNpeCQ-6RMS_64JEdY8I44IcjvCe/s1600/image-effects-image-2.png" /></a></div>

Bu işlemden sonrra Blogger Resim Efekti Ekleme işlemimiz tamamlanmış oluyor.

Devamını Oku>>

19 Eylül 2012 Çarşamba

blogger navbar kaldirma

23:04 Unknown Yorum

Bloğunuza orjinal bir site havası vermek için Bloggerden Navbarı nasıl kaldırabileceğinizi anlatacağım;Öncelikle Şablon>Htmlyi Düzenle kısmından, Şablon html kodumuzun yazılı olduğu kısma geliyoruz.Ctrl+F tuşuna basıp şablon içerisinde ]]></b:skin> kodunu aratıp buluyoruz.Aşşağıdaki kodu kopyalayıp bulduğumuz ]]></b:skin> kodundan önceki kısma yapıştırıyoruz.

Devamını Oku>>

.

16 Eylül 2012 Pazar

Blogger Yazar ve Yönetici Ekleme

11:35 Unknown 18 comments

Bloğunuza sizden başka kimselerinde içerik göndermesine izin vererek, bloğunuzun daha çok içeriğe sahip, daha güncel ve çeşitlilik bakımından daha zengin yazıları, farklı bakış açılarını ve bilgileri blogger aracılığıyla yayınlama imkanına sahipsiniz.Arkadaşlarınız veya tanımadığınız herhangi biri sizin bloğunuzda yazmak isterse ve sizde onaylanarsanız kişinin mail adresini girmeniz yeterli.

Devamını Oku>>

.

7 Eylül 2012 Cuma

Blogger Yatay Menu CSS3 ile Navigasyonlu

14:01 Unknown 12 comments

Daha önceden yayınladığımız blogger için yatay menüler serisine yenisini ekliyoruz.Eklemesi gayet basit bir o kadar kullanışlı olan CSS3 ile tasarlanmış ve html kodları içerisinde bir kelimelik kodu değiştirerek istediğiniz zaman rengini değiştirebileceğiniz blogger navigasyonlu yatay menüyü blogunuza eklemeyi anlatacağız.Blogger Navigasyonlu yatay menüyü blogunuza eklemek için;

DEMO GÖRÜNÜM

Devamını Oku>>

.

3 Eylül 2012 Pazartesi

HTML RENK KODU BULUCU

12:20 Unknown 2 comments

İstediğin rengin üzerini tıklarsanız html renk kodları kutucuklar içerisinde görünecektir.Yada elinizde olan bir HTML renk kodunun hangi renkte olduğunu görmek için kutu içerisine yapıştırıp UPDATE butonuna basın.

Devamını Oku>>

.

11 Ağustos 2012 Cumartesi

Blog Nasıl Açılır (Videolu Sesli Anlatim)

18:30 Unknown 5 comments

Sizde blog dünyasına girip birşeyler yazıp çizmek istiyorsanız, blogger üzerinden blog nasıl açabilirim? bloggerden blog açmak istiyorum, ne yapmam lazım? diyorsanız doğru adrestesiniz dünyaca ünlü ilk blog sağlıyıcısı Blogger'i Google'ın satın alması ile önlenemez bir yükselişe geçti ve bayağı bir üyesi olduğu biliniyor.Türkçe desteği , ücretsiz Domain barındırma imkanı bloggeri cazip kılan seçeneklerin başında geliyor.(Eğer blog açacaksanız Bloggerden açmanızı şiddetle öneririm görebileceğiniz en iyi blog servislerinin en başlarında yer alır).Blog açmaya karar verdiyseniz ki bu yazıyı okuyarsanız karar vermişsiniz demektir; sizin için çektiğimiz ve düzenlediğimiz, sesli olarak anlatım yaptığımız, bloggerde blog nasıl açılır adlı videomuzu izlediğinizde sizde kendinize özgü bir blog açabilir ve paylaşmak istediklerinizi blogunuza yazıp, blog yazarlığına ilk adımı atabilirsiniz.Bu konu ile ilgili sorunuz olursa ister konu altında bulunan yorumlardan istersenizde iletişim kısmından bize sorabilirsiniz.

Devamını Oku>>

31 Temmuz 2012 Salı

CSS Buton Yapimi

14:56 Unknown 2 comments

Hepimiz blogumuzda zaman zaman izle,demo görünüm,indir,bağlan yada farklı amaçlar için butonlar kullanıyoruz.Bugün sizlere farklı amaçlar için kullanabileceğimiz farklı boyutlarda ve renklerde butonlara ait CSSkodlarını vereceğiz.Butonlar görünüm olarak resimde gördüğünüz gibi, maus ile buton üstüne geldiğimizde buton içerisinde baloncuklar uçuşuyor, görünüm olarak gerçekten çok şık ve bir okadarda kullanışlı olan butonları uygulayacağınız birkaç basit işlem sonrasında sizde blogunuzda kullanabilirsiniz. Blogger kullanıcıları için tasarlanmış olan,resimde ve aşağıda örnek olarak gördüğünüz butonları blogunuza uygulamak için:
ÖRNEK ÖRNEK ÖRNEK ÖRNEK

Blogger Buton için CSS kodlarını blogumuza ekliyeceğiz.

Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edin
Widget Şablonlarını genişlet kutucuğunu işaretleyin
HTML kodları içerisinde]]></b:skin>kodunu Ctrl+F yardımı ile aratıp bulun.
Aşağıdaki kodu kopyalayarak bulduğumuz]]></b:skin> kodundan önceki kısma yapıştırın.

.button {
    font: 15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
    text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    cursor: pointer;
    padding: 10px 20px;
    background-repeat: no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
    background-position: bottom left;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png');
/* Multiple backgrounds version. The background images
are defined individually in color classes */
    background-position: bottom left, top right, 0 0, 0 0;
    background-clip: border-box;
/* Applying a default border raidus of 8px */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
/* A 1px highlight inside of the button */
    -moz-box-shadow: 0 0 1px #fff inset;
    -webkit-box-shadow: 0 0 1px #fff inset;
    box-shadow: 0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.button:hover {
/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
    background-position: top left;
    background-position: top left, bottom right, 0 0, 0 0;
}

.button:active {
/* Moving the button 1px to the bottom when clicked */
    bottom: -1px;
}
/* The three buttons sizes */
.button.big {
    font-size: 30px;
}

.button.medium {
    font-size: 18px;
}

.button.small {
    font-size: 13px;
}
/* A more rounded button */
.button.rounded {
    -moz-border-radius: 4em;
    -webkit-border-radius: 4em;
    border-radius: 4em;
}
/* Defining four button colors */
/* BlueButton */
.blue.button {
    color: #0f4b6d !important;
    border: 1px solid #84acc3 !important;
/* A fallback background color */
    background-color: #48b5f2;
/* Specifying a version with gradients according to */
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.button:hover {
    background-color: #63c7fe;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button {
    color: #345903 !important;
    border: 1px solid #96a37b !important;
    background-color: #79be1e;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}

.green.button:hover {
    background-color: #89d228;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button {
    color: #693e0a !important;
    border: 1px solid #bea280 !important;
    background-color: #e38d27;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}

.orange.button:hover {
    background-color: #ec9732;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}

.gray.button {
    color: #525252 !important;
    border: 1px solid #a5a5a5 !important;
    background-color: #a9adb1;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}

.gray.button:hover {
    background-color: #b6bbc0;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4bjrpMgMwpSB4dJlz6NOvKFnxgv6XDjitdWDZyivYDcDNsHUycQyvt8xqwp1o7CdPKCzuPxbMW-ZSUmX6XfUjrnxI57MV4dbi_6O0Ee-RFiq6_nyQyFHNJX4mcGsz5GU3qOw4p72-p0/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

Blogger Buton için Html Kodlarımızı Ekliyeceğiz:Aşağıda gördüğümüz kodlardan hangi boyut ve rengi istiyorsak ona ait kodu butonun görünmesini istediğimiz yere html modundayken yapıştırıyoruz.

1.Big Button için Html Kodları (Buton Rengine Göre bir kod seçin)

<a href="Buton Linki Buraya" class="button big blue">Buton Metni</a>
<a href="Buton Linki Buraya" class="button big green">Buton Metni</a>
<a href="Buton Linki Buraya" class="button big orange">Buton Metni</a>
<a href="Buton Linki Buraya" class="button big gray">Buton Metni</a>

2.Medium Button için Html Kodları ( Buton Rengine Göre bir kod seçin )

<a href="Buton Linki Buraya" class="button blue medium">Buton Metni</a>
<a href="Buton Linki Buraya" class="button green medium">Buton Metni</a>
<a href="Buton Linki Buraya" class="button orange medium">Buton Metni</a>
<a href="Buton Linki Buraya" class="button gray medium">Buton Metni</a>

3.Small Button için Html Kodları ( Buton Rengine Göre bir kod seçin )

<a href="Buton Linki Buraya" class="button small blue">Buton Metni</a>
<a href="Buton Linki Buraya" class="button small green">Buton Metni</a>
<a href="Buton Linki Buraya" class="button small orange">Buton Metni</a>
<a href="Buton Linki Buraya" class="button small gray">Buton Metni</a>

4.Small Rounded Button için Html Kodları ( Buton Rengine Göre bir kod seçin )

<a href="Buton Linki Buraya" class="button small blue rounded">Buton Metni</a>
<a href="Buton Linki Buraya" class="button small green rounded">Buton Metni</a>
<a href="Buton Linki Buraya" class="button small orange rounded">Buton Metni</a>
<a href="Buton Linki Buraya" class="button small gray rounded">Buton Metni</a>

Devamını Oku>>

................................Reklam...............................