Tema, plugins, blogger ~ tr25

Sadece CSS ile slider oluşturma motoru

2023-12-27T22:02:00.154+03:00

Javascript olmadan saf CSS ile oluşturulmuş bir kaydırıcı. Mümkün olduğunca hafif ve hızlı olacak şekilde tasarlandı.

Calificar Repositorio CodePen de görüntüle Ana sayfa

Bu slider çalışmak için JavaScript gerektirmez. zkreations tarafından sadece saf HTML ve CSS ile geliştirilmiştir. Tasarımı duyarlıdır ve tüm modern tarayıcılarla uyumludur.

Özellikler

Saf ve modern CSS
Bağımlılık yok
Hafif (küçültülmüş ~ 1kb Brotli)
Hızlı ve sorunsuz hareket
Duyarlı (en boy oranını koruyan)
CSS ve Sass değişkenleri ile özelleştirilebilir
Kullanımı kolay
Aynı sayfada birden fazla slider
Açık kaynak

Kurulum

main.min.css dosyasını </head> etiketini kapatmadan önce yükleyin ve ekleyin. Barındıracak bir yeriniz yoksa jsdelivr'den bir CDN aracılığıyla ekleyebilirsiniz:

<link href='//cdn.jsdelivr.net/npm/sheet-slider@3/dist/css/main.min.css' rel='stylesheet'/>

Nasıl kullanılır

Slider, yalnızca çalışması için gerekli öğeleri içeren çok temel bir HTML yapısıyla mükemmel bir şekilde çalışabilir:

<div class="sheet">
  <input id="a1" type="radio" name="a" checked>
  <input id="a2" type="radio" name="a">
  <input id="a3" type="radio" name="a">
  <div class="sheet-content">
    <div class="sheet-item">
      <img class="sheet-image" src="image.jpg">
    </div>
    <div class="sheet-item">
      <img class="sheet-image" src="image.jpg">
    </div>
    <div class="sheet-item">
      <img class="sheet-image" src="image.jpg">
    </div>
  </div>
  <div class="sheet-arrows">
    <label for="a1"></label>
    <label for="a2"></label>
    <label for="a3"></label>
  </div>
</div>

sheet-item öğelerinin içindeki tüm içerik hareket edenler olacaktır. Bunların mutlaka resim olması gerekmez, herhangi bir HTML öğesi olabilirler.

Slider da ayrıca gezinme düğmeleri ve açıklayıcı metinler olmak üzere iki isteğe bağlı öğe vardır. Bunları dahil ederseniz, yapı şu şekilde görünecektir:

<div class="sheet">
  <input id="a1" type="radio" name="a" checked>
  <input id="a2" type="radio" name="a">
  <input id="a3" type="radio" name="a">
  <div class="sheet-content">
    <div class="sheet-item">
      <img class="sheet-image" src="image.jpg">
      <!-- description -->
      <div class="sheet-meta">
        <h4 class="sheet-title">Example title</h4>
        <p class="sheet-text">Text description</p>
      </div>
    </div>
    <div class="sheet-item">
      <img class="sheet-image" src="image.jpg">
      <!-- açıklama -->
      <div class="sheet-meta">
        <h4 class="sheet-title">Example title</h4>
        <p class="sheet-text">Text description</p>
      </div>
    </div>
    <div class="sheet-item">
      <img class="sheet-image" src="image.jpg">
      <!-- description -->
      <div class="sheet-meta">
        <h4 class="sheet-title">Example title</h4>
        <p class="sheet-text">Text description</p>
      </div>
    </div>
  </div>
  <!-- dots -->
  <div class="sheet-dots">
    <label for="a1"></label>
    <label for="a2"></label>
    <label for="a3"></label>
  </div>
  <!-- arrows -->
  <div class="sheet-arrows">
    <label for="a1"></label>
    <label for="a2"></label>
    <label for="a3"></label>
  </div>
</div>

Not: Etiketlerin for niteliği girdilerin id'si eşleşmelidir. Aynı sayfadaki birden fazla slider için, girdilerin name niteliği farklı olmalı ve etiketlerin for niteliği ait oldukları kaydırıcının girdilerinin id'si ile eşleşmelidir.

Seçenekler

Animasyon modu

İki animasyon modu arasından seçim yapabilirsiniz: fade ve vertical. Varsayılan olarak, animasyon modu horizontal. Değiştirmek isterseniz, ilgili sınıfı ana konteynere eklemeniz yeterlidir:

<div class="sheet sheet-fade">
  ...
</div>

<div class="sheet sheet-vertical">
  ...
</div>

Özelleştir

CSS dosyanızda veya :root seçicisinde değişkenler için yeni değerler tanımlayabilirsiniz. Bu değişkenler, kaydırıcı düzeninde değişiklikler yapmanıza olanak tanır:

Değişken	Açıklama
`--sheet-accent`	Color de acento
`--sheet-ratio`	Relación de aspecto
`--sheet-space`	Espacio entre los elementos
`--sheet-arrow-size`	Tamaño de las flechas
`--sheet-duration`	Duración de la animación
`--sheet-dot-size`	Tamaño de los botones de navegación
`--sheet-timing`	Función de tiempo de la animación
`--sheet-text-color`	Color del texto
`--sheet-text-shadow`	Sombra del texto
`--sheet-title-size`	Tamaño de la fuente del título
`--sheet-text-size`	Tamaño de la fuente del texto
`--sheet-arrow-padding`	Relleno de las flechas
`--sheet-arrow-bg`	Color de fondo de las flechas
`--sheet-arrow`	SVG utilizado para las flechas
`--sheet-dot-gap`	Espacio entre los botones de navegación
`--sheet-dot-bg`	Color de fondo de los botones de navegación
`--sheet-dot-hover`	Color de los botones de navegación al pasar el mouse

Sass yapılandırma

Geliştiriciler için inc/_variables.scss dosyasındaki değerleri değiştirebilir ve Sass ile derleyebilirsiniz. İhtiyaçlarınıza uyacak şekilde değiştirmenizi önerdiğim seçeneklerden biri şudur:

$slider-items: 10 !default;

Css zaten son derece optimize edilmiş olsa da, kaydırıcı ne kadar çok öğeye sahip olursa, ortaya çıkan dosya o kadar ağır olacaktır. Varsayılan değer 10'dur, bu da kaydırıcının en fazla 10 öğeye sahip olabileceği anlamına gelir.

Otomatik mod

Kaydırıcının otomatik modu yoktur, ancak JavaScript ile kolayca ekleyebilirsiniz. Değerin slaytları değiştirmek için gereken milisaniye sayısı olduğunu göz önünde bulundurarak ana konteynere data-sheet-time özelliğini eklemeniz yeterlidir:

HTML

<div class="sheet" data-sheet-time="3000">
  ...
</div>

function initializeSlider(slider) {
  const time = slider.dataset.sheetTime || 3000
  const inputs = slider.querySelectorAll('input')
  let index = 0
  let intervalId

  function updateInputState() {
    inputs[index].checked = false
    index = (index + 1) % inputs.length
    inputs[index].checked = true
  }

  function startInterval() {
    index = Array.from(inputs).findIndex(input => input.checked) || 0;
    intervalId = setInterval(updateInputState, time)
  }

  const stopInterval = () => clearInterval(intervalId)

  startInterval()

  slider.addEventListener('mouseenter', stopInterval)
  slider.addEventListener('mouseleave', startInterval)
}

document.querySelectorAll('[data-sheet-time]')
  .forEach(initializeSlider)

Bu, JavaScript olmadan bir kaydırıcı olma amacını kaybedeceği için projeye dahil edilmemiştir. Ayrıca çok basit bir çözümdür, ihtiyaçlarınıza göre uyarlamanız gerekecektir. Kodun bir örneğini codepen de görebilirsiniz.

Sonuç

Bu kaydırıcıyı ilk kez 2014 yılında geliştirildi. Mevcut kodla karşılaştırırsanız, birçok şey değiştiğini göreceksiniz. Bu nedenle, bakımı ve özelleştirmeyi kolaylaştırmak için sıfırdan yeniden yazılmıştır.

Bu projeyi beğendiyseniz, sosyal ağlarınızda paylaşarak veya GitHub'da yıldız bırakarak beni destekleyebilirsiniz. Her türlü yorum veya öneriye açığız. Okuduğunuz için çok teşekkür ederim.

Yeni yayınlarınızı göndermek için Telegram'ı kullanın

2023-12-25T11:33:00.186+03:00

Bir önceki yazıda, ücretsiz bir Telegram botunun nasıl oluşturulacağını ve barındırılacağını öğrenmiştik ve sonunda ona ilginç özellikler ekleyeceğimizi söylemiştik. İşte bu da onlardan biri, yeni yayınlarınızı (hem Blogger hem de WordPress) Telegram kanallarınızdaki abonelerinize bildirmenize olanak tanıyacak.

Gereksinimler

Bir Telegram botunun nasıl oluşturulacağına ilişkin öğreticiyi tamamladınız.
Bir Telegram kanalı oluşturun (genel veya özel olabilir).

Çalışanı yapılandırma

Koddaki değişiklikleri uygulamadan önce her şeyi hazırlamamız gerektiğinden, Cloudflare'deki ayarlarda bazı değişiklikler yapacağız.

KV ad alanı oluşturma

İlk olarak, sol menüden "Çalışanlar ve Sayfalara" gidin, "KV" seçin, "Ad Alanı Oluştur "a tıklayın, bir isim verin ve değişiklikleri kaydedin.

Ortam değişkenleri oluşturma

Çalışanlar ve Sayfalara Genel Bakışa gidin, çalışanınıza tıklayın ve Ayarlar'a gidin. Burada Değişkenler bölümünü seçin ve "Ortam değişkenleri" altında "Değişkenleri düzenle" tıklayın:

"Değişken adı" alanına CURRENT_FEED yazın ve "Değer" alanına örneğin bir Blogger veya WordPress beslemesinin URL'sini ekleyin:

Blogger

https://www.example.com/feeds/posts/default?alt=json&max-results=1

Wordpress

https://www.example.com/wp-json/wp/v2/posts?per_page=1

Değişiklikleri kaydedin ve aynı bölümde "KV ad alanı bağlantıları" bulana kadar aşağı kaydırın. Değişken adı alanının KV_STORAGE_FEED olması gereken yeni bir değişken ekleyin ve "Değer" alanında daha önce oluşturduğunuz ad alanını seçin, son olarak değişiklikleri kaydedin.

Tetikleyicileri Yapılandırma / Tetikleyiciler

Değişken yapılandırmasını tamamladıktan sonra, "Tetikleyiciler" sekmesine gidin, "Cron tetikleyicileri" bulmak için aşağı kaydırın ve "Tetikleyici ekle "ye tıklayın.

Yalnızca tetikleyicinin çalışmasını istediğiniz zaman aralığını belirtmeniz gerekir; örneğin, 30 dakika belirtirseniz bot her 30 dakikada bir yeni gönderileri kontrol edecektir.

Kodu ekleyin

Her şeyi doğru yaptıysanız, tebrikler, neredeyse bitirdik. Şimdi "Hızlı düzenleme" düğmesine basarak kodu düzenleyelim, burada zaten önceki eğitime karşılık gelen bir kodumuz olduğunu unutmayın.

Yeni değişkenler

Kodun ilk satırında bir boşluk bırakın ve daha önce ayarladığımız ortam değişkenlerine atıfta bulunacak aşağıdaki değişkenleri ekleyin.

const FEED = CURRENT_FEED
const KV_NAMESPACE = KV_STORAGE_FEED

Kanal elde etme fonksiyonu

Bu fonksiyonun görevi, botun yönetici olarak eklendiği tüm kanalların ID'sini saklayan nesneyi almak ve ayrıştırmak olacaktır. Bu daha sonrası için önemlidir:

// Obtiene los canales de KV
async function getChannels () {
  let channels = await KV_NAMESPACE.get('channels') || {}

  // Si channels no es un objeto, convertirlo
  if (typeof channels !== 'object') {
    channels = JSON.parse(channels)
  }

  return channels
}

Kanal listesini yönetme işlevi

Bot bir kanala eklendiğinde, bu fonksiyon ID'yi kanal adıyla birlikte isim alanımıza eklemeye özen gösterecektir. Bot bir kanaldan çıkarılırsa, bu kimlik de kayıt defterinden silinecektir.

// Üyelik durumunu yönetir
// https://core.telegram.org/bots/api#chatmember
async function manageMember (member) {
  const chatTitle = member.chat.title
  const chatId = member.chat.id
  const chatType = member.chat.type

  // bot durumu (administrator, kicked, left, member, restricted, creator)
  const status = member.new_chat_member.status

  // Si el tipo de chat no es "channel", no hacer nada
  if (chatType !== 'channel') {
    return
  }

  // Obtener los canales de KV o crear un objeto vacío
  const channels = await getChannels()

  // Si el bot es "administrator", agregar y almacenarlo en KV
  if (status === 'administrator') {
    channels[chatId] = chatTitle
    await KV_NAMESPACE.put('channels', JSON.stringify(channels))
  }

  // Si el estado es "left" o "kicked", eliminar el canal de KV
  if (status === 'left' || status === 'kicked') {
    delete channels[chatId]
    await KV_NAMESPACE.put('channels', JSON.stringify(channels))
  }
}

Güncelle onUpdate fonksiyonu

Önceki derste bu fonksiyonu zaten oluşturmuştuk, ancak bu özellik için değiştirilmesi gerekecek. onUpdate() fonksiyonunu bulun ve bu yeni versiyonla değiştirin:

async function onUpdate (update) {
  // Güncelleme bir mesaj içeriyorsa, "onMessage" işlevi çağrılır..
  if ('message' in update) {
    await onMessage(update.message)
  }

  // Si es un estado de miembro, se llama a la función "manageMember".
  if ('my_chat_member' in update) {
    await manageMember(update.my_chat_member)
  }
}

Beslemeyi yönetme işlevi

Bu işlev beslemeyi alır, Blogger'dan mı yoksa WordPress'ten mi olduğunu ayırt eder, en son gönderiyi alır ve kanallarınıza gönderir. Bu süreçte, gelecekteki karşılaştırmalar için KV ad alanında son gönderinin kimliğini de saklayacaktır.

// Güncellemeleri eşzamansız olarak işleme
async function handleScheduled (event) {
  try {
    // Obtener el enlace de la entrada (Solo Blogger)
    function getLink (links) {
      for (const link of links) {
        if (link.rel === 'alternate') {
          return link.href
        }
      }
    }

    // Blogger veya WordPress feed alın
    const feed = await fetch(FEED)
    const data = await feed.json()

    // Beslemenin Blogger'dan olup olmadığını kontrol edin
    const isBlogger = data.feed

    // En son besleme girişini alın
    const newEntry = isBlogger ? data.feed.entry[0] : data[0]

    // En son girişin ve KV'nin kimliğini alın
    const newEntryId = isBlogger ? newEntry.id.$t : newEntry.id
    const getEntryId = await KV_NAMESPACE.get('currentEntryId')

    // Yazı kimliğini sayıya dönüştürme (yalnızca WordPress)
    const currentEntryId = isBlogger ? getEntryId : Number(getEntryId)

    // Yeni bir giriş kimliği varsa, tüm kanallara gönderin.
    if (!currentEntryId || newEntryId !== currentEntryId) {
      // Actualizar la ID de la entrada almacenado en KV
      await KV_NAMESPACE.put('currentEntryId', newEntryId)

      // Girişin başlığını ve bağlantısını alın
      const title = isBlogger ? newEntry.title.$t : newEntry.title.rendered
      const link = isBlogger ? getLink(newEntry.link) : newEntry.link

      // Mesaj metnini ayarlayın
      const messageText = `${title}\n${link}`

      const channels = await getChannels()

      // Tüm kanallara mesaj gönderin
      for (const channelId of Object.keys(channels)) {
        await sendPlainText(channelId, messageText)
      }
    }
  } catch (error) {
    console.error('Error al obtener o procesar el feed:', error)
  }
}

Şimdi, sadece scheduled olayda handleScheduled işlevini çağırmamız gerekiyor. Bunu yapmak için aşağıdaki kodu önceki işlevin altına ekleyin:

// Güncellemeleri göndermek için düzenli aralıklarla çalışır
addEventListener('scheduled', event => {
  event.waitUntil(handleScheduled(event))
})

"Kaydet ve dağıt" düğmesine basın ve işiniz bitti. Şimdi botunuzu bir telegram kanalına yönetici olarak eklemeniz yeterlidir ve güncellemelerinizi göndermeye başlayacaktır.

Sonuç

Bu, abonelerinizi e-postalara boğmak zorunda kalmadan yeni yayınlarınızdan haberdar etmenin harika, kullanışlı ve ücretsiz bir yoludur. Bu kodun çalıştığını görmek istiyorsanız, buradaki Telegram kanalına abone olabilir ve güncellemeleri kontrol edebilirsiniz.

Herhangi bir sorunuz veya öneriniz varsa, yorumlarda bırakmaktan çekinmeyin. Bu yazıyı sosyal ağlarınızda paylaşmayı unutmayın. Uğradığınız için çok teşekkür ederim.

Boş olmaları halinde bölümleri veya widget'ları yüklemekten kaçınmak

2023-12-07T19:04:00.063+03:00

Blogger birçok etikete sahiptir, bunlardan bazıları b:section ve b:widget etiketleri gibi sayfanın kaynak kodunda görülebilir. Bu etiketlerin kullanımını derinlemesine açıklamayacağım, sadece onları koşullandırmamızı sağlayan cond niteliğine odaklanacağız.

Durum

Bölüm etiketleri zorunlu HTML oluşturur ve içerik olmasa bile oluşturulur. Ancak Blogger geliştiricinin, durumu ele alması için “no-items” sınıfını ekler:

<b:section id='aside'/>

<div class="no-items section" id="aside"></div>

Öte yandan, Popüler Yazılar widget'ı gibi makaleleri işleyen widget'lar, makale içermeseler bile görüntülenmeye devam edeceklerdir. Elbette CSS kullanabilir ve her iki durum için de sorunu kolayca çözebiliriz. Ancak biz profesyonel ve düzenli olmak için buradayız.

Koşullandırma bölümleri

Bir bölümü koşullandırmak için sadece cond niteliğini eklememiz gerekir, yapacağımız şey gösterilecek bölüm için sonucu booleano olacak bir ifade eklemektir:

  <b:section cond='data:widgets any (w => w.sectionId == "aside")' id='aside'/>

Yaptığımız şey, o anda aktif ve görünür olan tüm widget'lar hakkında bilgi içeren evrensel widgets değişkenini çağırmak. Her bir widget'ın özelliklerinden biri, ait olduğu bölümün id'sini içeren sectionId'dir. Daha sonra belirtilen id'ye sahip bölüme ait en az bir widget olup olmadığını değerlendiririz. Eğer varsa, bölüm görüntülenir aksi takdirde görüntülenmez.

Koşullandırma widget'ları

Bu widget'lar için farklıdır, ancak çok az kişinin farkında olduğu bir özellik, ana etiketin widget türüne karşılık gelen tüm verileri de okuyabilmesidir:

<b:widget cond='data:posts.any' id='PopularPost1' type='PopularPost'/>

Bu kadar basit, eğer widget'ın gönderileri varsa görüntülenecek, yoksa görüntülenmeyecektir. Bu mümkündür çünkü gönderiler tablosu PopularPost widget türüne karşılık gelen bir veridir, bu nedenle ona üst etiketten erişebiliriz.

Sonuç

Bu katkının çok kısa olduğunu biliyorum ama bu sadece bir başlangıç, ilgi görürsem çok az kişinin bildiği daha ilginç nitelikleri de paylaşacağım. Eminim ki paylaşacağım her şey sizi şaşırtacak. Herhangi bir sorunuz varsa, yorumlarda bırakmaktan çekinmeyin ve bu katkıyı takipçilerinizle paylaşmayı unutmayın. Beni okuduğunuz için çok teşekkür ederim.

Blogger'dan CSS ve Javascript'i tamamen kaldırın

2023-12-02T14:10:00.078+03:00

Blogger varsayılan olarak üstbilgi ve altbilgiye CSS ve JavaScript kodu ekler, bu resmi temalar için yararlıdır, ancak yükleme süresini artırdığı ve sayfanın üst kısmının oluşturulmasını yavaşlattığı için performansa zarar verir. Kendi şablonunuzu geliştiriyorsanız bu dosyalar gerekli değildir, aslında bunları kaldırmak sizin yararınızadır ve burada size bunu nasıl yapacağınızı göstereceğim.

Bu bir CSS sıfırlamasıdır, ayrıca widget'lar ve bazı hack'ler için stiller içerir. Dosya Blogger tarafından otomatik olarak <head> altına eklenir, kaldırmak için <html> etiketine b:css='false' eklemek kadar basittir, bunun gibi:

<html b:css='false'>

widget.js devre dışı bırakmak

Blogger'ın eklediği, widget'lara işlevsellik katan ve bazı özellikleri etkinleştiren en önemli javascript dosyası. Bunu kaldırmak için <html> etiketine aşağıdaki gibi b:js='false' eklemeliyiz:

<html b:js='false'>

Ancak bekleyin, bu dosyayı silmek bazı sorunlar getirecektir, eğer silerseniz bunu bilmeniz önemlidir:

İletişim formu widget'ı artık çalışmayacaktır.
Blogger'da “Tasarım” sekmesini kullanamayacaksınız.

Bu nedenle, belirli bir zamanda bu özelliklerden herhangi birine ihtiyaç duyarsanız, kodun tekrar çalışmasını sağlamak için değişiklikleri geri almanız gerekecektir.

Javascript kullanarak widget.js kaldırma

Bu yöntem Blogger'da “Tasarım” sekmesini kullanmanıza izin verir. Ancak iletişim formu widget'ı yine de çalışmaz ve çerez uyarısı da görüntülenmez. Bunu yapmak için </body> ifadesini arayın ve şu şekilde değiştirin:

&lt;textarea hidden id='bjs'></body>&lt;/textarea>
&lt;/body>

Not: hidden özelliğine sahip etiketlerin hiç gösterilmediğinden emin olun, eğer durum böyle değilse aşağıdaki css kodunu ekleyebilirsiniz:

[hidden] { display: none }

Bu noktada, widget.js'nin çalışmasını zaten engelledik, ancak henüz kodu kaldırmadık veya çerez uyarısını geri döndürmedik. Her ikisini de başarmak için aşağıdaki javascript kodunu ekleyin:

const REG_EXP = /cookieOptions\.(\w+)\) \|\| '(.+)'/g
const cookieJs = '/js/cookienotice.js'

const textarea = document.getElementById('bjs')

const loadScript = (src) => new Promise((resolve, reject) => {
  const $script = document.createElement('script')
  $script.src = src
  $script.onload = resolve
  $script.onerror = reject
  document.body.appendChild($script)
})

const decodeHtml = (string) => {
  return string.replace(/\\x(\w{2})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)))
}

const loadCookieScript = () => {
  const textareaContent = textarea.value
  const cookieOptions = window.cookieOptions || {}
  const Default = {}

  textareaContent.replace(REG_EXP, (_, key, value) => {
    Default[key] = decodeHtml(value)
  })

  if (textareaContent.includes(cookieJs)) {
    loadScript(new URL(cookieJs, window.location.origin).href)
      .then(() => {
        const {
          msg = Default.msg,
          close = Default.close,
          learn = Default.learn,
          link = Default.link
        } = cookieOptions

        if (typeof window.cookieChoices?.showCookieConsentBar === 'function') {
          // eslint-disable-next-line no-undef
          cookieChoices.showCookieConsentBar(msg, close, learn, link)
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }
}

if (textarea) {
  loadCookieScript()
  textarea.remove()
}

Artık iletişim formu widget'ı dışında her şey düzgün çalışmalıdır; bunu Formspree gibi Pure HTML ile çalışan, müdahaleci olmayan harici bir hizmetle değiştirmenizi tavsiye ederim. Bunu zkreations Hamlet geliştirme temasında görebilirsiniz.

Sonuç

Üçüncü taraf bir tema kullanıyorsanız ve bu dosyalar devre dışı bırakılmamışsa, önemli işlevleri kaybedebileceğiniz için bunları kaldırmamanızı tavsiye ederim. Ancak, kendi temanız üzerinde çalışıyorsanız, daha iyi bir performans elde etmek ve şablonunuzun gelişimini iyileştirmek için bunları kaldırabilirsiniz. Okuduğunuz için çok teşekkür ederim, umarım yardımcı olmuştur.

Blogger çerez bildirimini özelleştirme

2023-12-01T00:27:00.050+03:00

Blogger'da bulunan çerez uyarısı Google'dan gelir, bu nedenle Blogger arayüzünden değiştirmek mümkün değildir. Ancak CSS ve JavaScript kullanarak görünümünü değiştirebiliriz.

Stiller

Çerez bildirimine kişisel ve daha modern bir dokunuş katacak bazı temel stilleri bulabilirsiniz. Bunları eklemek için Tema > Özelleştir > Gelişmiş > CSS Ekle'ye gidin ve aşağıdaki kodu yapıştırın:

/* Dolgu ve kenarlığı normalleştirme */
#cookieChoiceInfo,
#cookieChoiceInfo * { box-sizing: border-box }

/* Konteyner */
#cookieChoiceInfo {
  padding: 1.5rem;
  inset: auto 0 0;
  line-height: 1.5;
  background-color: rgb(0 0 0 / 90%);
  animation: 1s forwards cookies;
  transform: translateY(200%);
}

/* İç konteyner */
#cookieChoiceInfo .cookie-choices-inner {
  font-size: 1rem;
  color: white;
}

/* Metin */
#cookieChoiceInfo .cookie-choices-text {
  margin: 0;
  display: inline;
}

/* Butonlar */
#cookieChoiceInfo .cookie-choices-button {
  text-transform: initial;
  font-weight: 500;
  margin: 0;
}

/* Butonu hover */
#cookieChoiceInfo .cookie-choices-button:hover {
  color: #2196f3;
}

/* Göründüğünde animasyon */
@keyframes cookies {
  to { transform: translateY(0) }
}

Her bir kuralın ne işe yaradığını daha iyi anlayabilmeniz için bazı yorumlar mevcuttur. Değerlerle oynamanızı ve bunları istediğiniz gibi özelleştirmenizi tavsiye ederim.

JavaScript

Metinler ve çerez sayfası JavaScript kullanılarak özelleştirilebilir. Bunu yapmak için Tema > HTML Düzenle'ye gidin, </head> öğesini bulun ve bunun üzerine aşağıdaki kodu yapıştırın:

<script>//<![CDATA[
cookieOptions = {
  msg: "Çerez bildirim mesajı",
  close: "Kapat düğmesi metni",
  learn: "Daha fazla bilgi butonu metni",
  link: "Çerezler sayfasına bağlantı",
}//]]>
</script>

Örnek metinleri özelleştirmeyi unutmayın. Bildirimin mümkün olduğunca açık ve topladığınız verilerle ilgili olması gerektiğini unutmayın. Ne yazacağınızdan emin değilseniz, herhangi bir değişiklik yapmayın.

Çerez bildirimini görüntüleyin

Ülkeniz Avrupa Birliği ülkeleri listesindeyse varsayılan olarak çerez uyarısı görüntülenecektir. Bu listeye dahil değilseniz, blogunuzun URL'sinin sonuna ?gl=tr ekleyerek görünmesini sağlayabilirsiniz.

Sonuç

Bu çok küçük bir özellik olsa da, çerez bildirimi ile blogunuzun tasarımı arasında uyum sağlayarak kullanıcı deneyimini iyileştirir. Herhangi bir sorunuz varsa, yorumlarda bırakmaktan çekinmeyin. Okuduğunuz için çok teşekkür ederim.

Blogger için geri sayım aracı

2023-11-16T01:24:00.073+03:00

Bir etkinliğe, ürün lansmanına, birinin doğum gününe ve diğerlerine kalan süreyi göstermek için geri sayım sayacı.

<b:includable id='main'>
  <style>/*<![CDATA[*/
    .countdown{display:flex;gap:var(--countdown-gap,.5rem)}.countdown-options{display:none}.countdown-value{display:flex;flex-direction:column;text-align:center;color:var(--countdown-color,#fff);background-color:var(--countdown-bg,#23212b);border-radius:1rem;box-shadow:0 2px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2)}.countdown-value>*{padding:.5rem .875rem}.countdown-number{border-bottom:1px solid rgba(0,0,0,.9)}.countdown-name{font-size:.875rem;border-top:1px solid rgba(255,255,255,.1)}
  /*]]>*/</style>
  <data:content/>
  <div class="countdown">
    <b:loop values='["D","H","M","S"]' var='time'>
      <div class="countdown-value">
        <span class="countdown-number">00</span>
        <span class="countdown-name"><data:time/></span>
      </div>
    </b:loop>
  </div>
  <script>//<![CDATA[
    document.addEventListener("DOMContentLoaded", (event) => {
      const countdown=(()=>{const e=document.querySelectorAll("[data-countdown]"),n={};e.length>0&&e.forEach(((e,t)=>{!function(e,t,o){const r=new Date(t).getTime(),a=e.nextElementSibling,c=e.innerHTML;function i(){const e=(new Date).getTime(),t=r-e,i=a.querySelectorAll(".countdown-number"),l={days:Math.floor(t/864e5),hours:Math.floor(t%864e5/36e5),minutes:Math.floor(t%36e5/6e4),seconds:Math.floor(t%6e4/1e3)};if(t<0)return clearInterval(n[o]),a.classList.add("countdown-finished"),void(a.innerHTML=c);Object.keys(l).forEach(((e,n)=>{i[n].innerHTML=l[e].toString().padStart(2,"0")}))}e.innerHTML="",i(),n[o]=setInterval(i,1e3)}(e,e.dataset.countdown,t)}))})();
    });
  //]]></script>
</b:includable>

CodePen

Bu kez zkreations tarafından Blogger için tasarlanan, bir geri sayım göstermenizi sağlayacak widget paylaşıyorum. Bir etkinlik, ürün lansmanı, birinin doğum günü ve diğerleri için kalan süreyi göstermek için çok kullanışlıdır.

Bu katkı aynı zamanda zkreations'daki Blogger widget'ları bölümünün de açılışını yapıyor; artık şablonun HTML kodunu düzenlemek zorunda kalmadan tek bir tıklamayla widget'ları yükleyebilirsiniz.

Kurulum

Bahsettiğim gibi, kurulum çok basit, sadece yukarıdaki yükle düğmesine tıklayın, widget'ı yüklemek istediğiniz blogu seçin ve hepsi bu kadar. Tüm kod optimize edilmiştir. Böylece blogunuza herhangi bir ek yük getirmez.

Eğer platformunuz Blogger değilse, bu durumda codepen'de bulacağınız widget kaynak kodunu incelemenizi ve her kodu ilgili yere yerleştirerek projenize uyarlamanızı tavsiye ederim.

Yapılandırma

Widget'ı yapılandırmak için Tasarım bölümüne gidin ve Geri Sayım widget'ını bulun. Düzenle düğmesine tıklayın; widget'ın yapılandırılabilir içeriğini içeren bir pencere açılacaktır:

<div data-countdown="2025-01-01T00:00:00" class="countdown-options">
  <p>Mutlu Yıllar 2025!! :D</p>
</div>

Tarih

Bu değer zorunludur ve şu formata sahip olmalıdır: AAAA-MM-DDThh:mm:ss burada AAAA yıl, MM ay, DD gün, hh saat, mm dakika y ss saniyedir. Örneğin:

<div data-countdown="2025-02-02T16:00:00" class="countdown-options"></div>

Sayaç 2 Şubat 2024 tarihinde saat 16:00'da sona erecektir.

Mesaj

<div> yapılandırma etiketinin içindeki tüm kodlar gizli kalacak ve sayaç sona erdiğinde görüntülenecektir. İstediğiniz kadar kod ekleyebilirsiniz, örneğin:

<div data-countdown="2025-01-01T00:00:00" class="countdown-options">
  <img src="https://i.imgur.com/7hinFAF.gif" alt="Capoo">
  <p>Mutlu Yıllar 2025!! :D</p>
</div>

Sayacın sonunda Capoo'nun resmi ve bir tebrik mesajı görüntülenecektir.

Özelleştir

Sayacın görünümünü özelleştirmek için, yeni bir değerle belirtebileceğiniz bazı css değişkenleri bıraktım. Bunu yapmak için Temalar > Özelleştir > Gelişmiş > CSS Ekle'ye gidin ve aşağıdaki kodu yapıştırın:

.countdown {
  --countdown-bg: #111;
  --countdown-color: #fff;
  --countdown-gap: .5rem;}

Arka plan rengini, metnin rengini ve sayılar arasındaki boşluğu değiştirebilirsiniz.

Sonuç

Bu eklenti ile blogunuzda bir geri sayım görüntüleyebilirsiniz veya artık bunu göstermek istemiyorsanız, Widget'ı Tasarım bölümünden silerek kaldırabilirsiniz.

Kopyala butonlu Kod Vurgulayıcı

2023-10-11T01:04:00.089+03:00

Kopyalama düğmesi de dahil olmak üzere highlight.js kullanılarak optimize edilmiş kod vurgulayıcı

CodePen

Geliştirme ile ilgilenen bir blogunuz varsa, muhtemelen kullanıcılarınıza kod göstermek zorunda kalmışsınızdır. Bu nedenle bugün size, yalnızca gerektiğinde kodu yükleyecek şekilde optimize edilmiş kopyalama düğmeli bir kod vurgulayıcıyı nasıl ekleyeceğinizi göstereceğim.

Kurulum

Öncelikle aşağıdaki stilleri projenize dahil etmeniz gerekecektir. Örneğin, WordPress kullanıyorsanız bunları style.css dosyasına dahil edebilirsiniz. Blogger'da şablondaki CSS Ekle seçeneğini kullanmalısınız. Diğer herkes için sitenizin <head> bölümüne ekleyebilirsiniz.


pre {
  --copy-text: "Copy";
  --copied-text: "Copied!";
  --code-bg: #2a2833;
  --code-color: #9a92be;
  --code-color-comment: #787878;
  --code-color-string: #ffcd81;
  --code-color-selector: #a38eff;
  --code-color-property: #a38eff;
  --code-color-tag: #6a6684;
  --code-color-tag-name: #eeebfe;
  --code-color-attr: #c3b6ff;
  --code-color-class: #eeebff;
  --code-color-number: #ffcd95;
  position: relative;
  font-family: SFMono-Regular, monospace;
}

pre > code {
  background-color: var(--code-bg);
  color: var(--code-color);
  display: block;
  overflow-x: auto;
  white-space: pre;
  padding: 1.5rem;
  border-radius: 0.5rem;
}

.hljs-copy {
  position: absolute;
  border: 0 none;
  inset: 0.5rem 0.5rem auto auto;
  padding: 0.5rem 0.75rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: 0.3s background-color;
  font-size: 14px;
}

.hljs-copy:hover { background-color: rgba(0, 0, 0, 0.75) }
.hljs-copy::before { content: var(--copy-text) }
.hljs-copy.is-copied::before { content: var(--copied-text) }

.hljs-name,
.hljs-section { color: var(--code-color-tag-name) }
.hljs-tag { color: var(--code-color-tag) }
.hljs-selector-class { color: var(--code-color-class) }
.hljs-number { color: var(--code-color-number) }

.hljs-comment,
.hljs-meta { color: var(--code-color-comment) }

.hljs-emphasis,
.hljs-quote,
.hljs-string,
.hljs-strong,
.hljs-template-variable,
.hljs-variable { color: var(--code-color-string) }

.hljs-keyword,
.hljs-selector-tag,
.hljs-type { color: var(--code-color-selector) }

.hljs-attribute,
.hljs-bullet,
.hljs-literal,
.hljs-symbol { color: var(--code-color-property) }

.hljs-attr,
.hljs-selector-attr,
.hljs-selector-id,
.hljs-selector-pseudo,
.hljs-title { color: var(--code-color-attr) }

Şimdi de kopyala düğmesinin eklenmesi ve kod vurgulayıcının yüklenmesiyle ilgilenecek olan betik. Bunu </body> etiketinin üzerine eklemelisiniz ya da main.js dosyanız varsa oraya ekleyebilirsiniz.


<script>/*<![CDATA[*/
async function initHighlight() {
  const loadScript = () => new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js'
    script.onload = resolve
    script.onerror = reject
    document.body.appendChild(script)
  })

  try {
    await loadScript()
    hljs.highlightAll()
  } catch (error) {
    console.error(error)
  }
}

