Home / blogger
blogger etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
blogger etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

6 Şubat 2025 Perşembe

Blogger Demo Ve İndirme Butonu


Blogger demo ve indirme butonu, genellikle Blogger temaları, eklentileri veya dosyaları paylaşan web sitelerinde kullanılan bir sistemdir. Bu butonlar, ziyaretçilere belirli bir içeriği test etme (demo) veya indirme imkanı sunar.

Demo Butonu:
Kullanıcıların bir Blogger temasını veya şablonunu canlı olarak önizlemesine olanak tanır.
Genellikle "Demo" veya "Canlı Önizleme" şeklinde adlandırılır.
Kullanıcı, butona tıkladığında farklı bir sayfada veya sekmede temanın önizleme sürümünü görebilir.
İndirme Butonu:
Kullanıcının Blogger temasını veya belirli bir dosyayı cihazına indirmesini sağlar.
Genellikle "İndir" veya "Download" şeklinde adlandırılır.
Butona tıklayan kullanıcı, bir Google Drive, MediaFire, Mega gibi bir indirme bağlantısına yönlendirilir veya doğrudan dosyayı indirebilir.
Bu butonlar genellikle Blogger temalarını paylaşan sitelerde, yazılım paylaşım platformlarında veya kişisel bloglarda bulunur. Eğer bir Blogger siteniz varsa, bu tür butonları HTML/CSS veya JavaScript ile kolayca ekleyebilirsiniz.

Bu butonları blog yazılarınızdaki paylaşımlarınızda kullanmak için öncelikle font awesome’ın blogunuzda tanımlı olması gerekir. Eğer şablonun HTML kodlarına daha önce fontawesme kodu eklemediyseniz Şablon > HTML’yi Düzenle diyerek şablonunuzun HTML kodlarının olduğu pencereyi açın ve burada <head> kodunun altına şu kodu ekleyin:

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>


Daha sonra download ve demo butonlarının CSS kodlarını şablona eklemelisiniz. Bunun için ]]></b:skin> kodunu bulun ve bunun üzerine şu stil kodlarını ekleyin:

