seoseo
tr-opencart

     
avatar Şuanki Zaman: 12-04-2016, 11:23 PMHoşgeldin Misafir !
  Şifremi Hatırlat   kayıt ol
opencart temaları

Opencart Sprite Logo Yapımı Yayında

Konuyu görüntüleyenler: 1 Misafir
 
Değerlendir:
  • 0 Oy - 0 Yüzde
  • 1
  • 2
  • 3
  • 4
  • 5
%
Cevapla  Gönder 
v  v
Yazar  Kıroğlumarket - Görüntüleme - Okunma  1445 - Yorum  7

Kıroğlumarketv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 2,964
Konular: 474
Katılma Tarihi: Jan 2012
Rep Puanı: 93
Teşekkürler: 1106
964 Mesajına, 1977 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 03-29-2015 07:06 PM
Css sprite logo nedir ?

Css sprite, e-ticaret sitenize giriş yaptığınız zaman sitenize çağrılmakta olan bütün resimleri bir araya getirerek tek bir resim üzerinden çağırılmalarını sağlayan tekniktir. Direk olarak sitenizin açılış hızını arttırıcı ve buna paralel olarak arama motoru optimizasyonunuzdan daha yüksek performans almanızı sağlamaktadır.

demo : http://lazbakkal.biz/index.html

Css dosyamıza ekleyelim :

Alıntı:/* Actual content stuff! */
.container {
margin:0 auto 50px;
height:156px;
width:156px;

position:relative;
}
.border {
border:4px solid #da4e48;
}
.container img {
position:relative;
z-index:-1;
}

