Blogger İçin Flat Sosyal Medya Butonları

Blogger için Flat Design'a sahip mobil uyumlu sosyal medya butonları widgeti.

Blogger İçin Flat Sosyal Medya Butonları - Bir Blogger sahibiyseniz sosyal medya hesapları vazgeçilmezdir. Örnek verecek olursam Blogger üzerinden paylaştığınız  yazıları sosyal medyalarda paylaşabilirsiniz. Ziyaretçilerinizin sosyal medya üzerinden sizleri takip etmesi için de sosyal medya butonları eklemelisiniz. 

Tabi bu sosyal medya butonlarının göze hitap eden bir şekilde olması + bir özelliktir. Daha çok takipçi demek diyebilirim. Google amcadan bu konu ile ilgili ufak bir arama yaptığınız zaman ilkel görüntülü sosyal medya butonlarına erişirsiniz. Görsellik açısından iyi bir sosyal medya butonları bulmak bir hayli zor diyebilirim. 

Fakat yabancı bir blog üzerinden elde ettiğim bu butonlar gerçekten de göze hitap eden ve görsellik açısından da çok iyi butonlardır. Siz de bu butonları yukarıda vermiş olduğum görselden veya blogumun sağ tarafından görerek beğendiyseniz, yazacağım adımları takip ederek elde edebilirsiniz. Lafı çok fazla uzatmadan yapmanız gerekenlere geçiyorum. Biraz ayrıntılı anlatacağım, yapabilesiniz diye :)

• Blogger ana sayfasına giderek butonları eklemek istediğiniz bloga tıklayınız.
• Daha sonra sol taraftaki menüden Şablon > HTML'yi Düzenle seçeneklerine tıklayınız.
• Ekrana gelen kodlara bir kez tıkladıktan sonra Ctrl+F tuşarına tıklayarak arama yerine ]]></b:skin> kodunu  yazıp Enter tuşuna tıklayınız.
• Aşağıdaki vermiş olduğum CSS Kodunu ]]></b:skin> kodunun bir üst satırına yapıştırınız.

CSS Kodu

.widget_social_apps{margin-left:-.5%;margin-right:-.5%}.widget_social_apps:before,.widget_social_apps:after{content:&quot; &quot;;display:table}.widget_social_apps:after{clear:both}.widget_social_apps .app_social{margin:0 .5% .5%;width:24%;float:left;text-align:center;background-color:#111;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.widget_social_apps .app_social.facebook{background-color:#3e64ad}.widget_social_apps .app_social.twitter{background-color:#58ccff}.widget_social_apps .app_social.pinterest{background-color:#de010d}.widget_social_apps .app_social.instagram{background-color:#125688}.widget_social_apps .app_social.google{background-color:#dd4b39}.widget_social_apps .app_social.linkedin{background-color:#007bb6}.widget_social_apps .app_social.flickr{background-color:#ff0084}.widget_social_apps .app_social.vine{background-color:#00bf8f}.widget_social_apps .app_social:hover{background-color:#111}.widget_social_apps .app_social a{display:block;color:#fff;padding:15px 5px}.widget_social_apps .app_social span{display:block}.widget_social_apps .app_social span.app_icon i{font-size:24px;margin-bottom:5px}.widget_social_apps .app_social span.app_count{font-weight:700;line-height:16px}.widget_social_apps .app_social span.app_type{font-size:14px;line-height:16px}

• Yukarıdaki CSS Kodunu başarılı bir şekilde yapıştırdıktan sonra Şablonu kaydet seçeneğine tıklayınız.
• Daha sonra sol taraftaki menüden Yerleşim seçeneğine tıklayınız. 
• İstediğiniz yerden Gadget Ekle yazısına tıkladıktan sonra HTML/JavaScript seçeneğine tıklayınız. 
• Başlık olarak dilediğinizi yazdıktan sonra hemen aşağısındaki boş alana aşağıda vermiş olduğum HTML Kodunu yapıştırıp Kaydet düğmesine tıklayınız.

HTML Kodu 

<div class="widget_social_apps"><div class="app_social facebook"><a href="https://www.facebook.com/" target="_blank"><span class="app_icon"><i class="fa fa-facebook"></i></span><span class="app_count">7845</span> <span class="app_type">Takipçi</span> </a></div><div class="app_social twitter"><a href="https://www.twitter.com/" target="_blank"><span class="app_icon"><i class="fa fa-twitter"></i></span><span class="app_count">32</span><span class="app_type">Takipçi</span></a></div><div class="app_social pinterest"><a href="https://www.pinterest.com/" target="_blank"><span class="app_icon"><i class="fa fa-pinterest"></i></span><span class="app_count">4774</span> <span class="app_type">Takipçi</span> </a></div><div class="app_social instagram"><a href="https://www.instagram.com/" target="_blank"><span class="app_icon"><i class="fa fa-instagram"></i></span><span class="app_count">65684</span> <span class="app_type">Takipçi</span> </a></div><div class="app_social google"><a href="https://www.google.com/" target="_blank"><span class="app_icon"><i class="fa fa-google-plus"></i></span><span class="app_count">65684</span> <span class="app_type">Takipçi</span> </a></div><div class="app_social linkedin"><a href="https://www.linkedin.com/" target="_blank"><span class="app_icon"><i class="fa fa-linkedin"></i></span><span class="app_count">65684</span> <span class="app_type">Takipçi</span> </a></div><div class="app_social flickr"><a href="https://www.flickr.com/" target="_blank"><span class="app_icon"><i class="fa fa-flickr"></i></span><span class="app_count">44</span><span class="app_type">Takipçi</span></a></div><div class="app_social vine"><a href="https://www.vine.com/" target="_blank"><span class="app_icon"><i class="fa fa-vine"></i></span> <span class="app_count">574</span> <span class="app_type">Takipçi</span> </a></div></div>

ÖNEMLİ: Eğer blogunuzda tüm işlemleri yaptığınız halde sosyal medya butonları gözükmüyor ise <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/> kodunu </head> kodunun bir üst satırına yapıştırdıktan sonra kaydediniz.

Böylece blogunuz bu güzel sosyal medya butonlarına sahip olacaktır. Yapamadığınız durumlarda ve sorularınız olduğunda yorum yapmaktan çekinmeyiniz. 

NOT: HTML Kodu içerisindeki kalın gösterdiğim; Takipçi yazısı, takipçi sayısı ve sosyal medya adreslerini kendinize göre değiştirebilirsiniz.