Son Eklenenler
blogger eklentileri etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
blogger eklentileri etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Blogger Resimli Benzer Yazılar [Yeni]

Blogger Resimli Benzer Yazılar [Yeni]
Merhabalar, kullanmış olduğum benzer yazılardan biraz farklı olan ancak temel olarak bakıldığında aynı olan bu eklentiyi paylaşıyorum. Aslında eklentiyi WMAracı'nda gördüm ancak paylaşan arkadaş kodları hatalı çevirdiği için ekleyen arkadaşlar sıkıntı yaşıyordu. Buradan kodların düzenlenmiş halini bulabilirsiniz. Başlayalım diyorum :))

</head>

kodunu bulun ve üstüne aşağıdaki kodu ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts{width: 410px;margin-left: -22px;}
#related_posts h4{}
#relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px}
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none; margin:0; padding:0}
#relpost_img_sum li{border:1px solid #ccc; background:FFFEF7; margin:0 0 5px; padding:5px; height:65px; list-style:none}
#relpost_img_sum .news-title{display:block; font-weight:bold !important}
#relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}
#relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}
</style>
<script type='text/javascript'>//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 85;
var morelink = "daha fazlası ››";

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}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>


Bu adımları başarılı bir şekilde uyguladıysanız eklentimizin nerede gözükeceğini belirtmek için HTML kodlarını


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts' style='margin-top:35px;'>
<h3>Benzer Yazılar</h3>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='relpost_img_sum'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>
</b:if>


<post-footer>
<post-footer-line-1>

kodlarının altına ekleyin. Şablonu kaydedin ve CSS kodları ile oynayarak blogunuza uyumlu hale getirin. İyi bloglamalar.

Blogger'dan Yenilik: İletişim Formu Gadgetı

Her geçen gün kendini geliştiren ve sistemine yenilikler katan Blogger hepimizin ihtiyaç duyduğu İletişim Formu gadgetını ekledi.

Blogger da iletişim sağlamak için bir çok alternatif bulunmaktaydı. JotForm ve diğerleri... Ancak Blogger'a özel bu iletişim formu ile takipçileriniz sizlere direkt olarak mail yollayabilecek. Google Docs altyapısını kullanan bu gadget hem güvenilir hemde hızlı.


Bu gadgetı blogunuza eklemek için aşağıdaki adımları takip edebilirsiniz.

Blogger'dan Yenilik: İletişim Formu Gadgetı

Bu ekrandan sonra Kaydet diyerek işlemi tamamlayın ve iletişim formunu nereye yerleştirmek istiyorsanız oraya taşıyın.

Not: Mailler, Google hesabınıza bağlı olan GMail hesabınıza gelecek.

Blogger En Çok Yorumlanan Yazılar Eklentisi

Merhaba arkadaşlar, yine birbirinden güzel blogger eklentilerini sizlerle paylaşmaya devam ediyorum. Bugün ki eklentimizin amacını başlıktan da anladığınız gibi en çok yorum alan yazılarınızı sergilemek için kullanabilirsiniz.

<script type="text/javascript">
function getYpipePP(feed) {
document.write('<ul style="">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = "(" + feed.value.items[i].commentcount + " Yorum)";
var pList = "<li>&rsaquo;&rsaquo; " + "<a href="+ href + '">' + pTitle;
document.write(pList);
document.write(pComment); //to remove comment count delete this line
document.write('</a></li>');
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://aerakman.blogspot.com
&ShowHowMany=5
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript">
</script>

Eklentimizi, Yerleşim > Gadget Ekle > HTML/JavaScript adımlarını izleyerek ekleyebilirsiniz.Kodlar arasında mavi renk ile belirtmiş olduğum kısımı kendinize göre düzenleyebilirsiniz.

Blogger My Last Tweets Eklentisi


Bu eklenti sayesinde isminden de anlaşılacağı gibi blogunuzda son tweetlerinizi gösterebilirsiniz.  Bunun için aşağıda bulunan eklentiyi blogunuzda uygun bir yer eklemeniz yeterli olacaktır. İsterseniz HTML/JS gadgetına da ekleyebilirsiniz.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>   <script src="https://dl-web.dropbox.com/get/Photos/Alb%C3%BCm/jquery.marquee.js?w=AABSDeXRZSvjKf_Aw5Yvo_22U4Z4T-iaMZElKu92Sw06QA"></script>
<script type='text/javascript'>
//<![CDATA[
var Twitter = {
init: function () {
this.insertLatestTweets('ardaerakman');
},
insertLatestTweets: function (writershome) {
var limit = 5;
var url = 'https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=false&screen_name=' + writershome + '&count=' + limit + '&callback=?';
$.getJSON(url, function (data) {
var html = '<marquee behavior="scroll" scrollamount="1" direction="left">';
for (var i in data) {
html += '<a href="http://twitter.com/' + writershome + '#status_' + data[i].id_str + '">' + data[i].text + ' <i>' + Twitter.daysAgo(data[i].created_at) + '</i></a>';
}
html += '</marquee>';
$('#twitter p').replaceWith(html);
Twitter.fancyMarquee();
});
},
fancyMarquee: function () {
$('#twitter marquee').marquee('pointer')
.mouseover(function () {
$(this).trigger('stop');
})
.mouseout(function () {
$(this).trigger('start');
})
.mousemove(function (event) {
if ($(this).data('drag') == true) {
this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
}
})
.mousedown(function (event) {
$(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
})
.mouseup(function () {
$(this).data('drag', false);
});
},
daysAgo: function (date) {
if ($.browser.msie) {
return '1 day ago';
}
var d = new Date(date).getTime();
var n = new Date().getTime();
var numDays = Math.round(Math.abs(n - d) / (1000 * 60 * 60 * 24));
var daysAgo = numDays + ' gün önce';
if (numDays == 0) {
daysAgo = 'bugün';
}
else if (numDays == 1) {
daysAgo = ' dün';
}
return daysAgo;
}
};
Twitter.init();
//]]>
</script>


<style>
#top-bar{
width:100%;
height:30px;
background:#fff;
border:1px solid #000;
padding: 0 0 5px 0;

}
#twitter {
background:#6b6b6b url(http://m1304.hizliresim.com/18/w/mk43m.png)left center no-repeat ;
padding: 9px 5px 0px 45px;
margin: 0 0 0 0px;
overflow: hidden;
}
#twitter p,
#twitter marquee,
#twitter div {
float: left;
font: 13px bold helvetica, verdana, sans-serif;
margin: 0 10px 0 0;
padding: 0 0 9px 0px;
line-height: 1;
}
#twitter marquee a,
#twitter div a {
margin: 0 10px 0 0;
color: #fff;
text-decoration: none;
}
#twitter marquee a i,
#twitter div a i {
font-style: normal;
color: #00ACEE;
}
</style> <div id='twitter'><p> </p> </div>

