Blogger Popüler Yayınlar Gadgeti Hareketli

Merhaba Arkadaşlar ,bugün sizlere bloguzda uygalayabileceğiniz Popüler Yayınlar Eklentisinde bahsedeceğim.Üzerine geldiğimizde dönen ve widget olarak sadece resmin bulunduğu eklentiyi hemen anlatmaya başlayayım.

İlk olarak aşağıdaki kodu bulalım:

]]></b:skin>

Kodu bulduktan sonra hemen üstüne aşağıdaki kodu ekliyoruz.

#PopularPosts1{max-width:300px} #PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0} #PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);} #PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

Ve sonra Yerleşim kategorisinden yeni bir popüler yayınlar eklentisi oluşturuyoruz.

Sonra Şablon > Html Düzenle diyoruz ve aşağıdaki kodu aratıyoruz.


<b:widget id='PopularPosts1' locked='false' title='Popular Posts'type='PopularPosts'/>

Bu kodlarla değiştiriyoruz.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2> <data:title/></h2> </b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <dd> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'> <a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'> <data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'> <a expr:href='data:post.href'><data:post.title/></a></div> </div> <div style='clear: both;'/> <b:else/> <!-- (4) Show snippets and thumbnails --> <b:if cond='data:post.thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a> <b:else/> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='60px'/></a> </b:if> </b:if> </b:if> </dd> </b:loop> </ul> <div class='clear'/> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Yardım için yoruma yazabilirsiniz...

Logo Tasarlarken Nelere Dikkat Edilmeli

Merhaba Arkadaşlar,bu yayınımda sizlere logo tasarlarken nelere dikkat etmeliyiz onlardan bahsedeceğim.

1. Boyutları

Logolarınızı yaptırırken logonun kullanım amacı belli olmalıdır. Bazı logolar sadece internet sitelerinde kullanılır, bazıları ise fatura, matbu, antetli kağıt gibi baskı ürünlerinde kullanılır. İnternet sitelerinde kullanılan logoların oranları fazla abartılı olmamalıdır. Ama baskıürünlerindekullanılacak logoların çözünürlükleri yüksek olmalıdır. Bunun nedeni ise logonun ürünler üzerine basıldığındaki görüntü kalitesidir. İnternet sitelerinde kullanılan logolar ortalama 72 dpi, baskıda kullanılan logolar ise 300 dpi olmalıdır. Ancak günümüzde logoların genellikle vektörel olarak hazırlanıyor olması bu farklılıkları kısmen ortadan kaldırmıştır diyebiliriz.

2. Logoda Sadelik

İnternette veya reel hayatta bir çok firmanın ve kişilerin logoları ile karşılaşıyoruz. Bu logoların bazısı dikkatimizi çok çeker, bazılarını ise hiç fark etmeyiz. Bütün kaliteli logoların en önemli özelliği sadelikleridir. İnsanların ilgilerini sade ve basit logolar çeker. Çünkü bu tür logolarda verilmek isteneni kolayca görebilmek mümkündür. 

3. Renk Kullanımı

Günlük hayatta ve internette karşılaştığımız logoların %80'ni sadece bir veya iki renk tonu kullanılarak yapılmıştır. Kaliteli logolarda nadiren üç renk kullanılır. Bunun amacı ise renkler ne kadar çoğalırsa logonun bulamaya dönüşmesi ve tamamen karmaşıklaşmasıdır. 

4. Yazı Stilleri

Logo tasarlanırken ilginç ve kolay bulunmayan yazı tipleri kullanmaya çalışanlarla sık karşılaşıyoruz. Bu durum logoları çok kaliteli gösterebilir, ancak logoların yazıları okunamadığında logonun bir anlamı kalmaz. Bu aşamada en iyi seçenek kolay bulunabilen ve okunması kolay olan yazı tiplerinin kullanılmasıdır. 

5. Özgünlük

Logonun amacı temsil ettiği ürünü, firmayı, kişiyi vb. açıkca belli etmelidir. Rakiplerinden ayırt edilmeli ve akılda kalıcı olmalıdır. Bunun için logo özgün olmalı ve sadece tasarlandığı şeyi yansıtmalı. 

6. Pratik, Kullanılabilir ve Uydurulabilir

Bu aşama ise logonuzun her ortama uygun olmasıdır. Bu yöntem ile baskı maliyetini de düşürebilirsiniz. Logonuzda arkaplan olmamalı, çünkü kullanması zor olabilir.

