Blogger İçin Sosyal Medya Widget'ı

Bir kişisel bloga sahipseniz, kullanmanız gereken widgetlardan birisi de sosyal medyadır. Böylelikle ziyaretçilerinize sosyal medya hesaplarınızı sunar ve takip etmeye teşvik edersiniz. İşte ben de sizlere görünümü güzel bir sosyal medya hesaplarınızı gösteren widget paylaşıyorum. Üstelik bu widget üzerinde takipçi sayılarınızı da görüntüleyebileceksiniz.

Yazıma devam etmeden öncesi bu sosyal medya widgetinin nasıl gözüktüğü ile ilgili bir önizleme linki paylaşayım.

• Önizleme

Nasıl göründüğüne göz attıktan sonra, blogunda kullanmak isteyenler yazımı okumaya devam edebilirler. Geçeyim mi nasıl kullanabileceğinize?

• Blogger kullanıcı panelinde bulunan Şablon ve HTML'yi düzenle seçeneklerine tıklayın. 
• Karşınıza gelen kodların bulunduğu alana tıklayın ve klavyenizden Ctrl + F tuşlarına tıklayın.
• Karşınıza gelen arama ekranına ]]></b:skin> yazıp Enter tuşuna tıklayın.
• ]]></b:skin> kodunun bir üst satırına aşağıda bulunan CSS kodunu yapıştırın.

CSS/* Social Media with counter by www.bloggerspice.com */
.list-unstyled {
  padding-left: 0;
  list-style: none;
  margin: 2px
}

.list-inline li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
  margin-bottom: 10px
}

.bs-colored-social .fa,
.bs-social-icons .fa {
  font-size: 16px
}

.bs-colored-social .fa,
.bs-social-icons .fa {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out
}

.bs-colored-social .fa,
.bs-social-icons .fa {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #FFF;
  color: rgba(255, 255, 255, 0.8)
}

.bs-colored-social.icon-circle .fa,
.bs-social-icons.icon-circle .fa {
  border-radius: 50%
}

.bs-colored-social.icon-rounded .fa,
.bs-social-icons.icon-rounded .fa {
  border-radius: 2px
}

.bs-colored-social.icon-flat .fa,
.bs-social-icons.icon-flat .fa {
  border-radius: 0
}

.bs-colored-social .fa:hover,
.bs-colored-social .fa:active,
.bs-social-icons .fa:hover,
.bs-social-icons .fa:active {
  color: #FFF
}

.bs-colored-social.icon-zoom .fa:hover,
.bs-colored-social.icon-zoom .fa:active,
.bs-social-icons.icon-zoom .fa:hover,
.bs-social-icons.icon-zoom .fa:active,
.bs-social-sidebar li:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1)
}

.bs-colored-social.icon-rotate .fa:hover,
.bs-colored-social.icon-rotate .fa:active,
.bs-social-icons.icon-rotate .fa:hover,
.bs-social-icons.icon-rotate .fa:active {
  -webkit-transform: scale(1.1) rotate(360deg);
  -moz-transform: scale(1.1) rotate(360deg);
  -ms-transform: scale(1.1) rotate(360deg);
  -o-transform: scale(1.1) rotate(360deg);
  transform: scale(1.1) rotate(360deg)
}

.bs-colored-social .fa-dribbble,
.bs-social-icons .fa-dribbble:hover,
.bs-socialicons .bs-dribbble:hover .bs-sicon {
  background-color: #F46899
}


.bs-colored-social .fa-stumbleupon,
.bs-social-icons .fa-stumbleupon:hover,
.bs-socialicons .bs-stumbleupon:hover .bs-sicon {
  background-color: #eb4924
}

.bs-colored-social .fa-reddit,
.bs-social-icons .fa-reddit:hover {
  background-color: #5f99cf
}

.bs-colored-social .fa-facebook,
.bs-social-icons .fa-facebook:hover,
.bs-socialicons .bs-facebook:hover .bs-sicon {
  background-color: #3C599F
}

