BilgiMaks

Adblock Algılandı

Lütfen reklam engelleyicileri devre dışı bırakarak bizi destekleyebilirsiniz.

Reklam engelleyicinizin pasif olduğundan emin olun. Daha fazla bilgi

İnsanlar besin almadan belli bir süre hayatta kalabilirler. Bu yüzdendir ki gıda insan yaşamı açısından bir zorunluluktur. Günümüzün çoğu zamanı yiyeceklerin etrafında şekillenerek geçer. Dünya her zaman yeni şeyler keşfedilecek bir yerdir. Her zaman yeni bir tat damağınızda oluşabilir. Keşfedilmeyi bekleyen yeni yiyecekler çoğu zaman bir yerlerde vardır. 

Resim üzerine büyüteç etkisi oluşturmak için JS ve CSS kodlarını kullanacağız. Bu kod sayesinde resimler üzerinde zoom etkisi yapılabilir. Fare işaretçisini resim üzerine getirdiğinizde büyüteç simgesi belirmektedir. Ziyaretçilerin görüntüyü büyütmelerine olanak sağlamaktadır.

1. HTML kısmı
Aşağıdaki kodu kopyalayarak istediğiniz yere yapıştırın. Adres yerine yerleştirmek istediğiniz resim kodunu ekleyin.
 
<img class="magniflier" src="https://images.adresi" width="200" />

2. CSS kısmı
Blog panelinize giriş yapın. > Tema menüsüne tıklayın. > HTML'yi düzenle bölümüne giriş yapın. Ardından aşağıdaki CSS kodunu </head> kısmının hemen üzerine gelecek şekilde yapıştırın.
<style type='text/css'>
/* Zoom CSS */
 .glass {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
  cursor: crosshair;
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25), 
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  display: none;}
</style>

3. JS kısmı
Bir sonraki adımda ise Javascript kısmını ekleyeceğiz. Bunun için aşağıdaki kodu </body> veya &lt;!--</body>--&gt;&lt;/body&gt; kodunun hemen üstüne gelecek şekilde eklemeliyiz.

<script type='text/javascript'>
//<![CDATA[
$(function() {var native_width = 0;
  var native_height = 0;
  var mouse = {x: 0, y: 0};
  var magnify;
  var cur_img;
  var ui = {magniflier: $('.magniflier')};
  if (ui.magniflier.length) {
    var div = document.createElement('div');
    div.setAttribute('class', 'glass');
    ui.glass = $(div);
    $('body').append(div);}
    var mouseMove = function(e) {var $el = $(this);
    var magnify_offset = cur_img.offset();
    mouse.x = e.pageX - magnify_offset.left;
    mouse.y = e.pageY - magnify_offset.top;
    if (
      mouse.x < cur_img.width() &&
      mouse.y < cur_img.height() &&
      mouse.x > 0 &&
      mouse.y > 0) {magnify(e);}
    else { ui.glass.fadeOut(100);}return;};
    var magnify = function(e) {
    var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;
    var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;
    var bg_pos = rx + "px " + ry + "px";
    var glass_left = e.pageX - ui.glass.width() / 2;
    var glass_top  = e.pageY - ui.glass.height() / 2;
    ui.glass.css({
      left: glass_left,
      top: glass_top,
      backgroundPosition: bg_pos});return;};
    $('.magniflier').on('mousemove', function() {
    ui.glass.fadeIn(200);  
    cur_img = $(this);
    var large_img_loaded = cur_img.data('large-img-loaded');
    var src = cur_img.data('large') || cur_img.attr('src');
    // Set large-img-loaded to true
    // cur_img.data('large-img-loaded', true)
       if (src) {ui.glass.css({
        'background-image': 'url(' + src + ')',
        'background-repeat': 'no-repeat'});}
    //if(!native_width && !native_height) 
        {if (!cur_img.data('native_width')) 
        {var image_object = new Image();
        image_object.onload = function() 
        {native_width = image_object.width;
         native_height = image_object.height;
         cur_img.data('native_width', native_width);
         cur_img.data('native_height', native_height);
    //console.log(native_width, native_height);
         mouseMove.apply(this, arguments);
         ui.glass.on('mousemove', mouseMove);};
         image_object.src = src;return;} else {
       native_width = cur_img.data('native_width');
       native_height = cur_img.data('native_height');}
    //}
    //console.log(native_width, native_height);
       mouseMove.apply(this, arguments);
       ui.glass.on('mousemove', mouseMove);});
       ui.glass.on('mouseout', function() {
       ui.glass.off('mousemove', mouseMove);});
}); //]]>
</script>


Temayı kaydet düğmesine tıklayın. Tamamladıktan sonra yayınlayarak sonuçları blogunuzda görün.

Kaynak: https://codepen.io/philipsacht/pen/wzaGF

Native advertising hakkında merak edilen soruların yanıtlarını cevaplamak istiyoruz.

Sanal pazarlama sektöründe geleneksel reklam biçimleri her geçen gün kendini yenilemeye devam ediyor. Doğal reklamlar dijital ortamlar ile entegre olurken, dijital reklamcılık da da native advertising, yani doğal reklamcılık karşımıza çıkıyor. Bu reklam modeli, içeriğin bir parçası olarak artık kabul görmüş bir pazarlama aracı. Native reklamlar en trend model olarak ilgi görmeye başlayalı 100 yıldan fazla oldu. Tabii bu süreçte reklam modelleri gelişerek dijital pazarlama ortamına aktarılmaya çalışıldı. İçerik pazarlamacılığında en popüler ve en geniş reklam modellemesi oldu.


Blogger kullanıcıları için birbirinden değişik ve şık buton kodlarını bu yazımızda bir araya topladık. Sitenizde şık butonlar kullanmak önemlidir. Hem görünüm açısından hem kullanım kolaylığı açısından linklerinizi buton içerisinde göstermek daha pozitif bir hava katacaktır.
Ekleyeceğimiz CSS ve Html kodları sayesinde  butonların üzerine gelindiğinde ve tıklandığında şık bir görünüm vermiş olacağız.
Blogger CSS Renkli Buton Kodlarını eklemeyi adım adım anlatarak sorunsuz çalışmasını sağlamaya çalışacağız.

1. Blogger CSS Renkli Buton Kodlarını Ekleme

CSS kodlarını tema kodlarının arasına eklenmesi gerekmektedir.
1. Blogger hesabınıza giriş yapınız. 
2. Tema ayarlarına gelin, Html Düzenle'ye giriş yapın.
3. Ctrl+F yaparak kodlar içerisinde arama yapın.
4. ]]></b:skin> kodunu aratarak bulun ve CSS kodlarını bir satır üzerine yapıştırın.

Blogger Paneli ➤ Tema ➤ Html Düzenle ➤ Ctrl+F ➤ ]]></b:skin>

Bültenimize Abone Olun

Bildirimler

Disqus Logo