7. Kişiliğini yansıtmalı

Logo bir firmayı, ürünü, kişiyi (tasarlandığı nesneyi) iyi tanıtmalıdır. Kim oldukları, ne iş yaptıkları, nasıl çalıştıkları gibi sorulara cevap niteliğinde olmalıdır.

8. Sektöre uygun olmalı

Aynı sektördeki firmaların logo tasarımlarında bazı benzer özellikler olduğu görülebilir. Bu logonun özgünlüğünü kaybetmesi anlamına gelmez. Bir renk tonu bile sektörü temsil edebilir. 

Kısacası;

• Gerçekten gerekli olmayan her şeyi atın.

• Karakter büyük anneniz tarafından bile okunabilmeli

• Logo tasarımı algılanabilir olmalı.

• Logo tasarımı için benzersiz bir şekil yaratın.

• Ailenizin ve arkadaşlarınızın logo hakkındaki görüşlerini umursamayın.

• Logonuzu 3’den fazla kişi tarafından beğenildiğine emin olun..

• Populer logolardan parçalar toplayarak bunların sizin orijinal işiniz olduğunu iddia etmeyin.

• Hiçbir koşul altında klipart kullanmayın.

• Logo tasarımı siyah beyaz da hoş gözükmeli.

• Logonun tersten de algılanabildiğine emin olun.

• Logonun boyutu değiştiğinde de algılandığından emin olun.

• Güncel logo tasarımı trendlerini umursamayın. Bunun yerine her zaman kullanılabilecek bir logo tasarlayın.

• Logoda özel efekt kullanmayın (örn; degrede, gölge, yansıma….).

• Mümkünse logoyu bir karenin içine sığacak şekilde tasarlayın.

• Karışık ayrıntılardan sakının

• Logonun kullanılabileceği muhtemel ortam ve yerleri gözününde bulundurun.

• Donuk ve ince yerine kalın ve güvenli olun.

• Mükemmel bir logo tasarlamayacağınızı kabul edin.

• Keskin (sharp) işler için keskin, yumuşak (smooth) işler için yumuşak çizgiler kullanın.

• Logo tasarımı sektörle ilişkili olmalı.

• Resimden logo olmaz.

• Müşterilerinizi sunumla şaşırtmalısınız

• İkiden fazla yazı karakteri kullanmayın.

• Logonun bütün parçaları sağa, sola, merkeze, yukarıya veya aşağıda hizalanmalıdır.

• Logo tasarımı tek parça gözükmeli.

• Logoyu düşünmeden önce logoya kimlerin bakacağını düşünün.

• Her zaman yenilik yerine işlevselliği seçin.

• Marka ismi akılda kalıcıysa logo marka ismi olmalı.

• Logo yansıtıldığında da anlaşılabilmeli.

• Büyük şirketler bile küçük logolara ihtiyaç duyarlar.

• Sadece logoyu kullanacak işletme değil, herkes logodan hoşlanmalı.

• Hazırladığınız logoyu değişik biçimlerde deneyin. Daha fazla deneme daha iyiye yaklaştıracaktır.

• Logo çeşitli zeminlerde uyumlu gözükmeli.

• Logo kolaylıkla tarif edilebilmeli.

• Logoda “tagline” kullanmayın.

• Bilgisayarda çizmeden önce logoyu kağıt üzerinde çizin.

• Tasarımın basit olmasına özen gösterin.

• Dünya ve “swoosh” (nike logosu) sembolü kullanmayın.

• Logo tasarımı dikkati başka tarafa çekmemeli.

• Sunumunda dürüst olmalı.

• Logo tasarımı görsel olarak orantılanmış olmalı

• Parlak neon renklerden ve karanlık, donuk renklerden kaçının.

Photoshop 87 Adet Yazı Fontu

 Photoshop'ta kullanabileceğiniz 87 adet fontu.Koleksiyonun boyutu 13 MB gibi düşük bir boyuttadır, genellikle tasarımcılara yönelik yazı tipleridir. Tamamı .TTF formatındadır, 

İndir

Photoshop'a Font Nasıl Yüklenir ?

Merhaba Arkadaşlar,bu yayınımda sizlere Photoshop'a yazı fontlarını nasıl ekleriz onu göstereceğim.

 Adım 1:Photoshop için yazı fontlarını indiriyoruz.Yazı fontlarını bu yayınımdan indirebilirsiniz.

