Blogger Tablo Menü Oluşturmak


Blogger Dersleri - Blogger Tablo Oluşturmak
Blogger Dersleri - Blogger Tablo Oluşturmak 

Blogger soru - cevap bölümü ile sizlerin sorunlarınıza elimden geldiğinice yardımcı olmaya çalışacağımızı belirtmiştim. Ahmet Güler arkadaşımızın isteği Wordpress Tarzı Sponsor Alanı >>  sorusu üzerine bu konuyu Blogger için html kodları ile halletmeye çalışacağız.

Bildiğiniz gibi Wordpress bloglarında özel bir dörtlü sponsor alanı bulunmaktadır. Henüz blogger kullanıcıları için böyle bir düzenleme yapılmadı fakat biz bunu HTML kodları ile basitçe yapabiliriz. Öncelikle belirtmeliyim ki oluşturduğumuz menünün kodlarını kendimiz düzenleyeceğimiz için hemen hemen her özelliğini kendimize göre uyarlayabiliriz. Bu sebeple Blogger Tablo Menü kodları üzerinden bir anlatım tercih edeceğim.


Blogger Dersleri - Blogger Tablo Menü  Kullanımı 

Blogger Tablo menüyü kullanmak için Yerleşim >> Gadget Ekle >> HTML/Java Script kutucuğunu kullanarak Blogger menü  kodlarını eklemelisiniz. 

Yazı içerisinde kullanmak istiyorsanız HTML bölümüne kod dizinini ekleyerek  Blogger menü  kodlarını  eklemeniz yeterlidir.

 Blogger Dersleri - Blogger Tablo Menü Kodları 

<div align="center">
<table border="0"  cellpadding="2" cellspacing="6" width="300"bgcolor="#ffffff">
<tbody><tr>
<td><center><a target="_blank" href="http://temalar.bloggerdersleri.com/2012/09/blogger-turkce-video-paylasim-temasi.html" " title=" blogger türkçe video paylaşım teması ">Video Paylaşım Teması</a><p></p> <a target="_blank" href=" http://temalar.bloggerdersleri.com/2012/09/blogger-turkce-video-paylasim-temasi.html" rel="dofollow"> <img border="0" alt=" Blogger Türkçe Video Paylaşım Teması " title=" Blogger Türkçe Video Paylaşım Teması " width="125" src=" http://1.bp.blogspot.com/-OmksrjBQ6so/UEFgcpNytwI/AAAAAAAAGck/4rcqTqb8FrA/s320/blogger-turkce-video-paylasim-temasi.png" height="160"/></a></center></td>

<td><center><a target="_blank" href="http://temalar.bloggerdersleri.com/2012/09/blogger-blur-e-ticaret-temasi.html" " title=" blogger blur e-ticaret teması"> Blur E-Ticaret Teması</a><p></p> <a target="_blank" href=" http://temalar.bloggerdersleri.com/2012/09/blogger-blur-e-ticaret-temasi.html" rel="dofollow"> <img border="0" alt=" Blogger Blur E-Ticaret Teması " title=" Blogger Blur E-Ticaret Teması" width="125" src=" http://3.bp.blogspot.com/-LBtCpP3-Vh0/UESjYbvHZYI/AAAAAAAAGhk/XV0tsukCTCM/s320/blogger-blur-e-ticaret-temasi.png" height="160"/></a></center></td>
 </tr>
<tr>
<td><center><a target="_blank" href="http://temalar.bloggerdersleri.com/2012/09/blogger-blue-dream-temasi.html" " title=" blogger blue dream teması "> Blue Dream Teması</a><p></p> <a target="_blank" href=" http://temalar.bloggerdersleri.com/2012/09/blogger-blue-dream-temasi.html" rel="dofollow"> <img border="0" alt=" Blogger Blue Dream Teması " title=" Blogger Blue Dream Teması" width="125" src=" http://1.bp.blogspot.com/-duAwdE_0Qrk/UE0EXrO34hI/AAAAAAAAGsE/YoAS-Iz3yPY/s320/blue-dream-blogger-temasi.png" height="160"/></a></center></td>