.bs-colored-social .fa-rss,
.bs-social-icons .fa-rss:hover,
.bs-socialicons .bs-rss:hover .bs-sicon {
  background-color: #f26522
}

.bs-colored-social .fa-flickr,
.bs-social-icons .fa-flickr:hover,
.bs-socialicons .bs-flickr:hover .bs-sicon {
  background-color: #d51007
}

.bs-colored-social .fa-flickr,
.bs-social-icons .fa-flickr:hover {
  background-color: #FF0084
}

.bs-colored-social .fa-instagram,
.bs-social-icons .fa-instagram:hover,
.bs-socialicons .bs-instagram:hover .bs-sicon {
  background-color: #685243
}

.bs-colored-social .fa-foursquare,
.bs-social-icons .fa-foursquare:hover,
.bs-socialicons .bs-foursquare:hover .bs-sicon {
  background-color: #0086BE
}

.bs-colored-social .fa-github,
.bs-social-icons .fa-github:hover,
.bs-socialicons .bs-github:hover .bs-sicon {
  background-color: #070709
}

.bs-colored-social .fa-google-plus,
.bs-social-icons .fa-google-plus:hover,
.bs-socialicons .bs-googleplus:hover .bs-sicon {
  background-color: #CF3D2E
}

.bs-colored-social .fa-instagram,
.bs-social-icons .fa-instagram:hover {
  background-color: #A1755C
}

.bs-colored-social .fa-linkedin,
.bs-social-icons .fa-linkedin:hover,
.bs-socialicons .bs-linkedin:hover .bs-sicon {
  background-color: #0085AE
}

.bs-colored-social .fa-pinterest,
.bs-social-icons .fa-pinterest:hover,
.bs-socialicons .bs-pinterest:hover .bs-sicon {
  background-color: #CC2127
}

.bs-colored-social .fa-twitter,
.bs-social-icons .fa-twitter:hover,
.bs-socialicons .bs-twitter:hover .bs-sicon {
  background-color: #32CCFE
}

.bs-colored-social .fa-vk,
.bs-social-icons .fa-vk:hover,
.bs-socialicons .bs-vk:hover .bs-sicon {
  background-color: #375474
}

.bs-colored-social .fa-soundcloud,
.bs-social-icons .fa-soundcloud:hover,
.bs-socialicons .bs-soundcloud:hover .bs-sicon {
  background-color: #FF4100
}

.bs-colored-social .fa-vine,
.bs-social-icons .fa-vine:hover,
.bs-socialicons .bs-vine:hover .bs-sicon {
  background-color: #35B57C
}


.bs-colored-social .fa-youtube,
.bs-social-icons .fa-youtube:hover,
.bs-socialicons .bs-youtube:hover .bs-sicon {
  background-color: #C52F30
}

.top-social ul li {
  margin: 0;
  padding: 0
}

div#socialicons-top {
  float: left
}

.top-social .list-unstyled {
  margin: 0
}

.bs-socialicons {
  text-align: center;
  overflow: auto;
  font-size: 22px;
  margin: 0 -8px
}

.bs-socialicons .bs-socialInner {
  position: relative;
  overflow: hidden;
  padding-left: 8px
}

.bs-socialicons .bs-social {
  float: left;
  width: 25%
}

.bs-socialicons .bs-sinn {
  padding-right: 8px
}

.bs-socialicons .bs-sinn:hover .bs-sicon {
  color: #fff
}

.bs-socialicons .bs-sicon {
  display: block;
  padding: 10px 0;
}

.bs-socialicons .bs-facebook .bs-sicon {
  color: #3B5998
}

.bs-socialicons .bs-googleplus .bs-sicon {
  color: #DD4B39
}

.bs-socialicons .bs-twitter .bs-sicon {
  color: #2AA9E0
}

.bs-socialicons .bs-instagram .bs-sicon {
  color: #685243
}

.bs-socialicons .bs-pinterest .bs-sicon {
  color: #CC2028
}

.bs-socialicons .bs-youtube .bs-sicon {
  color: #DE1829
}

.bs-socialicons .bs-vine .bs-sicon {
  color: #35B57C
}

.bs-socialicons .bs-soundcloud .bs-sicon {
  color: #FF4100
}

.bs-socialicons .bs-vk .bs-sicon {
  color: #45668e
}

.bs-socialicons .bs-foursquare .bs-sicon {
  color: #f94877
}

.bs-socialicons .bs-github .bs-sicon {
  color: #333333
}

.bs-socialicons .bs-dribbble .bs-sicon {
  color: #ea4c89
}

.bs-socialicons .bs-stumbleupon .bs-sicon {
  color: #eb4924
}

.bs-socialicons .bs-linkedin .bs-sicon {
  color: #0085AE
}

.bs-socialicons .bs-rss .bs-sicon {
  color: #f26522
}

.bs-socialicons .bs-flickr .bs-sicon {
  color: #FF0084
}

.bs-socialicons .bs-sicon {
  background: #F5F5F5;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease
}

.bs-socialicons .bs-scount {
  display: block;
  color: #FFFFFF;
  background: #007ABE;
  padding: 5px 0;
  position: relative;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600
}

.bs-socialicons .bs-scount:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(238, 238, 238, 0);
  border-bottom-color: #007ABE;
  border-width: 4px;
  margin-left: -4px
}

.bs-socialicons .bs-scount:hover {
  background: #222222;
}

• Bu kod alanıyla işiniz bitti artık. Şimdi Blogger panelinin sol kısmında bulunan Yerleşim seçeneğine tıklayın ve hemen ardından bu sosyal medya eklentisini eklemek istediğiniz yerde bulunan Gadget Ekle seçeneğine tıklayın.
• Karşınıza gelen ekrandan HTML/Javascript seçeneğini işaretleyip, aşağıdaki kodları yapıştırınız.