function addCopyButtons (codeBlock) {
  if (!navigator || !navigator.clipboard) return

  const clipboard = navigator.clipboard
  const $button = document.createElement('button')
  $button.className = 'hljs-copy'

  $button.addEventListener('click', function () {
    clipboard.writeText(codeBlock.textContent).then(function () {
      $button.blur()
      $button.classList.add('is-copied')
      $button.disabled = true

      setTimeout(function () {
        $button.disabled = false
        $button.classList.remove('is-copied')
      }, 2000)
    })
  })

  const pre = codeBlock.parentNode
  pre.insertBefore($button, pre.firstChild)
}

function initCodeBlocks () {
  const codeBlocks = document.querySelectorAll('pre > code')
  if (codeBlocks.length === 0) return

  initHighlight()
  
  codeBlocks.forEach(function (codeBlock) {
    addCopyButtons(codeBlock)
  })
}

initCodeBlocks()/*]]>*/
</script>

Bu kodun yaptığı şey, tıklandığında kod içeriğini kopyalayan bir düğme eklemektir. Ayrıca kod vurgulayıcıyı da yükler, ancak her iki eylemi de yalnızca sayfada en az bir kod bloğu olduğunda gerçekleştirir.

Nasıl kullanılır

Bunu kullanmak için sayfanıza bir kod bloğu eklemeniz yeterlidir. Kodun aşağıda gösterildiği gibi bir <pre> ve <code> etiketi içinde olması gerektiğini unutmayın:


<pre><code>
  // Kodunuzu buraya yazın
</code></pre>

Genel olarak highlightJs kullandığınız dili algılar, ancak bunun yeterli olmadığı veya başarısız olduğu durumlarda, bir sınıf kullanarak dili belirtebilirsiniz:


<pre><code class="language-html">
  // Kodunuzu buraya yazın
</code></pre>

Ayrıca, tüm HTML kodlarının dönüştürülmesinin çok önemli olduğunu unutmayın. Bu görevde size yardımcı olmak için kullanabileceğiniz bir html kodu dönüştürücü aracı geliştirdim.

Özelleştir

Kod vurgulayıcıyı özelleştirmek istiyorsanız, bunu CSS kodunun başındaki değişkenleri değiştirerek yapabilirsiniz. Bu değişkenler kod vurgulayıcının renklerini ve diğer önemli stilleri değiştirmekten sorumludur.

Değişken isimleriyle açıklayıcı olmaya çalıştım, ancak herhangi bir sorunuz varsa bana yorumlarda sorabilirsiniz. Merak ediyorsanız, stiller geliştirici Simurai'nin Duotone Dark temasından esinlenmiştir.

Açıklamalar

Makale boyunca <pre> ve <code> bloklarını yalnızca kod görüntülemek için kullandığınız varsayılmıştır. Bu etiketleri başka içerikleri görüntülemek için kullanıyorsanız, bazı değişiklikler yapmanız gerekebilir.

Sonuç

Buraya kopyalama düğmeli bir kod vurgulayıcı eklemek için bir çözüm aramaya geldiyseniz, umarım bu makale size bir şekilde yardımcı olmuştur. Herhangi bir sorunuz veya öneriniz varsa yorumlara bırakabilirsiniz.

Css ile duyarli sekmeler

2023-10-03T15:35:00.053+03:00

Yalnızca css kullanan, kullanımı ve özelleştirmesi kolay, duyarlı gezinme sekmeleri

CodePen

Las pestañas de navegación por mucho tiempo han formado parte de los shortcodes de mis trabajos, sin embargo, hace poco proponía a través de nuestro grupo de telegram una alternativa que no dependa de javascript, pero debido a su complejidad, decidí eliminar los tabs de los shortcodes y dejarlos como un componente independiente, que podrás usar en cualquier proyecto.

Kurulum

Aşağıdaki stilleri projenize ekleyin, örneğin WordPress'te kodu style.css dosyasına yerleştirmelisiniz. Projeniz Blogger'da ise şablondaki CSS Ekle seçeneğini kullanmalısınız.

.tab {
  --tab-padding: 1.25rem;
  --tab-bg: rgb(0 0 0 / 70%);
  --tab-active-bg: #fff;
  --tab-color: #fff;
  --tab-active-color: #000;
}

.tab input { display: none }
.tab input:checked + label {
  background-color: var(--tab-active-bg);
  color: var(--tab-active-color);
}

.tab input:not(:checked) + label + * { display: none }
.tab label {
  color: var(--tab-color);
  cursor: pointer;
  padding: var(--tab-padding);
}

@media (max-width: 575px) {
  .tab label { width: 100% }
}

.tab-wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  background-color: var(--tab-bg);
}

.tab-content {
  width: 100%;
  padding: var(--tab-padding);
  background-color: var(--tab-active-bg);
}

@media (min-width: 576px) {
  .tab-content { order: 9999 }
}

Hepsi bu kadar, bu stiller bileşenin çalışması için yeterlidir. Çünkü javascript olmadan gezinme sekmeleridir. Şimdi sekmeleri görüntülemek için buna benzer bir yapı ekleyin:

<div class="demo">
  <div class="tab">
    <div class="tab-wrapper">
      <!-- Tab 1 -->
      <input id="tab1" type="radio" name="tabsA" checked>
      <label for="tab1">Tab 1</label>
      <div class="tab-content">Content 1...</div>

      <!-- Tab 2 -->
      <input id="tab2" type="radio" name="tabsA">
      <label class="tab-button" for="tab2">Tab 2</label>
      <div class="tab-content">Content 2...</div>

      <!-- Tab 4 -->
      <input id="tab4" type="radio" name="tabsA">
      <label for="tab4">Etc...</label>
      <div class="tab-content">ETC...</div>
    </div>
  </div>
</div>

Açıklama

Bileşen, bitişik + ve ~ seçicileri sayesinde çalışır. label etiketine tıklandığında, önündeki input etkinleştirilir ve içerik görünür hale gelir.

Es muy importante que el input tenga el atributo name con el mismo valor para todos los input que pertenezcan a un mismo grupo de tabs, de lo contrario, no funcionará. También es importante que cada input tenga un id único y que el label tenga el atributo for con el mismo valor que el id del input al que pertenece.

Özelleştir

Bileşeni hızlı bir şekilde özelleştirebilmeniz için bazı CSS değişkenler oluşturulmuştur. Özellikle değiştirmeniz gereken kod parçası budur:


.tab {
  --tab-padding: 1.25rem;
  --tab-bg: rgb(0 0 0 / 70%);
  --tab-active-bg: #fff;
  --tab-color: #fff;
  --tab-active-color: #000;
}

Değişkenlerin isimleri çok açıklayıcı, böylece neyi değiştireceğinizi kolayca anlayabilirsiniz.

Sonuç

Bu bileşenin kullanımı ve özelleştirilmesi çok kolaydır, ayrıca javascript'e bağlı değildir. Bu nedenle performansı kısa kodlarıma koyduğum sekmelerden daha üstündür. Herhangi bir sorunuz varsa, yorumlarda bırakabilirsiniz. Bu makaleyi paylaşmayı unutmayın.

Blogger da görselleri kolayca değiştirin

2023-09-20T10:42:00.226+03:00

Geliştirme yazılarına devam ediyoruz. Bugün size Blogger, Google Photos ve hatta Youtube aracılığıyla Google'da barındırılan resimleri, url'deki parametreleri kullanarak veya Blogger sözdiziminde bulunan yöntemleri kullanarak işlemek için nasıl bir işlev oluşturacağınızdan bahsedeceğim.

Durum

Görüntü türü verilerinde belirli değişiklikler yapmaya çalıştığımızda, kodumuz aşağıdaki gibi görünebilir:


<b:if cond='data:view.featuredImage'>
  <img expr:src='resizeImage(data:view.featuredImage, 300,"4:3")'/>
</b:if>

Burada sadece girdide öne çıkan bir resim olup olmadığını kontrol ediyoruz ve varsa yeniden boyutlandırıyoruz. Mantığın karmaşıklığını artırdığımızda, kodun okunması ve bakımı çok zor hale gelebilir:

<b:if cond='data:view.featuredImage'>
  <b:if cond='data:view.featuredImage.isYoutube'>
    <img expr:src='resizeImage(data:view.featuredImage.youtubeMaxResDefaultUrl, 300,"4:3")'/>
  <b:else/>
    <img expr:src='resizeImage(data:view.featuredImage, 300,"4:3")'/>
  </b:if>
</b:if>

Blogger'da Fonksiyon

Bu tür bir durumdan kaçınmak için Blogger'da özellikle resimleri işleyen bir işlev oluşturabiliriz. Bu şekilde, kodu şablonun herhangi bir yerinde yeniden kullanabiliriz ve değişiklik yapmamız gerekirse, yalnızca eklemeyi değiştirmemiz gerekir.

<b:includable id='@image'>
  <b:comment><!--
  // @param {image} src - Görüntünün Url'si
  // @param {string} [alt=data:messages.image] - Alternatif metin
  // @param {string} [id] - Benzersiz tanımlayıcı
  // @param {string} [class] - Ek sınıflar
  // @param {string} [width] - Özel Genişlik
  // @param {string} [height] - Özel yükseklik
  // @param {number} [resize] - Yeni görüntü boyutu
  // @param {string} [ratio] - En boy oranı (4:3, 16:9 vb)
  // @param {string} [sizes] - Öznitelik boyutları için değerler
  // @param {array} [srcset] - Boyutlar tablosu (srcset oluşturur)
  // @param {string} [loading] - Yükleme özniteliği için değerler
  // @param {string} [params] - Ek parametreler (zkreations.com/image-params)
  --></b:comment>
  <b:if cond='data:src'>
    <b:with value='data:src.isYoutube ? data:src.youtubeMaxResDefaultUrl : data:src' var='source'>
    <b:with value='(data:resize ? resizeImage(data:src, data:resize, data:ratio) : (data:source))' var='image'>
      <b:tag expr:alt='data:alt ?: data:messages.image' name='img'>
        <b:attr name='b:whitespace' value='remove'/>
        <b:attr name='id' expr:value='data:id'/>
        <b:class cond='data:class' expr:name='data:class'/>
        <b:attr name='width' expr:value='data:width ?: data:image.width'/>
        <b:attr name='height' expr:value='data:height ?: data:image.height'/>
        <b:attr name='sizes' expr:value='data:sizes'/>
        <b:attr name='loading' expr:value='data:loading'/>
        <b:with value='data:params and (data:image contains "blogger.googleusercontent.com/img/a/") ? ("-" + data:params) : ""' var='params'>
          <b:attr name='src' expr:value='(data:srcset ? resizeImage(data:image, data:srcset.first, data:ratio) : data:image) + data:params'/>
        </b:with>
        <b:if cond='data:srcset'>
          <b:attr name='srcset' expr:value='sourceSet(data:image, data:srcset, data:ratio)'/>
        </b:if>
      </b:tag>
    </b:with>
    </b:with>
  <b:else/>
    <b:comment render='true'>Parameter [src] is required.</b:comment>
  </b:if>
</b:includable>

Açıklama

Fonksiyon sadece src parametresine ihtiyaç duyar. Bu parametre önce görüntünün Youtube'a ait olup olmadığını kontrol eder ve eğer öyleyse url'yi daha yüksek çözünürlüklü olana değiştirir.

Görüntünün varlığını kontrol ettikten sonra, kendisine iletilen parametrelerle işlem görecektir. Hiçbiri belirtilmemişse, orijinal görüntüyü değiştirmeden teslim edecektir. src parametresi belirtilmemişse, bunun yerine bir HTML yorumu görürsünüz.

Bu işlevi zkreations - Daniel Abel tarafından geliştirilen Hamlet adlı Blogger şablon geliştirme projesinde bulabilirsiniz, nasıl çalıştığını daha iyi anlayabilmeniz için deposuna bir göz atmanızı tavsiye ederim.

Nasıl kullanılır

Eklemeyi "Common" türünde varsayılan bir Blogger biçimlendirmesi olarak ekleyin. Resimlerle çalışmanız gereken her yerde kullanabilirsiniz. Şimdi parametrelere bir göz atacağız.

Resim URL'si

Görselin Blogger, Google Fotoğraflar veya Youtube aracılığıyla Google sunucularında barındırılmasını tavsiye ederim. Harici bir sunucudan geliyorsa, Blogger "sonucu" bir proxy aracılığıyla iletecektir ve bu, performansa zarar vermenin yanı sıra, bazen görüntü görüntülenmeyecektir.

<b:include data='{ src: data:view.featuredImage }' name='@image'/>

<img src='/s1600/demo.png'/>

Alternatif metin

Resim yüklenemediğinde görüntülenecek alternatif metin. Belirtilmediğinde varsayılan olarak bir data:messages.image veri etiketi kullanılır.

<b:include data='{
    src: data:view.featuredImage,
    alt: "Alternatif metin"
  }' name='@image'/>

<img src='/s1600/demo.png' alt='Texto alternativo'/>

Tanımlayıcı ve sınıflar

img etiketine id ve class niteliklerini eklemeniz yeterlidir.

<b:include data='{
    src: data:view.featuredImage,
    id: "Benzersizİsim",
    class: "ornek"
  }' name='@image'/>

<img src='/s1600/demo.png' class='ejemplo' id='NombreUnico'/>

Boyut ve en boy oranı

Bu parametreler muhtemelen en önemlileridir ve nihai görüntünün boyutlarını ve görünümünü değiştirdikleri için ilgilendiğimiz parametrelerdir. Ek olarak, en boy oranı belirtilirse width ve height özellikleri otomatik olarak eklenecektir.

<b:include data='{
    src: data:view.featuredImage,
    resize: 300,
    ratio: "4:3"
  }' name='@image'/>

<img src='/w300-h225-p-k-no-nu/demo.png' height='225' width='300'/>

Boyut tablosu

srcset özniteliği belirtilen boyutlarla oluşturulur. Tablodaki ilk değer orijinal görüntünün boyutu olacaktır ve geri kalanı kullanıcının ekranının boyutuna bağlı olarak kullanılacaktır.

<b:include data='{
    src: data:view.featuredImage,
    srcset: [300, 600, 900]
  }' name='@image'/>

Yükseklik ve genişlik

Özel bir boyuta ihtiyacınız varsa, width ve height niteliklerini kullanabilirsiniz, bu parametreler yeniden resize ve ratio belirtildikten sonra boyuttan öncelikli olacaktır.

<b:include data='{
    src: data:view.featuredImage,
    width: 300,
    height: 200
  }' name='@image'/>

Boyut özelliği