.example {
animation:animate_bg 3.75s steps(44) infinite;;

background-image:url(http://mozorg.cdn.mozilla.net/media/img/...tail.png);
}

.bg {
background-image:url(http://mozorg.cdn.mozilla.net/media/img/...tail.png);
}

.anim {
background-image:url(http://mozorg.cdn.mozilla.net/media/img/...tail.png);

animation:animate_bg 44s linear infinite;
}
.anim img {
animation:animate_img 44s linear infinite;
}
.anim img:nth-child(2) {
transform:translateY(-156px) translateX(-6864px);
}
.anim img:nth-child(3) {
transform:translateY(-312px) translateX(-13728px);
}

.steps, .steps img {
animation-timing-function:steps(44);
}

.speed, .speed img {
animation-duration:3.75s;
}

@keyframes animate_bg {
0% {background-position: -6864px 0; }
100% {background-position: 0 0;}
}
@keyframes animate_img {
0% {left:0; }
100% {left:6864px;}
}


dosyamızı açalım : catalog/view/theme/seninteman/template/common/

header.tpl


bul :

Alıntı: <?php if ($logo) { ?>
<div id="logo"><a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a></div>
<?php } ?>

değiştir :

Alıntı:<?php if ($logo) { ?>
<div id="logo"><div class="content">
<div class="example container" onclick="location.href='<?php echo $home; ?>'" title="<?php echo $name; ?>" alt="<?php echo $name; ?>">></div></div></div>
<?php } ?>
Kıroğlumarket
Alıntı Yaparak Cevapla
Paylaş!
 Teşekkür Edenler: alikral , hakan1122
opencart temaları
Kıroğlumarketv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 2,964
Konular: 474
Katılma Tarihi: Jan 2012
Rep Puanı: 93
Teşekkürler: 1106
964 Mesajına, 1977 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 03-30-2015 09:28 AM
örnek an itibarıla eklenmiştir.
Kıroğlumarket
Alıntı Yaparak Cevapla
Paylaş!
hakan1122v
Acemi Üye
**
Üye user avatar
Çevrimdışı

Mesajlar: 13
Konular: 3
Katılma Tarihi: Jul 2014
Rep Puanı: 0
Teşekkürler: 6
1 Mesajına, 1 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 04-30-2015 04:10 PM
örnek için teşekkürler fakat açıkçası, tam olarak anlayamadığım için uygulayamadım.
Kendi yaptığım aşamaları anlatayım yanlışlarımı düzeltirseniz sevinirim.
-PageSpeed Insights ile sitemde css sprite ihtiyacı olan resimleri belirledim
-http://spritegen.website-performance.org/ adresinden resimlerin birleştirilmiş halini ve kodlarını aldım.
Ancak bu kodları nereye ne şekilde yazmam gerektiğini çözemedim.

Tahminimce yaptığım çalışmada aşağıdaki kodları stylesheet.css dosyama yapıştırdım. (spritesheet.png birleşmiş resim dosyam)
.sprite { background-image: url(http://www.toptanci41.com/image/spritesheet.png); background-repeat: no-repeat; display: block;}
.sprite-addtocart { width: 86px; height: 22px; background-position: -5px -5px;}
.sprite-facebook { width: 16px; height: 16px; background-position: -174px -5px;}

şimdi resimlerimin olduğu uzantıya;
img src="image/facebook.png" kısmına tam olarak ne yazmam gerekir css'den bu resimi alabilmesi için?
Ya da ben başka bir yerde mi hata yapıyorum yardımcı olabilir misiniz?
Alıntı Yaparak Cevapla
Paylaş!
Kıroğlumarketv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 2,964
Konular: 474
Katılma Tarihi: Jan 2012
Rep Puanı: 93
Teşekkürler: 1106
964 Mesajına, 1977 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 04-30-2015 07:16 PM
@hakan1122 bunu ne amaçlı kullanacaksınız. site logosu olarakmı yoksa buton olarakmı ?
Kıroğlumarket
Alıntı Yaparak Cevapla
Paylaş!
hakan1122v
Acemi Üye
**
Üye user avatar
Çevrimdışı

Mesajlar: 13
Konular: 3
Katılma Tarihi: Jul 2014
Rep Puanı: 0
Teşekkürler: 6
1 Mesajına, 1 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 04-30-2015 07:58 PM
buton, facebook küçük resmi, üst kısma kaydırma resmi, sepete at ve incele butonlarının ve birkaç tane daha küçük resim için kullanmayı düşünüyorum.
Alıntı Yaparak Cevapla
Paylaş!
Kıroğlumarketv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 2,964
Konular: 474
Katılma Tarihi: Jan 2012
Rep Puanı: 93
Teşekkürler: 1106
964 Mesajına, 1977 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 04-30-2015 08:11 PM
(04-30-2015 07:58 PM)hakan1122 Yazılan:  buton, facebook küçük resmi, üst kısma kaydırma resmi, sepete at ve incele butonlarının ve birkaç tane daha küçük resim için kullanmayı düşünüyorum.

geniş bir istek Smile şimdi şöyle izah etmek gerekirse sprite işlemi geniş çaplı bir yelpazesi var ben üstte sadece logo için örnek verdim şöyleki o resimdeki normalder 25 frame varken sprite işlemi ile sanki tek resim miş gibi gösterilmektedir. Sizin istediğiniz olayda da sprite kullanılabilir. ama hepsini tek bir resim içersinden çekmek baya bir karmaşıktır. biraz uğraş ister ben ise bunu etap etap anlatmak isterim sizin için uygunsa ?
Kıroğlumarket
Alıntı Yaparak Cevapla
Paylaş!
opencart temaları
hakan1122v
Acemi Üye
**
Üye user avatar
Çevrimdışı

Mesajlar: 13
Konular: 3
Katılma Tarihi: Jul 2014
Rep Puanı: 0
Teşekkürler: 6
1 Mesajına, 1 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 05-01-2015 10:20 AM
çok memnun olurum adım adım açıklarsanız Smile
Alıntı Yaparak Cevapla
Paylaş!
Kıroğlumarketv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 2,964
Konular: 474
Katılma Tarihi: Jan 2012
Rep Puanı: 93
Teşekkürler: 1106
964 Mesajına, 1977 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 05-01-2015 01:57 PM
(05-01-2015 10:20 AM)hakan1122 Yazılan:  çok memnun olurum adım adım açıklarsanız Smile

şuanda her ürüne ücretsiz kargo modifikason dersini hazırlamaktaım son ra bu konua odaklanılacaktır.
Kıroğlumarket
Alıntı Yaparak Cevapla
Paylaş!
 Teşekkür Edenler: sakaryanotebook

« Önceki | Sonraki »
Cevapla  Gönder 

Opencart Sprite Logo Yapımı Yayında  Konusunun Linki Direk Link
Opencart Sprite Logo Yapımı Yayında  Konusunun HTML Kodu HTML Link
Opencart Sprite Logo Yapımı Yayında  Konusu BBCode Linki BBCode Link
Opencart Sprite Logo Yapımı Yayında  Konusunu Paylaş Sosyal Paylaş

Benzeyen Konular
Konu: Yazar Cevaplar: Gösterim: Son Mesaj
  Opencart Anasayfa sorunu / yardıma ihtiyacım var :( emontkral9 1 59 Bugün 05:38 PM
Son Mesaj: ARD4
  eposta ya logo ekleme tuncaksoy 2 103 11-25-2016 12:27 AM
Son Mesaj: tuncaksoy
  Logo Link Değişimi erhan573 1 71 11-07-2016 01:03 PM
Son Mesaj: ibrahim_130
  opencart 2.x otomatik ürün kodu ekleme redwhite27 3 1,357 10-20-2016 04:33 PM
Son Mesaj: kurugaddere
  Opencart 1.5.1.x &1.5.2.x Tüm likleri seo lu yapmak osdem66 22 9,647 09-18-2016 04:09 PM
Son Mesaj: smhcn
  Opencart 1521-1531-1541-1551 de Mesafeli Satış Sözleşmesinde Son nokta (Colorbox) osdem66 81 19,642 09-02-2016 12:15 AM
Son Mesaj: draw1907
  Opencart 1.5.6.3 sürümü Fiyat +KDV Gösterimi **** Yardım!!! unalberke 0 195 08-23-2016 07:02 PM
Son Mesaj: unalberke
  Opencart üzerinden spam mail gönderiliyor nasıl düzeltirim ? evren236 1 497 08-14-2016 02:08 AM
Son Mesaj: asdfgh
  Opencart Tüm sayfalarda Canonical Link oluşturmak osdem66 15 4,711 08-11-2016 08:24 PM
Son Mesaj: ezgiaa
  Opencart index.php 51 ve 67 Sorunu #Thanatos 0 169 07-29-2016 11:12 AM
Son Mesaj: #Thanatos

Opencart Sprite Logo Yapımı Yayında indir, Opencart Sprite Logo Yapımı Yayında Videosu, Opencart Sprite Logo Yapımı Yayında online izle, Opencart Sprite Logo Yapımı Yayında Bedava indir, Opencart Sprite Logo Yapımı Yayında Yükle, Opencart Sprite Logo Yapımı Yayında Hakkında, Opencart Sprite Logo Yapımı Yayında nedir, Opencart Sprite Logo Yapımı Yayında Free indir, Opencart Sprite Logo Yapımı Yayında oyunu, Opencart Sprite Logo Yapımı Yayında download


Forum Atla: