seo
tr-opencart

     
avatar Şuanki Zaman: 12-17-2017, 08:39 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  1926 - Yorum  7

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

Mesajlar: 3,114
Konular: 498
Katılma Tarihi: Jan 2012
Rep Puanı: 95
Teşekkürler: 1138
1012 Mesajına, 2051 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: 3,114
Konular: 498
Katılma Tarihi: Jan 2012
Rep Puanı: 95
Teşekkürler: 1138
1012 Mesajına, 2051 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: 3,114
Konular: 498
Katılma Tarihi: Jan 2012
Rep Puanı: 95
Teşekkürler: 1138
1012 Mesajına, 2051 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: 3,114
Konular: 498
Katılma Tarihi: Jan 2012
Rep Puanı: 95
Teşekkürler: 1138
1012 Mesajına, 2051 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: 3,114
Konular: 498
Katılma Tarihi: Jan 2012
Rep Puanı: 95
Teşekkürler: 1138
1012 Mesajına, 2051 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 1.5.x versiyonda Kategori Sayfasında Alt Kategorileri Resimli Yapma osdem66 62 18,724 12-15-2017 10:01 PM
Son Mesaj: FLStudio
  Opencart Stoğu biten ürünlerde Sepete Ekle Yerine Stokta yok ikonu göstermek osdem66 25 10,663 12-15-2017 05:24 PM
Son Mesaj: berkulucy
  Opencart Sizin İçin Seçtiklerimiz Modülü için indirim oranını gösterme problemi berkulucy 2 717 10-18-2017 11:30 AM
Son Mesaj: berkulucy
  Opencart 1.5.x Çözülemeyen Yetkilendirme Hatası qene 2 299 10-12-2017 09:51 AM
Son Mesaj: qene
  Opencart seçenekler bölümünde beden tükendi yazısı eticaretplus 2 1,546 07-31-2017 12:23 PM
Son Mesaj: eticaretplus
  Opencart Site Tasıma Sonunda Hata Aldım erkanarslan 1 209 07-17-2017 06:37 AM
Son Mesaj: fbajans
  opencart kendi kendine bozuluyor lütfen yardım edin cadarka 2 391 03-27-2017 03:22 PM
Son Mesaj: cadarka
  opencart 1.5.5.1 anasayfa ürün sayısı çoğaltma oktiy 0 375 03-17-2017 09:54 AM
Son Mesaj: oktiy
Exclamation [Mod] Opencart 1.5.6.4 ARAMA SORUNU! Kast1992 1 331 03-05-2017 08:19 PM
Son Mesaj: Kast1992
  Opencart 1.5.1.x Ürün detay sayfasına Kampanya Geri sayım eklemek osdem66 16 8,987 01-14-2017 05:10 PM
Son Mesaj: sekhil

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: