Blogger Blog’unuza Şık Sosyal Profil Widget’ları Ekleyin – Showeblogin

Aşağıdaki makale size yardımcı olacaktır:Blogger Blog’unuza Şık Sosyal Profil Widget’ları Ekleyin – Showeblogin

Artık blogger blogunuza şık sosyal profil gadget’ları ekleyebilir ve Facebook, Twitter ve Google Plus vb. platformlardaki çevrimiçi sosyal bağlantılarınızı artırabilirsiniz.

Showeblogin’e sosyal profil düğmelerimizi ekledikten sonraki bir ay içinde, Blogger ve WordPress kullanıcıları için SWT sosyal profil widget’ını paylaşmaya yönelik binlerce talep aldık. Blogger blog kullanıcılarından yüzde 68’den fazla istek geldiği için, bu eğitimi BlogSpot.com blogu için özel olarak yazıyorum. Bu widget’ın en iyi özelliklerinden biri, tüm cihazlarda çalışması, yani en iyi özelleştirme seçenekleriyle tamamen duyarlı olmasıdır.

Bununla birlikte, WordPress kullanıcıları, aslında herhangi bir web sitesi sahibi, bu widget’ı kendi bloglarına/sitelerine ekleyebilir, çünkü CSS ve HTML kodları internetteki herhangi bir web sayfası için çalışır. Bu nedenle, lütfen tüm talimatları çok dikkatli bir şekilde okuyun ve tüm adımları izleyin ve sonunda canlı blogunuza değişen renklerle duyarlı sosyal profil widget’ı ile bir geçiş efekti göreceksiniz. Demo için bu sitenin altbilgisini görebilirsiniz.

Blogger Blog’a SWT Sosyal Profil Widget’ları Ekleyin

Aşama 1:

Blogger hesabınıza giriş yapın ve SWT Social Profile Widget’ı eklemek istediğiniz blogu seçin.

Adım 2:

Gitmek Düzen blogger blogunuzun sekmesini tıklayın ve tıklayın Gadget Ekle kenar çubuğundan, üst bilgiden veya alt bilgiden metin bağlantısı.

Aşama 3:

Aşağı kaydırın ve HTML/JavaScript’e tıklayın (Blogunuza üçüncü taraf işlevselliği veya başka bir kod ekleyin.) ve açık pencerenin içerik alanına aşağıdaki kodları yapıştırın.

.swtSocial a{ genişlik:135 piksel; // Sosyal Butonların genişliğini değiştirebilirsiniz height:35px; dolgu: 10 piksel 20 piksel; yazı tipi boyutu: 20px; /* http://www.microsoft.com/?p=689 */} adresinde eğitim

Şimdi, aşağıdaki bağlantıları/terimleri kendi ilgili sosyal profil adresinizle/adınızla değiştirin:

10. Satır: https://www.facebook.com/SuperWebTricks
Satır 11: https://twitter.com/SuperWebTricks
12. Satır: https://plus.google.com/110825980327179111685
Satır 13: Showeblogin-SuperWebTricks
Satır 14: https://www.youtube.com/Showeblogin

Not: Lütfen 15. satırda belirtilen telif haklarına ve sıkı çalışmamıza saygı gösterin. Blogunuza/sitenize hiçbir şekilde zarar vermez ve bu nedenle bu widget’ın lisansını gösteren satırı düzenlemeyin.

Bu widget sorumlu olduğundan, onu tıklayıp görünmesini istediğiniz herhangi bir yere sürükleyebilirsiniz, yani. Kenar Çubuğu, Alt Bilgi ve Üst Bilgi ve üst veya alt Blog Yazıları düzende widget. Şimdi tıklayın Düzenlemeyi kaydet sağ köşedeki düğme.

Adım-4:

Gitmek Şablon sekmesine tıklayın ve HTML’yi düzenle metin bağlantısı düğmesi. Şimdi, açık şablon düzenleyicide herhangi bir yeri tıklayın ve kapanış etiketini arayın ve aşağıdaki kodları önüne/üstüne yapıştırın.

Adım 5:

< Değişken name="swtY.background.color" description="YouTube Arka Plan Rengi" type="color" default="#ffafaf" value="#ffafaf"/>

Şimdi ]]> ifadesini arayın ve aşağıdaki CSS kodlarını üstüne/öncesine yapıştırın.

/* SWT Sosyal Profil Düğmeleri ——————————————————– — */ .swtSocial{ /* Showeblogin’den SWT Sosyal Profil Widget’ı */ display:inline-block; kenar boşluğu: 2 piksel; } .swtSocial a{ float:inherit } #swtSocialRight{ background:#44546a; renk: #000; } #swtSocialRight:hover{ arka plan:#000; renk: #FFF; } .swtSocial { float:left; görüntüleme: satır içi; içerik:attr(veri-alt); satır yüksekliği: 32px; } .swtSocial a{ font-family: ‘Gürcistan’, sans-serif; metin süslemesi: yok; Ekran bloğu; metin hizalama: merkez; opaklık: 0,4; filtre: alfa(opaklık=40); -webkit-geçiş: tüm 1’ler kolaylığı; -moz-geçiş: tüm 1’ler kolaylığı; -ms-geçiş: tüm 1’ler kolaylığı; -o-geçiş: tüm 1’ler kolaylığı; geçiş: tüm 1’ler kolaylık; } .swtSocial a:hover{ opaklık: 1.0; filtre: alfa(opaklık=100); -webkit-geçiş: tüm 1’ler kolaylığı; -moz-geçiş: tüm 1’ler kolaylığı; -ms-geçiş: tüm 1’ler kolaylığı; -o-geçiş: tüm 1’ler kolaylığı; geçiş: tüm 1’ler kolaylık; } #swtFacebook { arka plan rengi: $(swtF.background.color); renk: $(swtF.text.color); } #swtFacebook:hover { arka plan rengi: $(swtF.hover.background.color); renk: $(swtF.hover.text.color); } #swtTwitter { arka plan rengi: $(swtT.background.color); renk: $(swtT.text.color); } #swtTwitter:hover { arka plan rengi: $(swtT.hover.background.color); renk: $(swtT.hover.text.color); } #swtGooglePlus { arka plan rengi: $(swtG.background.color); renk: $(swtG.text.color); } #swtGooglePlus:hover { arka plan rengi: $(swtG.hover.background.color); renk: $(swtG.hover.text.color); } #swtRSS { arka plan rengi: $(swtR.background.color); renk: $(swtR.text.color); } #swtRSS:hover { arka plan rengi: $(swtR.hover.background.color); renk: $(swtR.hover.text.color); } #swtYouTube { arka plan rengi: $(swtY.background.color); renk: $(swtY.text.color); } #swtYouTube:hover { arka plan rengi: $(swtY.hover.background.color); renk: $(swtY.hover.text.color); }

Şimdi tıklayın Şablonu kaydet ve keyfini çıkarın!

Gitmek Şablon sekmesini tekrar tıklayın ve tıklayın Özelleştirmek Blogger Şablon Tasarımcısı’nı açmak için düğmesine basın. şimdi seç Gelişmiş soldan.

Oradan, ilgili SWT Sosyal Profil düğmelerini yani, seçebilecek ve özelleştirebileceksiniz. SWT-Facebook, SWT-Twitter, SWT-YouTube vb. metin renkleri Ve arka plan renkleri tercih ettiğiniz gibi ve blogger blogunuz için uygun.