Blogger standart şablonlarını kullanarak ürünlerinizi satabileceğiniz yada göze hoş gelebilecek bir şekilde sergileyebileceğiniz bir kodu sizlere sunacağız.Bu kodu ile sergilediğiniz ürünün resmini,fiyatını,kısa açıklamasını düzenli bir şekilde ve net olarak ziyaretçilerinize sunabilirsiniz.Eğer daha profesyonel bir şablon isterseniz de bizim daha önce yayınladığımız blogger alışveriş şablonunu kullanabilirsiniz. |
Blogger standart şablonlarında ürün pazarlamak için hazırladığımız kodu sizlere iki şekilde vereceğiz.
1-Bahsettiğimiz Gibi Ürün Pazarlamak için
2-Yemek Blogu yazan blogger arkadaşlar için.
Yemek blogu yazanlarda da yine yemeklerde kullandıkları malzemeler,tarifi ve bir resmi düzenli olarak ziyaretçilerinize sunma imkanı verecek bir kodu paylaşacağız.
Blogger standart şablonlarında ürün pazarlamak için hazırladığımız koduyapılışı kodunu blogunuza eklemek için yapmanız gereken aşağıdaki kodu kopyalayıp Normal yazı yayınladığınız alanda HTML modundayken sayfanıza yapıştırmak.Ardından kod içerisinde gerekli düzenlemeleri yaptıktan sonra ürünümüzü yayınlamak.
1- Ürün Pazarlamada kullanacağınız kod.
<center><table border="1" style="width: 500px;"><tbody>
<tr><th class="item_thumb" id="thumb" width="40%"><a href="http://www.blogger.com/Your-Image-URL">
<img alt="Resmin Açıklaması" border="0" src="Resim URL Adresi Buraya" style="cursor: move; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;" /></a></th><td style="text-align: justify;">Detaylı Bilgiyi Buraya Yazın</td></tr>
<tr><th>ÜRÜN ADI</th><td class="item_name">Ürün Adını Burya Yazın</td></tr>
<tr><th>FİYATI</th><td class="item_price">Ürün Fiyatını Buraya Yazın</td></tr>
<tr><th>ÜRÜN AÇIKLAMASI</th><td class="item_Description">Ürün Kısa Açıklamayı Buraya Yazın</td></tr>
<tr><th>SİPARİŞ TELEFON</th><td class="item_Description">Sipariş Telefonunu Buraya Yazın</td></tr>
<tr><th>SİPARİŞ MAİL ADRESİ</th><td class="item_Description">Sipariş Mail Adresinizi Buraya Yazın</td></tr>
</tbody></table></center>
Kod içeriisnde renkli olarak verdiğimiz alanları kendinize göre düzenleyin.
Örnek olarak Aşağıda hazırladığımız örnek tasrıma bakabilirsiniz.Kodu HTML modundayken ekleyip Oluştur modunda istediğiniz gibi rahatlıkla düzenleyebilirsiniz.(Not:Aşağıdaki çanta ve özelliklertamamen bir örnek olarak verilmiştir)
2-Blogger Yemek Tarifi Blogları için Tablo Kodu:
<center><table border="1" style="width: 500px;"><tbody>
<tr><td style="text-align: left;"><h2 style="text-align: center;">
<i><span style="color: #660000;"><u><b>Malzeme Listesi</b></u></span></i></h2>
<div>
<table><tbody>
<tr><td><img border="0" height="27" src="http://2.bp.blogspot.com/-TmdiTiKsWXQ/UIFlgOzyYmI/AAAAAAAAAhs/KnK_v-GgStk/s320/havuc%2Bkopya.png" width="27" /></td><td>Malzeme</td></tr>
<tr><td><img border="0" height="27" src="http://2.bp.blogspot.com/-TmdiTiKsWXQ/UIFlgOzyYmI/AAAAAAAAAhs/KnK_v-GgStk/s320/havuc%2Bkopya.png" width="27" /></td><td>Malzeme</td></tr>
<tr><td><img border="0" height="27" src="http://2.bp.blogspot.com/-TmdiTiKsWXQ/UIFlgOzyYmI/AAAAAAAAAhs/KnK_v-GgStk/s320/havuc%2Bkopya.png" width="27" /></td><td>Malzeme</td></tr>
<tr><td><img border="0" height="27" src="http://2.bp.blogspot.com/-TmdiTiKsWXQ/UIFlgOzyYmI/AAAAAAAAAhs/KnK_v-GgStk/s320/havuc%2Bkopya.png" width="27" /></td><td>Malzeme</td></tr>
<tr><td><img border="0" height="27" src="http://2.bp.blogspot.com/-TmdiTiKsWXQ/UIFlgOzyYmI/AAAAAAAAAhs/KnK_v-GgStk/s320/havuc%2Bkopya.png" width="27" /></td><td>Malzeme</td></tr>
<tr><td><img border="0" height="27" src="http://2.bp.blogspot.com/-TmdiTiKsWXQ/UIFlgOzyYmI/AAAAAAAAAhs/KnK_v-GgStk/s320/havuc%2Bkopya.png" width="27" /></td><td>Malzeme</td></tr>
<tr><td><img border="0" height="27" src="http://2.bp.blogspot.com/-TmdiTiKsWXQ/UIFlgOzyYmI/AAAAAAAAAhs/KnK_v-GgStk/s320/havuc%2Bkopya.png" width="27" /></td><td>Malzeme</td></tr>
</tbody></table>
</div>
</td><th class="item_thumb" id="thumb" width="40%"><a href="http://www.blogger.com/Your-Image-URL">
<img alt="Resmin Açıklaması" border="0" src="Resim URL Adresi Buraya" style="cursor: move; display: block; height: 300px; margin: 0px auto 10px; text-align: center; width: 300px;" /></a></th></tr>
<tr><th style="text-align: left;"><div style="text-align: center;">
<i><span style="color: #660000;"><u>HAZIRLANIŞI</u></span></i></div>
<div style="text-align: center;">
<img border="0" height="100" src="http://4.bp.blogspot.com/-lrnRoHg1tNY/UIFqMDjluNI/AAAAAAAAAiA/oAmH3I7KQig/s200/cooker.gif" width="70" /></div>
</th><td class="item_name">Yemeğinizin,tarifini bu kısımda anlatabilirsiniz.</td></tr>
<tr><th style="text-align: left;"><i><span style="color: #660000;">PİŞİRME SÜRESİ</span></i></th><td class="item_price">Pişirme Süresini yazın</td></tr>
<tr><th style="text-align: left;"><i><span style="color: #660000;">TAVSİYELER</span></i></th><td class="item_Description">Özel Tavsiyeleri bu kısma yazabilirsiniz.</td></tr>
</tbody></table></center>
Kodu blogunuza html modundayken ekledikten sonra gerekli düzenlemeleri oluştur modundayken yaparsanız daha kolay içini doldurabilirsiniz.height:300px ve width:300px değerlerini değiştirerek resim boyutunu değiştirebilirsiniz.
Örnek Görünüm: