Home Ücretsiz Temalar Haftanın Ücretsiz Responsive Teması#8
Haftanın Ücretsiz Responsive Teması#8

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)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmenliğini bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlayarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(23)

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

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

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

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

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

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

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

    1. ç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.

  5. 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?

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

  7. 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();

    });

  8. Murat bey değiğinizi yaptım fakat çalışmadı nerde hata yapıyor olabilirm acaba

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

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

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

    1. aradan iki yıl geçmiş ama belki cevap gelir bu kodları bende denedim ama çalıştıramadım yardımcı olurmusunuz

  10. 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…

  11. Ş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.

  12. 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?

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.