Merhaba değerli okuyucu arkadaşlarım;

Bu makalemde sizlere 125x125 reklam alanı oluşturmayı anlatacağım. Bu makalede Blogger kullananlar için reklam alanı olacak ama kodları sizde doğru bölüme koyarak kullanabilirsiniz. Yani HTML, WordPress, Blogger hatta MyBB, vBulletin gibi forum scriptlerinde dahi kullanabilirsiniz. Lafı uzatmadan hemen konuya geçiyorum.

Öncelikle arkadaşlar aşağıda vereceğim kodu  Yerleşim ➜ Gadget Ekle ➜ HTML/JavaScript yolunu izleyerek içine yapıştırıyoruz.

<center><table border="1"><tr><td width="125" height="125" align="center">
<a href="http://www.kgundovan.blogspot.com/p/iletisim.php" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5G143BtN9hUFnkI_M2ypRkgIlaibCd2DggNMuAJoZO08yUiCCOhZfrjt02cg7FdJBeyw82u356TqvHg8cTS4okAsAXFJhIy-gMOeDKZk1dl7W1WxrbBjkScca9XoqDLYkQKZqbwXQPuLs/s1600/125x125.gif"/></a></th>
<td width="125" height="125" align="center"> <a href="http://www.kgundovan.blogspot.com/p/iletisim.php" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5G143BtN9hUFnkI_M2ypRkgIlaibCd2DggNMuAJoZO08yUiCCOhZfrjt02cg7FdJBeyw82u356TqvHg8cTS4okAsAXFJhIy-gMOeDKZk1dl7W1WxrbBjkScca9XoqDLYkQKZqbwXQPuLs/s1600/125x125.gif"/></a> </th>
</tr><tr>
<td width="125" height="125" align="center">
<a href="http://www.kgundovan.blogspot.com/p/iletisim.php" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5G143BtN9hUFnkI_M2ypRkgIlaibCd2DggNMuAJoZO08yUiCCOhZfrjt02cg7FdJBeyw82u356TqvHg8cTS4okAsAXFJhIy-gMOeDKZk1dl7W1WxrbBjkScca9XoqDLYkQKZqbwXQPuLs/s1600/125x125.gif"/></a> </td>
<td width="125" height="125" align="center">
<a href="http://www.kgundovan.blogspot.com/p/iletisim.php" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5G143BtN9hUFnkI_M2ypRkgIlaibCd2DggNMuAJoZO08yUiCCOhZfrjt02cg7FdJBeyw82u356TqvHg8cTS4okAsAXFJhIy-gMOeDKZk1dl7W1WxrbBjkScca9XoqDLYkQKZqbwXQPuLs/s1600/125x125.gif"/></a> </td></tr></table></center>

Daha sonra "Kaydet" diyerek Gadget bölümünden ayarlarımızı (konumunu vs.) tamamlıyoruz.

Merhaba sevgili okuyucu dostlarım;

Bu makalemde sizlere Blogger kullananlar için güzel bir eklenti paylaşacağım. Bu eklenti sayesinde kendi blogumda da görebilirsiniz, makale içindeki resimlere CSS sayesinde şekiller veriyor. Herhangi bir kurulum vs. bir şey gerektirmiyor ve çok kısa bir süre içinde kurulumu bitiyor. Lafı uzatmadan eklentiye geçelim;

İlk önce admin (kumanda) panelinden şablonumuzu düzenlediğimiz bölüme geliyoruz.

]]></b:skin>

Kodumuzu girdikten sonra hemen üstüne aşağıda verdiğim kodları yapıştırıyoruz.

Eklemek istediğiniz stilin kodunu yazın, tek tek sıraladım.

 STİL 1 :

.post-body img {
border:0;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0px 0px 15px #000; /* Arkadaki gölgeyi verir. Değerlerle isterseniz oynayabilirsiniz. */
border-radius: 50%; /* Border Radius : Kenarın yuvarlanmasıdır. Yüzde ile oynayabilirsiniz.*/
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

STİL 2 :

.post-body img {
background:#FFF; /*Çevresindeki arka plan rengi  */
padding:15px; 
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0px 0px 15px #000; /* Gölge*/
border-radius: 0% 50%; /* Yuvarlatılmış kenar  */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

STİL 3 : 

.post-body img {
background:#FFF; /* Çevresindeki arka plan rengi */
padding:15px; /* Sınır Arasındaki Boşluk ve Görüntü */
border-radius: 50% 0; /*  Yuvarlatılmış kenar */
box-shadow: 0px 0px 15px #000; /* Gölge */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:0; /* Bu işlem ile sınır yuvarlaklık (değeri 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

STİL 4 : 

.post-body img {
box-shadow: 0px 0px 15px #000; /* Gölge*/
border-radius: 50%; /* Yuvarlatılmış kenar */
border:0;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0; /* Bu gölge (değeri 0) */
border-radius: 0; /* Bu işlem ile sınır yuvarlaklık (değeri 0)*/
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

STİL 5 : 

 .post-body img {
border-radius: 45% / 20%; /* Rounded border */
box-shadow: 0px 0px 15px #000; /* Gölge */
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0; /*  Bu yuvarlaklığını sınır (değeri 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

Eğer beğendiyseniz ne mutlu bana. İyi bloglamalar efenim :)

Merhaba okuyucu arkadaşlarım,

Bu makalemde sizlere Blogger ile ilgili bir konu hakkında yardımda bulunacağım. Baştan belirtmek isterim, Blogger konusunda ilk yazım olduğu için biraz acemiyim. Hatam varsa affola...

Arkadaşlar bu makalede başlıktanda anlayacağınız gibi ".... etiketine sahip yayınlar gösteriliyor" yazısını kaldıracağız. Aslında işlem çok basit. Nasıl olduğuna gelirsek, bir alt paragrafı okumaya başlayın.

İlk önce kumanda panelimizden (admin paneli) sol menüde bulunan "Şablon" bölümüne giriyoruz. Daha sonra yapacağımız işlem temamızda değişiklikler yapmamızı sağlayan "HTML'yi Genişlet" butonuna tıklamak. Sonra karşımıza kodlarla yığın bir alan çıkıyor. Burada CTRL + F komutunu kullanarak arama çubuğunu karşımıza alıyoruz ve şu kodları aratıyoruz :

<b:includable id='status-message'> <b:if cond='data:navMessage'> <div class='status-msg-wrap'> <div class='status-msg-body'> <data:navMessage/> </div> <div class='status-msg-border'> <div class='status-msg-bg'> <div class='status-msg-hidden'><data:navMessage/></div> </div> </div> </div> <div style='clear: both;'/> </b:if> </b:includable>

Bu kodları arattığınızda eğer karşınıza bir şey gelmediyse büyük ihtimalle farklı bir tema kullanıyorsunuzdur. O zaman şöyle yapalım, bu sayede sizde bir taktik öğrenmiş olursunuz; sadece baştaki kod parçacığını aratalım. Yani;

<b:includable id='status-message'>

Bu kodu arattığımızda karşımıza eminim ki aradığımız bölüm gelecektir. Şimdi ise bu kodun "</b:includable> ile bitene kadar ki bölümünü silelim ve aşağıda vereceğim kodları yerine yapıştıralım.

<b:includable id='status-message'> <b:if cond='data:navMessage'> <div> </div> <div style='clear: both;'/> </b:if> </b:includable>

Bu işlemide yaptıktan sonra işlemimiz tamamlanacaktır. Okuduğunuz için teşekkürler. İyi bloglamalar...