Kod Örnekleri

Transparan(Şeffaf) renk kodu nedir

HTML ve CSS’de transparan (şeffaf) bir renk oluşturmak için genellikle rgba veya hsla renk fonksiyonları kullanılır. Bu fonksiyonlar, renk değerlerine ek olarak bir alfa (saydamlık) değeri eklemenize olanak tanır. Alfa değeri 0 ile 1 arasında değişir, burada 0 tamamen şeffaf ve 1 tamamen opak anlamına gelir.

Örneğin, yarı saydam bir sarı renk için aşağıdaki gibi bir CSS kodu kullanabilirsiniz:
.yari-saydam-sari {
  background-color: rgba(255, 255, 0, 0.5);
}
Tamamen şeffaf bir arka plan için ise transparent anahtar kelimesini kullanabilirsiniz:
.seffaf-arkaplan {
  background-color: transparent;
}

Ayrıca, CSS Renk Modülü Seviye 4 ile birlikte, rgb ve hsl fonksiyonları da artık opsiyonel bir alfa değeri kabul ediyor. Bu nedenle, şu şekilde de yazabilirsiniz:

.yari-saydam-sari {
  background-color: rgb(255, 255, 0, 0.5);
}

Eğer HEX formatını kullanmak isterseniz, alfa değeri ile birlikte #RRGGBBAA veya #RGBA notasyonunu kullanabilirsiniz. Örneğin, tamamen şeffaf bir renk için #00000000 veya kısaltılmış olarak #0000 kullanılabilir



Bloggerda gece modu olduğunu kodlama ile nasıl tespit edilir.