Kodlar arasında kalın punto ile belirttiğim yerleri değiştirebilirsiniz. Ben bu değişkenlerin neye yaradıklarını sizlere anlatayım.

  • ardaerakman yerine kendi twitter kullanıcı adınızı (ID) yazmalısınız.
  • var limit = 5; buradaki sayısal veri gösterilecek tweet sayısıdır. Arttırabilir veya azaltabilirsiniz.
  • CSS kodları arasında ki renk, boyut gibi değişkenlerle oynayabilir, tasarımınıza uygun hale getirebilirsiniz.

Önizleme

My Last Tweets Plugin


Blogger Yorumlarda Link Paylaşmak


Bir bloga yorum bırakırken örnek bir link vermek istediğiniz muhakkak tüm link adresini yapıştırmak zorunda kalıyorduk. Aynı şekilde bu linki incelemek isteyen kişide linkin tamamını seçip kopyala-yapıştır tekniği ile görebiliyordu.

Bu zahmetleri ortadan kaldıracak bir eklenti sunuyorum size :) Yorum yaparken link verecekseniz aşağıdaki kodu kullanmanız yeterli olacak.

<a href="LINK ADRESI" rel="nofollow">GÖRÜNECEK YAZI</a>


Yeni bir yorum yaparken yukarıdaki kod satırında bulunan yerleri doğru şekilde doldurduğunuz da eskisi gibi bütünüyle bir link yollamak zorunda kalmayacaksınız.

Eğer güzel amaçlarla kullanılırsa herkesin işine yarayacak bir eklenti. Umarım amacından sapmaz ;)

YouTube Videolarını Yorumlarda Göstermek (Yeni)


Bir çok blog da rastgeldiğim bir eklenti bu. Fakat benim Redakte'nin vesilesi ile paylaşacağım eklenti çok farklı.

Diğer eklenti de yorum bölümüne [youtube]...[/youtube] kodları arasına video linkini yapıştırıyordunuz. Bu uğraşa gerek kalmadan sizlere vereceğim eklenti ile youtube videolarının linkini direkt yapıştırarak videoyu yorumda gösterebileceksiniz.

Fakat bu sadece YouTube için geçerli diğer video paylaşım sitelerini desteklemiyor.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
//
// if oetag=0, just use video urls like:
// http://www.youtube.com/watch?v=12345678901
// surrounded by white space (video tag can be used, too)
// if oetag=1 (for nerdy blogs?), use syntax:
// [video=http://www.youtube.com/watch?v=12345678901]
// config:
var oetag = 0; // see above
var oetagname = "video"; // [video=zzz], maybe you like "embed" or "youtube" more?
var oelazy = -1; // -1 detect, 0 = normal, 1 = lazy (needs lazy load hack)
//
function oe_loadscript(filename) {
var scr=document.createElement('script');
scr.setAttribute("type","text/javascript");
scr.setAttribute("src",filename);
document.getElementsByTagName("head")[0].appendChild(scr);
}
function oe_jumptohash() { // reposition to anchor
window.scrollTo(0, $("#"+window.location.hash.replace(/^#/, "")).offset().top);
}
var oe_tid;
var oe_elems = {};
//
function oembed_callback(response) {
var resp = response;
revurl = resp.url.split("").reverse().join("");
html = oe_elems[response.callID].html();
ee = $(resp.html);
w = parseInt(ee.attr("width"));
h = parseInt(ee.attr("height"));
if(oelazy==1) { // convert to lazy load
src = ee.attr("src");
src += ((src.indexOf("?")==-1) ? "?" : "&") + "autoplay=1";
ee.attr("src", src);
ee.attr("style", "vertical-align:top;");
htm = $("<div/>").append(ee).html();
htm = $('<div/>').text(htm).html().replace(/"/g,'&quot;');
resp.html = '<a href="'+resp.url+'" class="youtube-lazy-link" style="width: '+w+'px; height: '+h+'px; background: #000 url('+resp.thumbnail_url+') center center no-repeat;" onclick="$(this).replaceWith(\''+htm+'\');return false;"><div style="width:'+(w-4)+'px;height:'+(h-4)+'px;" class="youtube-lazy-link-div"></div><div class="youtube-lazy-link-info"><b>'+resp.title+(resp.playlist ? '</b> [playlist]' : '</b>')+'<br /><small>by '+resp.author_name+'</small></div></a>';
}
htmlx = html.replace(new RegExp("\\[" + oetagname + "="+resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+"\\]"), " " + resp.url + " ");
htmlx = htmlx.replace(new RegExp("\\[" + oetagname + "="+resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+" \\]"), " " + resp.url + " ");
htmlx = htmlx.replace(new RegExp('"'+resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+'"', "g"), '"'+revurl+'"'); // trick to preserve href="url"
htmlx = htmlx.replace(new RegExp(resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")), '<div style="height:'+h+'px;" class="oembed youtube">'+resp.html+'</div>')
htmlx = htmlx.replace(new RegExp('"'+revurl.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+'"', "g"), '"'+resp.url+'"'); // trick to preserve href="url"
if(html != htmlx) {
oe_elems[response.callID].html(htmlx);
if(window.location.hash.replace(/^#/, "").length > 0) {
if(oe_tid) window.clearTimeout(oe_tid);
oe_tid = window.setTimeout("oe_jumptohash()", 1000);
}
}
}
function oembed_yt(url, width, callID) {
src = "http://oembed-js.appspot.com/?url=" + encodeURIComponent(url) + "&callback=oembed_callback&callID=" + encodeURIComponent(callID);
if(width) src = src + "&maxwidth=" + width + "&maxheight=" + width;
oe_loadscript(src);
}
$(document).ready(function() {
det=$('<div class="youtube-lazy-link-div" />');
$("body").append(det);
if(det.css("position")=="absolute") {
if(oelazy != 0) oelazy=1;
}
else oelazy = 0;
det.remove();
window.setTimeout(function() {
var callID=0;
$(".comment-content,.comment-body,.comment-body-author").each(function() {
html = " " + $(this).html() + " ";
if(oetag)
matches = html.match(new RegExp("\\["+oetagname+"=(https?:\\/\\/[^\\s<\\/]*youtu\\.*be[^\\]]+)", "g"));
else
matches = html.match(/([>\s^]|\[\w+=)(https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+)/g);
if(matches && matches.length) {
for(var i=0;i<matches.length;i++) {
url = matches[i].match(/https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+/);
oe_elems[callID] = $(this);
oembed_yt(url, $(this).width(), callID++);
}
}
});
}, 500);
});
//]]>
</script>

Yukarıdaki kodu tema panelinden </head> kodunun üstüne yerleştirin.

Bu eklentiyi canlı test etmek için tıklayın.

Blogger Öne Çıkarılmış Resim Ayarı

blogger banner

WordPress ve Blogger'ın farklarını söyleyin deseler. "Öne Çıkarılmış Resim" der bir çoğunuz. İşte bu özelliği Blogger da uygulayacağız hemde çok kolay bir yöntemle :))

Genellikle blogunuza eklemiş olduğunuz resimin HTML kodları şu şekildedir.

<div class="separator" style="clear: both; text-align: center;">

Yukarıdaki style= bölümünden sonra aşağıdaki kodu eklerseniz bu div içerisindeki resim yazı içerisinde gözükmeyecektir.

display: none;

Kod kısmı bitti işin mantığını anlatıyorum.

Yukarıda ki kodu eklemiş olduğunuz resim yazının en üstünde olsun. Görüntülenmesini istediğiniz resim ise bir altında olursa işlemi tamamlamış oluruz. Böylelikle öne çıkarılmış resim ayarını yapmış olacaksınız. Tıpkı bu yazıda olduğu gibi :))

Blogger Default Temalarda Sonsuz Scroll Özelliği


Merhaba arkadaşlar, bugün sizlere vereceğim bu özelliği bana bildiren Redakte'ye teşekkür ederim. Özelliğimiz bir çok tumblr blogunda bulunan scroll'u aşağı çektikçe yazıların yüklenmesidir. Yani önceki yazı devri kalktı diyebiliriz.

Ancak başlıkta da belirttiğim gibi default temalara özel yapılmış bir özellik. Bazı temalarda çalışıyor bazı temalarda ise çalışmayabiliyor. Bu yüzden çalışmadığı takdir de lütfen agresif davranmayın.

Nasıl Yapılır ?



<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src='http://www.fieg.nl/wp-content/themes/fieg-b/js/jquery.ias.min.js' type='text/javascript'></script>
<script type='text/javascript'>
jQuery.ias({
container : '.blog-posts',
item: '.post-outer',
pagination: '#blog-pager',
next: '#blog-pager-older-link a',
loader: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7wQw4ONfNBuP0cYkbn_TfHld2tMKkZ2TVKjMoVQNsLb9CsBouE7B2glMhj5V-ewjeOrNF5m718qY7gx2IqU8zS8f32ZvOU6C2IasGL1vjc-aA-WNjZZXzRryrR8LqdXus8I5r6bu726To/s1600/loading.gif'
});
</script>

Yukarıda vermiş olduğum kodları aşağıdaki

<head>...</head>

kodları arasına yerleştirin ve şablonu kaydedin.

Demo adresi

Popüler Yayınlar Gadgetınızı Özelleştirin #2


Merhaba arkadaşlar gün geçtikçe kendimi geliştirdiğim bu Blogger kulvarında sizlere yine güzel bir şey sunacağım. Popüler yayınlarımızı Resim - Yazı başlığı - Özet İçerik olarak paylaşmak yerine vereceğim kod ile daha güzel bir hale getireceğiz. İsterseniz başlayalım unutmadan her zamanki gibi temamızı yedekliyoruz.

Popüler Yayınlar Gadgetınızı Özelleştirin #1 yazısı için tıklayınız.

Nasıl Yaparım ?


Popüler Yayınlar gadgetınızı aşağıdaki gibi ayarlayın.

Not: Görüntülenme sınırı 10 yaparsanız daha sağlıklı oluyor.


Şablonunuzda CTRL+F yardımı ile PopularPosts1 bölümünü bulun.

Aşağıdaki gibi bir kod şekli çıkacak

<b:widget id='PopularPosts1' locked='false' title='Popüler Kayıtlar' type='PopularPosts'>

Yukarıdaki kodun b:widget ile /b:widget yani açılış ve kapanış kodlarıda dahil olmak üzere silin ve aşağıdaki kodu yapıştırın.

<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'>
<li>
<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'>

<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title'>
<b:if cond='data:post.thumbnail'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
<b:else/>
<img alt='' border='0' expr:height='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTzw4zHgzxCecsVrHqF8e_Y1GWWoo3j8vQkPbhWQqZm5sWhYP6tOXi6jCFg6-BTCjCDqZVWhYzPl_MPHk8wkGCt4Ju1EIgdoghgJMaESgtiVvJMHslCSASEol6hocIxYdDmKQNlVlt85Q/s72-c/default.png' expr:width='data:thumbnailSize'/>
</b:if>
</a>
</div>
</div>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<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 class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Yukarıdaki kodlar arasında mavi renk ile gösterdiğim bölüme kendi resim yok önizlemesini ekleyebilirsiniz.

CSS Kodları


.popular-posts .item-thumbnail{float:left;}
.popular-posts ul{padding-left:25px;}
.popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}

CSS kodlarımız arasındaki değişkenler ile oynayabilirsiniz.

Önizleme


popüler-yayınlar

İyi bloglamalar.

Blogger'ın Resmi Paylaşım Butonlarını Kullanın


blogger banner

Blogger da bulunan yeni temaların çoğu Blogger'ın resmi paylaşım butonlarını göstermiyor. Ben sizlere bugünkü yazımda bu butonları nasıl göstereceğimizi ayrıntılı bir biçimde anlatacağım. İşlemleri gerçekleştirmeden önce muhakkak temanızın yedeğini alın.

Nasıl Yaparım ?


Yerleşim > Blog Kayıtları > Paylaşım Düğmelerini Göster Kutucuğunu İşaretleyin.

Eğer paylaşım butonları çıkmadıysa şablonunuz da aşağıdaki kodu aratın.

<div class='post-footer-line post-footer-line-3'>
Yukarıdaki kodu bulamadıysanız aşağıdaki kodları aramayı deneyin.

<p class='post-footer-line post-footer-line-3'>
<data:post.body/>

Bulduğunuz kodun altına aşağıdaki kodu yerleştirin.

<div class='post-share-buttons'> <b:include data='post' name='shareButtons'/> </div>

Önizleme yapın eğer bir hata almadıysanız devam edin. Hata aldıysanız tekrar deneyin.

Şimdi aşağıdaki kodu bulun.

<b:includable id='shareButtons' var='post'>

....

</b:includable>

Yukarıdaki görmüş olduğunuz iki kod aralığını silin. includable>'lar dahil. Açma ve kapatma dahil yani.

Sildiğiniz kodların yerine aşağıdakilerini yerleştirin.

<b:includable id='shareButtons' var='post'> <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'> <span class='share-button-link-text'><data:top.emailThisMsg/></span> </a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'> <span class='share-button-link-text'><data:top.blogThisMsg/></span> </a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'> <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span> </a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'> <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span> </a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'> <span class='share-button-link-text'><data:top.shareToOrkutMsg/></span> </a></b:if><b:if cond='data:top.showBuzzButton'><a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'> <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span> </a></b:if> <b:if cond='data:top.showDummy'> <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div> </b:if> </b:includable>

Son olarak,

</head>
kodunu bulun ve hemen üstüne aşağıdaki kodu ekleyin.

<script src='https://apis.google.com/js/plusone.js'/>


Önizleme




İyi bloglamalar :)

Blogger Otomatik Devamını Oku Eklentisi


Bir yerde bu eklentinin SEO'ya + kattığını duymuştum. Umarım hala öyledir diyerek blogumda da kullandığım bu eklentiyi sizlerle paylaşıyorum. Bu eklenti sayesinde "Acaba yazıyı nereden kessem ?" derdi yaşamayacaksınız. Kendisi yazının bir bölümünden "Devamını Oku" ibaresini yayınlayacak.

Bu eklenti sayfalarda devamını oku işlemini gerçekleştirmiyor. Onu da belirteyim.

Nasıl Yaparım ?


Aşağıdaki kodu CTRL+F ile bulunuz.

</head>

Bulduğunuz kodun üstüne aşağıdaki kodu ekleyin.


<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 400;
summary_img = 400;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
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);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");

if(img.length<=0) {
imgtag = '<span style="float:left;margin-right:5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEial5zP2dokM_89vviy0hpgcPbr4Is3n-zmkgbdFuAiQIIGYXLrs5Xwod066Y8S-PaHCdaXH-ToA0TRwSiUq-aT9FPZe8lI1ZrAppf6JFUGSvnkxuXlsxONNvVaw9eGei6mHUkfrG9rvLKE/s0/2nrklth.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}

if(img.length>=1) {
imgtag = '<span style="float:left;margin-right:5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>



Bu işlemleri tamamladıktan sonra yanlışımız var mı kontrol etmek için Önizleme yapalım hatamız yoksa devam edelim.

Aşağıdaki kodu bulun

<data:post.body/>


Bulduğunuz kodu silin ve yerine aşağıdaki kodu yerleştirin.

<!-- Oto devamını oku başlangıç -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Devamını oku...</a>
</b:if>
</b:if>
<!-- Oto devamını oku bitiş -->


Düzenlenecek Yerler:



Aşağıdaki kod anasayfada yazının ne kadarının görüntüleneceğini belirler. 

summary_noimg = 400;
summary_img = 400;

Bu kod ise konuyu eklediğiniz ilk resmin anasayfada hangi boyutlarda görüntüleneceğini belirler.

img_thumb_height = 120;
img_thumb_width = 120;

Aşağıdaki linkte ise resim eklemediğiniz yazılarda (yalnızca anasayfada) görülecek resim yer alıyor.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEial5zP2dokM_89vviy0hpgcPbr4Is3n-zmkgbdFuAiQIIGYXLrs5Xwod066Y8S-PaHCdaXH-ToA0TRwSiUq-aT9FPZe8lI1ZrAppf6JFUGSvnkxuXlsxONNvVaw9eGei6mHUkfrG9rvLKE/s0/2nrklth.jpg

Eklentiniz hayırlı olsun, iyi bloglamalar..

Anonim Yorumların Avatarını Değiştirin (Yeni)


Blogunuza yapılan anonim yorumların avatarlarını tasarımınıza uygun olarak özelleştirebileceksiniz. Nasıl olduğu yazımızın devamında...

Sizlere vereceğim kodu şu iki kod arasında uygun bir yere yerleştirin.

<body>...</body>


Bu kodu yukarıda vermiş olduğum taglar arasında uygun yere yerleştirin.

<script src=’http://code.jquery.com/jquery-latest.js’/>
<script>
$("img[src='http://img1.blogblog.com/img/anon36.png']")
.attr('src', 'avatar linki buraya')
.ssyby('blank')
</script>


Kodlar arasında kalın punto ile belirttiğim bölüme görüntülenecek resim linkini vereceksiniz. İyi bloglamalar :)

Uygulamanın resimle gösterilişi:


anonim yorumlara avatar eklemek


Blogger Adres Yönlendirme

Blogger Adres Yönlendirme
Kendinize yeni bir site açtınız fakat 301 ayarlarını yapamadıysanız sizlere alternatif bir önerim var.Vereceğim kod ile blogunuzu SEO'ya uygun olarak yönlendirebilirsiniz.Şimdi nasıl yapılır hemen anlatayım.






Öncelikle şablon panelimizden aşağıdaki kodu buluyoruz.

<head>

Bulduğumuz kodun hemen altına aşağıdaki kodu ekleyin.

<meta HTTP-EQUIV='REFRESH' content='5; url=www.siteadresiniz.com'/>

Kırmızı ile işaretlediğim yeri yönlendireceğiniz adres ile değiştirmeniz yeterli.Temanızı kaydedin tüm işlemlerimiz bu kadar.

Blogger jQuery Lazy Load Eklentisi

Merhaba arkadaşlar, bugün akşam üzeri bloguma eklemiş olduğum jQuery Lazy Load eklentisini sizlerle paylaşmak istedim.Bu eklenti ile blogunuzda bulunan tüm resimleri, flash ve js dosyalarını sizler web sayfasının aşağısına doğru indikçe yükleniyor ve blogunuzda gözle görülür bir hızlanma oluşuyor.





Ayrıca göze hitap ediş şeklide bir o kadar güzel.Tam olarak ne işe yaradığını şematik bir resim ile göstereyim.

jQuery Lazy Load Eklentisi Şematik Resim

Nasıl ekliyoruz bu eklentimizi ? Hemen anlatayım.

Aşağıdaki kodu bulun

</head>

Daha sonra bulduğumuz kodun hemen üstüne aşağıdaki kodları ekleyin.


<script charset='utf-8' src='http://konfor.enesilhan.net/js/jquery.min.js' type='text/javascript'></script> <script src='http://konfor.enesilhan.net/js/jquery.lazyload.js' type='text/javascript'></script> <script type='text/javascript'> $(function() { $("img").lazyload({ placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKiwRDLwKwx5XofNor-ewBrvb0uEPva0gPlZAsJpdRHiwcavIBAEYVIqBwmTzuwYJHZhupBVcWnQdkiGeu121NYPLvvcRA6PI_zWfLv8ophzKqhbz4PrsHQzK2YDm2ITl9fPfDkpfpKlo/s1600/grey.gif", effect : "fadeIn" }); }); </script> <script type="text/javascript"> if (window.jstiming) window.jstiming.load.tick('headEnd'); </script>

İşlemlerimiz bu kadar temanızı kaydedebilir ve bloglamaya devam edebilirsiniz.

Blogger Benzer Yazılar Eklentisi

Blogger Benzer Yazılar Eklentisi
Merhabalar, WMAracı'nda bir arkadaşın isteği üzerine kodları buldum ve kendisine ilettim.Belki siz değerli takipçilerim de bu kodlara ihtiyaç duyabilir diye sizlerle de paylaşıyorum.

Kodların js dosyasını yükleyen İsa'ya(Hit Adam) teşekkürler :) Sözü fazla uzatmadan hemen anlatıma geçiyorum.






İşlemlere temanızı yedekleyerek başlayabilirsiniz :) Daha sonra aşağıdaki kodu bulun

</head>

Bulduğumuz kodun hemen üstüne aşağıdaki JS kodlarını ekliyoruz.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
text-transform:none;
padding-left:5px;
}
#related-posts li {
list-style:none;
}
#related-posts h2{
font-size: 15px;
font-weight: bold;
color: #414141;
}
#related-posts a{
color:#868686;
}
#related-posts a:hover{
color:black;
}
a.bysaydamlik img{
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
a.bysaydamlik:hover img{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;}

</style>
<script src='http://hit-adam.googlecode.com/files/benzer-yazilar.js' type='text/javascript'/>
</b:if>


Temayı kaydetmeden devam edin ve aşağıdaki kodu bulun

<data:post.body/>

Bulduğumuz kodun hemen altına aşağıdaki kodlarımızı ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Benzer Yazılar&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/></b:if>

Yukarıdaki kodumuz da kırmızı ile belirttiğim yerleri değiştirebilirsiniz.Bir sonraki yazım da görüşmek üzere, esen kalın.

Blogger Yorumlara Yanıtla Butonu Eklentisi

Blogger Yorumlara Yanıtla Eklentisi

Merhaba arkadaşlar, İzmir'den döndüm ve arayı soğutmamak için hemen yazılara başlayayım dedim.Daha önce sizlere verdiğim yanıtla eklentisi kesin bir çözüm değildi fakat şimdi vereceğim kodlar sayesinde sizin  temanızda da yanıtla butonu olacak :)
Hemen temanızı yedekleyin ve HTML'yi Düzenle bölümüne gidin ve Widget Şablonlarını Genişlet kutucuğunu işaretleyin daha sonra aşağıdaki kodu bulun

b:include data='post' name='comments'/>

Bulmuş olduğunuz kodu aşağıdaki kod ile değiştirin

b:include data='post' name='threaded_comments'/>


Temanızı kaydetmeden devam edin ve aşağıdaki kodu bulun

<body>


Bulduğumuz kodun hemen üzerine aşağıdaki kodları ekliyoruz.

<style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: none;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px; font-size:12px; background:#EBF5FE;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;

}
.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:bold;
}
.comments .comments-content .user a {
color:#2D5E7B; font-size:14px; font-weight: bold;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 {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
margin:0 0 8px;
}

.comment-header {background-color: #F4F4F4;
border: thin solid #E6E6E6;
margin-bottom: 5px;
padding: 5px;
}
.comments .comments-content .comment-content {
text-align:none;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
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;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
</style>


Tüm işlemlerimiz bu kadar güle güle kullanın :)

CSS3 ile Oluşturulmuş Blogger Duyuru Kutuları

CSS3 İle Oluşturulmuş Duyuru Kutuları - ærakman Blog
İzmir'e gideceğimi siz değerli okurlarıma bildirmek için duyuru kutusu aradım ettim kendim yapayım dedim ne edeyim :) İşte yaptıklarımı burada sunuyorum :) Demo veremeyeceğim.Yolculuktan önce acele ile yazıyorum :)

Ayrıca CSS olarak ilk yaptığım kod bütünü diyebilirim.Diğer arama kutularından biraz kopya çektim kabul ediyorum.Ama CSS öğrenmek için azıcık örnek almaktan ne olur ? :)



