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

Blogger Özel Robot Başlık Etiketleri


Blogger'da "Özel Robot Başlık Etiketleri," arama motorlarına sayfalarınızın nasıl dizine ekleneceğini ve taranacağını kontrol etme imkanı sunan bir özelliktir. Bu ayarlar, SEO (Arama Motoru Optimizasyonu) için oldukça önemlidir. Özel robot etiketleri doğru bir şekilde ayarlandığında, sitenizin gereksiz içeriklerden arındırılarak arama motorları tarafından daha verimli bir şekilde indekslenmesini sağlayabilirsiniz.

Özel Robot Başlık Etiketleri Nasıl Ayarlanır?

  1. Blogger Paneline Giriş Yapın: Blogger hesabınıza giriş yapın ve ayarlarını düzenlemek istediğiniz blogu seçin.
  2. Ayarlar Sekmesine Git: Sol menüden "Ayarlar" sekmesine tıklayın.
  3. Arama Tercihleri: "Ayarlar" sekmesinde "Arama Tercihleri" kısmını bulun ve buraya tıklayın.
  4. Özel Robot Başlık Etiketlerini Etkinleştir: "Özel Robot Başlık Etiketleri" seçeneğini "Etkin" olarak işaretleyin.
  5. Etiketleri Ayarlayın: Bu adımda aşağıdaki seçenekleri göreceksiniz:
    • Ana Sayfa: all, noindex, nofollow, vb.
    • Arşiv ve Arama Sayfaları: noindex veya noarchive gibi ayarlarla gereksiz sayfaları dizin dışı bırakabilirsiniz.
    • Gönderi ve Sayfalar: Genellikle all veya noodp seçeneği seçilir.

Robot Etiketi Seçenekleri ve Anlamları

  • all: Sayfanın dizine eklenmesine ve bağlantıların takip edilmesine izin verir.
  • noindex: Sayfanın arama motoru dizinine eklenmesini engeller.
  • nofollow: Sayfadaki bağlantıların takip edilmesini engeller.
  • none: Hem sayfanın indekslenmesini hem de bağlantıların takip edilmesini engeller.
  • noarchive: Sayfanın önbelleğe alınmasını engeller.
  • nosnippet: Arama sonuçlarında öne çıkan snippet'lerin (örneğin, özet metinlerin) gösterilmesini engeller.
  • noodp: DMOZ açıklamalarının kullanılmasını engeller.
  • notranslate: Sayfanın otomatik çevirisini engeller.
  • unavailable_after: Belirli bir tarihten sonra sayfanın dizin dışı kalmasını sağlar.

SEO İçin Önerilen Ayarlar

  • Ana Sayfa: all ve noodp
  • Arşiv ve Arama Sayfaları: noindex, nofollow
  • Gönderiler ve Sayfalar: all ve noodp

Bu ayarları dikkatli bir şekilde yaparak, sitenizin gereksiz sayfalarını arama motorlarının dışında bırakabilir ve önemli içeriklerin ön plana çıkmasını sağlayabilirsiniz.


 

Yorum

18 Ocak 2025 Cumartesi

Blogger Fare İmlec Kodu


Blogger'da Fare İmlec Kodu, blogunuzda fare imlecinin görünümünü özelleştirmek için kullanılan bir HTML, CSS veya JavaScript kodudur. Bu kodlar sayesinde imleci, blogunuzun temasına veya tasarımına uygun şekilde kişiselleştirebilirsiniz. Örneğin, standart ok işareti yerine özel bir simge, animasyonlu bir ikon ya da farklı bir tasarım ekleyebilirsiniz.

Ne İşe Yarar?

  1. Tasarımı Geliştirir: Blogunuzun görünümüne estetik bir dokunuş katar.
  2. Kullanıcı Deneyimini Artırır: Ziyaretçiler için daha çekici ve etkileşimli bir deneyim sağlar.
  3. Marka Kimliği Yaratır: Blogunuzun tarzını ve temasını yansıtmak için kullanılabilir.

Nasıl Eklenir?

  1. Blogger Temasına Giriş:

    • Blogger kontrol panelinde, Tema sekmesine gidin.
    • "HTML'yi Düzenle" seçeneğini tıklayın.


Kod