Adım 2:Denetim Masası'na girip ordan Yazı Tipleri kategorisine tıklayıp fontları oraya atıyorsunuz.

Daha Sonra Photoshop'u tekrar başlatıyoruz ki fontlar aktif olsun.

Resimli Anlatım

1.

2.

3.

Resimlere Saydamlık Efekti Verme

Merhaba Arkadaşlar ,bugün sizlere blogunuzda resimlerine saydamlık efekti vermeyi göstereceğim.

 Aslında bu kod popüler olarak birçok web sitesinde ve blog teması içerisinde kullanılıyor.

Görsel bir dosya üzerinde fare yokken soluk bir halde kalıyor ve biz üzerine faremizleyaklaştığımızda tıklama yapmasak dahi görsel kendi rengine dönüyor. 

Peki, bu  kodu nasıl işleve sokabiliriz? Aslında oldukça basit. Hemen aşağıda yer alan kod ile dilediğiniz görsele Blogger içerisinde saydamlık efektini verebilirsiniz. Aşağıda yer alan kodun içerisinden "resimadi.jpg" adresine istediğiniz görselin linkini vermeniz ve istediğiniz yere eklemeniz yeterli.

<img src="resimadi.jpg" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Blogger En Çok Yorum Yapanlar Eklentisi

Merhaba Arkadaşlar, bugün yayınımda sizlere blogunuzda ziyaretçilerinizden en çok yorum yapanları görmenizi sağlayacak eklentiden bahsedeceğim.

Blogunuza eklemek için Bloggerınızın Click Kumanda Panelinden Yerleşimi seçip Gadget Ekle diyoruz daha sonra Temel sekmesinden HTML/JavaScript diyoruz ve kodu ekliyoruz.

<style type="text/css"> .top-commenter-line {margin: 3px 0;} .top-commenter-line .profile-name-link {padding-left:0;} .top-commenter-avatar {vertical-align:middle;} </style> <script type="text/javascript"> // CONFIG: var maxTopCommenters = 8; // how big a list of top commentators var minComments = 1; // how many comments must top commentator have at least var numDays = 0; // from how many days (ex. 30), or 0 from "all the time" var excludeMe = true; // true: exclude my own comments var excludeUsers = ["Anonymous", "someotherusertoexclude"]; // exclude these usernames var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames // var txtTopLine = '<b>[#].</b> [image] [user] ([count])'; var txtNoTopCommenters = 'No top commentators at this time.'; var txtAnonymous = ''; // empty, or Anonymous user name localized if you want to localize // var sizeAvatar = 28; var cropAvatar = true; // var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcZ3sYVPzaylzqP4P5wuebbCD6253Wc-OTa7b2QzHeGLbHV8jtaV53ZxRYIS7HomMPWC2O4IrBoI7TbBV8WgKuv3Ueb6OHzj0HWLUDYqFGPnmUnV_5YPCJaRPKK9tFR8SM5VvYmuFlXOs/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar; var urlMyProfile = ''; // set if you have no profile gadget on page var urlMyAvatar = ''; // can be empty (then it is fetched) or url to image // config end // for old IEs & IE modes: if(!Array.indexOf) { Array.prototype.indexOf=function(obj) { for(var i=0;i<this.length;i++) if(this[i]==obj) return i; return -1; }} function replaceTopCmtVars(text, item, position) { if(!item || !item.author) return text; var author = item.author; var authorUri = ""; if(author.uri && author.uri.$t != "") authorUri = author.uri.$t; var avaimg = urlAnoAvatar; var bloggerprofile = "http://www.blogger.com/profile/"; if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile) avaimg = author.gd$image.src; else { var parseurl = document.createElement('a'); if(authorUri != "") { parseurl.href = authorUri; avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname; } } if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "") avaimg = urlMyAvatar; if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "") avaimg = urlNoAvatar; var newsize="s"+sizeAvatar; avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/"); if(cropAvatar) newsize+="-c"; avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/"); var authorName = author.name.$t; if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar) authorName = txtAnonymous; var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />'; if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>'; if(maxUserNameLength > 3 && authorName.length > maxUserNameLength) authorName = authorName.substr(0, maxUserNameLength-3) + "..."; var authorcode = authorName; if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>'; text = text.replace('[user]', authorcode); text = text.replace('[image]', imgcode); text = text.replace('[#]', position); text = text.replace('[count]', item.count); return text; } var topcommenters = {}; var ndxbase = 1; function showTopCommenters(json) { var one_day=1000*60*60*24; var today = new Date(); if(urlMyProfile == "") { var elements = document.getElementsByTagName("*"); var expr = /(^| )profile-link( |$)/; for(var i=0 ; i<elements.length ; i++) if(expr.test(elements[i].className)) { urlMyProfile = elements[i].href; break; } } if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) { var entry = json.feed.entry[i]; if(numDays > 0) { var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601 var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]); //Calculate difference btw the two dates, and convert to days var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day)); if(days > numDays) break; } var authorUri = ""; if(entry.author[0].uri && entry.author[0].uri.$t != "") authorUri = entry.author[0].uri.$t; if(excludeMe && authorUri != "" && authorUri == urlMyProfile) continue; var authorName = entry.author[0].name.$t; if(excludeUsers.indexOf(authorName) != -1) continue; var hash=entry.author[0].name.$t + "-" + authorUri; if(topcommenters[hash]) topcommenters[hash].count++; else { var commenter = new Object(); commenter.author = entry.author[0]; commenter.count = 1; topcommenters[hash] = commenter; } } if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) { ndxbase += 200; document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>'); return; } // convert object to array of tuples var tuplear = []; for(var key in topcommenters) tuplear.push([key, topcommenters[key]]); tuplear.sort(function(a, b) { if(b[1].count-a[1].count) return b[1].count-a[1].count; return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1; }); // list top topcommenters: var realcount = 0; for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) { var item = tuplear[i][1]; if(item.count < minComments) break; document.write('<di'+'v class="top-commenter-line">'); document.write(replaceTopCmtVars(txtTopLine, item, realcount+1)); document.write('</d'+'iv>'); realcount++; } if(!realcount) document.write(txtNoTopCommenters); } document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>'); </script>

Kaydedin ve artık sizde bu eklentiye sahipsiniz.
var maxTopCommenters = 8; kodu ile eklentinin en çok yorum yapan kaç kullanıcıyı göstereceğini ayarlayabilirsiniz.
var sizeAvatar = 28; kodu ile de kullanıcıların görsellerinin boyutunu ayarlayabilirsiniz.

Blogger Blogunu Baska Bir Adrese Yönlendirme

Merhaba Arkadaşlar, bugün sizlere blogunuzun adresini başka bir adrese yönlendirmeden bahsedeceğim.Bir blogu farklı bir bloga yönlendirme birçok kullanıcının ihtiyacıdır.Mesela öylesine açtığınız bir blogun ziyaretçi sayısının arttığını gördünüz ve blogunuzun daha gelişmiş olan sitenize yönlendirmek istiyorsunuz ki ziyaretçilerinizi kaybetmek istemeyesiniz.

Bunun için aşağıda vereceğim html kod ile blogunuzu istediğiniz siteye yönledirebilirsiniz.

Öncelikle şablon panelinizden kullandığınız Şablon > HTML 'yi düzenlemeye girin ve CTRL+F tuşlarına basarak <head> kodunu sayfa içerisinde aratın. Bulduğunuz kodun hemen altına ise;

<meta HTTP-EQUIV='REFRESH' content='5; url=www.yönlendireceğinizsite.com'/>

kodunu ekleyin ve yönlendireceğinizsite.com kısmını yeni web sitenizin adresine göre düzenleyin. content='5 kodu ile oynama yaparak siteye kaç saniye de yönlendirilmesini de ayarlayabilirsiniz. Kaydetmenizin ardından artık blogunuz yeni adresine yönlenecek. Böylece hit de kaybetmeyeceksiniz.

Blogger Sayfa Numaralandırma Eklentisi

Merhaba Arkadaşlar, bugün sizlere bloggerınızda sayfa numaralandırma eklentisinden bahsedeceğim.Hazır tema kullanan bazı kullanıcılar ileri sayfa veya önceki sayfa temada bulunmadığından şikayet etmiştir.Bu sorunun çözümünü aşağıda bahsedeceğim.

Şimdi bloggerınızın admin paneline gelin Şablon > HTML 'yi Düzenle diyip Ctrl+F tuşlarına basarak  ]]></b:skin> kodunu arayıp hemen üstüne aşağıdaki kodu ekleyin.

