Sosyal Profillerle Blogger’a Menü çubuğu Nasıl Eklenir – Showeblogin

Aşağıdaki makale size yardımcı olacaktır:Sosyal Profillerle Blogger’a Menü çubuğu Nasıl Eklenir – Showeblogin

Sosyal profil simgeleriyle birlikte BlogSpot blogunuzun (duyarlı blogcu şablonu dahil) üst kısmına, yani başlık bölümünün üstüne menü çubuğu ekleyin.

Duyarlı bir blogcu şablonu olan WinBlogTem’i başlattıktan sonra okuyucularımızdan biri bizden BlogSpot.com blogu için o temanın yalnızca üst başlık menü çubuğunu paylaşmamızı istiyor. Bu menünün ana özelliği, sol taraftaki menünün yanı sıra menü çubuğunun sağ tarafında sosyal profilleri birbirine bağlamaktır.

Bu yüzden, blogger blogunuzun en üstüne eklenecek menü çubuğu widget’ını sosyal medya profilleri bağlantısıyla sizlerle paylaşmak için buradayım.

Aşama 1:

Blogger hesabınıza giriş yapın ve blogunuzun Şablon sekmesinde gezinin.

Adım 2:

Bilgisayar için şablon penceresinden HTML metnini düzenle düğmesine tıklayın.

Aşama 3:

Şimdi, şablon düzenleyicide herhangi bir yeri tıklayın ve ]]> etiketini kapatın. Bu CSS kodlarını kopyalayıp ]]> öğesinin hemen üstüne/öncesine yapıştırın.

.swtHeaderMenu {/* Showeblogin’den SWT Üst Başlık Menüsü START */ font-size: 13px; yazı tipi ailesi: Arial; kenar boşluğu: 0 otomatik; yükseklik: 38 piksel; arka plan: #0f100f; kenarlık üstü: 3 piksel katı #c10049; alt kenarlık: 3 piksel katı şeffaf; taşma: gizli; dolgu: 0 25 piksel; yazı tipi ağırlığı: 600; } .swtHeaderMenu:hover { border-top: 3px düz şeffaf; alt kenarlık: 3px katı #92d050; } ul.swt-nav-menu { list-style-type: yok; kenar boşluğu: 0 0 0 0; dolgu: 0 0 0 0; } ul.swt-nav-menu li { ekran: blok; kayan nokta: sol; satır yüksekliği: 38px; kenar boşluğu: 0 0 0 0; dolgu: 0 0 0 0; } ul.swt-nav-menu li a { arka plan: #0f100f; renk: #fff; Ekran bloğu; dolgu: 0 12 piksel; } ul.swt-nav-menu li a:hover { arka plan: #c10049; kenarlık üstü: 3 piksel düz #92d050; renk: #fff; -webkit-sınır yarıçapı: 5 piksel; -moz-sınır yarıçapı: 5px; sınır yarıçapı: 5px; -webkit-geçiş: tüm .1’ler kolaylığı; -moz-geçiş: tüm .1’ler kolaylık; -ms-geçiş: tüm .1’ler kolaylık; -o-geçiş: tüm .1’ler kolaylık; geçiş: tüm .1’ler kolaylık; } ul.swt-nav-sosyal { yükseklik: 38px; kenar boşluğu: 0 0 0 0; dolgu: 0 0; Sağa çık; } ul.swt-nav-social li { display: inline-block; liste stili türü: yok; Sağa çık; kenar boşluğu: 0 0; dolgu: 0 0; sağ kenarlık: yok; } ul.swt-nav-social li,ul.swt-nav-social li { float: left; sağ kenar boşluğu: 0px; kenar boşluğu: 0px; dolgu: 0px; Ekran bloğu; genişlik: otomatik; arka plan: #0f100f; } ul.swt-nav-social li a, ul.swt-nav-social li a, a.swtFollow { display: block; kayan nokta: sol; kenar boşluğu: 0; dolgu: 0; genişlik: 40 piksel; yükseklik: 40 piksel; kenar boşluğu: 2px; metin girintisi: -9999px; -webkit-geçişi: tüm .4’ler kolay giriş; -moz-geçiş: tüm .4’ler kolay giriş; -ms-geçişi: tüm .4’ler kolay giriş; -o-geçiş: tüm .4’ler kolay giriş; geçiş: tüm .4’ler kolay giriş; } a.swtFollow.facebook { arka plan konumu: 0 0; } a.swtFollow.googleplus { arka plan konumu: -41px 0; } a.swtFollow.linkedin { arka plan konumu: -82px 0; } a.swtFollow.pinterest { arka plan konumu: -123px 0; } a.swtFollow.twitter { arka plan konumu: -164px 0; } a.swtFollow.facebook:hover { arkaplan rengi: #39558f; arka plan konumu: 0 -40px; } a.swtFollow.googleplus:hover { arka plan rengi: #d94a39; arka plan konumu: -41px -40px; } a.swtFollow.linkedin:hover { background-color: #0377ae; arka plan konumu: -82px -40px; } a.swtFollow.pinterest:hover { background-color: #cd1a3b; arka plan konumu: -123px -40px; } a.swtFollow.twitter:hover { arka plan rengi: #02a7e6; arka plan konumu: -164px -40px; } a.swtFollow { arka plan: url(http://img.microsoft.com/files/swtFollow.png) tekrarlama yok 0 0; /* http://www.microsoft.com/?p=788 adresinde SWT Üst Başlık Menüsü çubuğu eğitimi */}

Not: Yapabilirsin CSS kodlarını indir daha fazla stil için.

Adım-4:

Açılış