sizes niteliği, kullanıcının ekranının boyutuna bağlı olarak görüntünün boyutunu belirtmek için kullanılır. Bu özellik hakkında daha fazla bilgi edinmek isterseniz, Mozilla'nın duyarlı görüntülerle ilgili belgelerine başvurabilirsiniz.

<b:include data='{
    src: data:view.featuredImage,
    sizes: "(max-width: 600px) 100vw, 50vw"
  }' name='@image'/>

Yükleme özelliği

loading özelliği, tarayıcıda yerel ertelenmiş yüklemeyi kullanmamıza izin verir. Bu gerçekten kullanabileceğimiz en güçlü özelliklerden biridir. Bu özellik hakkında daha fazla bilgi edinmek istiyorsanız, ertelenmiş yükleme hakkında Mozilla'daki belgelere başvurabilirsiniz.

<b:include data='{
    src: data:view.featuredImage,
    loading: "lazy"
  }' name='@image'/>

Ek parametreler

Resim parametreleri eklemeniz gerekiyorsa, params belirtebilirsiniz. Bu parametre sadece Blogger'da barındırılan resimler için geçerli olacaktır. Daha fazla bilgi edinmek isterseniz ek parametreler hakkındaki yazıya göz atabilirsiniz.

<b:include data='{
    src: data:view.featuredImage,
    params: "rw-e30"
  }' name='@image'/>

Sonuç

Proje büyüdüğünde, kodu temiz ve okunabilir tutmak önemlidir. Bu özellik sayesinde görselleri daha basit ve verimli bir şekilde işleyebilir, kodu şablonun herhangi bir yerinde yeniden kullanabilir ve gerekirse kolayca değiştirebiliriz.

Bu tür yazılar için, ek bağlantılarda bir geliştirme teması bulacaksınız. Böylece işlevi deneyebilir ve kullanımını daha iyi anlayabilirsiniz. Bu katkıyı beğendiyseniz, paylaşmayı unutmayın.

HuDocs ile projelerinizi kolayca belgeleyin

2023-09-07T20:57:00.130+03:00

Belgeleme zahmetlidir ancak diğer insanların kodunuzu anlayabilmesi, kullanabilmesi ve üzerinde işbirliği yapabilmesi için çok önemlidir.

Calificar Depo Demo

Belgeleme zahmetli bir iştir ancak diğer insanların kodunuzu anlayabilmesi, kullanabilmesi ve üzerinde işbirliği yapabilmesi için çok önemlidir. Bu nedenle, bu görevi kolaylaştırmak için zkreations tarafından tasarlanan HuDocs temasını paylaşıyorum. Markdown dosyaları yazarak ve bunları klasörler halinde düzenleyerek projenizi kolayca ve hızlı bir şekilde belgelemeniz sağlanmıştır.

Özellikler

HuDocs, MIT lisansı altında yayınlandığı için Hugo için özgürce kullanabileceğiniz bir temadır. Özelliklerinden bazıları şunlardır:

Core Web Vitals uyumluluğu için optimize edildi
Mozilla Observatory Güvenlik Seviyesi
Çoklu dil desteği
Bağımlılık yok
Otomatik gelişmiş arama motoru
Açık ve koyu tema
Uyarılar, notlar, tablolar vb. için kısa kodlar
Gelişmiş kod blokları
Yüksek kişiselleştirme

Gereksinimler

HuDocs'u kullanmak için Hugo'nun genişletilmiş sürümünün ve Git'in bilgisayarınızda yüklü olması gerekir. Özellikle şunlara ihtiyacınız var:

Hugo 0.100.0 veya üzeri (genişletilmiş sürüm)
Git - Git'i Kurun
Belgeleme arzusu

Kurulum

HuDocs'u yüklemek için Hugo projenizin kök dizinine gidin ve aşağıdaki komutu çalıştırın:


git submodule add https://github.com/zkreations/docs themes/docs

Önerilen yapı

Herhangi bir dosya ve klasör dağıtımını kullanabilirsiniz, belirli bir yapıyla sınırlı değildir. Ancak aynı projenin birden fazla sürümüne sahipseniz ilk bölüm klasörünün sürüm numarasına sahip olmasını öneririm, örneğin:


content
└── 1.0
└── 1.1
    └── index.md

Bu yapının nedenini daha iyi anlayabilmeniz için demo klasörüne bir örnek bıraktım, bunu içerik klasörüne getirmek ve yerel sunucunuzda görmek için aşağıdaki komutu çalıştırın:


cp -R themes/docs/demo/content .

Yapılandırma

Tema, belgelerinizi daha da özelleştirmenize yardımcı olabilecek bazı yararlı seçenekler içerir. demo/config.toml dosyasını kopyalayın ve bilgileri kendi verilerinizle değiştirin. Son olarak çalıştırarak yerel sunucuyu başlatın:


hugo serve

Özelleştir

HuDocs oldukça özelleştirilebilir bir tema, eğer temada değişiklik yapmak istiyorsanız projenizin kök dizininde bulunan assets/scss/_custom.scss klasöründe bir _custom.scss dosyası oluşturmanızı ve özel stillerinizi buraya eklemenizi öneririm.

Netlify

Ayrıca Netlify için örnek olarak kullanabileceğiniz bir yapılandırma dosyası da ekledim. demo/netlify.toml dosyasını kopyalayın ve bilgileri verilerinizle değiştirin. Ardından yeni bir Netlify sitesi oluşturun ve GitHub deponuza bağlayın.

Sonuç

HuDocs, projelerin belgelendirilmesini kolaylaştırmak için oluşturulmuş bir temadır. Ancak projelerini belgelendirmesi gereken diğer insanlara zaman kazandırmak için paylaşılmıştır. Herhangi bir öneriniz veya iyileştirmeniz varsa, bunları benimle paylaşmaktan çekinmeyin.

Blogger dinamik görünümünü devre dışı bırakmak

2023-07-28T12:15:00.050+03:00

Web sitenizde hızlı bir alıştırma yapmanızı istiyorum ve yaptığınızda bu makaleye geri dönün ve şaşırdıysanız yorum yapın. Blogger'da blogunuzu ziyaret edin ve ana sayfaya view rotasını ekleyin, örneğin:

https://www.ornek.com/view

Hiçbir şey olmazsa ¡tebrikler!. Bunu zaten biliyordunuz veya hallettiniz, ancak aktif durumda olan herkes için bu makale faydalı olacaktır.

Dinamik görünüm

Bu rotada öne çıkan tema, blog içeriğini tek bir sayfada görüntüleyen ve okuyucunun içeriği yeniden yüklemeden blogda gezinmesine olanak tanıyan Blogger'ın Dinamik Görünümünden başka bir şey değildir.

Bu modu, yönetim panelinde etkinleştirmemiş olsanız bile her zaman etkindir, dolayısıyla yüklü temadan bağımsız olarak tüm Blogger bloglarından erişilebilir.

301 yönlendirmesi

Dinamik görünümleri devre dışı bırakmanın en uygun yolu 301 yönlendirmeleridir. Bu nedenle bu rotaların arama motorlarında dizine eklenmesini de önleyeceğiz. Oluşturmanız gereken yönlendirmeler şunlardır:

/view
/view/sidebar
/view/snapshot
/view/timeslide
/view/mosaic
/view/magazine
/view/flipcard
/view/classic

Sondaki / eğik çizgiyi içeren her dinamik görünüm için ek bir yönlendirme oluşturmanız da önerilir ve bunların tümü üst sayfayı göstermelidir. Aşağıdakilere dikkat edin:

Beslemeleri devre dışı bırak

Bu, dinamik görünümü yarı kapatmanın başka bir yoludur, ancak bu şekilde yapılmasını önermiyorum, sadece bilgi için bıraktım.

Dinamik mod, sitede gezinmek için JavaScript kullanır ve blog yayınlarının içeriğe erişmesini gerektirir. Beslemeleri kullanmayıp, bunları devre dışı bırakmak görünümlerin yüklenmesini engeller. Ancak yine de erişilebilir olacaktır, yalnızca bu sefer bir bilgi mesajı görüntülencektir:

Çözüm

Dinamik görünümlerin yüklenmesini engellemenin zorunlu olmadığını unutmayın, çünkü bunlar sizin için yararlıysa herhangi bir değişiklik yapmamalısınız. Aksine, bu görünümleri beğenmezseniz, bunları kaldırmak için kullanabilirsiniz.

Google Drive'da doğrudan indirme bağlantıları oluşturun

2023-07-09T02:20:00.028+03:00

Multimedya dosyalarını ücretsiz olarak barındırmak için alternatifler bulmak oldukça zor bir iş olabilir. Neyse ki, ilk bakışta bu kullanımı belirtmeseler de, bu amaçla yararlanabileceğimiz bazı hizmetlere hala sahip olabiliyoruz.

Bugün size, 15 gb ücretsiz depolama alanı ve günlük 750 gb ile sınırlı bir bant genişliği sağlayan Google Drive'da ki bir dosya için doğrudan indirme bağlantısını nasıl oluşturacağınızı göstereceğim.

Ortak klasör oluştur

Her şeyden önce, Google Drive'da oturum açın, ardından Drive'ım'ı tıklayın ve istediğiniz şekilde adlandırabileceğiniz yeni bir klasör oluşturun:

Şimdi üzerine sağ tıklayın ve “Paylaş” seçeneğini seçin. Değişiklikleri kaydetmek için “Bağlantıya sahip olan herkese değiştir” ve ardından “Bitti” düğmesine tıklayacağımız kalıcı bir pencere açılacaktır:

Google Drive'da zaten ortak klasörümüz var, içinde doğrudan indirme bağlantısını elde etmek istediğimiz tüm multimedya dosyalarını yükleyeceğiz.

Doğrudan indirme bağlantısı oluştur

Dosyayı yükledikten sonra, üzerine sağ tıklayın ve kopyalamak için “Bağlantıyı al” düğmesine basın:

Google Drive tarafından sağlanan bağlantı aşağıdakine benzer:

https://drive.google.com/file/d/123456789XXXXXXX/view?usp=sharing

Dosya kimliğini, yani sarı renkle vurgulanan her şeyi kopyalamanız ve aşağıda gösterildiği yere yapıştırmanız yeterlidir:

https://drive.google.com/uc?export=download&id=Id_Archivo

Bu değişikliği yaparken sonuç şuna eşit olacaktır:

https://drive.google.com/uc?export=download&id=123456789XXXXXXX

Size vereceğim ve kendi deneyimlerime göre çok yararlı olduğunu düşündüğüm kişisel bir tavsiye, bağlantıyı tanımlayabilmek için dosyanın adını döndürmenizdir, bunu aşağıdaki şekilde yapabilirsiniz:

https://drive.google.com/uc?export=download&id=123456789XXXXXXX&name=nombre-video.mp4

Parametre hiçbir şeyi etkilemeyecek ve adı ve formatı hızlı bir şekilde tanımlamanıza izin verecektir. İşte bu kadar, bir indirme bağlantısı oluşturmayı bitirdiniz ve bağlantıyı ziyaret ederseniz otomatik bir indirme başlayacaktır.

Otomatik oluştur

Alternatif bir yöntem olarak, Drive için İndirme Bağlantısı Oluşturucu adlı bir GSuite eklentisi kullanabilirsiniz. Eklenti sayfasına gidin, yüklemek için Google izinlerini sağlayın ve işte, şimdi şöyle bir şey yapabilirsiniz:

Dosya sınırları

Google Drive tüm indirilenleri virüslere karşı taradığından dosyaların boyutu 100 MB'ı aşamaz. 100 MB'ı aşarsa, dosyanın indirilmek yerine taranamayacağını belirten bir uyarı görüntülenecektir.

Öte yandan, yüklediğiniz tüm dosyalar Google Drive Politikalarına uygun olmalıdır.

Linkler nasıl kullanılır

Ana avantajı, web sitemizde veya bloğumuzda kullanmak üzere ses veya video gibi küçük multimedya dosyalarını yüklememiz gerektiğinde barındırma için ödeme yapmaktan tasarruf etmemizdir. Örneğin, bu eğitimin ses dosyasının bağlantısı:

Videolar da aynı şekilde kullanılabilir, ancak boyutun 100 MB'ı geçemeyeceğini unutmayın, bu nedenle videolarınızı iyi sıkıştırmanızı tavsiye ederim.

Çözüm

Google Drive, dosyaları ücretsiz olarak barındırmak ve bunları blogumuzda kullanmak için mükemmel bir alternatiftir. Umarım bu makale sizin için yararlı olmuştur. Uğradığınız için teşekkürler!

Plyr ile özel video oynatıcı

2023-07-09T01:48:00.017+03:00

Tarayıcının yerel oynatıcısını kullanırken muhtemelen sizi rahatsız eden faktörlerden biri de tasarımdaki tutarsızlıktır.

Calificar Github ile görüntüle

Tarayıcının yerel oynatıcısını kullanırken muhtemelen sizi rahatsız eden faktörlerden biri de tasarımdaki tutarsızlıktır. Örneğin, Firefox oynatıcısı Chrome'dan ve bunlar da Safari'den farklıdır. YouTube'dan videoları gömmek için kod kullanmanız durumundan bahsetmiyorum bile.