HTML<div class="bs-socialicons">
<div class="bs-socialInner">
  <!--Facebook-->
    <div class="bs-social">
  <div class="bs-facebook bs-sinn">
      <a href='#' target='_blank' tibse="Facebook">
      <span class="bs-sicon"><i class="fa fa-facebook"></i></span>
      <span class="bs-scount">3.1K</span>
      </a>
      </div>
      </div>
  <!--Google Plus-->
    <div class="bs-social">
  <div class="bs-googleplus bs-sinn">
      <a href='#' target='_blank' tibse="Google Plus">
      <span class="bs-sicon"><i class="fa fa-google-plus"></i></span>
      <span class="bs-scount">2K</span>
      </a>
    </div>
    </div>
  <!--Twitter-->
  <div class="bs-social">
  <div class="bs-twitter bs-sinn">
      <a href='#' target='_blank' tibse="Twitter">
      <span class="bs-sicon"><i class="fa fa-twitter"></i></span>
      <span class="bs-scount">1.4K</span>
      </a>
    </div>
    </div>
  <!--Instagram-->
  <div class="bs-social">
  <div class="bs-instagram bs-sinn">
      <a href='#' target='_blank' tibse="Instagram">
      <span class="bs-sicon"><i class="fa fa-instagram"></i></span>
      <span class="bs-scount">2K</span>
      </a>
    </div>
    </div>
  <!--Pinterest-->
  <div class="bs-social">
  <div class="bs-pinterest bs-sinn">
      <a href='#' target='_blank' tibse="Pinterest">
      <span class="bs-sicon"><i class="fa fa-pinterest"></i></span>
      <span class="bs-scount">4.5K</span>
      </a>
    </div>
    </div>
  <!--Youtube-->
  <div class="bs-social">
  <div class="bs-youtube bs-sinn">
      <a href='#' target='_blank' tibse="YouTube">
      <span class="bs-sicon"><i class="fa fa-youtube"></i></span>
      <span class="bs-scount">2.8K</span>
      </a>
    </div>
    </div>
  <!--Vine-->
  <div class="bs-social">
  <div class="bs-vine bs-sinn">
      <a href='#' target='_blank' tibse="Vine">
      <span class="bs-sicon"><i class="fa fa-vine"></i></span>
      <span class="bs-scount">3.3K</span>
      </a>
    </div>
    </div>
  <!--SoundCloud-->
  <div class="bs-social">
  <div class="bs-soundcloud bs-sinn">
      <a href='#' target='_blank' tibse="SoundCloud">
      <span class="bs-sicon"><i class="fa fa-soundcloud"></i></span>
      <span class="bs-scount">3.9K</span>
      </a>
    </div>
    </div>
    
      <!--VK-->
      <div class="bs-social">
  <div class="bs-vk bs-sinn">
      <a href='#' target='_blank' tibse="VK">
      <span class="bs-sicon"><i class="fa fa-vk"></i></span>
      <span class="bs-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!---->
      <div class="bs-social">
  <div class="bs-foursquare bs-sinn">
      <a href='#' target='_blank' tibse="Foursquare">
      <span class="bs-sicon"><i class="fa fa-foursquare"></i></span>
      <span class="bs-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!--GitHub-->
      <div class="bs-social">
  <div class="bs-github bs-sinn">
      <a href='#' target='_blank' tibse="GitHub">
      <span class="bs-sicon"><i class="fa fa-github"></i></span>
      <span class="bs-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!--Dribbble-->
      <div class="bs-social">
  <div class="bs-dribbble bs-sinn">
      <a href='#' target='_blank' tibse="Dribbble">
      <span class="bs-sicon"><i class="fa fa-dribbble"></i></span>
      <span class="bs-scount">3.9K</span>
      </a>
    </div>
    </div>
    
     <!--Stumbleupon-->
      <div class="bs-social">
  <div class="bs-stumbleupon bs-sinn">
      <a href='#' target='_blank' tibse="Stumbleupon">
      <span class="bs-sicon"><i class="fa fa-stumbleupon"></i></span>
      <span class="bs-scount">3.4K</span>
      </a>
    </div>
    </div>

     <!--Linkedin-->
      <div class="bs-social">
  <div class="bs-linkedin bs-sinn">
      <a href='#' target='_blank' tibse="Linkedin">
      <span class="bs-sicon"><i class="fa fa-linkedin"></i></span>
      <span class="bs-scount">1.5K</span>
      </a>
    </div>
    </div>

     <!--Rss-->
      <div class="bs-social">
  <div class="bs-rss bs-sinn">
      <a href='#' target='_blank' tibse="Rss">
      <span class="bs-sicon"><i class="fa fa-rss"></i></span>
      <span class="bs-scount">1.9K</span>
      </a>
    </div>
    </div>

     <!--Flickr-->
      <div class="bs-social">
  <div class="bs-flickr bs-sinn">
      <a href='#' target='_blank' tibse="flickr">
      <span class="bs-sicon"><i class="fa fa-flickr"></i></span>
      <span class="bs-scount">2.9K</span>
      </a>
    </div>
    </div>

    </div>
</div>
</div>

Eğer her şeyi düzgün bir şekilde yaptıysanız ve eklenti düzgün bir şekilde gözükmediyse, büyük bir ihtimal blogunuzda Font Awesome kodları bulunmamaktadır. Son olarak onları bir ekleyin derim, mahrum kalmasınlar. Hemen kısaca son olarak yapmanız gerekenlere geçeyim ben.

• Soldaki menüden Şablon ve daha sonra HTML'yi düzenle seçeneklerine tıklayın. 
• Kodların bulunduğu alana bir kez tıklayın ve ardından klavyenizden Ctrl + F tuşlarına tıklayın. 
• Gelen arama ekranına ise </head> yazıp Enter tuşuna tıklayın. 
• Artık son ve son olarak </head> kodunun bir üst satırına aşağıdaki kodu yapıştırıp kaydedin.

