Blogger Tablo Menü 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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguzP9nDigF41SmmvMhlv8VPGObHl_wLMoT9HGlf1NDmMs6a7Pn3JL1kvbHpOJiJTzcKmgzK3ekSDgKUX9aF5aXTK4VBWOP8sc1hWcTHUEbudJbWjYDZS0Npe_PZWz2yb2Y8_M0IJSCNQPG/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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs-P7fnyvo2JVlDdH2CogCuoQjbKSiiN2TS-1ridWo7Wgnr4pQh-_a2z2sc1oag0z8R-3gPcFhCbJ6lQ1zw0M7Zr8oqUcEoS6gWrTZya1zxaMh7WcIEUhhJDjd7ttVk-7j3nB9WELGtB75/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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6JOH_NNl-2G3SpRUEodtxj0EVslBz0cVrEKp9dwtnoyk8UCuYkVSer3TgCiePE5ehDVoKtspxR3HTVty8XS4C0RpfXU24MIZlbe70ZtCnNFBpXnxLL5FGE7c9WEWkaJcgo6pQx2R7B6gC/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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXrcs-3X67XqBgTpr6OcTnJk3mdJCijVbFjleC9ZSeNekhwO3N1PdWnThYgoz6H_5LsR3UelTZE8zp0Y75ffZRP47wvH-wMAQZm85v75jrXlG_-qI8oSu_zaD5u7SczEBajRqZHIEXGXzZ/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 :

Video Paylaşım Teması	Blur E-Ticaret Teması
Blue Dream Teması	Borneo Haber Teması

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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguzP9nDigF41SmmvMhlv8VPGObHl_wLMoT9HGlf1NDmMs6a7Pn3JL1kvbHpOJiJTzcKmgzK3ekSDgKUX9aF5aXTK4VBWOP8sc1hWcTHUEbudJbWjYDZS0Npe_PZWz2yb2Y8_M0IJSCNQPG/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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguzP9nDigF41SmmvMhlv8VPGObHl_wLMoT9HGlf1NDmMs6a7Pn3JL1kvbHpOJiJTzcKmgzK3ekSDgKUX9aF5aXTK4VBWOP8sc1hWcTHUEbudJbWjYDZS0Npe_PZWz2yb2Y8_M0IJSCNQPG/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 >>