Blogger Temanızı Kendiniz Düzenleyin


0
[Toplam: 0   Ortalama: 0/5]

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.

Screenshot 1 1 - Blogger Temanızı Kendiniz Düzenleyin

]]></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.

Screenshot 2 1 - Blogger Temanızı Kendiniz Düzenleyin

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://2.bp.blogspot.com/-aEYjWPDqMgo/UIM_hD2A2kI/AAAAAAAAArc/8ECDmal-9GI/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


Like it? Share with your friends!

0
admin

0 Comments

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format