Ghost Sitenize sosyal medya simgeleri nasıl eklenir?

Tüm sosyal medya ağı simgelerinizi Ghost temanıza ekleyerek sosyal medya varlığınızı genişletin.
Ghost Admin'den Ghost sitenize herhangi bir sosyal medya simgesini ekleyin. Bu eğitim, süreci adım adım anlatacaktır
Not:Bu eğitimde, varsayılan Ghost teması Source, çalışan bir örnek olarak kullanılmıştır. Aşağıda sunulan teknikler diğer Ghost temalarına da uygulanabilir.

Sosyal medya bağlantılarınızı ekleyin
Ayarlar → Gezinme'ye gidin. Birincil Gezinme alanına, eklemek istediğiniz her sosyal medya ağı için yeni bir öğe ekleyin. Etiket, sosyal medya ağının adı olmalıdır. Örneğin, Konular profilinize bir bağlantı eklemek için gezinme etiketi olarak "Konular"ı kullanın.

Kod oluşturucu
Temanız için kodu nasıl yazacağınıza dair adım adım bir kılavuz için eğitimin geri kalanını izleyin veya kısayoldan yararlanarak kod oluşturucumuzu kullanarak kodu otomatik olarak oluşturun.

Resmi Ghost temanızı ve istediğiniz sosyal medya simgelerini seçin. Ardından, kodu kopyalayıp Ayarlar → Kod Enjeksiyonu → Site Başlığı'na yapıştırın. Kaydet'e tıklayın ve işiniz bitti. Önceki adımda açıklandığı gibi, gezinme öğelerini eklemeniz gerektiğini unutmayın.

Simgeleri manuel olarak nasıl ekleyeceğinizi görmek veya işlem hakkında daha fazla bilgi edinmek için aşağıdaki eğitime devam edin.

Oluşturulan kod
Kod:

Choose your theme and social media networks to get started...

Simge kitaplığını ekleyin
Simge kütüphanemiz olarak FontAwesome'ı kullanacağız. Bunu Ghost sitemize yükleyelim. Ayarlar → Kod Enjeksiyonu → Site Başlığı'na gidin.

Aşağıdaki kod satırını yapıştırın ve Kaydet'e tıklayın.

html:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/brands.min.css" integrity="sha512-+oRH6u1nDGSm3hH8poU85YFIVTdSnS2f+texdPGrURaJh8hzmhMiZrQth6l56P4ZQmxeZzd2DqVEMqQoJ8J89A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Temel stilleri ekleyin
Daha sonra, bir önceki adımdaki kod satırının hemen ardından temel simge stilini ekleyin.
html:

<style>
    :where(.nav, .gh-head-menu) .nav-behance a,
    :where(.nav, .gh-head-menu) .nav-dribbble a,
    :where(.nav, .gh-head-menu) .nav-mastodon a,
    :where(.nav, .gh-head-menu) .nav-threads a,
    :where(.nav, .gh-head-menu) .nav-x a,
    :where(.nav, .gh-head-menu) .nav-youtube a {
        font-size: 0 !important;
    }

    :where(.nav, .gh-head-menu) .nav-behance a::before,
    :where(.nav, .gh-head-menu) .nav-dribbble a::before,
    :where(.nav, .gh-head-menu) .nav-mastodon a::before,
    :where(.nav, .gh-head-menu) .nav-threads a::before,
    :where(.nav, .gh-head-menu) .nav-x a::before,
    :where(.nav, .gh-head-menu) .nav-youtube a::before {
        font-family: "Font Awesome 6 Brands";
        display: inline-block;
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }
</style>

Stillerin sosyal medya ağlarının adlarını içerdiğine dikkat edin. Kullanmak istediğiniz sosyal medya ağı zaten eklenmişse, bu stilleri olduğu gibi kopyalayın. Aksi takdirde, yeni sosyal medya ağını da içerecek şekilde güncelleyin. Örneğin, LinkedIn için şunları eklersiniz: :where(.nav, .gh-head-menu) .nav-linkedin a ve :where(.nav, .gh-head-menu) .nav-linkedin a::before.
Sosyal medya simgelerini ekleyin
Son adım, her sosyal medya ağının gerçek simgesini çeken bir stil eklemektir. Yukarıda listelenen simgelerin kodu aşağıdadır. Bunu da Site Başlığına ekleyin.
html:

<style>
  :where(.nav, .gh-head-menu) .nav-behance a::before {content: "\f1b4"}
  :where(.nav, .gh-head-menu) .nav-dribbble a::before {content: "\f17d"}
  :where(.nav, .gh-head-menu) .nav-mastodon a::before {content: "\f4f6"}
  :where(.nav, .gh-head-menu) .nav-threads a::before {content: "\e618"}
  :where(.nav, .gh-head-menu) .nav-x a::before {content: "\e61b"}
  :where(.nav, .gh-head-menu) .nav-youtube a::before {content: "\f167"}
</style>

Kod Enjeksiyonu toplamda şöyle görünüyor:

Ek sosyal medya simgeleri için FontAwesome web sitesinden unicode'u (içerikten sonraki değer) kopyalayın. Ardından, yeni bir CSS kuralı oluşturmak için yukarıdaki şablonu izleyin.

Örneğin, aşağıdaki CSS kuralıyla bir LinkedIn simgesi ekleyin:
css:

:where(.nav, .gh-head-menu) .nav-linkedin a::before {
    content: "\f08c";
}

Stillerinizi Code Injection'da kaydedin, ana sayfanızı yenileyin ve yeni, güzel sosyal medya simgelerinizin keyfini çıkarın


​