Haftanın Ücretsiz Responsive Teması#8
456
23
Merhaba arkadaşlar. Ramazanınız Mübarek olsun. Fark ettiyseniz Ramazana girdik gireli sitemizde bir şey paylaşmadık. Neyse bundan sonra telafi ederiz. Telafimizin başlangıcı olarak sizlerin kullanabileceği Ücretsiz Responsive bir Tema paylaşmak istedim. Çok kullanışlı bir tema olduğu için herkesin beğeneceğini umuyorum. Daha önemlisi de RESPONSİVE bir tema olması… Bu özelliğiyle de bir çok site için düşünebilirsiniz. Neyse şimdilik kısa tutuyorum. Beğendiğinize dair mesajlarınızı iletirseniz seviniriz tabiki de… Kolay gelsin. Tekrar, hayırlı Ramazanlar..
(456)
Yorum(23)
Yorum bırakın Yanıtı iptal et
Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.
harika bi insansınız abicim.. sizin paylaştıklarınızı insanlar parayla yapıyorlar ve yazılım grubuna üyemisiniz bilmiyorum ama insanlar hep sizin sitenizden çıkmıyor. İnşallah böyle devam eder 🙂 Teşekkürler, kolay gelsin.
Abi sen bir harikasın yardımların ve uğraşların için teşekkürler
#SempatikBilisimci
Muhammed ve yunus iyi düşünceleriniz çok teşekkür ederim. tabi bu yazıları yukarıdaki paylaş butonlarına basarak diğer arkadaşlarınızla paylaşabilirsiniz. Bende sevinirim. Kolay gelsin.
Merhaba hocam, öncelikle paylaşımlarınız için son derece teşekkür ederim. benim sorum şu olacak;
bu tema üzerinden giderek sayenizde çok güzel bir site yapacağım. ancak facebook ve twitter iconları mevcut olup instagram ikonunu nasıl eklerim? icon konusunda image klasöründen nasıl png yapıldığını gördüm ve ek olarak instagram ikonu ekledim ama link kısmında instagramı halledemiyorum. yani örneklemek gerekirse;
facebook iconunu devreye sokan kod, burada beh kısmı facebook u temsil ediyor. aynı şekilde twitter da beh yerine face yazıyor. nette araştırdım ama bu kodlar ile ilgili bir bilgi bulamadım. instagram ikonunu faliyete sokmam için ne yapmam gerek.
teşekkür ederim.
Ali Arkadaşım bu temada ne facebook iconu var nede twitter. Nereden bahsediyorsun anlamadım.
Hocam sizin göndermiş olduğunuz index dosyasını açtım ve ekran görüntüsü anasayfa da gözüküyor.
index dosyası içindeki face ve twitter kodu da aşağıda paylaşıyorum.
bahsetmek istediğim bu hocam, ben buraya birde instagram eklemek istiyorum.
Ali arkadaşım, index dosyasında o görünen kodlarda bir tanesini kopyala altına yapıştır. beh ve face classlarını style.css dosyasında tanımlı orada buluyorsun ve kendin yeni bir class tanımlayarak style.css dosyasına ekliyorsun. Sonra images içindeki index-icons.png resmine senin eklemek istediğin resmi ekliyorsun. Burada yapılacakları anlattım. Gerisi senin CSS bilgine bağlıdır. Kolay gelsin.
teşekkürler hocam o konuda sıkıntım yok, onları yaptım ancak burada belirtilen
class içindeki face twitter ı
beh de facebook u temsil ediyor. instagram için ne yazmam gerekiyor onu çözemedim hocam
style.css dosyasında onları bulduysan onlar gibi bir isim belirleyeceksin o kadar. ister beh2 de ister instagram de. Kısacası class tanımlayacaksın. Bu kadar ..
çok teşekkür ederim hocam sağ olun. bir de rent a car için bir ücretsiz responsive site html ve css li yayınlarsanız süper mutlu olurum hocam teşekkür ederim.
Hocam merhaba, bu tema da slaytın kendi kendine geçişini yapamadım. sizin hazırladığınız siteye baktım tema8 olana onda da geçiş olmuyor. otomatik olarak fotoların geçişini nasıl sağlarım?
iyi akşamlar yukaridaki template de arka plandaki sliderin tıklayarak değilde kendiliğinden otomatik olarak geçiş yapması için ne yapmam gerekli yardımcı olursanız sevinirim.
Kemal arkadaşım Aşağıdaki yorumda murat mizan arkadaşmızın söylediklerini yaparsan olacaktır. Kolay gelsin
sagol ömer kardeş arkadaşlar beklemede kalmsın diye yazdım sana sormadım ama kusura bakma tekrar
arkadaşlar slider oto geciş için index.html ve diger html dosyalarındaki altta bulunan script kodunu silin yerine aşağıdaki kod yapıştırın tamamdır slider otomatik geciş yapacaktır.
$(function() {
var BlurBGImage = (function() {
var $bxWrapper = $(‘#bx-wrapper’),
// loading status to show while preloading images
$bxLoading = $bxWrapper.find(‘div.bx-loading’),
// container for the bg images and respective canvas
$bxContainer = $bxWrapper.find(‘div.bx-container’),
// the bg images we are gonna use
$bxImgs = $bxContainer.children(‘img’),
// total number of bg images
bxImgsCount = $bxImgs.length,
// the thumb elements
$thumbs = $bxWrapper.find(‘div.bx-thumbs > a’).hide(),
// the title for the current image
$title = $bxWrapper.find(‘h2:first’),
// current image’s index
current = 0,
// variation to show the image:
// (1) – blurs the current one, fades out and shows the next image
// (2) – blurs the current one, fades out, shows the next one (but initially blurred)
// speed is the speed of the animation
// blur Factor is the factor used in the StackBlur script
animOptions = { speed : 700, variation : 2, blurFactor : 10 },
// control if currently animating
isAnim = false,
// check if canvas is supported
supportCanvas = Modernizr.canvas,
// slideshow
slideshow_interval = 4000,
slideshow_time,
// init function
init = function() {
// preload all images and respective canvas
var loaded = 0;
$bxImgs.each( function(i) {
var $bximg = $(this);
// save the position of the image in data-pos
$(”).load(function() {
var $img = $(this),
// size of image to be fullscreen and centered
dim = getImageDim( $img.attr(‘src’) ),
pos = $img.data( ‘pos’ );
// add the canvas to the DOM
$.when( createCanvas( pos, dim ) ).done( function() {
++loaded;
// all images and canvas loaded
if( loaded === bxImgsCount ) {
// show thumbs
$thumbs.fadeIn();
// apply style for bg image and canvas
centerImageCanvas();
// hide loading status
$bxLoading.hide();
// initialize events
initEvents();
// start slideshow
startSlideshow();
}
});
}).attr( ‘src’, $bximg.attr(‘src’) );
});
},
startSlideshow = function() {
slideshow_time = setTimeout( function() {
if( !isAnim ) {
var pos = current;
( pos r_i ) {
new_h = w_h;
new_w = w_h / r_i;
}
else {
new_h = w_w * r_i;
new_w = w_w;
}
return {
width : new_w,
height : new_h,
left : ( w_w – new_w ) / 2,
top : ( w_h – new_h ) / 2
};
},
// initialize the events
initEvents = function() {
$( window ).on(‘resize.BlurBGImage’, function( event ) {
// apply style for bg image and canvas
centerImageCanvas();
return false;
});
// clicking on a thumb shows the respective bg image
$thumbs.on(‘click.BlurBGImage’, function( event ) {
var $thumb = $(this),
pos = $thumb.index();
if( !isAnim && pos !== current ) {
$thumbs.removeClass(‘bx-thumbs-current’);
$thumb.addClass(‘bx-thumbs-current’);
isAnim = true;
// show the bg image
showImage( pos );
}
return false;
});
},
// apply style for bg image and canvas
centerImageCanvas = function() {
$bxImgs.each( function(i) {
var $bximg = $(this),
dim = getImageDim( $bximg.attr(‘src’) ),
$currCanvas = $bxContainer.children(‘canvas[data-pos=’ + $bximg.index() + ‘]’),
styleCSS = {
width : dim.width,
height : dim.height,
left : dim.left,
top : dim.top
};
$bximg.css( styleCSS );
if( supportCanvas )
$currCanvas.css( styleCSS );
if( i === current )
$bximg.show();
});
},
// shows the image at position “pos”
showImage = function( pos ) {
// current image
var $bxImage = $bxImgs.eq( current );
// current canvas
$bxCanvas = $bxContainer.children(‘canvas[data-pos=’ + $bxImage.index() + ‘]’),
// next image to show
$bxNextImage = $bxImgs.eq( pos ),
// next canvas to show
$bxNextCanvas = $bxContainer.children(‘canvas[data-pos=’+$bxNextImage.index()+’]’);
// if canvas is supported
if( supportCanvas ) {
$.when( $title.fadeOut() ).done( function() {
$title.text( $bxNextImage.attr(‘title’) );
});
$bxCanvas.css( ‘z-index’, 100 ).css(‘visibility’,’visible’);
$.when( $bxImage.fadeOut( animOptions.speed ) ).done( function() {
switch( animOptions.variation ) {
case 1 :
$title.fadeIn( animOptions.speed );
$.when( $bxNextImage.fadeIn( animOptions.speed ) ).done( function() {
$bxCanvas.css( ‘z-index’, 1 ).css(‘visibility’,’hidden’);
current = pos;
$bxNextCanvas.css(‘visibility’,’hidden’);
isAnim = false;
});
break;
case 2 :
$bxNextCanvas.css(‘visibility’,’visible’);
$.when( $bxCanvas.fadeOut( animOptions.speed * 1.5 ) ).done( function() {
$(this).css({
‘z-index’ : 1,
‘visibility’ : ‘hidden’
}).show();
$title.fadeIn( animOptions.speed );
$.when( $bxNextImage.fadeIn( animOptions.speed ) ).done( function() {
current = pos;
$bxNextCanvas.css(‘visibility’,’hidden’);
isAnim = false;
});
});
break;
};
});
}
// if canvas is not shown just work with the bg images
else {
$title.hide().text( $bxNextImage.attr(‘title’) ).fadeIn( animOptions.speed );
$.when( $bxNextImage.css( ‘z-index’, 102 ).fadeIn( animOptions.speed ) ).done( function() {
current = pos;
$bxImage.hide();
$(this).css( ‘z-index’, 101 );
isAnim = false;
});
}
};
return {
init : init
};
})();
// call the init function
BlurBGImage.init();
});
Murat bey değiğinizi yaptım fakat çalışmadı nerde hata yapıyor olabilirm acaba
Abdurrahman arkadaşım buraya kodlar yapıştırıldığında hata olabiliyor. Çünkü tırnak işaretleri düzgün olarak gelmiyor. Yukarıdaki kodlardaki tırnak işaretlerini yapıştırdıktan sonra düzenleyin. Yani kendiniz koyun. Tekrar bir deneyin bakalım.
evet tırnak işaretleri yapıştırınca sorunlu çımkış haklısınız düzelttim fakat değişen birşey olmadı, deneyipte çalıştıran olmdumu acaba bir yerde atladığım birşey var fakat bulamadım henüz.
Abdurrahman kardeşim ben denedim tekrar ama herhangi bir sıkıntı yok bende çalışıyor ilerleyen zamanlarda ömer kardeşim izin verirse eğer burada düzenlenmiş demoyu paylaşırım
aradan iki yıl geçmiş ama belki cevap gelir bu kodları bende denedim ama çalıştıramadım yardımcı olurmusunuz
Hocam öncelikle emeğinize sağlık, sunumlarınızdan son derece etkili bilgiler elde ediyoruz. Bu temayla ilgili bir sorun yaşıyorum. Temayı yükleyince şablon kayıp hatası veriyor. Bir yerde hata mı yapıyorum acaba ? Saygılar…
Şafak arkadaşım bu tema wordpress teması değildir. HTML temadır. Bunu yükleyince çalışmaz. WordPress tema haline çevirmen lazım ki bu işi bilmen lazım. Kolay gelsin.
Merhabalar Bu tema İle websitemi düzenledim.Bitirdim.Ancak yayınlandığında telefona uygun olmadığını görüyorum.😞Bunu düzeltmenin pratik bir yolu var mıdır?Yoksa kendime yeni bir tema mı arayayım?