JS<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Artık olmama gibi bir lüksü yok. Kendim de denedim, gayet başarıı bir şekilde çalışıyor. Ha derseniz ki "Ben yapamadım, bana bir yardım ediver." o zaman elimden geldiğince yardımcı olurum. Peki sizler bu eklenti hakkında neler düşünüyorsunuz? Beğendiniz mi?

Blogger'ı Daha Kullanışlı Hale Getiren 6 Adet Google Chrome Eklentisi

Blogger kullanırken kolaylık sağlayan 6 adet eklentiyi derledim ve sizler için paylaşıyorum. Bu eklentileri kullanmaya başladıktan sonra çok faydasını göreceğinizden eminim. Google Chrome üzerinde kullanabileceğiniz bu eklentileri Chrome Web Mağazası'ndan indirebilirsiniz. Belki de aranızdan bazıları bu tip eklentilere ihtiyacı vardır diye düşünüyorum ve hemen eklentilere geçiyorum, bakalım beğenecek misiniz?

1. Alexa Traffic Rank

Alexa daha önceden aşina olduğunuz bir hizmet olabilir belki de. Alexa, Dünya üzerinde bulunan siteleri tek tek analiz ederek sıralayan bir hizmettir. Bu eklenti sayesine ziyaret ettiğiniz her sitenin yerel ve global olarak hangi sırada olduğunu öğrenebilirsiniz. Ayrıca sitenizin toplam (her domainden bir adet olmak üzere) backlinkini görebilirsiniz. Görüntülemek için Google Chrome tarayıcısının sağ üst kısmında beliren Alexa butonuna tıklamanız yeterlidir. Alexa Traffic Rank'ı aşağıda bulunan indirme butonuna tıklayarak indirebilirsiniz.

Kişisel Blogumun Alexa İstatistikleri