Öncelikle, Kumanda Paneli > Tasarım (Yeni panelde Şablon) >  HTML'yi Düzenle bölümüne gelin ve aşağıdaki kodu bulun

]]></b:skin>

Bulduğunuz kodun hemen öncesine aşağıdaki CSS kodunu ekleyin.

.aerakman-duyuru, .aerakman-duyuru2, .aerakman-duyuru3, .aerakman-duyuru4 { background:#F3F3F3; border:1px solid #C1C1C1; text-align:center; margin:0 auto 10px; padding:5px 10px; -moz-box-shadow:inset 0 0 1px #fff; -webkit-box-shadow:inset 0 0 1px #fff; box-shadow:inset 0 0 1px #fff; text-shadow:0 -1px rgba(255,255,255,0.5); font-size:12px; } 

.aerakman-duyuru { background: #FFF6BF; border-color:#FFD324; }

.aerakman-duyuru2 { background: #ADCBE7; border-color:#0F5C8E; }

.aerakman-duyuru3 { background: #D6ECA6; border-color:#8DC93E; }

.aerakman-duyuru4 { background: #cccccc; border-color:#4c4c4c; }

Aşağıdaki kodlarımızı ise isterseniz gadget olarak ekleyebilir isterseniz de temanızın şablonundan uygun bir bölüme ekleyebilirsiniz :) Kodlar da <div> kullanmamın sebebi <head></head> tagları içerisinde rahatça kullanabilmenizi sağlamaktır. :)

<p class="aerakman-duyuru"> <strong>Duyuru: </strong> Yazıyı Buraya Yazabilirsiniz </p> 

<p class="aerakman-duyuru2"> <strong>Duyuru: </strong> Yazıyı Buraya Yazabilirsiniz </p>

<p class="aerakman-duyuru3"> <strong>Duyuru: </strong> Yazıyı Buraya Yazabilirsiniz </p>

<p class="aerakman-duyuru4"> <strong>Duyuru: </strong> Yazıyı Buraya Yazabilirsiniz </p>

Renkleri değiştirmek için CSS kodumuzdaki renk kodları ile oynayabilirsiniz.Güle güle kullanın :)

Gerçek Zamanlı Sosyal Ağ Sayaçları

Bugün sizlere güzel bir eklenti sunacağım.Başlıkta da belirttim."Gerçek Zamanlı" diye.Ne demek oluyor hemen anlatalım.Yani, birileri sizin takipçiniz olduysa anında takipçi sayınız güncelleniyor :)





Eklentimiz daha önce bu yazımda vermiş olduğum kodlar ile aynı görevi üstlenmekte.Fakat bu kodlarımızdaki butonlarımız,iconlarımız daha estetik.Aşağıdaki adresten butonlarımızın önizlemesini yapabilirsiniz.




DEMO



Eklentimizin en güzel yanı HTML'yi Düzenle paneline girmeden direkt,

Tasarım > Sayfa Öğeleri > Gadget Ekle > HTML/JavaScript gadgetına aşağıdaki kodlarımızı eklememiz oluyor.


<link href='http://tayfun-code.googlecode.com/hg/jquery.nicebox.css' rel='stylesheet' type='text/css'/><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script><script type="text/javascript" src="http://socialconters.googlecode.com/files/jquery.singam.min.js"></script><script type="text/javascript">  $(document).ready(function(){                  $('#fblikes').singam({                    'service':'facebook',                    'countof':'likes',                    'query':'websehri',                    'callback':'formatCount'                });          $('#followers').singam({                    'service':'twitter',                    'countof':'followers',                    'query':'ardaerakman',                    'callback':'formatCount'                });    $('#rss').singam({                    'service':'feedburner',                    'query':'http://feeds.feedburner.com/aerakmanBlog',                    'callback':'formatCount'                });   });              function formatCount(element,count)            {                var display_count='';                count=parseInt(count,10);                if(count>1000000)                {                    count=count/1000000;                    count=count.toFixed(1);                    display_count=count+'m';                }                else if(count>1000)                {                    count=count/1000;                    count=count.toFixed(1);                    display_count=count+'k';                }                else                {                    display_count=count;                }                element.html(display_count);            }</script><div class='col_4'><a href='https://www.facebook.com/websehri' rel='nofollow' target='_blank'><div class='box'><div class='cell_1 facebook-blue'><img class='icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhowyYPiz141njvJepFG61q-Jwt5BIrb-wJtF7ZnaRY3u8EEZJ-1NDMyM_xaeCY7yVjm42LZpv8iBOJxqr7tOTWc5oHjIua63gQmgePwxqMD-YX4bD6Vd3bMRVuRrxYldCKsbmBj-yoNKM/s1600/facebook.png'/></div><div class='cell_2'>Facebook</div><div class='cell_3'><span class='count' id='fblikes'/></span></div></div></a></div><div class='col_4'><a href='http://www.twitter.com/ardaerakman' rel='nofollow' target='_blank'><div class='box'><div class='cell_1 twitter-blue'><img class='icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSpdJz2Cf-dkNMSylUZYo1QzhonHvQrUPthVkNggHVL1DwnV61PHN8gSEAgZKVxfkVKJhHu53fIQ6mZWBvChH5QKtLp-v6xTunHWceJ_kAj5dYFXh32dzKUHOCRczjlLVu-lh8EIWAtX8/s1600/twitter.png'/></div><div class='cell_2 '>Twitter</div><div class='cell_3'><span class='count' id='followers'/></span></div></div></a></div><div class='col_4'><a href='http://feeds.feedburner.com/aerakmanBlog' rel='nofollow' target='_blank'><div class='box'><div class='cell_1 rss-orange'><img class='icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0havDtycDmmI4XFzuVZvj2l4zSBf06qEujhpJEAKSZPNpvf9rsq3cBy_hm7DTuukSAfHeoZyjVScb1GhUydPZDCAivndI95uSNTMef_7_LYTEtI-LDgbY8FnnTU7wcJQl_94jzE7c238/s1600/rss.png'/></div><div class='cell_2'>RSS</div><div class='cell_3 '><span class='count' id='rss'/></span></div></div></a></div>


Kodlarımızda ki değişkenler ise şu şekilde:

ardaerakman arkadaşlar bu id kodlarımızda 2 adet bulunmaktadır.İkisinide kendi idniz ile değiştiriniz.
websehri arkadaşlar bu id de kodlarımızda 2 adet bulunmaktadır.İkisinide kendi idniz ile değiştiriniz.
aerakmanBlog arkadaşlar bu idmiz de kodlarımızda 2 adet bulunmaktadır.İkisinide kendi idniz ile değiştiriniz.

Blogger CSS3 İle Oluşturulmuş Butonlar

Merhabalar,bir okurumun ricası üzerine bu buton kodlarını veriyorum.Butonlarımız CSS3 ile oluşturulmuştur.Her boyutta ve renkte butonlarımız bulunmaktadır.

Hepimiz blogumuzda zaman zaman indir,demo,izle,tıkla gibi bağlantılar veriyoruz.Bu bağlantıların daha şık olması için bu kodlarımız ile buton şeklini verebilirsiniz.Butonların demo hali aşağıdadır.Hemen kodlarımıza geçelim...

]]></b:skin>