showpageNum a { font-size:14px;font-weight:bold; color:#006699; border:1px solid #CCC; padding-top:2px; padding-left:3px; padding-right:3px; margin-left:2px; margin-right:2px; } .showpageNum a:hover { text-decoration:none; color:#3c78a7; border:1px solid #1584d9; background:#f0f4f7; } .showpagePoint { background:#3c78a7; font-size:14px;font-weight:bold; padding-top:2px; padding-left:3px; padding-right:3px; color:#fff; border:1px solid #CCC; } .showpageOf { clear:both; padding:15px; text-align:center; font-size:12px; font-weight:bold; color:#999; } .showpage a { font-size:14px;font-weight:bold; padding-top:2px; padding-left:3px; padding-right:3px; color:#006699; border:1px solid #CCC; } .showpage a:hover { border:1px solid #1584d9; text-decoration:none; }

Bu kodları ekledikten sonra  bir de </body> bulup, bununda hemen önüne şu kodu ekleyeceğiz;


<script type=’text/javascript’> var home_page=”/”; var urlactivepage=location.href; var postperpage=7; var numshowpage=4; var upPageWord =’Önceki'; var downPageWord =’Sonraki'; </script> <script src=’http://www.tambilgi.net/wp-content/uploads/eklentiler/pagenumbers.js’ type=’text/javascript’></script>

Daha kaydedip blogumuza bakıyoruz. 

Not:Konu Alıntıdır.

Blogger Temalarında Ki Kayma Sorunu

Merhaba Arkadaşlar , bu yayınımda sizlere blogger temalarını yüklediğimizde bazı kaymalar meydana geliyor.Bu kod sayesinde bu sorundan kurtulmuş olacağız.

Aşağıdaki kodu <body> den sonra ekleyin.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> $("[href$='css_bundle.css']").remove(); </script>

Yardım için yoruma yazabilirsiniz...

Blogger Resimlere Siyahlık Efekti Verme

Merhaba Arkadaşlar, bu yayınımda sizlere blogger resimlerinize siyahlık efekti vermeyi gösrereceğim.

Bloggerınızda resim normalde siyah-beyaz gözükecek üzerine geldiğinizde orjinal rengine dönecek.

Şablondan aşağıdaki kodu buluyoruz.
]]></b:skin>

Daha sonra hemen üstüne aşağıdaki kodu yapıştırıyoruz.

.post img { filter:grayscale(1); -webkit-filter:grayscale(1); -moz-filter:grayscale(1); -o-filter:grayscale(1); -ms-filter:grayscale(1); } .post img:hover { filter:grayscale(0); -webkit-filter:grayscale(0); -moz-filter:grayscale(0); -o-filter:grayscale(0); -ms-filter:grayscale(0); }

Hepsi bu kadar...

Blogger Son Yorumlar Eklentisi

Merhaba Arkadaşlar,bu yayınımda sizlere Bloggerına ekleyebileceğiniz son yorumlar eklentisinden bahsedeceğim.Yorumun üzerine gelince büyüyen bu eklenti sitenizde hoş bir hava yaratacaktır.

Blogunuza eklemek için Bloggerınızın Click Kumanda Panelinden Yerleşimi seçip Gadget Ekle diyoruz daha sonra Temel sekmesinden HTML/JavaScript diyoruz ve kodu ekliyoruz.

Sitene Ekle