<td><center><a target="_blank" href="http://temalar.bloggerdersleri.com/2012/09/blogger-borneo-haber-temasi.html" " title="  borneo haber teması"> Borneo Haber Teması</a><p></p> <a target="_blank" href=" http://temalar.bloggerdersleri.com/2012/09/blogger-borneo-haber-temasi.html" rel="dofollow"> <img border="0" alt="  Borneo Haber Teması " title="  Borneo Haber Teması " width="125" src=" http://2.bp.blogspot.com/-q8u1wh669UE/UEPbyl_OCII/AAAAAAAAGgk/kWfA9tDKtSs/s320/blogger-borneo-haber-temasi.png" height="160"/></a></center></td>
</tr>
</tbody></table>
<table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody>
      <tr>
       
      </tr>

    </tbody></table>
</div>

Blogger Dersleri - Blogger Tablo Menü Demo : 


Blogger Dersleri - Blogger Tablo Menü Düzenlemeleri 

Kodlar üzerinde yapılacak düzenlemeler ile istediğimiz gibi bir tablo oluşutarabilirsiniz. 

Ana kod dizinimizde dört adet aynı tipte kod var her resmi oluşturan  kod: 
<center><a target="_blank" href="http://temalar.bloggerdersleri.com/2012/09/blogger-turkce-video-paylasim-temasi.html" " title=" blogger türkçe video paylaşım teması ">Video Paylaşım Teması</a><p></p> <a target="_blank" href=" http://temalar.bloggerdersleri.com/2012/09/blogger-turkce-video-paylasim-temasi.html" rel="dofollow"> <img border="0" alt=" Blogger Türkçe Video Paylaşım Teması " title=" Blogger Türkçe Video Paylaşım Teması " width="125" src=" http://1.bp.blogspot.com/-OmksrjBQ6so/UEFgcpNytwI/AAAAAAAAGck/4rcqTqb8FrA/s320/blogger-turkce-video-paylasim-temasi.png" height="160"/></a></center></td>
  • Kırmızı olarak belirlenmiş kodlar oluşturulan menü üzerindeki yazı linki yazı linkinin varacağı yer ve title kodu link açıklaması. 
  • Mavi olarak belirlenmiş kodlar ise oluşturulan menünün resim içeriği . Tıklandığında ulaşılacak link ,  alt kodu resim açıklaması , title kısmı resim açıklaması , src ise gerekli olan resmin uzantısı. 

Blogger Tablo Boyut  ve Renk Düzenleme

<table border="0"  cellpadding="2" cellspacing="6" width="300"bgcolor="#ffffff">

<center><a target="_blank" href="http://temalar.bloggerdersleri.com/2012/09/blogger-turkce-video-paylasim-temasi.html" " title=" blogger türkçe video paylaşım teması ">Video Paylaşım Teması</a><p></p> <a target="_blank" href=" http://temalar.bloggerdersleri.com/2012/09/blogger-turkce-video-paylasim-temasi.html" rel="dofollow"> <img border="0" alt=" Blogger Türkçe Video Paylaşım Teması " title=" Blogger Türkçe Video Paylaşım Teması " width="125" src=" http://1.bp.blogspot.com/-OmksrjBQ6so/UEFgcpNytwI/AAAAAAAAGck/4rcqTqb8FrA/s320/blogger-turkce-video-paylasim-temasi.png" height="160"/></a></center></td>
  • Kırmızı renkle yazılan  sayısal değerler üzerinde oynama yaparak boyutlandırmaları değiştirebilirsiniz. 
<table border="0"  cellpadding="2" cellspacing="6" width="300"bgcolor="#ffffff">

Menünün arka plan rengini kendinize göre düzenleyebilirsiniz tek yapmanız gereken istediğiniz rengin kodunu eklemek. Renk Kodlarına Buradan Bakabilirsiniz >> 



Makaleyi Paylaş :
 

Yorum Gönder

 
Hakkında : kredi kartı borcu taksitlendirme
Copyright © 2012 - 2013. Blogger Dersleri - All Rights Reserved | Proudly powered by Blogger