Yukarıdaki kodu CTRL+F yardımı ile bulun.Hemen üstüne aşağıdaki CSS kodlarımızı ekleyin.

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/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/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/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/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/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/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/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/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/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/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/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/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/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/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/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/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/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/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/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/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/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/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/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/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/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/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/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/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/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/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/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/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/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/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));
}


Şimdi de HTML kodlarımız.

Büyük Boy Butonlar:

<a href="Link Buraya" class="button big blue">Yazı Buraya</a>

<a href="Link Buraya" class="button big green">Yazı Buraya</a>

<a href="Link Buraya" class="button big orange">Yazı Buraya</a>

<a href="Link Buraya" class="button big gray">Yazı Buraya</a>

Orta Boy Butonlar:

<a href="Link Buraya" class="button blue medium">Yazı Buraya</a> 

<a href="Link Buraya" class="button green medium">Yazı Buraya</a>

<a href="Link Buraya" class="button orange medium">Yazı Buraya</a>

<a href="Link Buraya" class="button gray medium">Yazı Buraya</a>

Küçük Boy Butonlar:

<a href="Link Buraya" class="button small blue">Yazı Buraya</a> 

<a href="Link Buraya" class="button small green">Yazı Buraya</a>

<a href="Link Buraya" class="button small orange">Yazı Buraya</a>