<style type="text/css"> ul.btt_recent_comments { list-style: none; margin: 0; padding: 0; } .btt_recent_comments li { -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s; border: 2px solid transparent; } .btt_recent_comments li:hover { -webkit-transform: scale(1.2) translate(15px); -moz-transform: scale(1.2) translate(15px); -ms-transform: scale(1.2) translate(15px); -o-transform: scale(1.2) translate(15px); transform: scale(1.2) translate(15px); box-shadow: 0 0 20px 1px #aaa;} .btt_recent_comments li { background: none!important; margin: 5px!important; padding: 5px!important; display: block; clear: both; overflow: hidden; list-style: none; } .btt_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; } .btt_recent_comments li img { padding: 0; position: relative; overflow: hidden; display: block; } .btt_recent_comments li span { margin-top: 3px; color: #666; display: block; font-size: 12px; line-height: 1.4; } #btt_recent_comments .info { text-align: right; height:1.2em!important; overflow:hidden; line-height: 1em!important; } #btt_recent_comments .info a { font-weight: bold; font-size: 11px; color: #AAA; display:none; } #btt_recent_comments:hover .info a { display:inline!important; } </style> <script type="text/javascript"> //<![CDATA[ // Recent Comments Settings var numComments = 5, showAvatar = true, avatarSize = 45, roundAvatar = true, characters = 40, showMorelink = false, moreLinktext = "More ?", defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijRAfg3tJcOoWp_4NYl_fmp1AScgZIXR1ck2letOoIcAvbzOHAFD1iR-SdH7gJGsoiOYCoLb3m9d8QvMD1lsdE0V_-pHvyT7JN3i7KcIEec10k8EhR28amo9So5qb4-wYitNwt7zvwIT-c/s320/avatar.png", hideCredits = true; //]]> </script> <script type='text/javascript'> //<![CDATA[ eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('9 G=G||5,8=8||1z,w=w||1w,m=m||"j://V.L.g/1i/?d=1b",F=F||" 1c &1D;",x=(A x===\'B\')?h:x,o=(A o===\'B\')?Q:o,q=(A q===\'B\')?h:q,r=(A r===\'B\')?Q:r;18 14(C){9 7;7=\'<r J="14">\';U(9 i=0;i<G;i++){9 z,y,2,k;4(i==C.O.e.D)X;7+="<10>";9 e=C.O.e[i];U(9 l=0;l<e.E.D;l++){4(e.E[l].19==\'1a\'){z=e.E[l].v;X}}y=e.M[0].1x.$t;2=e.M[0].1E$16.N;4(2.f("/P/")!=-1){2=2.p("/P/","/s"+8+"-c/")}b 4(2.f("/S/")!=-1){2=2.p("/S/","/s"+8+"-c/")}b 4(2.f("/T-c/")!=-1&&2.f("j:")!==0){2="j:"+2.p("/T-c/","/s"+8+"-c/")}b 4(2.f("H.g/n/17-W.I")!=-1){2="j://3.Y.Z.g/-1d-1e/1f/1U/1g/s"+8+"/1h.11"}b 4(2.f("H.g/n/1j-W.I")!=-1){2="j://3.Y.Z.g/-1k/1l/1m/1n/s"+8+"/1o.11"}b 4(2.f("H.g/n/1p.I")!=-1){4(m.f("L.g")!=-1){2=m+"&s="+8}b{2=m}}b{2=2}4(x===h){4(q===h){k="1q"}b{k=""}7+="<12 J=\\"1s "+k+"\\"><n J=\\""+k+"\\" N=\\""+2+"\\" 1t=\\""+y+"\\" 1u=\\""+8+"\\" 1v=\\""+8+"\\"/></12>"}7+="<a v=\\""+z+"\\">"+y+"</a>";9 13=e.1y.$t;9 6=13.p(/(<([^>]+)>)/1A,"");4(6!==""&&6.D>w){6=6.1B(0,w);6+="&1C;";4(o===h){6+="<a v=\\""+z+"\\">"+F+"</a>"}}b{6=6}7+="<u>"+6+"</u>";7+="</10>"}7+=\'</R>\';9 K="";4(r===h){K="15:1F;"}7+="<u 1G=\\"1H-1I:1J;15:1K;1L-1M:1N;"+K+"\\">1O 1P <a v=\\"j://V.1Q.1R/\\">1S</a></u>";1T.1r(7)}',62,119,'||authorAvatar||if||commBody|commentsHtml|avatarSize|var||else|||entry|indexOf|com|true||http|avatarClass||defaultAvatar|img|showMorelink|replace|roundAvatar|hideCredits|||span|href|characters|showAvatar|authorName|commentlink|typeof|undefined|btt|length|link|moreLinktext|numComments|blogblog|gif|class|hideCSS|gravatar|author|src|feed|s1600|false|ul|s220|s512|for|www|rounded|break|bp|blogspot|li|png|div|commHTML|btt_recent_comments|display|image|b16|function|rel|alternate|mm|More|AaI8|1X32ZM|TxMKLVzQ5BI|QYau8ov2blE|btt_blogger_logo|avatar|openid16|9lSeVyNRKx0|TxMKMIqMNuI|AAAAAAAABYc|8iasY0xpLzc|btt_openid_logo|blank|avatarRound|write|avatarImage|alt|width|height|40|name|content|60|ig|substring|hellip|raquo|gd|none|style|font|size|10px|block|text|align|right|Widget|by|SoftGlad|com|SoftGlad|document|AAAAAAAABYY'.split('|'),0,{})) //]]> </script> <script src="/feeds/comments/default?alt=json&callback=btt_recent_comments&max-results=5" type="text/javascript"></script> <div id="btt_recent_comments"> <div class="info"> <a rel=”external” href="http://kodblogcum.blogspot.com.tr" title="Widget Info">Sitene Ekle</a></div> </div>

Yazıları veya Kodları Renkli Çerçevelerin İçine Alma

Merhaba Arkadaşlar bu yayınımda sizlere yazılarınızı veya kodlarınızı renk çerçevelerin içine alıp görselliğini biraz daha  artıracak kodu paylaşacağım.Kullanımı çok basittir.

Kod:

<pre style="background-color: #c2ddf3; border: 2px dashed rgb(235, 243, 251); overflow: auto; padding: 5px; text-align: justify; width: 629.6333618164063px;">BURAYA YAZACAĞINIZ YAZIYI VEYA KODU YAZINIZ<span style="font-size: 12px; line-height: 14px;"></span></pre>

Not:Çerçevenin arkaplan rengini değiştirmek için yukarıdaki kodda "background-color: #c2ddf3;" yazan yerdeki "#c2ddf3" yerine sizin istediğiniz renk kodunu yazıp kullanabilirsiniz.

Blogger Powered By Blogger yazısını kaldırma

Merhaba arkadaşlar bu yayınımda sizlere blogger platformunu kullanan kişilerin blogun en altında veya sağ tarafta widget olarak gösterilen "Powered By Blogger" yazısını görmüştür.Bazı kullanıcılar bu atıfı kaldırabilmek için bazı sıkıntılar çekmiştir.Bugün sizlere bu atıfın nasıl kaldırılacağını göstereceğim.

Herhalde hazır tema kullanan kullanıcılar Yerleşim panelinden atıfı kaldırmayı denemiştir.Fakat atıfın kapalı olduğunu farketmişsinizdir.Çoğu hazır temalarda bu sıkıntı vardır.

Powered By Blogger yazısını kaldırmak o kadar da zor bir şey değildir.Bunu sizlere iki yöntemle göstereceğim.

1.Yöntem 

İlk olarak Blogger Yönetici Paneline giriş yapın.
Daha sonra sol tarafta bulunan navigasyon menüsünden Şablon > Özelleştir'e tıklayın.
Şablon > Özelleştir menüsüne girdikten sonra açılan ekrandan
Adım 1 ve Adım 2 yi uygulayın

Şablon > Özelleştir menüsüne girdikten sonra açılan ekrandan Gelişmiş > CSS ekle seçeneğine tıklayın ve aşağıda ki kodu gerekli alana yapıştırıp kaydedin.

 #Attribution1{display:none;}

2.Yöntem Diyelim ki üstteki yöntem çalışmadı.O zaman bu yöntemi deneyeceğiz. İlk olarak Blogger Yönetici Paneline giriş yapın. Ardından Şablon > HTML'yi Düzenle'ye gelerek şablon'da Ctrl+F tuşuna basarak  'Attribution' u aratın.  Gerekli kodu arattıktan sonra aşağıda ki gibi bir yer gelecektir.

Attribution widgetini bulduktan sonra yukarıda ok ile gösterdiğin "true"
yazısını "false" olarak değiştirin.
Gerekli değişikliği yaptıktan sonra Yönetici Paneli > Yerleşim menüsüne girin ve Atıf'ı değiştire tıklayın. Aşağıda ki resimde gördüğünüz gibi Kaldır seçeneği çıkacaktır.

Kaldır seçeneğine tıklayarak Powered by blogger yazısını kaldırabilirsiniz.

Blog İçin Gerçek Zamanlı İstatistik Sayaçları

Web sitesi veya blog için, web sitenizde kaç ziyaretçi var öğrenmek istiyor musunuz? 

Klasik Widget
	<script id="_wauwkw">var _wau = _wau || []; _wau.push(["classic", "wh4jbwy8rtax", "wkw"]); (function() {var s=document.createElement("script"); s.async=true; s.src="http://widgets.amung.us/classic.js"; document.getElementsByTagName("head")[0].appendChild(s); })();</script>

Renkli Widget
	<script id="_waui3z">var _wau = _wau || []; _wau.push(["colored", "wh4jbwy8rtax", "i3z", "ffc20e000000"]); (function() {var s=document.createElement("script"); s.async=true; s.src="http://widgets.amung.us/colored.js"; document.getElementsByTagName("head")[0].appendChild(s); })();</script>
Not: Widgetin rengini değiştirmek için yukarıdaki kodda "ffc20e" yazan yere istediğiniz renk kodunu yazabilirsiniz.

Küçük Widget
	<script id="_waue82">var _wau = _wau || []; _wau.push(["small", "wh4jbwy8rtax", "e82"]); (function() {var s=document.createElement("script"); s.async=true; s.src="http://widgets.amung.us/small.js"; document.getElementsByTagName("head")[0].appendChild(s); })();</script>

Sekmeli Widget
	<script id="_wauiml">var _wau = _wau || []; _wau.push(["tab", "wh4jbwy8rtax", "iml", "left-middle"]); (function() {var s=document.createElement("script"); s.async=true; s.src="http://widgets.amung.us/tab.js"; document.getElementsByTagName("head")[0].appendChild(s); })();</script>

Blogunuz İçin Hazır Sosyal Paylaşım Eklentisi - 5

Blogunuza ekleyebileceğiniz hareketli sosyal paylaşım eklentisi.

Üzerine geldiğinizde sağ tarafa doğru açılan sosyal paylaşım eklentisi.

Blognuza eklemek için Bloggerınızın Click Kumanda Panelinden Yerleşimi seçip Gadget Ekle diyoruz daha sonra Temel sekmesinden HTML/JavaScript diyoruz ve kodu ekliyoruz.

• Facebook Takip Et 
• Twitter Takip Et
• Google+ Takip Et

<style> #buttonbg {width: 260px;margin: 10px 20px;padding: 0;} #buttonbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none; } #buttonbg .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqZqxKZtWXUZun2aC0H5fISPbAZ0kaFlb22oOcgcmaoHVKW_wqLYbKvuKzL3vlDYwIgkpcFichMtcqNMvcJ4jdEsrcro9r6i_iBZ9SAeE9hSgG3_7veHWVUi0Hekl95_lOASfpGVK7x50/s1600/blsocial12.png') 0 0 no-repeat; background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block; color: #141414;float: none;height: 48px;line-height: 48px; margin: 5px 0;position: relative;text-align: left;text-indent: 90px; text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5; -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out; -o-transition: width .25s ease-in-out, background-color .25s ease-in-out; transition: width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px; box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; text-decoration: none;} #buttonbg span:hover {visibility: hidden;} #buttonbg span {display: block;top: 15px;position: absolute;left: 90px;} #buttonbg .icon {color: #fafafa;overflow: hidden;} #buttonbg .fb {background-color: rgba(45,118,185, .42); background-position: 0 -382px;} #buttonbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;} #buttonbg .google {background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;} #buttonbg .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;} #buttonbg .linked {background-color: rgba(0, 87, 114, .42); background-position: 0 -574px;} #buttonbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;} #buttonbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;} #buttonbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;} #buttonbg li:hover .icon {width: 250px; } #buttonbg li:hover .icon {background-color: #d91e76; } #buttonbg li:hover .fb {background-color: #2d76b9;background-position: 0 2px;} #buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; } #buttonbg li:hover .google {background-color: #A70000;background-position: 0 -94px;} #buttonbg li:hover .pint {background-color: #C00;background-position: 0 -142px; } #buttonbg li:hover .linked {background-color: #005772;background-position: 0 -190px;} #buttonbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;} #buttonbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; } #buttonbg li:hover .rss {background-color: #EC5601;background-position: 0 -334px; } #buttonbg .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;} </style><div> <ul id="buttonbg"> <li ><a href="Facebook Adresiniz" class="icon fb">Facebook Takip Et </a><span>Facebook Takip Et</span></li> <li ><a href="Twitter Adresiniz" class="icon twit" >Twitter Takip Et </a><span>Twitter Takip Et</span></li> <li ><a href="Google+ Adresiniz" class="icon google" >Google+ Takip Et</a><span>Google+ Takip Et</span></li> </ul> </div>

# ile olan yerlere kendi sosyal medya adresinizi yazabilirsiniz...
Yardım için yoruma yazmanız yeterli..