#buton {     margin: 20px auto;     text-align: center; }
#buton br {     display: none; }
.mbg-btn-slide, .mbg-btn-slide2 {     position: relative;     display: inline-block;     height: 50px;     width: 200px;     line-height: 50px;     padding: 0;     border-radius: 50px;     background: #fdfdfd;     border: 2px solid #00CC00;     margin: 10px;     transition: .5s; }
.mbg-btn-slide2 {     border: 2px solid #FF3300; } .mbg-btn-slide:hover {     background-color: #00CC00; } .mbg-btn-slide2:hover {     background-color: #FF3300; }
.mbg-btn-slide:hover span.circle, .mbg-btn-slide2:hover span.circle2 {     left: 100%;     margin-left: -45px;     background-color: #fdfdfd;     color: #00CC00; }
.mbg-btn-slide2:hover span.circle2 {     color: #FF3300; }
.mbg-btn-slide:hover span.title, .mbg-btn-slide2:hover span.title2 {     left: 40px;     opacity: 0; }
.mbg-btn-slide:hover span.title-hover, .mbg-btn-slide2:hover span.title-hover2 {     opacity: 1;     left: 40px; }
.mbg-btn-slide span.circle, .mbg-btn-slide2 span.circle2 {     display: block;     background-color: #00CC00;     color: #fff;     position: absolute;     float: left;     margin: 5px;     line-height: 42px;     height: 40px;     width: 40px;     top: 0;     left: 0;     transition: .5s;     border-radius: 50%; }
.mbg-btn-slide2 span.circle2 {     background-color: #FF3300; }
.mbg-btn-slide span.title,   .mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title2,   .mbg-btn-slide2 span.title-hover2 {     position: absolute;     left: 90px;     text-align: center;     margin: 0 auto;     font-size: 16px;     font-weight: bold;     color: #FF3300;     transition: .5s; }
.mbg-btn-slide2 span.title2,   .bsd-btn-slide2 span.title-hover2 {     color: #00CC00;     left: 80px; }
.mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title-hover2 {     left: 80px;     opacity: 0; }
.mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title-hover2 {     color: #fff; }


Şablonun HTML kodlarında yapılacaklar bu kadar. Bundan sonra demo ve download butonlarını kullanacağınız yazının HTML kodu bölümünü açın ve butonların gözükmesini istediğiniz yere butonların kodlarını ekleyin:

<div id="buton"> <a href="https://www.webyazilimciniz.net/" class="mbg-btn-slide" target="_blank">   <span class="circle"><i class="fa fa-rocket"></i></span>   <span class="title">Demo</span>   <span class="title-hover">Önizle</span> </a> <a href="https://www.webyazilimciniz.net/" class="mbg-btn-slide2" target="_blank">   <span class="circle2"><i class="fa fa-download"></i></span>   <span class="title2">Download</span>   <span class="title-hover2">İndir</span> </a> </div>


Burda ilk mavi yere demo butonuna tıklandığında açılacak sayfanın urlsini, ikinci mavi yere download butonuna tıklandığında açılacak sayfanın urlsini yazın.
 

Yorum

1 Şubat 2025 Cumartesi

Blogger ?m=1 Nedir?


Blogger'da bir URL'de ?m=1 parametresi, sitenin mobil versiyonunun görüntülendiğini gösterir. Google'ın Blogger platformu, mobil cihazlardan erişildiğinde sayfanın mobil uyumlu versiyonunu göstermek için bu parametreyi kullanır.

Örnek Kullanım:
Masaüstü sürüm: https://ornekblog.blogspot.com
Mobil sürüm: https://ornekblog.blogspot.com?m=1
Eğer ?m=1 eklenirse, Blogger'ın mobil uyumlu şablonu devreye girer.

m=1 Nasıl Kaldırılır?
Eğer Blogger sitenizde ?m=1 parametresinin eklenmesini istemiyorsanız, özel bir CSS veya JavaScript yönlendirmesi ile bunu engelleyebilirsiniz.

Blogger'da "m=1" parametresi, sitenizin mobil versiyonunu göstermek için kullanılır.

Detaylı Açıklama:
Blogger, web ve mobil cihazlar için farklı görünümler sunar.
"m=1", sitenizin mobil sürümünün yüklendiğini belirtir.
Örneğin, bir Blogger sitesini açtığınızda https://örnekblog.blogspot.com/?m=1 şeklinde bir URL görebilirsiniz.
Ne İşe Yarar?
Blogger, cihazın ekran genişliğine göre otomatik olarak uygun sürümü gösterir.
Ancak bazı temalar mobil uyumlu olmayabilir ve "m=1" parametresi, sitenin mobil uyumlu versiyonunu zorla göstermenize yardımcı olur.
SEO veya kullanıcı deneyimi açısından bazen mobil versiyon yerine masaüstü versiyonun gösterilmesi istenebilir. Bu durumda "m=0" veya "?m=0" kullanarak masaüstü versiyonuna geçiş yapılabilir.
Sonuç:
"?m=1" › Mobil versiyon
"?m=0" › Masaüstü versiyon




 

Yorum

26 Ocak 2025 Pazar

Blogger Karanlık Gece Modu


Blogger'da Karanlık Gece Modu, sitenizin veya blogunuzun ziyaretçiler için daha göz dostu bir görünüm sunmasını sağlayan bir tasarım seçeneğidir. Bu mod, özellikle düşük ışıklı ortamlarda daha rahat bir okuma deneyimi sunmak için koyu arka plan renkleri ve açık yazı renkleri kullanır.

Karanlık Gece Modunun Avantajları:

  1. Göz Yorgunluğunu Azaltır: Gece veya karanlık ortamlarda, parlak arka plan gözleri yorabilir. Karanlık mod, bu yorgunluğu azaltır.
  2. Pil Tasarrufu: OLED ve AMOLED ekranlarda karanlık renkler daha az enerji tüketir, bu da mobil cihazlarda pil ömrünü uzatır.
  3. Modern Görünüm: Karanlık mod, birçok kullanıcı tarafından estetik bir tercih olarak görülür ve profesyonel bir hava katar.
  4. Daha Rahat Okuma: Düşük ışıkta göz kamaşmasını önler ve metinlerin daha kolay okunmasını sağlar.

Blogger'da Karanlık Mod Nasıl Aktif Edilir?

Blogger'da doğrudan bir "karanlık mod" seçeneği bulunmasa da, aşağıdaki yöntemlerle bu görünümü elde edebilirsiniz:

  1. Tema Özellikleri ile:

    • Blogger'ın modern temalarında (Contempo, Soho, Notable gibi) yerleşik olarak karanlık mod tasarımları bulunabilir. Tema ayarlarından koyu renk şemalarını seçebilirsiniz.

Blogger Gece Modu (Karanlık Mod) Nasıl Yapılır?​

Şimdi ilk olarak yapmanız gereken /body> etiketini temanızın içerisinde aratarak bulmak olacak. Bulduğunuz zaman aşağıda vereceğimiz javascript kodunu hemen üstüne yapıştıracaksınız. Yani <body> etiketine dark adında bir class eklemiş olacağız. Bu da temanın özelleştirilmesine olanak sağlamış oluyor.

Blogger Gece Modu İçin Javascript Kodları​

JavaScript:
<script>
 $(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);
  });
});
 </script>

Daha sonra CSS kodları ile yapılması gereken işlemler geliyor. Aşağıda belirttiğimiz CSS kodları sizlere örnek olması amacıyla sunulmuştur. Çünkü kodlar içinde yer alan etiketler tema ya da şablona göre değişiklik gösterebilmektedir. Bu değişikliğe örnek verecek olursak, .post class değil de tema içerisinde .yazi ya da .content class şeklinde kod yapısı olabilmektedir. Tabi bizim için buradaki önemli durumlardan bir tanesi de CSS düzenlemesi yaparken body.dark .post{} veya body.dark .sidebar{} şekillerinde düzenleme yapılması gerektiğidir.

CSS:
<style>
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;}
</style>

Son olarak elbette ki gece modu ile normal mod arasında geçiş yapılabilmesi için bir ikon ya da bir yazı oluşturmamız gerekecek. Eğer ikon eklemesi yapacaksanız fontawesome kullanmanız gerekiyor. Olur da fontawesome kullanmıyorsanız ikonlar görünmüyor.

CSS:
<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>



 

Yorum

Blogger Yayın Başlıklarını Renklendirme



Blogger yayın başlıklarını renklendirme, bir blog yazısının başlığını daha dikkat çekici ve estetik hale getirmek için başlık metnine renk ekleme işlemidir. Bu yöntem, okuyucuların ilgisini çekmek, blog yazısının görsel tasarımını geliştirmek ve marka kimliğine uygun bir görsellik sağlamak için kullanılabilir.
 

Blogger Şablon Düzenleyicisiyle Özelleştirme

Blogger'da Tema → HTML'yi Düzenle kısmından şablon kodlarına erişerek yayın başlığı tasarımını değiştirebilirsiniz. Yayın başlıklarını özelleştirmek için ilgili CSS sınıfını bulup düzenlemek yeterlidir.

Üçüncü Parti Araçlar veya Eklentiler Kullanma

Blogger için geliştirilen temalarda veya eklentilerde, genellikle başlıkların görsel açıdan zenginleştirilmesi için kolay araçlar sunulur. Bu araçlar, kod yazmadan renk ekleme olanağı sağlayabilir.

Neden Renklendirme Kullanılır?

  • Okuyucuların Dikkatini Çekmek: Düz siyah yerine renkli başlıklar daha dikkat çekici olur.
  • Marka Kimliğini Güçlendirmek: Blog temanızla uyumlu renkler kullanmak profesyonel bir görünüm sağlar.
  • Görsel Çeşitlilik Katmak: Renkli başlıklar, blogunuzu daha dinamik ve ilgi çekici hale getirebilir

Blogger Yayın Başlıklarını Rengarenk Yapmak

Blogger yayın başlıklarını rengarenk yapmak için css kodlarını </style> veya ]]></b:skin> etiketinden önce ekleyiniz. Siteniz için renkleri belirlemenize yarayan renk kodlarını değiştirme imkanı bulunmaktadır.

H1 Başlıklarını Rengarenk yapma

Yayınlarınızda sadece ana başlık yani h1 başlıklarını rengarenk yapacaktır.

h1 {
background: -webkit-linear-gradient(-15deg, #00004d 0%, #D81B60 30%, #21c72d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

H2 Başlıklarını Rengarenk yapma

Sitenizdeki başlık yani h2 başlıklarını rengarenk yapacaktır.

h2 {
background: -webkit-linear-gradient( 170deg , #0d0dec 0%, #01a7af 30%, #ff0000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

H3 Başlıklarını Rengarenk yapma

Sitenizdeki alt başlık yani h3 başlıklarını rengarenk yapacaktır.

h3 {
background: -webkit-linear-gradient( 260deg , #00ff1f 0%, #e003fb 30%, #b10000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Tüm Başlıklarını Rengarenk yapma

Yayınlarınızda sadece ana başlık ve sitedeki başlık ve alt başlıkları rengarenk yapacaktır.

h1 {
background: -webkit-linear-gradient(-15deg, #00004d 0%, #D81B60 30%, #21c72d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h2 {
background: -webkit-linear-gradient( 170deg , #0d0dec 0%, #01a7af 30%, #ff0000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h3 {
background: -webkit-linear-gradient( 260deg , #00ff1f 0%, #e003fb 30%, #b10000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Yorum

Blogger Temasını Mobil Uyumlu Yapma


Blogger temasını mobil uyumlu yapmak, bir web sitesinin hem masaüstü hem de mobil cihazlarda doğru ve düzgün bir şekilde görüntülenmesini sağlamaktır. Bu işlem, mobil kullanıcı deneyimini iyileştirmek, sayfa yüklenme hızını optimize etmek ve SEO açısından avantaj sağlamak için önemlidir. İşte bu süreçte dikkat edilmesi gereken ana noktalar ve nasıl yapılacağı:

Mobil Uyumlu Blogger Teması Neden Önemlidir?

  1. Kullanıcı Deneyimi: Mobil kullanıcılar, bir web sitesinde gezinirken kolayca içerik okumak ister. Mobil uyumlu olmayan bir site, ziyaretçilerin hemen çıkma oranını artırabilir.
  2. SEO (Arama Motoru Optimizasyonu): Google ve diğer arama motorları, mobil uyumlu sitelere öncelik verir. Bu, sitenizin arama sonuçlarındaki sıralamasını etkileyebilir.
  3. Erişim Kolaylığı: Farklı ekran boyutlarına uyumlu bir tema, daha geniş bir kullanıcı kitlesine ulaşmanızı sağlar.

Blogger Temasını Mobil Uyumlu Yapma Yöntemleri

1. Blogger'ın Varsayılan Mobil Tema Ayarını Kullanma

  • Blogger, varsayılan olarak temaları mobil uyumlu hale getirmek için bir seçenek sunar.
  • Adımlar:
    1. Blogger kontrol paneline giriş yapın.
    2. Tema sekmesine tıklayın.
    3. "Mobil" bölümünde "Mobil Tema Etkinleştir" seçeneğini işaretleyin.
    4. Kaydedin ve değişikliklerinizi test edin.

2. Duyarlı (Responsive) Bir Tema Seçin

  • Duyarlı temalar, ekran boyutuna göre otomatik olarak ölçeklenir ve düzenlenir.
  • Eğer mevcut temanız duyarlı değilse, internette "Responsive Blogger Temaları" araması yaparak ücretsiz veya premium bir tema bulabilirsiniz.
Tasarım > Html'yi düzenle > Widget şablonlarını genişlet diyip
Kod:
<b:include data='blog' name='all-head-content'/>

kodundan hemen sonra
Kod:
<**** content=’IE=EmulateIE7′ http-equiv=’X-UA-Compatible’/>
<b:if cond=’data:blog.isMobile’>
<**** content=’width=device-width, initial-scale=1.0, user-scalable=0′ name=’viewport’/>
<b:else/>
<**** content=’width=1100′ name=’viewport’/>
</b:if>


 

Yorum

25 Ocak 2025 Cumartesi

Blogger Material Design Yazılar

 


Blogger için Material Design renkli yazılar, web sitenizin tasarımını daha modern, şık ve çekici hale getirmek için kullanılan bir yöntemdir. Google'ın Material Design tasarım dili, sade, düzenli ve renkleri anlamlı bir şekilde kullanmaya odaklanır. Bu tasarımı kullanarak Blogger sitenizdeki yazıların renklerini ve stillerini geliştirmek, ziyaretçilerin ilgisini çekebilir ve içeriklerinizi daha profesyonel bir şekilde sunmanıza yardımcı olabilir. İşte nasıl işe yarayacağına dair birkaç örnek:

1. Estetik Görünüm

  • Renkler, içeriklerinizi görsel olarak daha cazip hale getirir.
  • Modern ve minimal tasarımlar, okuyucularınıza daha kaliteli bir izlenim verir.
  • Renk paletleri, göz yormayan ama dikkat çekici tasarımlar sağlar.

2. Okunabilirliği Artırır

  • Kontrastı optimize edilmiş renk kombinasyonları, yazıların kolayca okunmasını sağlar.
  • Önemli bölümleri vurgulamak için renkli başlıklar, butonlar veya alt çizgiler kullanılabilir.

3. Marka Kimliği Oluşturur

  • Material Design'daki renk düzenleriyle markanızın renklerini uyumlu bir şekilde öne çıkarabilirsiniz.
  • Kullanıcılar, blogunuzu renk düzeniyle hatırlayabilir.

4. Daha Fazla Etkileşim

  • Renkli ve dinamik bir tasarım, ziyaretçileri sayfada daha uzun süre tutabilir.
  • Öne çıkan içeriklerin dikkat çekmesi sağlanarak tıklama oranları artırılabilir.

5. Responsive Tasarıma Uyumlu

  • Material Design, mobil cihazlar ve farklı ekran boyutları için optimize edilmiştir.
  • Blogunuzu mobil uyumlu hale getirirken aynı zamanda renkli ve canlı tutabilirsiniz.






  • İlk olarak Blogger panelinde Şablon > HTML'yi düzenle seçeneklerine tıklayın. 
  • Kodların bulunduğu alana bir kez tıkladıktan sonra Ctrl+F tuşlarına basın.
  • Gelen arama yerine ]]></b:skin> yazıp Enter tuşuna basın.
  • ]]></b:skin> kodunu bulduktan sonra ise bir satır üzerine hemen aşağıda bulunan CSS kodlarını kopyalayıp yapıştırın.

/* Material Color Box */
.colorbox{overflow:hidden;position:relative;margin:.5rem 0 1rem;transition:box-shadow .25s;border-radius:2px;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:20px;font-size:14px}
.colorbox.blue{background:#03a9f4}
.colorbox.green{background:#4CAF50}
.colorbox.red{background:#F44336}
.colorbox.orange{background:#ff9800}
.colorbox.purple{background:#673ab7}


Yazı Kutusu HTML Kodu


div class="colorbox purple"> Kutu içerisinde göstermek istediğiniz yazı. </div>

Yukarıdaki kutu mor rengine sahip bir kutuydu. Eğer rengini değiştirmek istiyorsanız işaretlediğim kısmı green, red, orange, blue, yazarak değiştirebilirsiniz. Ayrıca CSS kodu içerisinde bulunan # ile başlayan renk kodlarını da istediğiniz bir renk koduyla değiştirebilirsiniz.
Yorum
Kaydol: Kayıtlar (Atom)