<a href="Link Buraya" class="button small gray">Yazı Buraya</a>

Oval ve Küçük Butonlar:


<a href="Link Buraya" class="button small blue rounded">Yazı Buraya</a> 

<a href="Link Buraya" class="button small green rounded">Yazı Buraya</a>

<a href="Link Buraya" class="button small orange rounded">Yazı Buraya</a>

<a href="Link Buraya" class="button small gray rounded">Yazı Buraya</a>


DEMOLAR







Bu butonları nasıl kullanabilirim ?

Sizlere verdiğim HTML kodlarını yazınızı yazarkan HTML'yi Düzenle bölümünden ekleyebilirsiniz.

Bu butonları nasıl Devamını Oku şeklinde yapabilirim ?
 

Sizlere verdiğim HTML kodlarında class="button medium gray rounded"> bu classı kendi devamını oku butonunuzun classı ile değiştirirseniz sorunuzun yanıtını alabilirsiniz. 

Şu şekilde anlatayım:

Çoğu temada devamını oku butonlarının div class şu şekildedir,

<div class='jump-link'>

biz yukarıda bulunan jump-link yerine butonlarımızın classını ekleyeceğiz yani şöyle olacak,

<div class='button gray medium'>

Yukarıdaki kod bölümünde değişken olan iki yer var.
1- Gray yani renk seçimi.
2- Medium yani boyut seçimi.


Not:Bazı arkadaşlarda butonlar gelebilir fakat mouse ile üzerine gelince balon efektleri çalışmayabilir.Bu durumda CSS kodlarını aynı şekilde öncekileri silmeden tekrar ekleyiniz.Sorun çözülecektir.



Sıkıntı yaşadığınız,takıldığınız bir yer olursa yorum olarak ya da iletişim bölümünden sorabilirsiniz.

Blogger Sosyal Medya Profil Butonları v2

Daha önce sizlere bu yazımda Blogger Sosyal Medya Profil Butonları CSS3 ile oluşturulmuş ve hover efekti verilmiş kodlar sunmuştum.Şimdi ki kodlarımız ise biraz daha gelişmiş ve daha renkli.
Butonlarımız her zamanki gibi CSS3 ile oluşturulmuş ve hover efekti verilmiştir.Butonlarımızın güzelliğine sizin karar verebilmeniz için birde demo ekledim.


DEMO


]]></b:skin>

Yukarıdaki kodumuzu şablonunuzda CTRL+F yardımı ile bulun.Daha sonra hemen üstüne aşağıdaki CSS kodlarımızı ekleyin.


#social {
margin: 15px 0 5px -15px;
width: 300px;
height: 40px;
text-align: center;
}

#social img {
margin-left: 3px;
margin-right: 3px;
}

#social img:hover {
opacity: 0.6;
}

Tasarım > Sayfa Öğeleri > Gadget Ekle diyerek aşağıdaki kodlarımızı gadgetımıza ekleyelim.


<div id="social">
<a href="http://www.twitter.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYZbIoErq75hOO4P0UqBIHLpkyTTYAWazJ7eA1RebLwceRXFSDGGYW932yqwNiGndR3DvGDGSHV4-U0ssDc7UhqVjHOSohneQaT37zL7W6aAd0xjBuE17hrG2Nh5RYIg1oU9GXewxy-WE/s0/twitter.png" title="Twitter" /></a>
<a href="http://feeds.feedburner.com/" target="_blank"><img alt="Feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1TJCkLf2ttSu5WSFoyv7QDtNSSZl4BWEWr_o_i2Kwm8qO2x5D4kUMx2Wsu10LNGj67uBwATV2aGFTcXq7xNgY4SiVpjU3fHB3T4AfmfJd7-q_X_JNA6ampojfD7NDhpFSHFqdtIdroIc/s0/rss.png" title="RSS" /></a>
<a href="http://www.facebook.com/" target="_blank"><img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvL_GsyImFbNkUejXGxwgkEZ99nctz4gR54OxWVsSY0J2elFOFm7rCxrq7OOhVcnVx8REQXVlZcA6-CSBaWDGWft-MM_ndA1nLyFODBQiIuXtq-eE2BeFyxEkynEo9nwPvuuanSCbFYm8/s0/facebook.png" title="Facebook" /></a>
<a href="http://plus.google.com/" target="_blank"><img alt="Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDUCR1sGVx0bBt2i1Cnkz075XXPlugQyll13ctUeHW3PZX0LXFd5We8oCPAe00sps21n5PJIEt3itg_9LsFnRRik5cRs8oqZq2X8GdPobvEd_92nfBLxbzmoBFv3MkdlSLCpb82EIN6zE/s0/google%252525252b.png" title="Google Plus" /></a>
<a href="http://www.youtube.com/" target="_blank"><img alt="Youtube" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfxxXCVjV5iRdxHWFqX-GrjeS0Rov9uavkzwWDuRftGHuOv3FWL4ZOnWNY5NWNcseXMaFqKIZvwQ-hWET-kmPecn907-SeNacJPPovFrpC6MBx2eslswJEKB52czuBimdlsn6P6WShxmA/s0/you_tube.png" title="Youtube" /></a></div>



İkinci kodumuzda bulunan kırmızı ile işaretlenen bölüme kullanıcı adlarınızı yazmanız yeterli olacaktır.


İyi bloglamalar...

Layer"

Reklam

 
Support : Türkçe | Blogger | Temaları
Copyright © 2014 Film Siteleri - Tüm Hakları Saklıdır
Filmsitelerin.blogspot.comTürkçe Blogger Temaları
powered by Filmsiteleri.net