Kodlar body, a:hover {cursor: url(https://ani.cursors-4u.net/cursors/cur-12/cur1103.ani), url(https://ani.cursors-4u.net/cursors/cur-12/cur1103.png), progress !important;}Rainbow Pinwheel Pointerbody, a:hover {cursor: url(https://ani.cursors-4u.net/cursors/cur-12/cur1103.ani), url(https://ani.cursors-4u.net/cursors/cur-12/cur1103.png), progress !important;}




  1. JavaScript ile Dinamik Özelleştirme (Opsiyonel): Daha karmaşık tasarımlar ve animasyonlar için JavaScript kullanabilirsiniz.

  2. Değişiklikleri Kaydedin: Kodu ekledikten sonra değişiklikleri kaydedin ve blogunuzu önizleyerek sonucu kontrol edin.

Notlar:

  • İmleç tasarımında kullanılan görsellerin boyutları küçük olmalıdır (genellikle 32x32 piksel veya daha küçük) ve şeffaf bir arka plan tercih edilmelidir.
  • Çok karmaşık ya da dikkat dağıtıcı tasarımlardan kaçınmak, kullanıcı deneyimini olumsuz etkilememek açısından önemlidir.


Yorum

Blogger Kayan Yazilar Eklentisi

 


Blogger'da kullanılan "Son Yazılar" eklentisi, blogunuzda en son yayımlanan içerikleri otomatik olarak göstermek için kullanılan bir araçtır. Bu eklenti, hem okuyucularınızın blogda yeni eklenen içeriklere kolayca ulaşmasını sağlar hem de blogunuzu daha dinamik ve güncel gösterir. İşte "Son Yazılar" eklentisinin başlıca faydaları ve işlevleri:

1. Okuyucu Deneyimini İyileştirir

  • Ziyaretçileriniz, blogunuzda gezinirken en son paylaştığınız içeriklere hızlıca erişebilir.
  • Yeni içeriklerinizin görünürlüğünü artırır ve daha fazla okunmasını sağlar.

2. Blogunuzu Daha Dinamik Gösterir

  • Sürekli güncellenen bir "Son Yazılar" bölümü, blogunuzun aktif olduğu izlenimini verir.
  • Takipçilerinizin düzenli olarak siteye geri dönme olasılığını artırır.

3. SEO'ya Katkı Sağlar

  • İç bağlantılar oluşturarak blogunuzun SEO'sunu iyileştirebilir.
  • Daha fazla sayfa ziyaret edilmesini teşvik eder ve hemen çıkma oranını düşürebilir.

4. Tasarım ve Kullanım Kolaylığı

  • Blog tasarımınıza uygun bir widget ya da eklentiyle kolayca entegre edilebilir.
  • Kategoriye, etikete veya tarih sırasına göre özelleştirilmiş listeleme yapabilir.

Nasıl Eklenir?

  • Blogger'ın Widget Galerisi: Blogger kontrol panelinde "Yerleşim" sekmesine giderek "Gadget Ekle" seçeneğinden "Son Yazılar" eklentisini bulup ekleyebilirsiniz.
  • Üçüncü Taraf Kodlar: Daha gelişmiş özellikler istiyorsanız, HTML/JavaScript widget'ı ekleyip, internette bulunan özel "Son Yazılar" kodlarından birini kullanabilirsiniz.
  Kod
<style>
.head_brnews{
height:45px;
background:#fff;
border:1px solid #ccc;
margin:15px auto;
overflow: hidden;
}
.breaking-news{
float:left;
height:45px;
position:relative;
overflow:hidden;
margin-bottom:20px;
}
.breaking-news {
background: #fff;
display:block;
float:left;
padding:0 10px;
height:32px;
line-height:45px;
color:#000;
font-size:15px;
}
.breaking-news a{color:#444}
.breaking-news ul{
float:left
}
.breaking-news a:hover{
color:#222;
}
.breaking-news ul li{
float:left;
display:block;
list-style:none;
}
.breaking-news ul a{
padding:1px;
display:block;
color:#333;
white-space:nowrap;
float:left;
line-height:45px;
font-size:15px;
display:hidden;
}
.breaking-news span{
display:block;
float:left;
padding:1px 10px;
color:#333;
font-size:15px;
line-height:45px;
}
.samazhlo{
background:#374760;
border:1px solid #444;
float:left;
left:0;
padding: 0 20px;
height:45px;
line-height: 45px;
color: #FFF;
font-size: 17px;
margin-right: 10px;
}
</style>
<div class="samazhlo">Son Yazılar</div>
<div class='head_brnews'>
<div class='breaking-news'>
<script>
function RecentPostsScrollerv2(json) {
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sHeadlineTerminator;
var sPostLinkLocation;
try {
sMoqueeHTMLStart = "\<MARQUEE behavior=\"scroll\" onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";
if (nWidth) {
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
} else {
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
}
if (nScrollDelay) {
sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
}
if (sDirection) {
sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"\>";
if (sDirection == "left" || sDirection == "right") {
sHeadlineTerminator = " ";
} else {
sHeadlineTerminator = "\<br/\>";
}
}
if (sOpenLinkLocation == "N") {
sPostLinkLocation = " target= \"_blank\" ";
} else {
sPostLinkLocation = " ";
}
sMoqueeHTMLEnd = "\</MARQUEE\>"
sHeadLines = " ";
for (var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++) {
var objPost = json.feed.entry[nFeedCounter];
if (nFeedCounter == json.feed.entry.length) break;
for (var nCounter = 0; nCounter < objPost.link.length; nCounter++) {
if (objPost.link[nCounter].rel == 'alternate') {
sPostURL = objPost.link[nCounter].href;
break;
}
}
sHeadLines = sHeadLines + "" + sBulletChar + " \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
}
if (sDirection == "left") {
sHeadLines = sHeadLines + "";
} else if (sDirection == "right") {
sHeadLines = "" + sHeadLines;
} else if (sDirection == "up") {
sHeadLines = sHeadLines + "\<br/\>";
} else {
sHeadLines = "\<br/\>" + sHeadLines;
}
document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd)
} catch (exception) {
alert(exception);
}
}
</script>
<script type='text/javascript'>
var nMaxPosts =10;
var nWidth = 100;
var nScrollDelay = 160;
var sDirection = "left";
var sOpenLinkLocation = "N";
var sBulletChar = "»";
</script>
<script src='/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2&max-results=10' type='text/javascript'></script>
</div>
</div>


Yorum
Kaydol: Kayıtlar (Atom)