[##cloud-download## Eklentiyi İndir]

2. Checker Plus for Gmail™

Bu eklentiyi yalnızca Blogger kullananlar değil, bütün herkesin kullanması gerekir. Neden mi? Hemen şöyle izah edeyim. Checker Plus for Gmail™, Gmail hesabınıza gelen iletileri Google Chrome üzerinden eşzamanlı olarak bildirim şeklinde gösterir. Ayrıca eklenti kısayolunda toplam okunmayan mail sayınız gözükür ve kısayola tıklayarak bu mailleri hızlı  bir şekilde görüntüleyebilirsiniz. Bu da yanıtlama sürenizi kısaltır ve işlerinizi daha çabuk halledebilirsiniz. 

Diyelim ki bir yazı paylaştınız ve yorum formundan bildirimleri açtınız. Daha sonra bir ziyaretçi yazınızı yorumladı. Bildirimleri açtığınızdan dolayı bu yorum Gmail hesabınıza bildirim olarak gelir. İşte bu eklentiyi kullandığınız taktirde gelen bildirimi anında açacak ve yorumu hızlı bir şekilde yanıtlayabileceksiniz. Bu durum belki de ziyaretçinizi bir nebze de olsa sevindirecektir diye düşünüyorum. Checker Plus for Gmail™'i aşağıda bulunan indirme butonuna tıklayarak indirebilirsiniz.

Checker Plus for Gmail™'den bir ekran görüntüsü

[##cloud-download## Eklentiyi İndir]

3. WhatFont

Herhangi bir siteyi ziyaret ettiğinizde gözünüze çarpan yazı fontunun ismini öğrenmek ister miydiniz? WhatFont sayesinde herhangi bir sitedeki yazı fontunun ismini öğrenebilirsiniz. Eklentiyi indirdikten sonra sağ üst tarafta bulunan WhatFont kısayoluna tıkladıktan sonra öğrenmek istediğiniz yazı fontunun üzerine mouse ile gelerek öğrenebilirsiniz. İşinizi bitirdikten sonra ise sağ üstte bulunan "Exit WhatFont" seçeneğine tıklayın. Son olarak WhatFont'u aşağıda bulunan indirme butonuna tıklayarak indirebilirsiniz.

Kişisel Blogumun Yazı Fontu: Didact Gothic

[##cloud-download## Eklentiyi İndir]

4. Woorank: SEO & Website Analysis

Çok kapsamlı bir SEO analiz hizmetidir. Bu sayede istediğiniz her sitenin SEO analiz istatistiklerini görebilirsiniz. Bu SEO analizinde: mobil uyumluluk, meta etiketleri ve açıklaması, kelime analizi, sayfa hızı ve daha bunun gibi bir çok ayrıntı mevcuttur. (Kullandıktan sonra birçok yanlışımı fark ettim, kısa süre içerisinde düzelteceğim.) Bu sayede eksikliklerinizi görüp düzeltme imkanınız olabilir.

Ayrıntılı bir şekilde analiz edip puanlaması ve Alexa gibi sitenizin yerel ve global sıralamasını göstermesi çok iyi olmuş. Tek kötü yanı ise Türkçe dil desteği olmaması. O kadar kusur kadı kızında da var diyelim ve boş verelim. Eklentiyi indirdikten sonra sağ üst kısımda bulunan "Woorank" kısayoluna tıklayın. Bir kaç saniye içerisinde bulunduğunuz sitenin ayrıntılı olarak analizini yapacak ve neyin doğru neyin yanlış olduğunu bildirecektir. Woorank: SEO & Website Analysis'i aşağıda bulunan indirme butonuna tıklayarak indirebilirsiniz.

Kişisel Blogumun SEO Puanı

[##cloud-download## Eklentiyi İndir]

5. Social Meter

Siteler üzerinde bulunan sayfa ve yazıların toplam kaç kez hangi sosyal medyada paylaşıldığını gösteren bir eklentidir. Böylece tek bir tıklama ile Facebook, Twitter, Pinterest, LinkedIn, StumbleUpon, VK, Reddit ve Buffer sosyal medyalarında paylaşılan yazılarınızın paylaşım istatistiklerine erişebilirsiniz. Örneğin; Google+ için: toplam +1 sayısı, Facebook için: toplam beğenme, paylaşma ve yorum sayıları gibi. Eklentiyi kullanmak için tek yapmanız gereken şey eklentiyi indirdikten sonra sağ üstte bulunan Social Meter kısayoluna tıklamaktır. Daha da başka bir özelliği olmayan Social Meter'ı aşağıda bulunan indirme butonuna tıklayarak indirebilirsiniz.

Blog Keşif Etkinliği vol ∞

[##cloud-download## Eklentiyi İndir]

6. Word Count

Bu eklenti sayesinde kopyaladığınız yazının toplam kaç kelime olduğunu öğrenebilirsiniz. Site üzerinde bulunan yazıların SEO açısından 250 kelime yukarısı olması gerektiği için bu eklenti işinize yarayabilir. Çünkü Google 250 kelime aşağısını değersiz olarak görüyor. Hal böyle olunca bu eklenti ile yazdığınız yazının kaç kelime olduğunu görebilir, eğer eksik ise birkaç cümle daha ekleyerek kelime sayısını artırabilirsiniz. Yapmanız gereken şey ise eklentiyi yükledikten sonra yazılan tüm yazıyı kopyalayıp sağ tıkladıktan sonra "Count Words" seçeneğini işaretlemenizdir. Word Count'ı aşağıda bulunan indirme butonuna tıklayarak indirebilirsiniz.

Kişisel Blogumda Bulunan Bir Yazının Toplam Kelime Sayısı

[##cloud-download## Eklentiyi İndir]

Son Sözler

Kendimce faydalı bulduğum ve sizlere de faydası olacağını düşündüğüm 6 adet Google Chrome eklentisini paylaştım. Umarım ki aralarından bir tanesi bile işinizi görür ve bu yazımdan sonra kullanmaya başlarsınız. Belki de aranızdan bazıları bu eklentilerden birini veya birkaçını kullanıyordur.

Peki sizler bu eklentiler hakkında ne düşünüyorsunuz?