sulu blog

Blogger Yorum Kutusu Yapımı

bir fikir ver, blogger yorum, Blogger Yorum Kutusu Yapımı, yorum 4 Comments »

Blogger kullanıcıları bu yorum kutusunu çok beğeniceklerinden eminim. Aşağıdaki resimde gösterilen sizlerin blogunu görülen yorumlar :

İlk olarak şablonunuzun yedeğini alrak başlayalım. Sonra Yerleşim/HTML'yi düzenle/Widget Şablonlarını Genişlet diyoruz, aşağıdaki kodu arıyoruz :

CTRL+F tuşuyla kodu bulabilirsiniz...

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Bu kodun yerine aşağıdaki kodu yapıştırın :

#comments h4 {
margin: 1em 3em;
font-weight: bold;
line-height: 1.4em;
color: #ffffff;
}
#comments-block {
margin-left:1.5em;
line-height:1.6em;
background: #ffffff;
color: black;
padding: 1em;
border:0px solid #ffffff;
}
#comments-block .comment-author {margin:.5em 0;}
#comments-block .comment-body {margin:.25em 0 0; background: #ffffff;}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
padding: 20px 10px 10px 10px;
background: #f3a64c url(http://i38.tinypic.com/27yu1xl.jpg) no-repeat top left;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Şablonu kaydediyoruz.Koda ki URL'yi değiştirerek kendiniz tasarlayabilirsiniz. Yaptığımız aşağıdaki resimde görüldüğü gibi oluyor. Düz ve sade bir tasarım...

Kendi tasarladığınız yorum kutusundan görünüm :

İşlemler burada sona eriyor, herkese kolay gelsin.

Devamını okuyun...>>

Blogger Altbilgi'yi 3 Sütuna Ayırma

bir fikir ver, blogger altbilgi, Blogger Altbilgi'yi 3 Sütuna Ayırma, blogger sütunları ayırma 2 Comments »

Blogger alt sütunları ekleyeceğiz. Sizler blogger kullanyorsanız bu işleri yapabilirsiniz. Aşağıda görüldüğü gibi bazı bloglarda tek sütun var, biz bunları nasıl ayırıldığını öğreneceğiz.

Altbilgiyi 3 sütuna ayırmayı öğreneceğiz ve görünümü bu şeklide olucaktır.

Avantajları:
1. Daha çok gadget ekleyebilirsiniz.
2. Onları düzenleyebilirsiniz.
3. Herkes tarafından tercih edilir.

Bu işlemleri yaparken mutlaka şablonuzun yedeğini almaya unutmayın.
YAPIMI :

1. Altbilgide gadget'lar varsa ilk olarak bunları kaldırın. İsterseniz başka bir yere sürükleyin sizin seçiminiz.

2. Yerleşim/HTML'yi düzenle/Widget Şablonlarını Genişlet diyoruz ve alttaki kodu buluyoruz :

]]></ b: cilt>
</head> </ head>

Üstüne, bu kodu yapıştırıyoruz :

#footer-columns {
border-top:1px dotted #999999;
clear:both;
}
.column1 {
padding: 0px 5px 3px 5px;
width: 30%;
float: left;
margin:3px;
text-align: left;
}
.column2 {
padding: 0px 5px 3px 5px;
width: 31%;
float: left;
margin:3px 3px 3px 5px;
text-align: left;
}
.column3 {
padding: 0px 5px 3px 5px;
width: 30%;
float: right;
margin:3px;
text-align: left;
}
.addwidget {
padding: 0 0 0 0;
}
#footer-columns ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
#footer-columns li {
margin:0;
padding-top:0;
padding-left:0;
padding-bottom:.25em;
padding-right:15px;
text-indent:-15px;
line-height:1.5em;
}
body#layout #footer-columns {
width: 100%;
margin-left: auto;
margin-right: auto;
}
body#layout .column1 {
width: 32%;
float: left;
}
body#layout .column2 {
width: 32%;
float: left;
}
body#layout .column3 {
width: 32%;
float: right;
}

3. Şimdi ise bazı konyetlerler eklemeliyiz. Bu aşağıdaki kodu bulalım :

<b:section class='footer' id='footer'/>

Yerine bu kodu yapıştıralım :

<div id='footer-columns'>
<div class='column1'> <div class='column1'>
<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'> <b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>
</b:section> </ b: section>
</div> </ p>
<div class='column2'> <div class='column2'>
<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'> <b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>
</b:section> </ b: section>
</div> </ p>
<div class='column3'> <div class='column3'>
<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'> <b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>
</b:section> </ b: section>
</div> </ p>
<div style='clear:both;'/> <div style='clear:both;'/>
</div> </ p>
<b:section class='footer' id='footer'/> <b:section class='footer' id='footer'/>

Şablonu kaydedelim, işlemlerimiz bitmiştir herkese kolay gelsin.

Devamını okuyun...>>