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

Forte





Arthemia Magazine







Zinmag Primus




Transparency





Zinmag Remedy




Blue Weed



Adspress





Creative Art




ZinePress




Devamını okuyun...>>

Baby Cute




Fashionholic




GameZine




Devamını okuyun...>>

Artık bir çok sitede ve blog kullanıcılarında kullanılmaya başlanılan bu eklenti blogroll görevini üstlenmektedir. Bu yazımda bunun nasıl yapıldığını anlatacağım. Ben de bu eklentiyi kullananlardanın. Link değişimi yapmak isterseniz iletşime yazın...Ben de kendi siteme buradan yapmıştım kendilerine teşekkür ediyorum..."Bu işlemleri yaparken şablonunuzun yedeğini almayı unutmayın"

Resimde görüldüğü gibi olacak :


Geçelim nasıl yapıldığına :

İlk olarak Yerleşim > HTML'yi düzenleye giriyoruz aşağıdaki kodu buluyoruz :

]]></b:skin>

Aşağıdaki kodu önce ekleyoruz ve şablonu kaydediyoruz.
a.linkopacity img{filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;} a.linkopacity:hover img{filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;}

Html'de işimiz bitti. Sonra Yerleşim > Sayfa Öğeleri’ne gidiyoruz ve HTML/Javascript diyoruz oraya aşağıdaki kodu ekliyoruz ve kendi sitemize göre ayarlıyoruz.
<a title="Acıklama" href="Adres" class="linkopacity"><img src="Resim adresi" alt="" /></a>
Onuda kaydediyoruz...Herkese kolay gelsin umarım yardımcı olumuşumdur...


Devamını okuyun...>>


Bu yazımda sizlere blogger etiket bulutunun nasıl yapıldığını anlatacağım. Bu etiket Wordpress için uyarlandıktan sonra blogger'a çevirilmiştir. Ben de kendi siteme buradan uygulamıştım kendilerine teşekkürler ederim. Geleçelim nasıl yapıldığına:

İlk olarak yerleşim/Html'yi düzenle/Widget Şablonlarını Genişlet diyoruz ve CTRL+F tularına basarak alttaki kodu buluyoruz :


<b:section class='sidebar' id='sidebar' preferred='yes'>
Bu kodu bazı şablonlarda bulmak kolay değildir ama her şablonda var! Biraz arayın...

Bu kodu bulduktan sonra hemen altına bu kodu yapıştırın :
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Yapıştırdıktan sonra ister kaydedin istersenizde rengi,gebişliğini ayarlayın. Kaydettikten sonrada rengini,genişliğini ayarlayabilirsiniz.
Şimdi gelelim etiket bulutunun rengine ve genişliğine :

Rengi : #ffffff
Genişliği :
"240", "300"

Bu renk,genişlik ayarları yukarıdaki kodun içinde var. Bunları bularak kendi sitemize göre ayarlarlayalım. İşlemler bitti, yardımcı olmuşumdur işallah. Herkese kolay gelsin...










Devamını okuyun...>>


Arkadaşlar resimde görüldüğü gibi blogger slide yapımını sizlere anlatmaya çalışacağım, öncelikle bu işleri yaparken blogunuzun yedeğini mutlaka alın işlemler 3 aşamadan oluşuyor. Yapılması gayet basit olan 3 aşama var yapamadığınız yerler olursa yazın yardımcı olmaya çaışırım. Öncelikle bu uygumayı Savaş Çocukları' sitesinden öğrendim ve kendi bluguma denedikten sona sizlerle paylaştım. Herkese kolay gelsin, Savaş Çocukalrı'na teşekkürler...

1. AŞAMA :