Blogger’da gece modunun olup olmadığını tespit etmek için JavaScript ve CSS kodları kullanabilirsiniz. Aşağıda bir örneği bulunmaktadır: 
$(document).ready(function($) {
    var mode = localStorage.getItem('mode');
    if (mode) $('body').addClass(mode);
    $(".darkmode").click(function() {
        $("body").addClass("dark");
        localStorage.setItem('mode', 'dark');
    });
    $(".normalmode").click(function() {
        $("body").removeClass("dark");
        $("body").addClass("normal");
        localStorage.setItem('mode', null);
    });
});
Bu JavaScript kodu, kullanıcının seçimini (gece modu veya normal mod) yerel depolamada saklar ve sayfa yenilendiğinde veya farklı sayfalara geçiş yapıldığında seçimin kalmasını sağlar. Ayrıca, gece modunun nasıl görüneceğini belirlemek için CSS kodları kullanılır. Aşağıda bir örneği bulunmaktadır:(unutmayın aşağıdak kod &ltstyle&gt etiketi arasında olacak) 
body.dark {background:#212121 !important; color: #f9f9f9;}
body.dark .header {background:#424242}
body.dark a, body.dark h1, body.dark h2, body.dark h3 {color: #f9f9f9;}
body.dark .blog {background:#212121 !important; color: #f9f9f9;}
body.dark .blog-post__content {background:#424242}
body.dark .footer {background:#424242}
body.dark .footer__credit {background:#616161}
body.dark .footer__text {color:#f9f9f9}
body.dark #comments {background:#424242}
body.dark #comments a.comment-reply {background:#616161; color: #f9f9f9;}
body.dark ul.trail-items a {color:#f9f9f9}
body.dark .blog-post__content pre {background:#212121; margin-top:15px; margin-bottom:15px; color:#f9f9f9;}
body.dark #xsidebar .widget {margin-bottom: 20px; background:#424242; padding: 20px; box-shadow: 0 10px 30px gba (0,0,0,.05); }
body.dark .light, body:not(.dark) .dark {display: none;}
Bu CSS kodları, gece modunda sayfanın nasıl görüneceğini belirler. Bu kodlar örnek olarak verilmiştir ve kodlardaki etiketler her şablon/temada aynı olmayabilir. Son olarak, kullanıcının gece modu ve normal mod arasında geçiş yapabilmesi için bir buton eklemeniz gerekmektedir. Aşağıda bir örneği bulunmaktadır: HTML <a class="normalmode"><i class="dark fal fa-sun"></i>Normal Mod</a> <a class="darkmode"><i class="light fal fa-moon"></i>Gece Modu</a>

Clipper 5.1 de basit grafik çizim

#include "clipper.h"
int main()
{
  // Daire merkezinin x ve y koordinatlarını tanımlayın.
  int x = 100;
  int y = 100;

  // Dairenin yarıçapını tanımlayın.
  int r = 50;

  // Daire için bir çokgen oluşturun.
  poly polyCircle;
  polyCircle.numpts = 8;
  for (int i = 0; i < polyCircle.numpts; i++)
  {
    polyCircle.pts[i].x = x + r * cos(2 * M_PI * i / (polyCircle.numpts - 1));
    polyCircle.pts[i].y = y + r * sin(2 * M_PI * i / (polyCircle.numpts - 1));
  }

  // Daire poligonunu çizin.
  clipper.fill(polyCircle);
  return 0;
}

Blogger da sadece yayınlanmış sayfaları listeleyen kod. 

Blogger’da sadece yayınlanmış sayfaları listeleyen bir kod yazmak için,
<b:includable id="main"> <b:if cond="data:blog.pageType == &quot;static_page&quot;"> <b:loop values="data:posts" var="post"> <h3><a expr:href="data:post.url"><data:post .title=""></data:post></a> <b:loop values="data:post.labels" var="label"> <span><data:label .name=""></data:label></span> </b:loop> </h3> </b:loop> </b:if> <!--Buradan sonrasi orijinal kodlar--> ... </b:includable>

Blogger da Kod Okunurluğunu sağlamak için 3 Adımlık Öneriler

  • Kodunuzu yorumlayın ve belgeleyin, böylece kodunuzun ne yaptığını ve hangi değişkenleri kullandığını açıklayın. Örneğin, kodunuzun başına veya sonuna bir açıklama ekleyebilirsiniz. Ayrıca, kodunuzun her bir bölümünün ne amaçla yazıldığını belirten kısa yorumlar da ekleyebilirsiniz.
  • Kodunuzu tutarlı bir şekilde girintileyin, böylece kodunuzun hiyerarşisini ve kapsamını kolayca görebilirsiniz. Örneğin, fonksiyon tanımlarını, kontrol yapılarını ve döngüleri açan ve kapatan süslü parantezlerin aynı dikey hizada olmasını sağlayabilirsiniz. Ayrıca, kodunuzun her bir seviyesi için boşluk veya sekme kullanabilirsiniz.
  • Kodunuzu gruplayın, böylece aynı görev için veya etrafında çalışan kod satırlarını ayırt edebilirsiniz. Örneğin, kodunuzun farklı bölümleri arasında ekstra boşluklar bırakabilirsiniz. Ayrıca, her bir kod grubunun başına küçük bir yorum ekleyerek, kodunuzun ne yaptığını belirtebilirsiniz.
  • Kodunuzu sadeleştirin, böylece kodunuzun karmaşıklığını azaltabilir ve anlaşılmasını kolaylaştırabilirsiniz. Örneğin, gereksiz veya tekrar eden kod satırlarını kaldırabilir, uzun veya anlamsız değişken isimlerini kısaltabilir veya açıklayıcı hale getirebilir, çok sayıda parametre alan veya çok iş yapan fonksiyonları daha küçük ve tek sorumlu fonksiyonlara ayırabilirsiniz.

Blogger da İÇİNDEKİLER başlığı oluşturmak için kod Örneği

içeriğin başlıklarını ve alt başlıklarını listeleyen bir içindekiler bölümü oluşturuyor. 
İşte size sayfadaki kodun madde madde ne yaptığını anlatan bir özet: 
  • Sayfa, başlık ve alt başlıkları tarayarak bir içindekiler bölümü oluşturur. 
  • Oluşturulan içindekiler bölümü, kullanıcıya sayfadaki başlıklara hızlı erişim sağlar. 
  • Kullanıcı, içindekiler bölümündeki başlıklara tıklayarak sayfanın ilgili bölümlerine atlayabilir. 
Bu sayfa, başlıkları ve içeriği düzenlemek için kullanışlı bir araç sunuyor. İçindekiler bölümü, sayfanın yapısını anlamak ve gezinmek için oldukça faydalıdır.
Aşağıdaki kod //<![CDATA[ ile //]]> arasında çalışacağını hatırlatmış olayım.
  
  // Bu kod, blog gönderilerindeki başlıkları içindekiler listesine dönüştürür.
// Her bir kalın yazılmış metni seç
$(".post-body b").each(function () {
  // Metni al
  var text = $(this).text();
  // Metin {tocify} etiketi içeriyorsa
  if (text.toLowerCase().trim().match("{tocify}")) {
    // Metnin başlığını al veya varsayılan olarak "İçindekiler" kullan
    text = shortCodeIfy(text, "title") ? shortCodeIfy(text, "title") : "İçindekiler";
    // Metni içindekiler listesi ile değiştir
    $(this).replaceWith(
      '<div class="tocify-wrap"><div class="tocify-inner"><a href="javascript:;" class="tocify-title" role="button" title="' +
        text +
        '"><span class="tocify-title-text">' +
        text +
        '</span></a><ol id="tocify"></ol></div></div>'
    );
    // Her bir içindekiler başlığı için
    $(".tocify-title").each(function (title) {
      // Başlığa tıklandığında
      $(this).on("click", function () {
        // Başlığın genişletilip genişletilmediğini değiştir
        title.toggleClass("is-expanded");
        // İçindekiler listesini aç veya kapat
        $("#tocify").slideToggle(170);
      });
    });
    // İçindekiler listesini gönderi içeriğine göre oluştur
    $("#tocify").toc({ content: "#post-body", headings: "h2,h3,h4" });
    // İçindekiler listesindeki her bir bağlantı için
    $("#tocify li a").each(function (link) {

      // Bağlantıya tıklandığında
      $(this).click(function () {

        // Sayfayı ilgili başlığa kaydır
        return (
          $("html,body").animate(
            { scrollTop: $(link.attr("href")).offset().top - 20 },
            500
          ),
          !1
        );
      });
    });
  }
});

Yorum Gönder