Plyr size yardım etmek için burada, ancak yalnızca özelleştirmeyle sınırlı değil, beraberinde YouTube ve Vimeo oynatıcı desteği, bağımlılık olmaması (ES6'da yazılmış) ve çok daha fazlası dahil olmak üzere çok çeşitli özellikler getiriyor.

Kurulum

Hay muchas maneras de incluirlo a tu proyecto, sin embargo solo me voy a centrar en la entrega mediante CDN que proporciona Plyr. Busca en tu proyecto la etiqueta </head> y arriba de eso pega el siguiente código:



<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
<script src="https://cdn.plyr.io/3.7.8/plyr.js" defer></script>

Ahora para iniciar el reproductor, te facilito el siguiente código javascript al cual le he incluido el modo “sin cookies” de Youtube y la traducción de los botones al idioma que prefieras:



<script>/*<![CDATA[*/
window.addEventListener('DOMContentLoaded', () => {
  const players = Array.from(document.querySelectorAll('.plyr')).map((p) => new Plyr(p,{
    youtube: { noCookie: true },
    i18n: {
      quality: 'Calidad',
      speed: 'Velocidad',
      captions: 'Subtítulos',
      disabled: 'Desactivar',
      enabled: 'Activar',
    },
  }));
});/*]]>*/
</script>

Por último debemos especificar los elementos que iniciarán con Plyr usando la clase plyr, esto dependerá de lo que queramos hacer, pero explicaré algunos métodos a continuación.

YouTube ile kullanın

Primero necesitas obtener la ID de un video de YouTube, que es el código que se encuentra después de watch?v= como se muestra en el siguiente enlace de ejemplo:



https://www.youtube.com/watch?v=ppMXtTbNnCs

Ahora utiliza la siguiente código html, en donde vas a ubicar el id copiado del video en el atributo plyr-embed-id como se muestra a continuación:



<div class="plyr" data-plyr-provider="youtube" data-plyr-embed-id="ppMXtTbNnCs"></div>

Ahora ya podemos controlar el reproductor de YouTube con Plyr. La desventaja es que el logo y otros datos seguirán apareciendo y no podremos usar las opciones nativas de YouTube:

Vimeo ile kullanın

Debemos obtener la id del video en Vimeo, al igual que como lo hicimos para YouTube, a modo de ejemplo vamos a extraerla del siguiente enlace:



https://vimeo.com/247535042

Ahora utiliza este código html ubicando la id copiada del video en el atributo plyr-embed-id, toma en cuenta de que también cambia el valor del atributo plyr-provider que ahora sera vimeo:



<div class="plyr" data-plyr-provider="vimeo" data-plyr-embed-id="247535042"></div>

En este caso, los datos y logo de Vimeo si desparecen, pero seguimos sin tener acceso a las opciones nativas del reproductor, que en este caso es Vimeo:

Audio HTML5

En este caso podremos usar la etiqueta HTML5 de audio con todas sus opciones nativas. Para iniciar Plyr vamos a agregar la clase plyr de la siguiente manera:



<audio class='plyr' controls>
  <source src="audio.mp3" type="audio/mp3">
</audio>

Es lo único, todo lo demás, como el soporte para distintos formatos y otras opciones corresponden a la etiqueta HTML5 de audio, por lo tanto no tienes que hacer nada más:

Video HTML5

Vamos a usar la etiqueta HTML5 nativa de videos y de igual forma todas las opciones nativas estarán disponibles. Para iniciar Plyr agrega la clase plyr:



<video class='plyr' poster="thumbnail.jpg" playsinline controls>
  <source src="video.mp4" type="video/mp4">
</video>

Eso es todo, para este ejemplo y con el fin de que puedas apreciar gran parte de las opciones que trae Plyr, he agregado subtítulos, varias resoluciones (simulado) y un poster:

Altyazılar

Para agregar subtítulos utiliza la etiqueta track especificando el idioma y la fuente del archivo, pero ten cuidado, si los subtítulos están alojados en un servidor externo al de tu web, también necesitaras especificar el atributo crossorigin, de lo contrario no funcionara:



<video class='plyr' controls playsinline crossorigin>
  <source src="video.mp4" type="video/mp4">
  <!-- Subtítulos -->
  <track kind="captions" label="English" srclang="en" src="captions_en.vtt">
  <track kind="captions" label="Español" srclang="es" src="captions_es.vtt" default>
</video>

Kalite

Para poder especificar las opciones de calidad, necesitarás agregar elementos HTML5 source, con el atributo size correspondiente a la calidad, por ejemplo:



<video class='plyr' controls playsinline>
  <!-- Calidad -->
  <source src="video_576p.mp4" size="576" type="video/mp4">
  <source src="video_720p.mp4" size="720" type="video/mp4">
</video>

Kısayollar

El reproductor también cuenta con algunos atajos pulsando botones del teclado. En la siguiente tabla te dejo los que están disponibles hasta el momento, así como su función:

Key	Action
`0` al `9`	Buscar del 0 al 90% del vídeo
`K` o `space`	Alternar reproducción (play o pause)
`←` y `→`	Buscar hacia atrás y hacia adelante
`↑` y `↓`	Subir y bajar volumen
`M`	Mutear
`F`	Pantalla completa
`C`	Activar o desactivar subtítulos
`L`	Activar o desactivar reproducción continua

Vidstack ile birleştirme

Estoy consiente de que Plyr está en un proceso de fusion con otro proyecto llamado Vidstack, el cual es su sucesor, cuando esto ocurra, el repositorio de Plyr será archivado, pero podrás seguir utilizándolo en tus proyectos, simplemente dejará de recibir actualizaciones. Cuando la version estable de Vidstack esté disponible haré un articulo al respecto.

Çözüm

Plyr es una de las opciones que más me han gustado para personalizar el reproductor fácilmente, y aunque actualmente no lo uso, si que estoy al tanto de su desarrollo y lo tomo en cuenta para futuros proyectos. Espero que este articulo te haya sido de utilidad. ¡Gracias por leer!

Blogger ve statik siteler için iletişim formu

2022-10-18T23:23:00.043+03:00

Blogger gibi blog siteleri veya Jekyll gibi statik site oluşturucularla oluşturulan web sitelerinde sitenin mantığı dolayısıyla veritabanı kullanmıyoruz. Formspree, sunucunuza herhangi bir ek gereksinim oluşturmadan iletişim formu oluşturmanızı sağlayan bir fikir. Formspree sayesinde fonksiyonel HTML iletişim formlarınızı PHP veya Javascript kullanmak zorunda kalmadan oluşturabiliyorsunuz.

Form Oluşturma

Formspree.io adresine gittiğinizde son derece basit bir yapıda örnek iletişim formu dökümünü göreceksiniz.


<form action="//formspree.io/your@email.com" method="POST">
<input type="text" name="name">
<input type="email" name="_replyto">
<input type="submit" value="Send">
 </form>

Yukarıdaki örnek kodda göründüğü gibi Formspree’nin iletişim formunda çalışması için action niteliği ile mail adresinizi tanımlamanız gerekiyor.

Ek Özellikler

Yukarıdaki iletişim formu isim, mail bilgisi ve gönderme butonundan oluşan son derece basit bir iletişim formu. Bu formu ek özellikleri de kullanarak geliştirebiliriz.


<form id="contactform" action="//formspree.io/mail@adresin.com" method="POST">
   <input type="text" name="name" placeholder="İsminiz">
   <input type="email" name="_replyto" placeholder="Mail adresiniz">
   <textarea name="message" placeholder="Mesajınız"></textarea>
   <input type="submit" value="Gönder">
</form>

Burada formumuzu CSS ile özelleştirmek için contactform id değerini atadık ve kullanıcıların mesaj yazabileceği bir textarea ekledik. input bloklarındaki name niteliğine name, _replyto gibi Formspree tarafından tanımlanan değerleri ekledik.

Form Yönlendirmesi

Formspree tarafından tanımlanan _next değeri sayesinde iletişim formuyla mesaj gönderildikten sonra kullanıcıyı başka bir sayfaya yönlendirebiliyoruz.


<input type="hidden" name="_next" value="//site.com/tesekkurler.html" />

Yukarıdaki örnekte görüldüğü gibi name niteliğine Formspree tarafından tanımlanan ve tanınan _nextdeğerini girdik, value değerinde ise iletişim formundan sonra yönlenecek teşekkür sayfasını tanımladık.

Formu Güvenli Yapmak

Formspree ile oluşturduğumuz iletişim formunu “honeypot” olarak bilinen spam önleme yöntemiyle güvenli bir hale getirebiliriz. Honeypot tekniği oldukça basittir; iletişim formunun içerisine botların görebileceği ama kullanıcıların göremeyeceği bir alan oluştururuz. Spambot bu alanı doldurmaya çalışacak ama kullanıcılar bu alanı hiç görmediği için dolduramayacak. Bu alanın doldurularak gönderildiği gönderiler spam olarak kabul edilecek ve elenecek.

Bu tekniği formunuza şu kodu ekleyerek kullanabilirsiniz:


<input type="text" name="_gotcha" style="display:none" />

Buradaki style niteliği alanı formu kullanıcılara görünmez yapması bakımından, name niteliğine atanan _gotcha değeri ise Formspree’nin bu alanı tanıması ve bu alanın doldurularak gönderildiği iletileri engellemesi açısından önemlidir.

İletişim formunda action niteliğine tanımladığımız //formspree.io/mail@adresin.com değeri spambotlar tarafından HTML dosyasından alınabilir. Spambotların mail adresinizi seçebilmesi olasılığını düşürmek için Javascript kullanarak mail adresinizi tanımladığınız ifadeyi parçalara bölebilirsiniz.


<form id="contactform" method="POST">
   <input type="text" name="name" placeholder="İsminiz">
   <input type="email" name="_replyto" placeholder="Mail adresiniz">
   <textarea name="message" placeholder="Mesajınız"></textarea>
   <input type="text" name="_gotcha" style="display:none" />
   <input type="submit" value="Gönder">
</form>
/*]]>*/<script>/*<![CDATA[*/

   var contactform =  document.getElementById('contactform');
   contactform.setAttribute('action', '//formspree.io/' + 'mail' + '@' + 'adresin' + '.' + 'com');
/*]]>*/</script>

Burada action niteliğini form elementinden kaldırdık ve formun altına eklediğim ufak bir JavaScript koduyla mail adresimizi belirtmiş olduk.

Formu Onaylama

Formu oluşturduktan sonraki son adımda formumuzun bulunduğu sayfayı internet tarayıcısından ziyaret ederek formumuzdan örnek bir ileti göndereceğiz ve ardından gelen pencerede formumuza tanımladığımız mail adresini onaylayacağız.

Mail adresinize gelen onay linkine tıkladıktan sonra onaylama işlemi tamamlanacak.

Not: Bu onaylama işlemini formu yeni bir sayfaya eklediğinizde tekrar yapmanız gerekir.

Blogger API anahtarı nasıl alınır

2022-01-01T15:15:00.034+03:00

Bu yazımda, Blogger API 3.0 tabanlı uygulamalar için gerekli olacak, kimlik doğrulama görevi gören bir tanımlayıcı olan Blogger API anahtarının nasıl elde edileceğini açıklıyorum.

Proje oluşturun ve API'yi etkinleştirin

Başlamak için kimlik bilgileri bölümüne gideceğiz ve yeni bir proje oluşturacağız, istediğiniz adı kullanabilirsiniz. Daha sonra Blogger api'sini arayacağız ve etkinleştirmeye devam edeceğiz.

API anahtarı oluştur

Projemiz zaten oluşturulmuş ve Blogger API etkinleştirildiğinde, geriye yalnızca kimlik bilgileri sayfasına geri dönüp "API Anahtarı"nı seçmek kalır. Oluşturduktan sonra, Blogger API'sini ve çalışacağı etki alanını belirleyeceğimiz kısıtlamaları yapılandıracağız.

Son olarak, yalnızca API anahtarını kopyalamanız yeterlidir ve bunu uygulamanızda kullanabilirsiniz. Her uygulama için yeni anahtar oluşturmanıza gerek olmayıp, ayrıca izin verilenler listesine daha fazla alan ekleyebilirsiniz.

Aşağı açılır etiket eklentisi

2020-07-08T01:00:00.000+03:00

Demo - Codepen

Blogger için bir geliştirilen açılır etiket listesi widget'ının güncellenmiş halidir. Bu revizyon daha sade ama modern bir tasarıma, temiz koda ve yeni seçeneklere sahip.

Kurulum

Blogger yönetim paneli > Temalar > Özelleştir > gelişmiş seçenekler > CSS Ekle bölümüne gidiyoruz. Bu bölüme aşağıdaki kodu yapıştıracağız:


/*!
 * Tlist v2.0
 * Copyright 2020 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT (github.com/zkreations/plugins/blob/master/LICENSE)
 */
 /*! Core (Değişiklik yapmayın) {{*/
.tlist {
   position: relative;
   width: 100%;
   z-index: 5;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
}
.tlist-content {
    overflow-y: auto;
}
.tlist-content::-webkit-scrollbar {width: 4px;}
.tlist-content::-webkit-scrollbar-track {background-color: transparent;}
.tlist-content::-webkit-scrollbar-thumb {
  background-color: #CFD8DC;
  border-radius: 10px;
}
.tlist-btn {cursor: pointer;}
.tlist > input {display: none;}
.tlist > input:checked ~ .tlist-dropdown {
   display: block;
}
@-webkit-keyframes tlist-dropdown {
   from {-webkit-transform: translateY(-1rem);transform: translateY(-1rem);opacity: 0}
   to {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1}
}
@keyframes tlist-dropdown {
   from {-webkit-transform: translateY(-1rem);transform: translateY(-1rem);opacity: 0}
   to {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1}
}
.tlist-dropdown {
   position: absolute;
   width: 100%;
   left: 0;
   top: calc(100% + 4px);
   display: none;
   background: var(--tlist-bg);
   -webkit-animation: tlist-dropdown .3s ease-in-out;
           animation: tlist-dropdown .3s ease-in-out;
   -webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))
           drop-shadow(0 3px 5px rgba(0, 0, 0, 0.15));
           filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))
           drop-shadow(0 3px 5px rgba(0, 0, 0, 0.15));
}
.tlist-dropdown::before {
   content: "";
   border-right: 12px solid transparent;
   border-left: 12px solid transparent;
   border-bottom: 12px solid var(--tlist-bg);
   position: absolute;
   top: -10px;
   left: calc(50% - 5px);
}
.tlist-btn,
.tlist-link {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
       align-items: center;
}
.tlist-num {margin-left: auto;}
.tlist-link:not(:last-child) {margin-bottom: 4px;}
.tlist-link > i {
   text-align: center;
   width: 1.25em;
}
/*}} Core sonu {{*/

/*! Özelleştirme */
/* Yapı
-----------------------------------------*/
.tlist {
   --tlist-bg: #fff; /* color de fondo  */
}
.tlist-content {
    max-height: 390px; /* alto maximo */
}
.tlist-dropdown {
   padding: 10px; /* relleno */
   border-radius: 5px; /* borde redondo */
}
/* Liste
-----------------------------------------*/
.tlist-link {
   padding: 12px 14px; /* relleno */
   color: #5a6370; /* color */
   font-size: 14px; /* tamaño de texto */
   font-weight: 500; /* densidad del texto */
}
.tlist-link:hover,
.tlist-link.is-here {
   background: #f4f5f7; /* color de fondo  */
   border-radius: 5px; /* borde redondo */
   color: #1c2333; /* color (hover) */
}
/* Simge
-----------------------------------------*/
.tlist-link > i {
   font-size: 20px; /* tamaño de texto */
   margin-right: 12px; /* separacion derecha */
   color: #9fa6b2; /* color */
}
/* Sayı
-----------------------------------------*/
.tlist-num {
   background: rgba(38, 50, 56, 0.05); /* color de fondo  */
   padding: 2px 12px; /* relleno */
   font-size: 12px; /* tamaño de texto */
   border-radius: 10px; /* borde redondo */
}
/* Buton
-----------------------------------------*/
.tlist-btn {
   padding: 14px 18px; /* relleno */
   background: #f4f5f7; /* color de fondo  */
   font-weight: 500; /* densidad del texto */
   color: #5a6370; /* color */
   border-radius: 5px; /* borde redondo */
}
.tlist-btn:hover {
   color: #1c2333; /* color (hover) */
}

Değişiklikleri kaydetmek için "Uygula" düğmesine basın. Şimdi Temalar > html düzenle'ye gidin ve <b:section id='sidebar'> veya herhangi bir bölüm etiketini bulun, hemen altına aşağıdaki kodu yapıştırın:


<b:widget id='Label50' title='Etiquetas desplegables' type='Label'>
   <b:includable id='main'>
      <b:include expr:name='data:widgets ? "widget-title" : "title"'/>
      <b:include name='content'/>
   </b:includable>
   <b:includable id='title'>
      <b:tag name="h2" class='widget-title'>
         <span class='widget-name'><data:title/></span>
      </b:tag>
   </b:includable>
   <b:includable id='content'>
      <div class='widget-content'>
         <b:with value='data:widget.instanceId' var='id'>
         <div class='tlist'>
            <b:include name='btn'/>
            <div class='tlist-dropdown'>
               <b:include name='list'/>
            </div>
         </div>
         <b:include cond='!data:widgets' name='layout2fix'/>
         </b:with>
      </div><!-- .widget-content -->
   </b:includable>
   <b:includable id='btn'>
     <input expr:id='"tlist-" + data:id' type='checkbox'/>
     <label class='tlist-btn' expr:for='"tlist-" + data:id'>Seleccionar</label>
   </b:includable>
   <b:includable id='list'>
      <div class='tlist-content'>
         <b:loop values='data:labels' var='i'>
            <a class='tlist-link' expr:href='data:i.url'>
            <b:class cond='data:view.url == data:i.url' name='is-here'/>
            <b:include name='icons'/><data:i.name/>
            <b:include cond='data:showFreqNumbers' name='numbers'/>
            </a>
         </b:loop>
      </div>
   </b:includable>
   <b:includable id='numbers'>
      <span class='tlist-num'><data:i.count/></span>
   </b:includable>
   <b:includable id='layout2fix'>
      <style>#<data:id/>{z-index: 2}</style>
   </b:includable>
   <b:includable id='icons'>
      <b:switch var='data:i.name'>
         <b:case value='Astronomia'/>
            <i class="fas fa-meteor"></i>
         <b:default/>
            <i class="fas fa-tag"></i>
      </b:switch>
   </b:includable>
</b:widget>

Kaydet ve widget'ı varsayılan seçenekler ile yüklediniz.

Özelleştir

Blogger Şablon Tasarımcısı'ndan görünümü düzenlemek için bir kılavuz olarak kullanabileceğiniz css kodunda yorumlar bıraktım. Bazı ek seçenekleri değiştirmek de mümkün.

Simgeler

Varsayılan olarak liste boyunca bir etiket simgesi görüntülenecektir. Her etiketin kendi özel simgesine sahip olmasını istiyorsanız aşağıdaki kodu arayın:


<b:switch var='data:i.name'>
   <b:case value='Astronomia'/>
      <i class="fas fa-meteor"></i>
   <b:default/>
      <i class="fas fa-tag"></i>
</b:switch>

Örneğin, etiketin tam adını içeren bir <b:case> modülü ve altına bir Font Awesome simgesi eklemeniz yeterlidir:


<b:switch var='data:i.name'>

   <!-- Icono para la etiqueta Astronomia -->
   <b:case value='Astronomia'/>
      <i class="fas fa-meteor"></i>

   <!-- Icono para la etiqueta Salud -->
   <b:case value='Salud'/>
      <i class="far fa-heart"></i>

   <b:default/>
      <i class="fas fa-tag"></i>
</b:switch>

Bu örneği izleyerek istediğiniz kadar etiket ekleyebilirsiniz. Etiketler için tüm simgeleri devre dışı bırakmak istiyorsanız, aşağıdaki kodu bulun ve silin:


<b:include name='icons'/>

Miktarlar

Etiket başına giriş sayısını gösteren sayıyı etkinleştirmek veya devre dışı bırakmak istiyorsanız, widget'ı Tasarım'dan düzenlemeniz ve ilgili seçeneğin işaretini kaldırmanız yeterlidir.

Yazıyı faydalı bulduysanız yazıyı paylaşmayı unutmayın. Herhangi bir sorunuz varsa yorumlara yazın. Uğradığınız için çok teşekkür ederim.

Blogger için Breadcrumbs

2020-06-19T01:52:00.079+03:00

Demo Codepen

Las migas de pan es uno de los requerimientos de W3C para llegar al nivel "A" de accesibilidad web, ya que facilitan información a los usuarios para saber en qué parte se encuentran y qué camino recorrió. Además, combinado con datos estructurados JSON-LD, Google mostrará nuestros breadcrumbs en los resultados de búsqueda.

He desarrollado breadcrumbs especialmente para Blogger, que ademas incluyen datos estructurados BreadcrumbList en formato JSON-LD, necesarios para que sean visibles desde los resultados de búsqueda de Google.

