Blogger Sosyal Medya Takip Butonları Ekleme (2026 Güncel - SVG İkonlu)

2026 Güncellemesi: Tüm Sosyal Medya Butonları İçin Modern Kodlar

"Bu yazı 'Sıfırdan Zirveye Blog Yönetimi' serisinin bir parçasıdır. Serinin giriş yazısı için tıklayın. "Google Blogger Eğitim Serisi: Sıfırdan Zirveye Blog Yönetimi"

Merhaba "Benim Dikey Dünyam" okurlarım. Bloğumun en çok okunan yazılarından biri olan; "Blogger Sosyal Medya Takip Butonları Ekleme (2026 Güncel - SVG İkonlu)" başlıklı yazımı 2017 yılında yazmıştım. Aradan geçen 9 yılın sonunda hem yazımı hem de kod yapısını 2026 yılının web standartlarına ve estetik anlayışına uygun olarak tamamen yeniledim. Artık sitenizi yavaşlatan eski tip ikon görselleri yerine, cam gibi net görünen ve her cihazda kusursuz çalışan SVG (Vektörel) yapısını kullanıyoruz.

Bursa'dan Hakkı Şenkeser ile Blogger Sosyal Medya Butonları Ekleme Rehberi 2026

Neden Bu Kodları Kullanmalısınız?

• Tam Performans: Dış sunuculardan görsel yüklemez, bloğunuzun açılış hızını etkilemez.

• Güncel Logolar: X (Twitter) gibi markaların en yeni logolarını içerir.

• Güvenli ve Modern: Tarayıcı güvenliği (noopener) ve mobil uyumluluk için optimize edilmiştir.

• Etkileşim: Üzerine gelindiğinde (hover) her platformun kendi rengine bürünen şık animasyonlar içerir.

Paket İçeriği: Hangi Butonlara Ulaşacaksınız?

Bu güncel kod bloğunu kullandığınızda, ziyaretçileriniz şu 6 ana platform üzerinden size ulaşabilecek:

1. LinkedIn: Profesyonel ağınız için.

2. Instagram: Görsel paylaşımlarınız için.

3. X (Twitter): Güncel paylaşımlar ve mikro-blogging için.

4. Facebook: Sosyal etkileşim için.

5. YouTube: Video içerikleriniz için.

6. Pinterest: İlham veren panolarınız ve görsel arşiviniz için.

Kurulum Rehberi

Blogger panelinizde Yerleşim > Gadget Ekle > HTML/JavaScript kısmına veya yazınızın HTML düzenleme alanına aşağıdaki kod bloğunu kopyalayıp yapıştırmanız yeterlidir:

...................................................................................................................................................

HTML

<!-- Blogger Hepsi Bir Arada Sosyal Medya Butonları v2026 -->

<style>

  .modern-social-wrapper {

    display: flex;

    gap: 12px;

    justify-content: center;

    flex-wrap: wrap;

    padding: 25px 0;

  }

 

  .social-link {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    background: #f8f8f8;

    box-shadow: 0 3px 6px rgba(0,0,0,0.1);

    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    text-decoration: none;

  }

 

  .social-link:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 15px rgba(0,0,0,0.15);

  }

 

  /* Marka Renkleri */

  .sl-linkedin:hover { background-color: #0077b5; }

  .sl-instagram:hover { background-color: #e4405f; }

  .sl-x:hover { background-color: #000000; }

  .sl-facebook:hover { background-color: #1877f2; }

  .sl-youtube:hover { background-color: #ff0000; }

  .sl-pinterest:hover { background-color: #bd081c; }

 

  .social-link svg {

    width: 22px;

    height: 22px;

    fill: #444;

    transition: fill 0.3s ease;

  }

 

  .social-link:hover svg {

    fill: #ffffff;

  }

</style>

 

<div class="modern-social-wrapper">

 

  <!-- LinkedIn -->

  <a href="LINKEDIN_ADRESINIZ" class="social-link sl-linkedin" target="_blank" rel="noopener" title="LinkedIn">

    <svg viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.238 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>

  </a>

 

  <!-- Instagram -->

  <a href="INSTAGRAM_ADRESINIZ" class="social-link sl-instagram" target="_blank" rel="noopener" title="Instagram">

    <svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.162 6.162 6.162 6.162-2.759 6.162-6.162-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>

  </a>

 

  <!-- X (Twitter) -->

  <a href="X_ADRESINIZ" class="social-link sl-x" target="_blank" rel="noopener" title="X">

    <svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>

  </a>

 

  <!-- Facebook -->

  <a href="FACEBOOK_ADRESINIZ" class="social-link sl-facebook" target="_blank" rel="noopener" title="Facebook">

    <svg viewBox="0 0 24 24"><path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/></svg>

  </a>

 

  <!-- YouTube -->

  <a href="YOUTUBE_ADRESINIZ" class="social-link sl-youtube" target="_blank" rel="noopener" title="YouTube">

    <svg viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>

  </a>

 

  <!-- Pinterest -->

  <a href="PINTEREST_ADRESINIZ" class="social-link sl-pinterest" target="_blank" rel="noopener" title="Pinterest">

    <svg viewBox="0 0 24 24"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.965 1.406-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.132 0 3.771-2.249 3.771-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg>

  </a>

 

</div>

...................................................................................................................................................

Son Sözler

Dijital dünyada varlık göstermek sadece içerik üretmekle değil, bu içeriği en hızlı ve en profesyonel şekilde sunmakla ilgilidir. Bloğunuzdaki bu küçük teknik değişim, hem kullanıcı deneyimini iyileştirecek hem de Google gözünde sitenizin puanını artıracaktır.

Sorularınız veya farklı platform ekleme talepleriniz olursa yorum kısmında buluşalım.

Gelecek projelerimde görüşmek üzere, aktif kalın!

Hakkı Şenkeser