Shopping Cart Blogger Teması Turkce

7 dakika


47
9 Paylaşım, 47 Beğeni
   Öncelikle sosyofikir olarak bu temayı( Shopping Cart)  türkçe döküman olarak paylaşmaktan gurur duyuyorum. Galiba Blogger‘da ilk kez “sepete ekle” ve “paypal denetimi” gibi özellikleri içinde barındıran bir tema var. Shopping Cart temasından bahsediyorum..
 Başka blog servisleri mesela wordpress gibi olanlar “Düzenlenebilen alanlar” oluşturmuşlar bu da  yazınıza ekstra tanımlama, ücret, stok gibi bir çok kısmı içbir html koduna gerek kalmadan kendi içerisinde oluşturuyor siz sadece gerekli alanları yazıyorsunuz. Blogger bu tip bir özelliğe sahip değil. Bu yüzden biz sosyofikir olarak bloggerda bu özelliği bir “tablo metodu” halinde kullanmaya karar verdik.

shopping cart teması, shopping car themes, kayıt şablonu, sosyofikir
Bu temayı hala indirmediyseniz buraya tıklayarak öncelikle temayı indirebilirsiniz.
 Öncelikle aşağıdaki yolu izleyerek şu kodları yapıştırın
TARİH FORMATI AYARLAMA

Ayarlar==> Biçimlendirme
Şimdi  aşağıdaki resimdeki gibi Tarih formatını ayarlayın 
shopping cart teması, shopping car themes, kayıt şablonu, sosyofikir
Örneğin: Perşembe, Mart 22 gibi önce gün sonra ay gelecek şekilde.
Şimdi yine Ayarlar==> Biçimlendirme sayfasında aşağıya doğru geldiğinizde “Kayıt Şablonu”diye bir yer var. Bu yazınızn şablonunu oluşturmanızı sağlayan bir sistem. Buraya aşağıdaki kodu yapıştırın.

<table border=”1″ style=”width: 660px;”>

<tbody>

<tr>

<th class=”item_thumb” id=”thumb” width=”45%”><a href=”http://3.bp.blogspot.com/-k1EQIca2tCw/TdtZUjHTeGI/AAAAAAAACAs/vNwQwZAVkaI/s1600/blue.gif” onblur=”try {parent.deselectBloggerImageGracefully();} catch(e) {}”><img alt=”” border=”0″ id=”BLOGGER_PHOTO_ID_5610175970378217570″ src=”http://3.bp.blogspot.com/-k1EQIca2tCw/TdtZUjHTeGI/AAAAAAAACAs/vNwQwZAVkaI/s400/blue.gif” style=”cursor: hand; cursor: pointer; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;” /></a></th>

<td><input class=”item_add” type=”button” value=”Sepete Ekle” /></td>

</tr>

<tr>

<th><b>Ürün Adı</b></th>

<td class=”item_name”>Ürün İsmi Buraya Gelecek</td>

</tr>

<tr>

<th><b>Ücret</b></th>

<td class=”item_price”>99.99 TL</td>

</tr>

<tr>

<th><b>Tanımlama</b></th>

<td class=”item_Description”>Ürün tanımınız buraya gelecek.</td>

</tr>

<tr>

<th><b>Stok Durumu</b></th>

<td>Stok Sayısı</td>

</tr>

<tr>

<th><b>Fazlası</b></th>

<td>Ürün ile ilgili daha fazla resim, özellikleri</td>

</tr>

</tbody>

</table>

shopping cart teması, shopping car themes, kayıt şablonu, sosyofikir

Kodu ekledikten sonra sayfa böyle olmalı Kayıt Şablonu’na eklemelisiniz.

   Bu kodu yapıştırdıysanız bir sonraki aşamaya geçebiliriz.
                                       YAZI EDİTÖRÜNÜ AYARLAMA VE DÜZENLEME
    Şimdi Yeni bir yazı ekleme kısmından yazı editörüne gelin. Yani normal yazı yazar gibi şöyle bir şablon göreceksiniz.