İçerik

Kurulum
Datos estructurados
Más ayuda

Kurulum

Nos vamos a dirigir a Temas Personalizar opciones avanzadas Agregar CSS y en esta opción pegaremos el siguiente código:

/*!
 * Breadcrumbs v2.0
 * Copyright 2020 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT (github.com/zkreations/plugins/blob/master/LICENSE)
 */
 /*! Core (No modificar) {{*/
.breadcrumb-item,
.breadcrumb-link,
.breadcrumbs {
   display: -ms-flexbox;
   display: flex;
}
.breadcrumb-link {
   -ms-flex-align: center;
       align-items: center;
   transition: color .3s, background .3s;
   height: 38px;
}
.breadcrumb-link.isfirst,
.breadcrumb-link:hover {
   background: var(--breadcrumb-color);
}
.breadcrumbs {
   padding: 0;
   margin: 0;
}
.breadcrumbs,
.breadcrumb-item {list-style: none;}
.breadcrumb-link {position: relative;}
.breadcrumb-link svg {display: block;}
.breadcrumb-link::after,
.breadcrumb-link:not(.isfirst)::before {
   content: "";
   border-top: 19px solid;
   border-bottom: 19px solid;
   border-left: 10px solid;
   position: absolute;
   transition: border .3s;
}
.breadcrumb-link::after,
.breadcrumb-link:not(.isfirst)::before {
   border-color: var(--breadcrumb-bg);
}
.breadcrumb-link {
   background: var(--breadcrumb-bg);
}
.breadcrumbs .breadcrumb-link::after {
   right: -10px;
   border-top-color: transparent;
   border-bottom-color: transparent;
}
.breadcrumbs .breadcrumb-link:not(.isfirst)::before {
   left: -10px;
   border-left-color: transparent;
}
.breadcrumb-link.isfirst::after,
.breadcrumb-link:hover:after {
   border-left-color: var(--breadcrumb-color)
}
.breadcrumb-link:not(.isfirst):hover:before {
   border-top-color: var(--breadcrumb-color);
   border-bottom-color: var(--breadcrumb-color);
}
/*}} Fin del core {{*/

/*! Personalización */
/* Estructura
-----------------------------------------*/
.breadcrumbs {
   --breadcrumb-color: #8dc26e; /* color principal */
   --breadcrumb-bg: #f2f2f2; /* color de fondo  */
    margin-top: 0px; /* separacion superior */
    margin-bottom: 14px; /* separacion inferior */
}
/* Icono
-----------------------------------------*/
.breadcrumb-link svg {
   width: 18px; /* tamaño */
   fill: #fff; /* color */
}
.breadcrumb-link.isfirst {
   border-radius: 5px 0 0 5px; /* borde redondo */
}
/* Migas
-----------------------------------------*/
.breadcrumb-item {
   margin-right: 13px; /* separacion derecha */
}
.breadcrumb-link {
   color: #757575; /* color */
   padding: 0 12px; /* relleno */
   font-size: 14px; /* tamaño de texto */
   font-weight: 400; /* densidad del texto */
}
.breadcrumb-link:hover {
   color: #fff; /* color (hover) */
}

Presionamos "Aplicar" para guardar los cambios y ahora vamos a Tema Editar HTML y buscamos <b:includable id='status-message'> y arriba de eso pegamos el siguiente código:

<b:includable id='postBreadcrumbs'>
  <!-- limite de migas -->
  <b:with value='data:post.labels limit 3' var='breadcrumbs'>
  <!-- Migas de pan -->
  <ol class='breadcrumbs'>
    <!-- Inicio -->
    <li class='breadcrumb-item'>
      <a class='breadcrumb-link isfirst' expr:href='data:blog.homepageUrl'>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
          <path fill="none" d="M0 0h24v24H0z"/>
        </svg>
      </a>
    </li>
    <!-- Etiquetas -->
    <b:loop values='data:breadcrumbs' var='i'>
    <li class='breadcrumb-item'>
      <a class='breadcrumb-link' expr:href='data:i.url'><data:i.name/></a>
    </li>
    </b:loop>
  </ol>
  <!-- JSON-LD -->
  <script type="application/ld+json">
  {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
    "itemListElement": [{
      "@type": "ListItem",
      "position": 1,
      "name": "<data:blog.title/>",
      "item": "<data:blog.homepageUrl.canonical/>"
    }<b:loop index='e' values='data:breadcrumbs' var='i'>,{
      "@type": "ListItem",
      "position": <b:eval expr='data:e + 2'/>,
      "name": "<data:i.name/>",
      "item": "<data:i.url/>"
    }</b:loop>]
  }</script>
  </b:with>
</b:includable>

Por último necesitamos incluir la etiqueta <b:include> en donde queramos mostrar los breadcrumbs. Esta es quizás la parte más complicada ya que varía dependiendo de la plantilla:

<!-- Breadcrumbs -->
<b:include cond='data:view.isPost and data:post.labels' name='postBreadcrumbs'/>

Una buena forma de encontrar el sitio adecuado es buscando <data:post.title/>, e intentando encontrar la zona que corresponda a los títulos de los artículos, luego simplemente hacemos espacio arriba de eso y pegamos el código.

Datos estructurados

He diseñado el código con los datos estructurados del tipo JSON-LD ya incluidos y puedes validar los datos utilizando la herramienta de prueba de datos estructurados google para comprobar como se comporta el código.

No hay ninguna garantía de que Google vaya a tomar tus datos de forma inmediata o a largo plazo. Si los datos son procesados por Google entonces serán mostrados en los resultados de búsqueda.

Más ayuda

Se que es muy complicado encontrar el lugar correcto en la plantilla desde la edición html, sobre todo para las personas que no reconocen el código de Blogger o HTML, así que si tienes problemas para implementar las migas de pagan, déjame un comentario y yo te guiaré de forma personalizada.

Espero que este articulo les haya resultado útil para implementar esta característica en Blogger. Si te ha servido no olvides compartir para ayudar a más personas, además es algo que siempre agradezco ya que me ayuda mucho.

Blogger için en iyi ilgili yayınlar

2020-06-15T21:04:00.124+03:00

Repositorio Demo

Los post relacionados son una excelente manera de reducir el porcentaje de rebote, sin embargo, los métodos para crear post relacionados en Blogger tienen un problema en común, ya que todos generan una consulta por etiqueta y a mayor cantidad de consultas, peor rendimiento.

Mi amigo José Gregorio Materan estuvo a cargo de desarrollar este script con la meta de lograr los mejores post relacionados para Blogger y para ello simplificamos todas las consultas en una.

Kurulum

Vamos a nuestro panel de Blogger, Temas Personalizar Opciones avanzadas Agregar CSS, aquí pegaremos el siguiente código:

/*!
 * wjs-related v2.1.0
 * Copyright 2018 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT (github.com/zkreations/wjs-related/blob/master/LICENSE)
 */
/*! Core (No modificar) {{*/
.relCard,
.relCard-image,
.relCard-snippet,
.relCard-title,
.relCardate {
   margin: 0;
   box-sizing: border-box;
}
.relCard {
   padding-left: .5em;
   padding-right: .5em;
   padding-bottom: 1em;
}
.relCard,
.relCard-image img {width: 100%;}
.wjs-related {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   margin-left: -.5em;
   margin-right: -.5em;
   font-size: 14px;
}
.relCard-image {display: block;}
.relCard-content {overflow: hidden;}
@media (min-width:376px) {.relCard {width: 50%;}}
@media (min-width:576px) {
   .relCard {width: 33.333333%}
   .wjs-related {font-size: 16px;}
}
/*}} Fin del core {{*/

/*! Personalización */
/* Cuerpo
-----------------------------------------*/
.relCard-content {
   box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.25); /* sombra */
   border-radius: 6px; /* bordes redondeados */
}
/* Contenedor de datos
-----------------------------------------*/
.relCard-data {
   padding: 1.2em; /* relleno */
   background-color: #fff; /* color de fondo */
}
/* Titulo
-----------------------------------------*/
.relCard-title {
   font-size: 1em; /* tamaño del título */
   margin-bottom: .25em; /* separación */
   color: #464646; /* color del titulo */
}
/* Fecha
-----------------------------------------*/
.relCard-date {
   font-size: .9em; /* tamaño del texto */
   color: #BBBBBB; /* color de la fecha */
}
/* Resumen
-----------------------------------------*/
.relCard-snippet {
   margin-top: .5em; /* separación */
   color: #757575; /* color del texto */
}

Presiona el botón "Aplicar" para que los cambios surtan efecto. Ahora ve a Temas Editar HTML y busca lo siguiente:

<b:includable id='status-message'>

Arriba de eso pega el siguiente contenedor <b:includable> que genera los artículos relacionados:

<b:includable id='postRelated' data='post'>
   <div id='wjs-related' class='wjs-related'/>
   <script>
   /*!
    * wjs-related v2.1.0
    * Copyright 2018 zkreations
    * Developed by José Gregorio (fb.com/JGMateran)
    * Licensed under MIT (github.com/zkreations/wjs-related/blob/master/LICENSE)
    */
   var related = (function(){
   'use strict';
   
   //Configuracion
   var defaults = {
      id: '<data:post.id/>',
      homepage: window.location.protocol + '//' + window.location.hostname,
      image: 'src/imgdefault.jpg', //Imagen por defecto
      length: 6, //Cantidad de entradas
      localeDate: 'es-ES', //Idioma
      snippet: 50, //Cantidad de texto
      imgSize: 's256', //Recorte de la imagen
      container: document.getElementById('wjs-related'),
      tags: [<b:loop values='data:post.labels' var='label'>'<data:label.name/>',</b:loop>]
   };
   
   //<![CDATA[
   var tags$length = defaults.tags.length;
   var script = document.createElement( 'script' );
   var src = defaults.homepage + '/feeds/posts/default' +
      '?alt=json-in-script' +
      '&callback=related' +
      '&max-results=' + ( defaults.length + 1 ) +
      '&q=';
   for ( var n = 0; n < tags$length; n++ ){
      src += 'label:"' + defaults.tags[ n ] + '"' + ( n === tags$length - 1 ? '' : '|' );
   }
   script.src = src;
   document.body.appendChild( script );
   function render( data ){
      var title = data.title.$t;
      var content = data.content;
      var summary = data.summary;
      var body = content ? content.$t : summary.$t;
      var snippet = (body).replace(/<[^>]*>?/g,'').substring( 0, defaults.snippet ) + '...';
      var img = data.media$thumbnail;
      var tempHtml = document.createElement('div');
      tempHtml.innerHTML = body;
      var imgHtml = tempHtml.querySelector('img');
      var image = ( img ? img.url : (imgHtml ? imgHtml.src : defaults.image)).replace(/[swh]\d{2,4}(?:-[swh]\d{2,4})?(?:-c)?/, defaults.imgSize); 
      var url = (function(){
         for ( var i = 0; i < data.link.length; i++ ){
            var link = data.link[i];
            if ( link.rel === 'alternate' ){
               return link.href;
            }
         }
      })();
      var published = new Date( data.published.$t ).toLocaleDateString(
         defaults.localeDate,
         {year:'numeric', month:'long', day: 'numeric'}
      );
      return (
         '<div class="relCard">'+
            '<div class="relCard-content">'+
               '<a href="' + url + '" class="relCard-image">'+
                  '<img src="' + image + '" alt="' + title + '" />'+
               '</a>'+
               '<div class="relCard-data">'+
                  '<h3 class="relCard-title">' + title + '</h3>'+
                  '<div class="relCard-date">' + published + '</div>'+
                  '<p class="relCard-snippet">' + snippet + '</p>'+
               '</div>'+
            '</div>'+
         '</div>'
      );
   }
   function related( json ){
      var i = 0;
      var post;
      var length = defaults.length;
      for ( ; i < length && ( post = json.feed.entry[ i ] ); i++ ){
         if ( defaults.id !== post.id.$t.split( '.post-' )[ 1 ] ){
            defaults.container.innerHTML += render( post );
         } else {
            length++;
         }
      }
   }
   return related;
   })();
//]]></script>
</b:includable>

Guarda los cambios y ahora solo necesitas llamar el includable en donde quieras mostrar entradas relacionadas, para ello utiliza la siguiente etiqueta:

<b:include cond='data:view.isPost and data:post.labels' name='postRelated'/>

Si no sabes dónde ubicarla, puedes intentar debajo de <data:post.body/>, ya que esta etiqueta contiene el cuerpo de los articulos.

Seçenekler

Dentro de la variable defaults se encuentran distintas opciones que puedes modificar, también puedes encontrar el código javascript de ejemplo en el repositorio. La siguiente tabla explica las opciones:

Opsiyon	Tip	Açıklama
`id`	string	Código único de una entrada publicada en el blog
`homepage`	string	Enlace de la página principal. Debe corresponder al id del post
`image`	image	Url de la imagen por defecto. Se usa cuando no existen imágenes en el post
`length`	number	Cantidad de entradas relacionadas a mostrar
`localeDate`	string	Idioma y localidad
`snippet`	number	Cantidad de texto para el resumen
`imgSize`	string	Parámetros para el tamaño de las imágenes
`container`	string	Id del Contenedor
`tags`	object	Etiquetas de la entrada. Debe corresponder al id del post

Çözüm

Umarım bu makaleyi faydalı bulmuşsunuzdur. Bu makaleyi sosyal ağlarınızda paylaşmayı unutmayın. Uğradığınız için çok teşekkür ederim.

Bağlantılar içeren rastgele resim widget

2020-06-01T22:54:00.060+03:00

Demo Codepen

En esta ocasión les comparto un widget que he desarrollado capaz de generar imágenes aleatorias al recargar la página. Opcionalmente las imágenes también pueden contener enlaces si así se requiere, lo que puede ser útil para crear banners aleatorios.

Kurulum

Ve a tu panel de administración en Blogger Temas Editar HTML. Busca <b:section id='sidebar'> o cualquier etiqueta section. Debajo de eso pega el siguiente código:

<b:widget id='TextList51' title='Imagen Aleatoria' type='TextList'>
   <b:includable id='main'>
      <b:include expr:name='data:widgets ? "widget-title" : "title"'/>
      <b:include name='content'/>
      <b:include name='js'/>
   </b:includable>
   <b:includable id='title'>
      <b:tag name="h2" class='widget-title'>
         <span class='widget-name'><data:title/></span>
      </b:tag>
   </b:includable>
   <b:includable id='content'>
      <div class='widget-content'>
        <div expr:id='"randomImage-" + data:widget.instanceId'/>
      </div><!-- .widget-content -->
   </b:includable>
   <b:includable id='js'>
     <script>
     var randomImage = function() {
     var container = document.getElementById('randomImage-<data:widget.instanceId/>'),//<![CDATA[
         images = [];//]]><b:loop index='i' values='data:items' var='e'>
         <b:with expr:value='"{" + (data:e contains "src:" ? data:e : 0) + "}"' var='img'>
         <b:with value='data:img.src ?: data:e' var='imgSrc'>
           images[<data:i/>] = "<b:tag cond='data:img.url' name='a' expr:href='data:img.url'><img expr:src='data:imgSrc'/></b:tag>";
         </b:with></b:with></b:loop>//<![CDATA[
         container.innerHTML = images[Math.floor(Math.random() * images.length)];
     }();//]]></script>
   </b:includable>
</b:widget>

Değişiklikleri kaydedin ve bu kadar. Görüntü eklememiz gerektiğinden şu anda widget görünür olmayacaktır.

Yapılandırma

Görüntüler

Ve a Diseño en tu panel de administración de Blogger y edita el widget "Imagenes aleatorias". Lo único que debes hacer es agregar enlaces de imágenes a la lista, puedes agregar todas las imágenes que quieras.

Bağlantı içeren görseller

En este caso, los elementos de la lista deben tener el formato json, toma de ejemplo el siguiente código:

url: "enlace", src: "imagen.jpg"

Es muy importante que se respete la coma y el espacio. Reemplaza enlace y imagen.jpg por la url del sitio y de tu imagen, puedes agregar todos los elementos que quieras a la lista.

También puedes combinar ambos métodos para agregar imágenes con y sin enlaces. Eso ha sido todo, si te ha servido no olvides compartir este artiuclo, siempre lo agradezco. Si tienes alguna duda, déjala en los comentarios.

Gönderilerde otomatik arka plan resmi

2020-05-01T01:58:00.008+03:00

Düz renk yerine bir arka plan resmi kullanmak, makalelerimizi daha kişisel hale getirmek için mükemmel bir katkı olabilir. Bugün her gönderide otomatik olarak ilk resmin arka plan olarak nasıl kullanılacağını göstereceğim.

Otomatik arka planı etkinleştir

Blogger, duyarlı bir arka plan eklememize olanak tanıyan harika bir global eklentiye sahiptir. Javascript gerekmez, sadece şablonunuzu HTML modunda düzenleyin ve </head> ifadesini aratın, bunun üzerine aşağıdaki kodu yapıştırın:

<b:if cond='data:view.isPost and data:view.featuredImage'>
  <b:include
    name='responsiveImageStyle'
    data='{ image: data:view.featuredImage, selector: "body" }'/>
  <style>
    body {
      background-repeat: no-repeat; /* tekrarlama */
      background-size: cover; /* boyut */
      background-position: top center; /* hizalama */
      background-attachment: fixed; /* kaydırma */
    }
  </style>
</b:if>

İşte bu kadar, şimdi makalelerinizden herhangi birine gidin ve makalenin ilk resmine dayalı olarak yanıt veren otomatik bir arka plan görmeye başlayacaksınız. Eğer yazıda resim yoksa hiçbir şey görmeyeceksiniz.

Açıklama

Kodun iki şeyi kontrol eden bir koşulu vardır. Birincisi, bunun bir makale olup olmadığı data:view.isPost ve ikincisi de makalenin bir resim içerip içermediği data:view.featuredImage. Her iki durum da karşılandığında, arka planı oluşturmaya devam ederiz.

Arka plana gelince, eklediğimiz kod, kullanıcının cihazına bağlı olarak değişecek bir arka plan oluşturacaktır. Bu şekilde sayfanız bir masaüstü bilgisayardan görüntülenirse, daha yüksek çözünürlüklü bir görüntü yükleyecektir. Ancak mobil cihazlarda görüntü çok daha küçük olacaktır. Bu blogumuzun optimizasyonunu korumamıza çok yardımcı olur.

Kişiselleştir

<style> etiketi arka planı biçimlendirmekten sorumludur, kod da açıklamalar bıraktım. Böylece değiştirmek istemeniz durumunda hangi özelliğin hangi işleve sahip olduğu anlaşılacaktır. Yine de aşağıda neler yapabileceğinizi biraz daha açıklıyorum.

Tekrarlama

Varsayılan olarak, yapıştırdığımız kod görüntüyü herhangi bir eksende tekrarlamaz, herhangi bir nedenle görüntünün tekrarlanmasına ihtiyacınız varsa, bu kısmı arayın ve no-repeat ifadesini repeat olarak değiştirin:

background-repeat: no-repeat; /* tekrarlama */

Boyutlar

Arka plan pencerenin kullanılabilir boyutunun tamamını kaplayacak ve boşluk bırakmayacaktır. Herhangi bir nedenle otomatik bir boyut yerine sabit bir boyut ayarlamanız gerekiyorsa, bu kısmı bulun ve cover seçeneğini değiştirin:

background-size: cover; /* boyut */

Pozisyon

Varsayılan konum 'üst orta' olarak ayarlanmıştır. Bunu değiştirmek istiyorsanız, bu kısmı bulun ve top center ifadesini, örneğin center gibi başka bir konumla değiştirin:

background-position: top center; /* hizalama */

Sabit arkaplan

Varsayılan olarak arka plan sabit bir konuma sahiptir, yani sayfa kaydırılırken tarayıcı penceresindeki yerini koruyacaktır, bunu değiştirmek istiyorsanız, bu bölümü bulun ve fixed öğesini scroll olarak değiştirin:

background-attachment: fixed; /* kaydırma */

Sonuç

Oldukça basit bir numara olmasına rağmen, umarım faydalı bulursunuz. Eğer faydalı bulduysanız paylaşmayı unutmayın. Uğradığınız için teşekkürler ve herhangi bir sorunuz varsa yorum bırakın.

Javascript ile yukarı butonu

2020-04-30T10:07:00.000+03:00

Saf JavaScript ile yazılmış yukarı düğmesi, çok hafif.

CodePen ile görüntüle

Herhangi bir web sayfasındaki bir klasik, basıldığında kaydırmayı başa götüren "Yukarı git" veya "Yukarı" düğmesidir. Bugün projelerinizde uygulayabileceğiniz oldukça hafif, saf JavaScript ile geliştirilen küçük bir buton paylaşmak istiyorum.

Kurulum

Aşağıdaki HTML yapısını Web sitenizin gövdesine ekleyin, </body> etiketinin üst tarafına. Platforma veya projenize bağlı olarak bu adım farklı olabilir:


<button class="toTop" id="toTop">
  <svg viewBox="0 0 24 24">
    <path d="m4 16 8-8 8 8"></path>
  </svg>
</button>

Aşağıdaki stilleri içerir. Örneğin, WordPress kullanıyorsanız bunları style.css dosyanıza ekleyin, Blogger söz konusu olduğunda Şablon Tasarımcısının CSS Ekle seçeneğini kullanın.


/* Botón Subir */
.toTop {
  border: none;
  display: flex;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.3s;
  /* posición */
  position: fixed; right: 1rem; bottom: 1rem; z-index: 9999;
}
.toTop:not(.is-visible) {
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2rem);
}
.toTop svg {
  stroke-width: 3px;
  stroke: currentColor;
  fill: none;
  width: 24px;
}
/* Personalizar */
.toTop {
  background-color: #252525;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  border-radius: 0.5rem;
  padding: 0.75rem;
  color: #fff;
}

Son olarak, her şeyin çalışmasını sağlayacak olan JavaScript kodudur. Aşağıdaki snippet'i web sayfanızın javascript kodunun geri kalanıyla birlikte ekleyin, yazacak yeriniz yoksa </body> etiketinin üst tarafında deneyin:


<script>/*<![CDATA[*/
const toTop = (() => {
  let button = document.getElementById("toTop");
  window.onscroll = () => {
    button.classList[
        (document.documentElement.scrollTop > 200) ? "add" : "remove"
      ]("is-visible")
  }
  button.onclick = () => {
    window.scrollTo({
      top:0, behavior:"smooth"
    })
  }
})();/*]]>*/
</script>

İşte bu kadar, yapacak başka bir şey yok. Kodu doğru eklediyseniz, sayfayı aşağı kaydırdığınızda “Yükle” düğmesini göreceksiniz. Başaramadıysanız, bir yorum bırakın size daha kişisel bir şekilde yardımcı olmaya çalışacağım.

Kişiselleştir

Çok fazla kod yok, bu nedenle adımlardan herhangi birinde gerekli gördüğünüzü düzenleyebilirsiniz. Bunun için, özellikle bu kısım olmak üzere “görünüş” stillerini ayırdım:


/* Personalizar */
.toTop {
  background-color: #252525;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  border-radius: 0.5rem;
  padding: 0.75rem;
  color: #fff;
}

Bunların tümü düğmeyi görsel olarak şekillendirmek için, kodu düzenlemekten veya kendi stillerinizi yazmaktan çekinmeyin ve düğmeye yeni bir görünüm verin.

Çözüm

Hepsi bu kadar. Siteniz için küçük bir katkı, umarım faydalı bulursunuz. Okuduğunuz için teşekkürler.

Hafif ve özelleştirilebilir anti-adblock

2020-04-27T23:07:00.133+03:00

Kişiselleştirilmiş örnek Demo Codepan

Casi la totalidad de páginas o blogs generan ingresos mediante publicidad, pero existen un sin número de bloqueadores de anuncios, con el fin de hacer la experiencia de quien navega por la red más agradable, pero causando pérdidas a los portales que se mantienen gracias a la publicidad.

Una solución al problema es pedirle a los usuarios desactivar AdBlock con un aviso y en ello nos vamos a centrar en este articulo.

Blockadblock.js

Se trata de un proyecto en github escrito en javascript puro que puede detectar eficazmente cualquier extensión anti-anuncios, por tanto, basado en la respuesta de blockadblock.js podemos construir un aviso para los usuarios con tengan una extensión que bloquee anuncios.

Kurulum

Para empezar, este complemento usa las animaciones de animate.css, si ya lo tienes instalado en tu blog, puedes saltar este paso, caso contrario incluye el siguiente código en tu proyecto:


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"/>

Ahora solo queda agregar el código css del aviso, en Blogger puedes hacerlo en la sección "Agregar CSS" del personalizador. En wordpress agrega el código al final del archivo style.css:


/*!
 * Anti-adblock v2.1.0
 * Copyright 2019 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT (github.com/zkreations/plugins/blob/master/LICENSE)
 */
/*! Core (Değişiklik yapmayın) {{*/
body.ab-is-detected{overflow:hidden!important}@font-face{font-family:wgd;src:url(https://cdn.jsdelivr.net/gh/da2l/host@1/dist/fonts/wgd.woff) format("woff");font-weight:400;font-style:normal}[class*=" wgd-"]:before,[class^=wgd-]:before{font-family:wgd!important;font-style:normal!important;font-weight:400!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wgd-usd:before{content:"\61"}.wgd-eur:before{content:"\62"}.wgd-btc:before{content:"\63"}.wgd-times:before{content:"\64"}@-webkit-keyframes square{0%{-webkit-transform:translateY(0) scale(1.5) rotate(0);transform:translateY(0) scale(1.5) rotate(0);opacity:1}100%{-webkit-transform:translateY(-600px) scale(1) rotate(-200deg);transform:translateY(-600px) scale(1) rotate(-200deg);opacity:0}}@keyframes square{0%{-webkit-transform:translateY(0) scale(1.5) rotate(0);transform:translateY(0) scale(1.5) rotate(0);opacity:1}100%{-webkit-transform:translateY(-600px) scale(1) rotate(-200deg);transform:translateY(-600px) scale(1) rotate(-200deg);opacity:0}}.WgD-particles i{font-size:4em;font-weight:400;position:absolute;bottom:-100px;-webkit-animation:square 10s infinite;animation:square 10s infinite;-webkit-animation-duration:16s;animation-duration:16s}.WgD-particles i:nth-child(11),.WgD-particles i:nth-child(4),.WgD-particles i:nth-child(6),.WgD-particles i:nth-child(8){font-size:3em}.WgD-particles i:nth-child(10),.WgD-particles i:nth-child(2),.WgD-particles i:nth-child(3){font-size:2em}.WgD-particles i:nth-child(1){left:15%}.WgD-particles i:nth-child(2){left:24%;-webkit-animation-duration:8s;animation-duration:8s}.WgD-particles i:nth-child(3){left:50%;-webkit-animation-delay:5s;animation-delay:5s}.WgD-particles i:nth-child(4){left:40%;-webkit-animation-delay:7s;animation-delay:7s;-webkit-animation-duration:15s;animation-duration:15s}.WgD-particles i:nth-child(5){left:36%;-webkit-animation-delay:6s;animation-delay:6s}.WgD-particles i:nth-child(6){left:44%;-webkit-animation-delay:10s;animation-delay:10s;-webkit-animation-duration:20s;animation-duration:20s}.WgD-particles i:nth-child(7){left:58%;-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-duration:18s;animation-duration:18s}.WgD-particles i:nth-child(8){left:45%;-webkit-animation-duration:14s;animation-duration:14s}.WgD-particles i:nth-child(9){left:66%;-webkit-animation-delay:3s;animation-delay:3s;-webkit-animation-duration:12s;animation-duration:12s}.WgD-particles i:nth-child(10){left:74%;-webkit-animation-duration:25s;animation-duration:25s}.WgD-particles i:nth-child(11){left:80%;-webkit-animation-delay:4s;animation-delay:4s}#WgD{display:none;position:fixed;top:0;left:0;right:0;bottom:0;font-size:14px;-webkit-animation:wgdfade .3s;animation:wgdfade .3s;z-index:99999}#WgD.is-detected{display:block}@-webkit-keyframes wgdfade{from{opacity:0}to{opacity:1}}@keyframes wgdfade{from{opacity:0}to{opacity:1}}.WgD-position{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:900}.WgD-title{margin:0 0 .5em}.WgD-text{margin:0;font-weight:400}.WgD-reload{text-decoration:none;display:inline-block;margin-top:2em;font-weight:500;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.WgD-reload:hover{-webkit-transform:scale(1.05);transform:scale(1.05)}.WgD-close{position:absolute;top:0;right:0;text-decoration:none;font-size:20px;color:#999;padding:1rem;line-height:1;display:block}.WgD-container img{max-width:100%;margin-bottom:1em;-o-object-fit:cover;object-fit:cover}
/*}} Core sonu {{*/

/*! Kişiselleştirme */
/* Base
-----------------------------------------*/
[id=WgD] {
   font-family: 'Roboto', sans-serif; /* fuente */
   background: #FF416C; /* color de fondo */
   background: linear-gradient(to right, #FF4B2B, #FF416C); /* degradado */
}
.WgD-particles i {
   color: rgba(0, 0, 0, 0.2); /* color de partículas */
}
/* Animasyon
-----------------------------------------*/
.WgD-container {
   -webkit-animation: bounceIn 1s; /* animación */
           animation: bounceIn 1s; /* animación */
}
/* Cuerpo
-----------------------------------------*/
.WgD-container {
   padding: 3.2em; /* relleno */
   max-width: 450px; /* ancho */
   background-color: #fff; /* color de fondo */
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.1); /* sombra */
   text-align: center; /* alineación del texto */
   line-height: 1.5; /* interlineado */
   border-radius: 10px; /* bordes redondeados */
   color: #37474F; /* color del texto */
}
.WgD-title {
   font-size: 1.6em; /* tamaño del título */
}
.WgD-text {
   font-size: 1.2em; /* tamaño del texto */
}
/* Boton Recargar
-----------------------------------------*/
.WgD-reload {
   box-shadow: rgba(0, 0, 0, .12) 0 3px 13px 1px; /* sombra */
   color: #fff;
   padding: 1em 1.5em; /* relleno */
   background: #f46b45; /* fondo */
   border-radius: 3px; /* bordes redondeados */
}
.WgD-reload:hover {
    color: #fff;
}
.WgD-close:hover {
    color: #464646;
}
/* Imagen
-----------------------------------------*/
.WgD-container img {
   max-height: 200px; /* altura máxima */
}

Por último agrega el aviso que se mostrará si tienes la extensión Adblock activa, para ello, en la edición html de tu proyecto, busca </body> y arriba pega el siguiente código:


<div id="WgD">
  <div class='WgD-position'>
    <div class='WgD-container'>
      <h3 class='WgD-title'>Titulo del aviso</h3>
      <p class='WgD-text'>Escribe tu mensaje</p>
      <a class='WgD-reload' onclick="adBlockReload()" href="#">Recargar página</a>
      <a class='WgD-close' href="#" onclick="adBlockClose()"><i class="wgd-times"></i></a>
    </div>
  </div>
  <div class='WgD-particles'>
    <i class="wgd-usd"></i><i class="wgd-eur"></i><i class="wgd-usd"></i>
    <i class="wgd-eur"></i><i class="wgd-btc"></i><i class="wgd-usd"></i>
    <i class="wgd-usd"></i><i class="wgd-eur"></i><i class="wgd-btc"></i>
    <i class="wgd-usd"></i><i class="wgd-eur"></i>
  </div>
</div>
<script>//<![CDATA[
function adBlockReload(){return window.location.reload(),!1}
function adBlockClose(){document.getElementById("WgD").classList.remove("is-detected"),document.body.classList.remove("ab-is-detected")}
function adBlockDetected(){document.getElementById("WgD").classList.add("is-detected"),document.body.classList.add("ab-is-detected")}
if("undefined"!=typeof fuckAdBlock||"undefined"!=typeof FuckAdBlock)adBlockDetected();else{var importFAB=document.createElement("script");importFAB.onload=function(){fuckAdBlock.onDetected(adBlockDetected),fuckAdBlock.onNotDetected(adBlockNotDetected)},importFAB.onerror=function(){adBlockDetected()},importFAB.integrity="sha256-xjwKUY/NgkPjZZBOtOxRYtK20GaqTwUCf7WYCJ1z69w=",importFAB.crossOrigin="anonymous",importFAB.src="https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js",document.head.appendChild(importFAB)}
//]]></script>

Personalizar

Botón cerrar

Por defecto el aviso contiene un botón "cerrar" en la esquina superior derecha, si no quieres que el usuario pueda cerrar el aviso, busca el siguiente código y eliminalo:


<a class='WgD-close' href="#" onclick="adBlockClose()"><i class="wgd-times"></i></a>

Fondo degradado

El degradado de fondo lo he generado gracias a UI Gradients. Si deseas reemplazar el degradado de fondo por otro simplemente selecciona uno nuevo en UI Gradients y reemplazalo en el siguiente código:


[id=WgD] {
   background: linear-gradient(to right, #FF4B2B, #FF416C); /* gradyan */
}

Imagen

He agregado estilos si existe la posibilidad de que desees agregar una imagen para destacar el aviso, de esta forma podrás darle tu toque personal. Para ello busca este código:


<div class='WgD-container'>

Debajo del código anterior agrega una etiqueta imagen de esta forma:


<img src="render.png"/>

Reemplaza render.png por la imagen que desees. Guarda los cambios y listo.

Animate.css

Si deseas cambiar la animación ve a la animate.css y copia el nombre de la animación que quieras utilizar, posteriormente cambialo en el siguiente código y guarda los cambios:


/* Animasyon
-----------------------------------------*/
.WgD-container {
   -webkit-animation: bounceIn 1s; /* animasyon */
           animation: bounceIn 1s; /* animasyon */
}

Conclusión

Si te ha servido este aporte no olvides compartir, ayudaras a mas personas y me ayudaria mucho tambien, por supuesto también lo agradecere mucho. Cualquier duda déjala en los comentarios.

Kaydırma çubuğunu özelleştirin

2020-04-27T08:46:00.000+03:00

Gezinme çubuğu, herhangi bir uygulamada ortak bir öğedir ve bu makalede, görünümünü değiştirmenize yardımcı olacağım

CodePen'de görüntüle

Kaydırma çubuğu, herhangi bir uygulamada ortak bir öğedir ve bu makalede, özellikle bir geliştiriciyseniz ve projeleriniz için kaydırma çubuğunu nasıl kolayca değiştireceğinizi arıyorsanız, görünümünü değiştirmenize yardımcı olacağım.

Başlamadan önce, bu özelliğin yalnızca webkit tabanlı tarayıcılarda mümkün olduğunu bilmelisiniz; bununla birlikte, aynı şey olmasa da, inşa ettiğiniz her şeye yakın olan Firefox desteğini de içerir.

Düzenleme

Aşağıdaki stilleri web sitenize ekleyin, örneğin WordPress kullanıyorsanız bunları style.css dosyanıza eklemelisiniz, Blogger olması durumunda Şablon Tasarımcısından CSS Ekle seçeneğini kullanın.

body::-webkit-scrollbar {
  width: var(--scroll-size, 10px);
  height: var(--scroll-size, 10px);
}
body::-webkit-scrollbar-track {
  background-color: var(--scroll-track, transparent);
  border-radius: var(--scroll-track-radius, var(--scroll-radius));
}
body::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb-color, grey);
  background-image: var(--scroll-thumb, none);
  border-radius: var(--scroll-thumb-radius, var(--scroll-radius));
}

Kişiselleştir

Bu noktaya kadar çubuğun farklı bir stili olacak ama asıl ilginç olan şimdi onu değişkenlerle özelleştirebilmeniz. İşte oluşturduklarımın tam listesi:

Değişken	Varsayılan	Açıklama
`--scroll-size`	`10px`	Çubuk boyutu
`--scroll-radius`	null	Genel yuvarlak kenar
`--scroll-track`	`transparent`	Parça rengi (arka plan rengi)
`--scroll-track-radius`	`--scroll-radius`	Yuvarlatılmış yol kenarı
`--scroll-thumb`	`none`	Gösterge arka planı (arka plan resmi)
`--scroll-thumb-color`	`grey`	Gösterge rengi (arka plan rengi)
`--scroll-thumb-radius`	`--scroll-radius`	Gösterge yuvarlak kenar

Con estas variables puedes crear estilos de la barra principal. A continuación te proporciono algunos ejemplos, estos estilos son los mismos que puedes ver en la demostración en CodePen, solo copia el código que te guste (elige solo uno) y agrégalo a tus estilos:

Örnek 1

:root {
  --scroll-size: 10px;
  --scroll-radius: 10px;
  --scroll-track: rgb(0 0 0 / 40%);
  --scroll-thumb-color: #dfdfdf;
}

Örnek 2

:root {
  --scroll-size: 8px;
  --scroll-radius: 10px;
  --scroll-track: rgb(255 255 255 / 10%);
  --scroll-thumb-color: rgb(0 0 0 / 80%);
}

Örnek 3

:root {
  --scroll-size: 5px;
  --scroll-radius: 10px;
  --scroll-track: rgb(255 255 255 / 10%);
  --scroll-thumb-color: #fff;
}

oÖrnek 4

:root {
  --scroll-size: 12px;
  --scroll-radius: 20px;
  --scroll-track: rgb(0 0 0 / 40%);
  --scroll-thumb: linear-gradient(45deg,
      rgba(255, 255, 255, 0.25) 20%, transparent 20%,
      transparent 40%, rgba(255, 255, 255, 0.25) 40%,
      rgba(255, 255, 255, 0.25) 60%, transparent 60%,
      transparent 80%, rgba(255, 255, 255, 0.25) 80%);
  --scroll-thumb-color: #f97316;
}

Örnek 5

:root {
  --scroll-size: 15px;
  --scroll-radius: 20px;
  --scroll-track: rgb(255 255 255 / 10%);
  --scroll-thumb: linear-gradient(45deg, #00aeff, #a68eff);
}

Örnek 6

:root {
  --scroll-size: 12px;
  --scroll-radius: 20px;
  --scroll-track: rgb(0 0 0 / 40%);
  --scroll-thumb: linear-gradient(
      rgba(255, 255, 255, 0.3) 20%, transparent 20%,
      transparent 40%, rgba(255, 255, 255, 0.3) 40%,
      rgba(255, 255, 255, 0.3) 60%, transparent 60%,
      transparent 80%, rgba(255, 255, 255, 0.3) 80%);
  --scroll-thumb-color: #10b981;
}

Firefox desteği

Los navegadores basados en webkit no presentaran ningún problema al leer los estilos, sin embargo Firefox es la excepción. Si deseas incluirlo en la modificación, agrega el siguiente código:

html, body {
  scrollbar-color: var(--scroll-thumb-color, grey) var(--scroll-track, transparent);
  scrollbar-width: thin;
}

De esta manera parte de los estilos del scroll en otros navegadores, también los verás en Firefox, toma en cuenta que solo será el color del indicador y de la pista.

Mixin para Sass

Si eres desarrollador y quieres incluir en tu proyecto la posibilidad de editar la barra de desplazamiento, he diseñado el siguiente mixin que puede ayudarte, solo debes incluir el siguiente código a tu proyecto:

@mixin scroll-style($size: 10px,
  $thumb: none,
  $thumb-color: grey,
  $thumb-radius: 10px,
  $track-color: transparent,
  $track-radius: 10px) {

  // Respaldo para Firefox
  scrollbar-color: $thumb-color $track-color;
  scrollbar-width: thin;

  // Navegadores basados en webkit
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
    &-track {
      background-color: $track-color;
      border-radius: $track-radius;
    }
    &-thumb {
      background-color: $thumb-color;
      background-image: $thumb;
      border-radius: $thumb-radius;
    }
  }
}

Argümanlar

La siguiente tabla contiene información de los parámetros del mixin que puedes definir, y su valor por defecto en caso de que no lo hagas:

Argumento	Default	Descripción
`$size`	`10px`	Tamaño de la barra
`$thumb`	`none`	Fondo del indicador (background-image)
`$thumb-color`	`grey`	Color del indicador (background-color)
`$thumb-radius`	`10px`	Borde redondeado del indicador
`$track-color`	`transparent`	Color de la pista (background-color)
`$track-radius`	`10px`	Borde redondeado de la pista

Incluir

Puedes llamar al mixin y reemplazar el valor de los argumentos por defecto (en caso de que asi lo requieras), por ejemplo si quieres modificar el scroll de todo el documento:

:root {
  @include scroll-style($size: 10px, $thumb-color: #ccc);
}

Si prefieres crear una utilidad que puedas aplicar fácilmente a cualquier elemento y que esta incluya personalización con variables, quizás te interese realizarlo de esta manera:

.scroll {
  @include scroll-style(
      $size: var(--scroll-size),
      $thumb:  var(--scroll-thumb),
      $thumb-color: var(--scroll-thumb-color),
      $thumb-radius: var(--scroll-thumb-radius),
      $track-color: var(--scroll-track-color),
      $track-radius: var(--scroll-track-radius),
    );
}

Ahora solo debes definir las variables en tu archivo de configuración e incluir la clase de la utilidad a los elementos en donde se requiera:

HTML

<div class="scroll"></div>

CSS

:root {
  --scroll-size: 5px;
  --scroll-radius: 10px;
  --scroll-thumb-color: #464646;
  --scroll-track-color: transparent;
}

Elbette önerileriniz, düzeltmeleriniz varsa veya sadece nasıl yaptığınızı paylaşmak istiyorsanız, yorum bırakın. Mesajlarınızı okumaktan memnuniyet duyarım.

Çözüm

Kişisel olarak bu çubuğu değiştirme taraftarı olmasam da, web sitenize biraz daha kişilik kazandırmak veya bazı öğelerin tasarımını daha iyi entegre etmek çok yararlı olabilir.

Bu makale sizin için yararlı olduysa, paylaşmayı ve yorum olarak bırakabileceğiniz tüm soruları unutmayın, herkese cevap veriyorum. Okuduğunuz için teşekkürler.

Blogger meta açıklaması nasıl etkinleştirilir

2020-04-21T01:27:00.002+03:00

Meta açıklama etiketi, ziyaret edilen sayfanın içeriği hakkında bilgi sağlar ve esas olarak arama motorları tarafından arama dizininde görünen metin snippet'ını yazmak için kullanılır.

Sözdizimi

Meta açıklamaları, o sayfanın içeriğinin kısa bir açıklamasını sağlayan bir HTML öğesidir. Ziyaretçiler bunu doğrudan göremese de Google gibi arama motorları bunu arama sonuçlarında kullanır. Etiket şu şekilde görünür:

<meta content="to_descripcion" name='description'/>

Blogger, yönetim panelinden her yazı için ayrı bir meta açıklama etiketi yapılandırmamıza izin verir. Varsayılan olarak devre dışıdır, etkinleştirmek için aşağıdaki adımları izleyin.

Blogger yönetim panelinize gidin > Ayarlar
"Meta etiketler" bölümünü bulun
Açmak için "Arama açıklamasını etkinleştir" üzerine tıklayın
Blogunuzun kısa bir açıklamasını yazın

Bu noktada elimizde şöyle bir şey olacak:

Artık editörde "Arama açıklaması" seçeneğini bulacaksınız. Ayarlarda eklediğiniz açıklama, blogunuz arama motorlarında sorgulandığında görüntülenecek metin parçacığına karşılık gelir:

Açıklama çalışmıyor

Eğer bir zkreations şablonu kullanıyorsanız bunu etkinleştirmeniz yeterli olacaktır, eğer kullandığınız şablon başka bir tasarımcıya ait ise etiket xml'de olmayabilir, bunu çözmek için <head> altına aşağıdaki kodu ekleyin:

<!-- Açıklama -->
<meta expr:content='data:view.description' property='og:description'/>
<meta expr:content='data:view.description' name='description'/>

Meta açıklamayı optimize edin

Bu etiketin önemi, kullanıcının dikkatini çekmektir. Aşağıdaki noktalar iyi bir açıklama yazmanıza yardımcı olabilir::

İlgi Çekici – Kullanıcının okumaya devam etmek için tıklama ihtiyacı hissetmesini sağlayın.
Öne çıkın – Girişiniz çok yaygın bir konuyu ele alıyorsa, diğerlerinin arasından sıyrılmaya çalışın.
Anahtar kelimeler kullanın – Bir veya iki anahtar kelime kullanmanızda sakınca yoktur, ancak aşırıya kaçarsanız arama motorları sizi web spam olarak işaretleyebilir.
Tekrarlayıcı olmayın – Tüm yayınlarınızda aynı açıklamayı kullanmaya karar verirseniz, arama motorları sizi yinelenen içerik veya spam olarak işaretleyebilir, bunun yerine makalenizden en alakalı metin parçacığını kopyalayabilirsiniz.

Hepsi bu kadar, umarım bu yazı yardımcı size olmuştur. Herhangi bir sorunuz varsa yorumlara yazın ve yararlı bulduysanız bu makaleyi sosyal ağlarınızda paylaşmayı unutmayın.

Bir düğme kullanarak Disqus'u yükleyin

2020-04-18T23:41:00.057+03:00

Disqus es una gran herramienta que nos brinda mayor control sobre los comentarios de nuestro sitio, además de ser independiente del mismo, ya he hablado de disqus en otra ocasión, pero hoy vamos a aprender a cargar comentarios mediante un boton.

Modificar Javascript

Antes de comenzar, en este tutorial doy por hecho que ya tienes disqus instalado en tu blog o bien estás usando una plantilla de zkreations, mis plantillas ya tienen disqus instalado, por lo que buscamos el código javascript de disqus, el cual es similar a este:


var disqus_shortname = "Shortname",
    disqus_config = function() {
        this.page.url = "Page_URL";
    };
(function() {
    var d = document,
        s = d.createElement('script');
    s.async = true;
    s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
})();

El código anterior solo es una referencia, no importa cómo sea el código de disqus que tengas instalado, selecciónalo todo y reemplázalo por lo siguiente:


var disqus_loaded = false,
    disqus_loadBtn = document.getElementById("disqus_loadBtn"),
    disqus_shortname = "Shortname",
    disqus_config = function() {
        this.page.url = "Page_URL";
    };//<![CDATA[
function loadDisqus() {
    if (!disqus_loaded) {
        disqus_loaded = true;
        disqus_loadBtn.classList.add("disqus_loaded");
        var d = document,
            s = d.createElement('script');
        s.async = true;
        s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    }
}
disqus_loadBtn.onclick = function() {
    loadDisqus();
    return false;
};//]]>

Del código reemplazamos Shortname por tu nombre corto de Disqus. Si usas una plantilla de zkreations cambia Shortname por <data:skin.vars.config_shortname/>.

Por último Page_URL lo reemplazamos por la url canónica del sitio, si estás usando este codigo en Blogger, escribe <data:view.url.canonical/> y guarda los cambios.

Agregar CSS

El codigo CSS le dará estilos al botón, para ello ve a Temas Personalizar Opciones avanzadas Agregar CSS y pega lo siguiente:


/*!
 * Disqus click v2.0.0
 * Copyright 2020 zkreations
 * Developed Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT
 */
/*! Core (No modificar) {{*/
.disqus_loadBtn,
.disqus_loadImg {
   background: none;
   padding: 0;
   margin: 0;
   border: 0;
   outline: 0;
   box-shadow: none;
}
/*}} Fin del core */

/*! Personalización */
.disqus_loadBtn {
    padding: 1rem; /* relleno */
    display: block; /* mostrar como bloque */
    width: 100%; /* ancho del boton */
    background-color: #f1f1f1; /* color del fondo */
    color: #464646; /* color del texto */
    font-size: 14px; /* tamaño de fuente */
    font-weight: 500; /* densidad del texto */
    border-radius: 3px; /* bordes redondeados */
}
.disqus_loadBtn:hover {
    background-color: #eeeeee; /* color del fondo (hover) */
    color: #212121; /* color del texto (hover) */
}

Usar botón

Disqus yorumlarına ait olan aşağıdaki HTML kodunu arayın:

<div id='disqus_thread'></div>

Bu kodun hemen altına aşağıdakileri ekledik:

<button class='disqus_loadBtn' id='disqus_loadBtn'>Cargar comentarios</button>

Usar imagen

Si prefieres usar una imagen en lugar de un botón para cargar los comentarios, entonces utiliza este código:

<button class='disqus_loadImg' id='disqus_loadBtn'>
   <img src='url_imagen.jpg'/>
</button>

Reemplaza url_imagen.jpg por el enlace de la imagen que deseas utilizar. Guarda los cambios y listo.

Si te ha sido de utilidad no olvides compartir este articulo, siempre lo aprecio mucho. Si tienes dudas déjala en los comentarios, respondo a todos.

Tema, plugins, blogger ~ tr25

Sadece CSS ile slider oluşturma motoru

Özellikler

Kurulum

Nasıl kullanılır

Seçenekler

Animasyon modu

Özelleştir

Sass yapılandırma

Otomatik mod

Sonuç

Yeni yayınlarınızı göndermek için Telegram'ı kullanın

Gereksinimler

Çalışanı yapılandırma

KV ad alanı oluşturma

Ortam değişkenleri oluşturma

Tetikleyicileri Yapılandırma / Tetikleyiciler

Kodu ekleyin

Yeni değişkenler

Kanal elde etme fonksiyonu

Kanal listesini yönetme işlevi

Güncelle onUpdate fonksiyonu

Beslemeyi yönetme işlevi

Sonuç

Boş olmaları halinde bölümleri veya widget'ları yüklemekten kaçınmak

Durum

Koşullandırma bölümleri

Koşullandırma widget'ları

Sonuç

Blogger'dan CSS ve Javascript'i tamamen kaldırın

widget_css_bundle.css devre dışı bırakmak

widget.js devre dışı bırakmak

Javascript kullanarak widget.js kaldırma

Sonuç

Blogger çerez bildirimini özelleştirme

Stiller

JavaScript

Çerez bildirimini görüntüleyin

Sonuç

Blogger için geri sayım aracı

Kurulum

Yapılandırma

Tarih

Mesaj

Özelleştir

Sonuç

Kopyala butonlu Kod Vurgulayıcı

Kurulum

Nasıl kullanılır

Özelleştir

Açıklamalar

Sonuç

Css ile duyarli sekmeler

Kurulum

Açıklama

Özelleştir

Sonuç

Blogger da görselleri kolayca değiştirin

Durum

Blogger'da Fonksiyon

Açıklama

Nasıl kullanılır

Resim URL'si

Alternatif metin

Tanımlayıcı ve sınıflar

Boyut ve en boy oranı

Boyut tablosu

Yükseklik ve genişlik

Boyut özelliği

Yükleme özelliği

Ek parametreler

Sonuç

HuDocs ile projelerinizi kolayca belgeleyin

Özellikler

Gereksinimler

Kurulum

Önerilen yapı

Yapılandırma

Özelleştir

Netlify