Blogger Temanızı Kendiniz Düzenleyin

Blogger'da bazen öyle güzel temalarla karşılaşırız ki , bazı ufak tefek eksiklikleri olur ve bu eksiklikleri gidermek için bazı yöntemlere başvururuz. İnternette yer alan bazı eğitici yazılar yayınlayan bloglardan öğrendiğim ve bu öğrenimlere göre kendi bloğumu da şekillendirdiğim bir kaç küçük ama etkili yöntemleri sizinle paylaşacağım.

Blogger yazılarının etrafına çerçeve eklemek!
Genelde beğendiğim temaların en büyük eksiklikleri konu özetlerini birbirinden ayıran çerçevenin olmayışıdır. Tabi ki bu eksikliği gidermenin bazı çözümleri vardır.

]]></b:skin> kodunu bulup hemen üstüne .post { border:1px solid #000; padding:8px } kodlarını ekleyerek yazınızın anasayfada görünen özetini çerçeve için alabilirsiniz. Örnek resim yukarıdadır.

Çerçevenin kalınlığını ve rengini değiştirmek için .post { border:1px solid #000; padding:8px } kırmızı ile belirttiğim kısımları kendinize göre düzenleyebilirsiniz.

Çerçevenin noktalardan oluşmasını isterseniz .post { border:2px dotted #000; padding:8px } kodunu kullanmalısınız.

Çerçevenin köşeli değilde yukarıdaki örnek resimde gördüğünüz gibi köşelerinin oval şekilde olmasını isterseniz .post { border:1px solid #000; padding:8px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; } kodunu kullanmalısınız.

Çerçeveler birbirine bitişik çıktı ne yapmalıyım?
Yukarıdaki kodları eklediğinizde bazı tema kodlarına göre değişiklik gösterebilir. Çerçeveler birbirine bitişik şekilde çıkabilir bunu düzeltmek için yukarıda ki kodlara ek olarak parantezi kapatmadan evvel ;margin:0 0 20px 0; kodunu eklemelisiniz.

Sidebarında etrafına çerçeve eklemek istiyorum ne yapmalıyım?
Yukarıda kullandığımız yöntemi sidebar içinde kullanmak isterseniz .sidebar .widget { kodunu aratıp bulun ve şu kodlar ile değiştirin. .sidebar .widget { border:1px solid #000; padding:5px }

.sidebar .widget {  kodu her temada bulunmayabiliyor , eğer bulamazsanız , tema kodları içinde ]]></b:skin> kodunu aratıp hemen üzerine .sidebar .widget { border:1px solid #000; padding:5px } kodlarını ekleyiniz.


Temanıza kayan Twitter özelliği eklemek!
Bloğumun üst tarafında logonun hemen sağında yer alan kayan twitter özelliğini fark etmişsinizdir. Sizde bloğunuza bu özelliği eklemek isterseniz aşağıdaki yönergeleri izleyiniz.

Bloğunuzun temasında uygun gördüğünüz bir yere yada sidebarınıza widget olarak ekleyebilirsiniz. Eklenecek kodlar aşağıdadır.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>   <script src="http://bloggermodifiyegad.googlecode.com/files/jquery.marquee.js"></script> 
 <script type='text/javascript'>
//<![CDATA[
var Twitter = {
init: function () {
this.insertLatestTweets('bloggermodifiye');
},
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="2" 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 = 'bu gün';
}
else if (numDays == 1) {
daysAgo = numDays + ' dün';
}
return daysAgo;
}
};
Twitter.init();
//]]>
</script> 

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

}
#twitter {
background:#ECECEC  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF9xry8wqrOwkG1vz98oNj2ay66Ml9BmMmQ-HD8XYsC5TKHXDDwnzuCZ-7A1kcAs91bx8jpO2OykHZsjXGAVE_q4LY7z5-SoxLzvV5wF-WR5omw5JhyDIwgF9Qd3DyvUkyCDIlhRMurz9Y/s320/twitter-logo-bg.png)left center no-repeat ;
padding: 2px 5px 9px 131px;
margin: 0 0 0 0px;
overflow: hidden;
height:20px;
}
#twitter p,
#twitter marquee,
#twitter div {
background:#ECECEC;
float: left;
font: 13px bold helvetica, verdana, sans-serif;
margin: 0 10px 0 0;
padding: 6px 0 6px 0px;
line-height: 1;
}
#twitter marquee a,
#twitter div a {
margin: 0 10px 0 0;
color: #000;
text-decoration: none;
}
#twitter marquee a i,
#twitter div a i {
font-style: normal;
color: #0094FF;
padding:0;
margin:0 5px;
}

</style>




 <div id='twitter'><p>  </p> </div>



Bloğunuzun Yazı Tiplerini Cufon ile Özelleştirin!
Klasik yazı tipinden farklı güzel ve gösterişli bir özellik olan cufon yazı şeklini kullanabilirsiniz.

Temanızda <head> kodunu bulun ve hemen üzerine aşağıdaki kodları ekleyiniz.


<script src='http://konfor.enesilhan.net/js/cufon-yui.js' type='text/javascript'></script>
<script src='http://konfor.enesilhan.net/js/qlassik.js' type='text/javascript'></script>
<script type='text/javascript'>Cufon.replace('h1, h2, h3, h4, h5, h6');</script>


df