Blogger hesabından girşi yapalım, yerleşim/html'yi düzenle'ye girelim. CTRL+F tuşnuna basarak altaki kodu bulalım.

]]></b:skin>
Bu kodun hemen üstüne, yapıştıralım.
#myGallery, #myGallerySet, #flickrGallery
{width: 590px;height: 200px;z-index: 5;}
#flickrGallery
{width: 500px;height: 334px;}
#myGallery img.thumbnail, #myGallerySet img.thumbnail
{display: none;}
.jdGallery
{overflow: hidden;position: relative;}
.jdGallery img
{border: 0;margin: 0;}
.jdGallery .slideElement
{width: 100%;height: 100%;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCPQpUYafVYPfVrDZrloMPj69PkSMwhjFHX5vJv3QNFSBAD6w7fE7s4BLLKr0XZlIFvulzR8M_FQpZ0ThOjRGKoyqX7L2x1c8wRAxdsHexF9yvelKhrJ6U4WPKvJYzQcVptWd8_sVSaJM/?imgmax=800');
}
.jdGallery .loadingElement
{width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCPQpUYafVYPfVrDZrloMPj69PkSMwhjFHX5vJv3QNFSBAD6w7fE7s4BLLKr0XZlIFvulzR8M_FQpZ0ThOjRGKoyqX7L2x1c8wRAxdsHexF9yvelKhrJ6U4WPKvJYzQcVptWd8_sVSaJM/?imgmax=800');}
.jdGallery .slideInfoZone
{position: absolute;z-index: 10;width: 100%;margin: 0px;left: 0;bottom: 0;height: 50px;background: #000;color: #fff;text-indent: 0;overflow: hidden;}
* html .jdGallery .slideInfoZone
{bottom: -1px;}
.jdGallery .slideInfoZone h2
{padding: 7px 10px 2px 10px;font-size: 12px;margin: 0;font-weight: bold;color: #ffffff;text-transform: uppercase;background: #111111;letter-spacing:0em;}
.jdGallery .slideInfoZone p
{font-size: 12px;margin: 2px 5px;color: #fff;padding: 0px 0px 0px 5px;font-family:arial;}
.jdGallery div.carouselContainer
{position: absolute;height: 135px;width: 100%;z-index: 10;margin: 0px;left: 0;top: 0;}
.jdGallery a.carouselBtn
{position: absolute;bottom: 0;right: 30px;height: 20px;text-align: center;padding: 0 10px;font-size: 13px;background: #000;color: #fff;cursor: pointer;}
.jdGallery .carousel
{position: absolute;width: 100%;margin: 0px;left: 0;top: 0;height: 115px;background: #000;color: #fff;text-indent: 0;overflow: hidden;}
.jdExtCarousel
{overflow: hidden;position: relative;}
.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{position: absolute;width: 100%;height: 78px;top: 10px;left: 0;overflow: hidden;}
.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{position: relative;}
.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{cursor: pointer;background: #000;background-position: center center;float: left;border: solid 1px #fff;}
.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{margin-bottom: 10px;}
.jdGallery .carousel .label, .jdExtCarousel .label
{font-size: 13px;position: absolute;bottom: 5px;left: 10px;padding: 0;margin: 0;}
.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{font-size: 10px;position: absolute;bottom: 5px;right: 10px;padding: 1px 2px;margin: 0;background: #222;border: 1px solid #888;cursor: pointer;}
.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{color: #b5b5b5;}
.jdGallery a
{font-size: 100%;text-decoration: none;color: inherit;}
.jdGallery a.right, .jdGallery a.left
{position: absolute;height: 99%;width: 25%;cursor: pointer;z-index:10;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity: 0.2;opacity: 0.2;}
* html .jdGallery a.right, * html .jdGallery a.left
{filter:alpha(opacity=50);}
.jdGallery a.right:hover, .jdGallery a.left:hover
{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
.jdGallery a.left
{left: 0;top: 0;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkrGz5Kb7RsxQQTS6T_h8sj_k9cG0Xj4Zvb1GMes95JpJuODO_V7ZgzhW7g8yFnsuBMVTy_Z5gaPLDkrMK42eOKClFv9vVaPV3Npe1vzL2_-WlMkUFWhh5crqrOSm0Uvrv2hmsfRgLvjY/?imgmax=800') no-repeat center left;}
* html .jdGallery a.left { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkrGz5Kb7RsxQQTS6T_h8sj_k9cG0Xj4Zvb1GMes95JpJuODO_V7ZgzhW7g8yFnsuBMVTy_Z5gaPLDkrMK42eOKClFv9vVaPV3Npe1vzL2_-WlMkUFWhh5crqrOSm0Uvrv2hmsfRgLvjY/?imgmax=800') no-repeat center left; }
.jdGallery a.right
{right: 0;top: 0;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIFVNtk9ZfVmptG52u1j4D-RIlgVejuIH_FUBUTDz61iyX1CLSuROHPp_6Me8mV7NDcQpRuKw4mj_Y3bvVDYX8EP0H6JcO7UhntkRyRxF5fICpU2vDzx0RHV2AvpW362SzCjE3pSIQDEk/?imgmax=800') no-repeat center right;}
* html .jdGallery a.right { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIFVNtk9ZfVmptG52u1j4D-RIlgVejuIH_FUBUTDz61iyX1CLSuROHPp_6Me8mV7NDcQpRuKw4mj_Y3bvVDYX8EP0H6JcO7UhntkRyRxF5fICpU2vDzx0RHV2AvpW362SzCjE3pSIQDEk/?imgmax=800') no-repeat center right; }
.jdGallery a.open
{left: 0;top: 0;width: 100%;height: 100%;}
.withArrows a.open
{position: absolute;top: 0;left: 25%;height: 99%;width: 50%;cursor: pointer;z-index: 10;background: none;-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
.withArrows a.open:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMJD4ffIwK16kNPfvP27XyZe_-OwiVRtivQfDmcupgcaGJKmtRDR56LLRD0qWPI-U4gEJGxnL4bid2UunaJj0vh9yQRtOfw0JE7tyfSeM7ohUuufY7st8-3EPMDCbMnlyhJ53IzFeiQGg/?imgmax=800') no-repeat center center; }
* html .withArrows a.open:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMJD4ffIwK16kNPfvP27XyZe_-OwiVRtivQfDmcupgcaGJKmtRDR56LLRD0qWPI-U4gEJGxnL4bid2UunaJj0vh9yQRtOfw0JE7tyfSeM7ohUuufY7st8-3EPMDCbMnlyhJ53IzFeiQGg/?imgmax=800') no-repeat center center;filter:alpha(opacity=80); }
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn
{z-index: 15;position: absolute;top: 0;left: 30px;height: 20px;text-align: center;padding: 0 10px;font-size: 13px;background: #333;color: #fff;cursor: pointer;opacity: .4;-moz-opacity: .4;-khtml-opacity: 0.4;filter:alpha(opacity=40);}
.jdGallery .gallerySelector
{z-index: 20;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #000;}
.jdGallery .gallerySelector h2
{margin: 0;padding: 10px 20px 10px 20px;font-size: 20px;line-height: 30px;color: #fff;}
.jdGallery .gallerySelector .gallerySelectorWrapper
{overflow: hidden;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{margin-left: 10px;margin-top: 10px;border: 1px solid #888;padding: 5px;height: 40px;
color: #fff;cursor: pointer;float: left;}
.jdGallery .gallerySelector .gallerySelectorInner div.hover
{background: #333;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{background: #000;background-position: center center;float: left;border: none;width: 40px;height: 40px;margin-right: 5px;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{ margin: 0;padding: 0;font-size: 12px;font-weight: normal;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{ margin: 0;padding: 0;font-size: 12px;font-weight: normal;color: #aaa;}
.status-msg-wrap{
display:none;
}

--></style>


2. AŞAMA:

2. Aşamada ise alttaki kodu bulalım.
</head>
Bu kodu ondan önce yapıştıralım.

<script src='http://gujaratisite.com/blogger/indianmonsters.js' type='text/javascript'/>

<script src='http://gujaratisite.com/blogger/indianmonsters1.js' type='text/javascript'/>

Sonra önizle diyelim sayfada sorun yoksa kaydedelim.

3. AŞAMA:

Bu aşamada yerleşim/Sayfa Öğeleri/Gagget ekle/HTML JavaScript diyelim ve bu kodu ekleyelim.
<div id="myGallery">
<div class="imageElement">
<h3>Blogger</h3>

<p>Blogger Tutorial</p>
<a href="KENDİ SİTENİ EKLE" class="open" title="Click here"></a>
<img src="RESMİNİZİN LİNKİ" class="full"/>
<img src="RESMİNİZİN LİNKİ" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>KONUNUN BAŞLIĞI</h3>
<p>KONUNUN AÇIKLAMASI</p>

<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img352.imageshack.us/img352/8232/paraheaderwv1.png?imgmax=800" class="full"/>
<img src="http://img352.imageshack.us/img352/8232/paraheaderwv1.png?imgmax=800" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Software</h3>
<p>Get software for free here!</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>

<img src="http://img148.imageshack.us/img148/6201/gamheaderpf6.png?imgmax=800" class="full"/>
<img src="http://img148.imageshack.us/img148/6201/gamheaderpf6.png?imgmax=800" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Wallpapers</h3>
<p>Nice wallpapers !</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img149.imageshack.us/img149/3273/gamesheaderpv6.png?imgmax=800" class="full"/>

<img src="http://img149.imageshack.us/img149/3273/gamesheaderpv6.png?imgmax=800" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Blogging</h3>
<p>Learning</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img352.imageshack.us/img352/4818/pnggamesheaderze7.png?imgmax=800" class="full"/>
<img src="http://img352.imageshack.us/img352/4818/pnggamesheaderze7.png?imgmax=800" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Blogger Hack</h3>
<p>Blogger Tricks!</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img352.imageshack.us/img352/3115/firstxs1.png?imgmax=800" class="full"/>
<img src="http://img352.imageshack.us/img352/3115/firstxs1.png?imgmax=800" class="thumbnail"/>
</div>

<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready', startGallery);
</script>
</div>

Bunu kaydedelim ve işlemler bitmiş oluyor bu yukarıdaki koda göre siz kendi sitenizi ayarlayın, takıldığınız yerler olursa sorun ceplamaya çalışırım herkese tekrar kolay gelsin...

Unutmadan etiket boyunu değiştirmek için:

#myGallery, #myGallerySet, #flickrGallery
{width: 590px;height: 200px;z-index: 5;}
Kırmızı olan yerleri kendi sitemize göre değiştiriyoruz.




Devamını okuyun...>>