shopping cart teması, shopping car themes, kayıt şablonu, sosyofikir
Bu demektir ki bu kısıma kadar olan adımları doğru uyguladınız. İsterseniz varsayılan resmi silebilirsiniz. Resimleri orta boy olarak kullanmanızı öneriyoruz. 
Burada gördüğünüz gibi Ürün adı, Ücreti(Price), Tanımlama(Description),Stok Durumu, Fazlası(Misc) gibi alanlar mevcut bunları istediğiniz gibi düzenleyebilirsiniz.   Zaten herşeyi belli ettim orada düzenlemek istediğiniz kısımları kafanıza göre düzenleyebilirsiniz..

Paypal E-mail Ayarlama
Eğer paypal üzerinden alış-verişlerinizi yapmak istiyorsanız emailiniz de varsa aşağıdaki gibi adımları uygulayarak paypa emailinizle siteizi birbirine bağlayabilirsiniz..
1.ADIM: TASARIM > HTML’Yİ DÜZENLE ctrl+ F tuşuna tıklayarak aşağıdaki kodu arayın.

simpleCart.email

Bu kodu bulduktan sonra şöyle bir kod dizisi göreceksiniz orada..

<script type=’text/javascript’> simpleCart.email = &quot;admin@sosyofikir.com&quot;; simpleCart.checkoutTo = PayPal; simpleCart.currency = TL; simpleCart.cartHeaders = [&quot;thumb_image&quot; , &quot;Quantity_input&quot; , &quot;Total&quot;, &quot;remove&quot; ]; </script>

Yani şöyle görünecek ;
shopping cart teması, shopping car themes, kayıt şablonu, sosyofikir
 Burayı kendi hesap bilgilerinize göre düzenleyin. admin@sosyofikir.com yazan kısmı kendi paypal mail adresiniz ile düzenleyin. Daa sonra Şablonu kaydet deyip çıkın
paypal
 Bir pop-up penceresi şeklinde çıkacak paypal penceresi, sitenizde böyle görünecek.
Paypal heabı kullanmıyorum E-mail kontak formu oluşturmak istiyorum diyorsanız. 
“Sepete Ekle” butonunu email iletişim ( kontak) formunuza bağlayabilirsiniz. Öncelikle
 Kontacr.com  adresine bağlanın ve yeni bir üyelik alın (register for a new account).  Kontacr sitesine üye olduktan sonra kaydırma çubuğunu alağı doğru indirdiğinizde “Ajax Embed Widget” veya Buttons Code” gibi bir bölüm göreceksniz. burada sizin Kontacr ID’niz mevcut örn: :- id=39782; bu kodu kopyalayaın  ve aşağıdaki adımları uygulayın. 
1.Adım: Tasarım > Html’yi Düzenle
ctrl+f ile şu kodu arayın </head> daha sonrasında bu kodun hemen altına aşağıdaki kodu yapıştırın.

<script type=”text/javascript” src=”http://kontactr.com/kpu/kontactr.js”></script>

Daha sonrasında aşağıdaki kod dizisini CTRL + F İLE ARATIN.
input.item_add{
    bottom: 9px;
    font-size: 11px;
    position: absolute;
    right: 15px;
    width: 90px;
}
 Bu temada iki adet input.item_add mevcut. Ama aradaki fark CSS’ye bakarken daha önce olan kodu bulmanız yani sayfanın daa öncesinde bulduğunuz  (CSS kısmından önceki input.item_add ile başlayan kod dizisi bulmanız gereken) Bu kod dizisini aşağıdaki kod dizisi ile değiştirin.
span.item_add{
    bottom: 9px;
    font-size: 11px;
    position: absolute;
    right: 15px;
    width: 90px;
}
 Şimdi sıra geldi ikinci input.item_add kısmına (CSS Kodunun altında bulunacak bu 2.input,tem_add)
input.item_add {
    font-size: 17px;
    height: 40px;
    margin: 5px 0 0 140px;
    position: relative;
    width: 120px;
}
Bu kod dizisinini aşağıdaki kod dizisi ile değiştirin.
span.item_add {
    font-size: 17px;
    height: 40px;
    margin: 5px 0 0 140px;
    position: relative;
    width: 120px;
}

