Shopping Cart Blogger Teması Turkce


   Ö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.

Tepkiniz nedir?

Çok Eğlendim Çok Eğlendim
0
Çok Eğlendim
Deneme Deneme
0
Deneme
Beğendim Beğendim
0
Beğendim
Yarıldım Yarıldım
0
Yarıldım
Sinirlendim Sinirlendim
0
Sinirlendim
hate hate
0
hate
Kafam Karıştı Kafam Karıştı
0
Kafam Karıştı
Fail Fail
0
Fail
Çalışkan Çalışkan
0
Çalışkan
Lol Lol
0
Lol
Aşık oldum Aşık oldum
0
Aşık oldum
Aman Tanrım Aman Tanrım
0
Aman Tanrım
Korktum Korktum
0
Korktum
Rahatladım Rahatladım
0
Rahatladım
OHA OHA
0
OHA
sosyofikir
Mimarlık Fakültesi sonsınıf öğrencisi, mimar adayı. :) 2010'dan beri sosyofikir.com blogumla yayın yapıyorum. Sosyal, müzik, felsefe, psikoloji, güncel, yaşam ve daha bir çok konuyla yakından ilgileniyorum. Siz değerli okurlarıma elimden geldiğince güzel içerikler sunmaya çalışıyorum. Hatamız olursa affola :)

8 Comments

Bu yazılarımızda ilginizi çekebilir..

More From: Blogger İpuçları

DON'T MISS

Bir format seç
Kişisel Test
Kişisel bir şey ortaya koymayı amaçlayan sorular dizisi
Önemsiz Test
Bilgiyi kontrol etmek isteyen doğru ve yanlış cevaplı sorular dizisi
Anket
Karar verme ya da görüş belirleme/oy verme
Hikaye/Olay
Gömülü ve Görsellerle Biçimlendirilmiş Metin
Liste
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Açık Liste
Submit your own item and vote up for the best submission
Oylanabilir Liste
Upvote or downvote to decide the best list item
Video
Youtube, Vimeo veya Vine Kodları
Ses
Soundcloud or Mixcloud Embeds
Görsel
Fotoğraf veya GIF
GIF
GIF Formatı