Şimdi Tasarımı Kaydet deyin ve Ayarlar > Biçimlendirme kısmına gidin.

Daha önceden kayıt şablonuna bir kod eklemiştik hatırladınız mı?

<table border=”1″ style=”width: 660px;”>

<tbody>

<tr>

<th class=”item_thumb” id=”thumb” width=”45%”><a href=”http://3.bp.blogspot.com/-k1EQIca2tCw/TdtZUjHTeGI/AAAAAAAACAs/vNwQwZAVkaI/s1600/blue.gif” onblur=”try {parent.deselectBloggerImageGracefully();} catch(e) {}”><img alt=”” border=”0″ id=”BLOGGER_PHOTO_ID_5610175970378217570″ src=”http://3.bp.blogspot.com/-k1EQIca2tCw/TdtZUjHTeGI/AAAAAAAACAs/vNwQwZAVkaI/s400/blue.gif” style=”cursor: hand; cursor: pointer; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;” /></a></th>

<td><span class=”item_add”><script type=”text/javascript”> id=39782; t=1; ctxt=”Order Now”; </script>

<script type=”text/javascript” src=”http://kontactr.com/kpu/kontactr.js”></script></span></td>

</tr>

<tr>

<th><b>Ürün Adı</b></th>

<td class=”item_name”>Ürün İsmi Buraya Gelecek</td>

</tr>

<tr>

<th><b>Ücret</b></th>

<td class=”item_price”>99.99 TL</td>

</tr>

<tr>

<th><b>Tanımlama</b></th>

<td class=”item_Description”>Ürün tanımınız buraya gelecek.</td>

</tr>

<tr>

<th><b>Stok Durumu</b></th>

<td>Stok Sayısı</td>

</tr>

<tr>

<th><b>Fazlası</b></th>

<td>Ürün ile ilgili daha fazla resim, özellikleri</td>

</tr>

</tbody>

</table>

Oradaki kod dizisini bu kod dizisi ile değiştirin. Daha sonra orada kırmızı ile işaretlenmiş olan id=39782; bu Id’yi Kontacr.com‘dan aldığınız üyelik ID’niz ile değiştirin. Ve “Ayarları Kaydet” düğmesine tıklayın.

Son olarak TASARIM > HTML’Yİ DÜZENLE sekmesine tıklayınız.
 Aşağıdaki kodu bulunuz.

<script src=’http://introbloggerscripts.googlecode.com/files/cart.js’ type=’text/javascript’/>

Bu kodu bulduktan sonra hemen alttaki kod ile değiştirin.

<script src=’http://shopppingcart.googlecode.com/files/simplecart.js’ type=’text/javascript’/>

Kaynakça

İngilizce tema’nın orjinal sitesi için burayı tıklayınız.

Tema ile ilgili bir sıkıntınız olursa ben burada cevaplamaya hazırım.
Yorumlarınızı bekliyorum.

Beğendiniz mi? Arkadaşlarınızla Paylaşın!

47
9 Paylaşım, 47 Beğeni

Sizin Tepkiniz Nedir?

Beğendim Beğendim
0
Beğendim
Beğenmedim Beğenmedim
0
Beğenmedim
Şaşırdım Şaşırdım
0
Şaşırdım
Güldüm Güldüm
0
Güldüm
İnanılmaz İnanılmaz
0
İnanılmaz
Kızdım Kızdım
1
Kızdım
Oha Oha
0
Oha

8 Yorum

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bir format seç
Kişisel Test
Kişisel bir şey ortaya koymayı amaçlayan sorular dizisi
Basit Test
Bilgiyi kontrol etmek isteyen doğru ve yanlış cevaplı sorular dizisi
Anket
Karar verme ya da görüş belirleme/oy verme
Serbest Yazı
Yazılarınıza Görseller Bağlantılar Ekleyebilirsiniz
Liste
Klasik İnternet Listeleri
Geri Sayım Listesi
Klasik İnternet Geri Sayım Listeleri
Açık Liste
Kendi öğenizi gönderin ve en iyi sunum için oy verin
Oylanabilir Liste
En iyi liste öğesine karar vermek için yukarı veya aşağı basın