Makyaj Blogu Yazmanın İpuçları : Kız İşi Sosyal Medya İkonları

makyaj blogu yazmanin ipuclari kiz isi sosyal medya ikonlari

Makyaj Blogu Yazmanın İpuçları yazı dizimin bu seferki konusu küçük ama olmazsa olmaz ayrıntı olan sosyal medya ikonları ve onları blog sayfamıza kolayca nasıl yerleştireceğimiz üzerine. Sosyal medya ikonları, internet sitelerinin en gerekli butonları. Çünkü siteler artık sosyal medya gücünün çok farkında. Sosyal medyadan beslenen bir sitede sosyal medya ikonlarının olmaması imkansız. Bloglarda da bu durum son derece önemli.

Benim sizlerle paylaşıyor olduğum ikonlar, internet dünyasında sürekli karşımıza çıkanlardan biraz daha farklı. Farklıdan kast ettiğim bu sosyal medya ikonların "girly" havada olması. Yani kız işi. Simli, altın renkli, pembe ikonlar daha kız işi durduğu için böyle isimlendirmek istedim. İlk bölümde yer alan sosyal medya ikonlarının tamamen Miskin Kek Blog Tasarımlı olduğu için internette hiçbir yerde bulamazsınız. Hatta bu tarz sosyal medya ikonlarının %95 'i satış amaçlı web sitelerinde (örneğin Etsy gibi) satışa konuluyor. Ben sizler için ücretsiz olarak sunuyorum. Üstelik kodlarının hiçbirisinde reklam yok. Bununla birlikte hafif soluk efekt veren ufak bir stil de yüklü. Her bir sosyal medya butonu, blogdan hariç ayrı sayfada açılıyor ki böylece blog izleyicinizi blogdan göndermemiş oluyorsunuz. Ayrıca sosyal medya ikonlarını blog sayfasına yüklemek çok basit, blog şablonuyla uğraşmanıza da hiç gerek kalmıyor. Çünkü bu sosyal medya ikonlarını, sadece "widget ekle" kısmından eklenebilme kolaylığında hazırladım. Kodların değiştirebilir kısımları da size anlatacağım ki kendi isteğinize göre blog sayfanızda rahatlıkla değiştirebilin.

Her bir sosyal medya sitesinin kendine özel simgesi vardır. Örneğin Facebook sadece f harfi iken, Instagram ise retro kamera simgesindedir. Böyle olması, o sosyal medyayı kullananlar adına hatırlatıcı olduğundan bloglar dahil tüm internet sitelerinde küçük simgesel şeklinde kullanılmaktadır. Eminim ki çoğunuz bu simgelerin neler olduğunu biliyorsunuzdur ama yine de ufak şekilde açıklamam gerekirse :

g+ ....... Google+ Sayfası

f ....... Facebook Sayfası

P ....... Pinterest Sayfası

Uçan Kuş İşareti....... Twitter Sayfası

Retro Fotoğraf Makine İşareti ....... Instagram Sayfası

+ veya bl veya kalp (♥) ....... Bloglovin Sayfası

Y veya Youtube kelimesi ....... Youtube Sayfası

Nokta Çevresindeki 2 Çizgi İşareti....... RSS Sayfası

in kelimesi ....... Linkedin Sayfası

Zarf İşareti ....... Mail/İletişim

Bu sosyal medyalar illa ki bu şekilde simgelenecek diye bir kaide yok ama böyle olması çoğunluk tarafından benimsendiği için bu şekilde kullanmanızı öneririm. İçlerinde en değişken olan Bloglovin simgesi. Çünkü Bloglovin, hem kalp işareti, hem artı (+) işareti hem de BL sözcüğü ile ifade edilebiliyor. (Bloglovin şu an için Türkiye 'den girişi yasaklanıldı ama umarım bu bir an önce düzelir ve tekrar eskisi gibi kolaylıkla girebiliriz) Elbette burada verdiklerim arasında sosyal medya olmayan unsurlar da var. Örneğin Rss denilen, bir sosyal medya değildir. Sayfamızın özetini sağlayan bir bildirimcidir. Yine aynı şekilde mail kısmı da bir sosyal medya sitesi değildir. Ben blogda ufak bir iletişim kısmı oluşturdum. O kısıma yönlendiriyorum. Siz de o şekilde yapabilirsiniz.

Önemli Notlar :

1- "Miskin Kek Blog Tasarımlı Sosyal Medya İkonları" şeklinde sıraladığım sosyal medya simgelerinin boyutlarını rahat değiştirebilin diye orijinal resim boyutlarını biraz büyükçe yaptım. Çünkü büyük kullanmak isteyenlerde çözünürlük sorunu yaşanmasını istemedim.

2- "Web Sitelerindeki Hazır Sosyal Medya İkonları" kısmında sıraladıklarım ise birçok tasarım sitesinden derlediklerim oldu. O kısımda yer alanları büyük kullanmak isterseniz deneye yanıla ayarlayın. Çünkü resimlerin çözünürlükleri bozulabilir. Burada yer alan çoğu resim .rar uzantılı dosyalar halinde olduğu için ben tek tek indirip, bir upload sitesinde yeni baştan upload edip koda yerleştirdim. Böylece sizi, başkalarının gizlice reklamı yaptığı kodlarıdan kurtarmak istedim. Birçok internet sitesi kod paylaşırken kendi blog veya site isimlerini de koda yazıyorlar ki reklamları dönsün. Bu yüzden benim verdiklerimi güvenerek kullanın. Her biri benim uploadım olup içinde en ufak bir reklam bulunmamaktadır.

3- Her tarz blog faydalanabilsin diye bu konuda yer alan kimi sosyal medya ikonları pastel renklerde, kimisi canlı görünümünde, kimisi yuvarlak formda, kimisi kare, kimisi ise daha farklı simgelerde. Sosyal medya ikonlarının hepsine ayrı ayrı soluklaştırma efekti ekledim. Fare (mouse) ile ikonların üzerine gelindiğinde soluklaşıyor. Ben blogda böyle küçük ayrıntıları çok zarif bulduğum için sizlerin de böyle kullanmasını öneririm.

4- Blogunuzda buna benzer bir konu yapıp olduğu gibi burada tek tek hazırladıklarımı alma niyetiniz var ise, ilk bölümde yer alan tasarımları konunuzda blog sayfamın linkini de yazarak paylaşmanızı rica ediyorum. Aksi halde tesüflerimi erinmeden sunarım.

5- Yapamadığınız noktaları veya olumlu/olumsuz dile getirmek istediğiniz hususları, bu konuya yorum olarak bırakabilirsiniz. Bu tarz sorularınızı mail olarak yazmak yerine sormak istediklerinizi direkt olarak konularda sormanız daha hızlı cevap almanızı sağlar.

Sosyal medya ikonlarını bloga adım adım eklemek :

makyaj blogu yazmanin ipuclari kiz isi sosyal medya ikonlari

1-) Blog panelinizden "Yerleşim" kısmına giriyoruz. Orada Gadget Ekle kısmına tıklıyoruz.

2-) Gadget (widget) menüsünden HTML/JavaSciript olanı seçiyoruz.

3-) Daha sonra bu konuda beğendiğiniz sosyal medya ikonlarını hangisi olacağına karar veriyorsunuz. Sosyal medya ikonlarını gördüğünüz gibi gruplandırdım. Her bir grubun altında bir kutucuğun içerisine kodları yazdım. Oradaki kodları kopyalayıp gadgetteki javascript bölümüne yapıştırıyorsunuz. Kaydet diyerek blogunuza ekliyorsunuz. Bu kadar kolay.

Değiştirebilir Kısımlar :

<a href= kodundan sonraki kısımlarında gelmesini istediğiniz sosyal medya hesabınızı yazın. Ben zaten kolayca yapabilin diye hangi sosyal medya geleceğiniz belirttim. Örneğin Facebook bölümüne "facebook-adresiniz" veya Instagram bölümüne "instagram-sayfaniz" şeklinde. Oraları kendi sosyal medya hesaplarınıza göre değiştirmelisiniz. Sosyal medya hesaplarınızın linkini, internet tarayıcınızın en üst kısmında yer alan adres bölümünü kopyalarak alabilirsiniz. Örneğin benim sosyal medya hesaplarımın tarayıcıda görünen şekli:

makyaj blogu yazmanin ipuclari kiz isi sosyal medya ikonlari

Kullanmayacağınız sosyal medya iconların kodunu silin. Ben zaten kod karışıklığı yaşayıp vakit kaybetmeyin diye tüm kodların başlangıç ve bitimini ayırdım. Her sosyal medya ikon kodu başlarken  ve biterken  yazdım. Örneğin sizin Youtube hesabınız yok ve bu ikon yer almasın istiyorsunuz, o halde  ile başlayan ve birkaç satır sonrası biten  kısmı olduğu gibi silmelisiniz.

makyaj blogu yazmanin ipuclari kiz isi sosyal medya ikonlari

Miskin Kek Blog Tasarımlı Sosyal Medya İkonları bölümündeki ikonların hepsi 100px boyutundadır. Yani bu demek oluyor ki, bir ikona göre oldukça büyük boyuttalar (PX boyutu belirtir). Böyle olmasının sebebi büyük kullanmak isteyenlere çözünürlük bozulmasını yaşatmasın istedim. Ben ilk ikon setini 3 farklı boyutta ayrı ayrı yer verdim. Sonrasını ise ikişerli boyut farkıyla paylaştım.

Eğer siz kendi blogunuzun oranına göre büyüklük küçüklük oranını sağlayacaksanız, kodlarda yazan height ve width kısımlarıyla oynama yapmalısınız. Height yükseklik ifadesidir, width ise genişlik. Örneğin benim kod içerisinde yazdığım height="80px" ise ve siz bunu çok küçük kullanmak istiyorsanız height="30px" değerine küçültmelisiniz. Tabii hangi oranda height rakamını küçültüyorsanız, width ayarı da o oranda küçültülmeli. Burada paylaştığım sosyal medya ikonlarının son 2'si hariç hepsinin, width ve height değerleri birbiri ile aynı rakamda. Son 2 'si ise dikdörtgen formda sosyal medya ikon tasarımı olduğu için width ayarı daha yüksek.

Miskin Kek Blog Tasarımlı Sosyal Medya İkonları

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Web Sitelerindeki Hazır Sosyal Medya İkonları

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<center><br /><br /><br /> <div id="social"> <a href="http://google-sayfaniz/" target="_blank" title="Google+ "><img alt="Icon" border="0" src="http://i.imgur.com/MvB5hJX.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://facebook-adresiniz/" rel="nofollow" target="_blank" title="Facebook"><img alt="Icon" border="0" src="http://i.imgur.com/VtDHno6.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://twitter-sayfaniz/" rel="nofollow" target="_blank" title="Twitter"><img alt="Icon" border="0" src="http://i.imgur.com/6bh4dvq.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://instagram-sayfaniz/" rel="nofollow" target="_blank" title="Instagram"><img alt="Icon" border="0" src="http://i.imgur.com/0AqtRKn.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://rss-adresiniz/" rel="nofollow" target="_blank" title="RSS"><img src="http://i.imgur.com/DS058kE.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://pinterest-sayfaniz/" rel="nofollow" target="_blank" title="Pinterest"><img alt="Icon" border="0" src="http://i.imgur.com/pejiAFb.png" height="60px" style="margin-right: 1px;" width="60px" /></a>   <a href="http://youtube-sayfaniz/" rel="nofollow" target="_blank" title="Youtube"><img alt="Icon" border="0" src="http://i.imgur.com/DhtNneF.png" height="60px" style="margin-right: 1px;" width="60px" /></a>  </div></center><br /><style> #social a:hover {  background-color: transparent;  opacity:0.7;  }  #social img {  -moz-transition: all 0.8s ease-in-out;  -webkit-transition: all 0.8s ease-in-out;  -o-transition: all 0.8s ease-in-out;  -ms-transition: all 0.8s ease-in-out;  transition: all 0.8s ease-in-out;  }  #social img:hover {  } </style>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<center> <div id="social"> <a href="http://google-sayfaniz/" target="_blank" title="Google+ "><img alt="Icon" border="0" src="http://i.imgur.com/G6ddTwg.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://facebook-adresiniz/" rel="nofollow" target="_blank" title="Facebook"><img alt="Icon" border="0" src="http://i.imgur.com/I7lwTRu.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://twitter-sayfaniz/" rel="nofollow" target="_blank" title="Twitter"><img alt="Icon" border="0" src="http://i.imgur.com/hvgPzsd.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://instagram-sayfaniz/" rel="nofollow" target="_blank" title="Instagram"><img alt="Icon" border="0" src="http://i.imgur.com/FRGjucN.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://bloglovin-adresiniz/" rel="nofollow" target="_blank" title="Bloglovin"><img src="http://i.imgur.com/b3O5JWx.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://pinterest-sayfaniz/" rel="nofollow" target="_blank" title="Pinterest"><img alt="Icon" border="0" src="http://i.imgur.com/xKkODvE.png" height="60px" style="margin-right: 1px;" width="60px" /></a>   <a href="http://youtube-sayfaniz/" rel="nofollow" target="_blank" title="Youtube"><img alt="Icon" border="0" src="http://i.imgur.com/7nKT1Yy.png" height="60px" style="margin-right: 1px;" width="60px" /></a>   <a href="http://iletisim-sayfaniz/" rel="nofollow" target="_blank" title="İletişim/Mail"><img alt="Icon" border="0" src="http://i.imgur.com/WAT5PcO.png" height="60px" style="margin-right: 1px;" width="60px" /></a>  </div></center><br /><br /><br /><style> #social a:hover {  background-color: transparent;  opacity:0.7;  }  #social img {  -moz-transition: all 0.8s ease-in-out;  -webkit-transition: all 0.8s ease-in-out;  -o-transition: all 0.8s ease-in-out;  -ms-transition: all 0.8s ease-in-out;  transition: all 0.8s ease-in-out;  }  #social img:hover {  } </style>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<center> <div id="social"> <a href="http://google-sayfaniz/" target="_blank" title="Google+ "><img alt="Icon" border="0" src="http://i.imgur.com/EUIX61V.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://facebook-adresiniz/" rel="nofollow" target="_blank" title="Facebook"><img alt="Icon" border="0" src="http://i.imgur.com/uNUODSP.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://bloglovin-adresiniz/" rel="nofollow" target="_blank" title="Bloglovin"><img src="http://i.imgur.com/YZoTm5E.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://pinterest-sayfaniz/" rel="nofollow" target="_blank" title="Pinterest"><img alt="Icon" border="0" src="http://i.imgur.com/3uaelFs.png" height="60px" style="margin-right: 1px;" width="60px" /></a>   <a href="http://rss-sayfaniz/" rel="nofollow" target="_blank" title="RSS"><img alt="Icon" border="0" src="http://i.imgur.com/UDqCXiC.png" height="60px" style="margin-right: 1px;" width="60px" /></a>   <a href="http://iletisim-sayfaniz/" rel="nofollow" target="_blank" title="İletişim/Mail"><img alt="Icon" border="0" src="http://i.imgur.com/NfCDa41.png" height="60px" style="margin-right: 1px;" width="60px" /></a>  </div></center><br /><br /><br /><style> #social a:hover {  background-color: transparent;  opacity:0.7;  }  #social img {  -moz-transition: all 0.8s ease-in-out;  -webkit-transition: all 0.8s ease-in-out;  -o-transition: all 0.8s ease-in-out;  -ms-transition: all 0.8s ease-in-out;  transition: all 0.8s ease-in-out;  }  #social img:hover {  } </style>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<center> <div id="social"> <a href="http://google-sayfaniz/" target="_blank" title="Google+ "><img alt="Icon" border="0" src="http://i.imgur.com/Mox96Ph.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://facebook-adresiniz/" rel="nofollow" target="_blank" title="Facebook"><img alt="Icon" border="0" src="http://i.imgur.com/uEd6IBr.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://twitter-sayfaniz/" rel="nofollow" target="_blank" title="Twitter"><img alt="Icon" border="0" src="http://i.imgur.com/R1EZaMf.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://skype-sayfaniz/" rel="nofollow" target="_blank" title="Skype"><img alt="Icon" border="0" src="http://i.imgur.com/tinViHa.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://pinterest-sayfaniz/" rel="nofollow" target="_blank" title="Pinterest"><img alt="Icon" border="0" src="http://i.imgur.com/NuaUM0w.png" height="60px" style="margin-right: 1px;" width="60px" /></a>   <a href="http://linkedin-sayfaniz/" rel="nofollow" target="_blank" title="Linkedin"><img alt="Icon" border="0" src="http://i.imgur.com/LPEtGlN.png" height="60px" style="margin-right: 1px;" width="60px" /></a>  </div></center><br /><br /><br /><style> #social a:hover {  background-color: transparent;  opacity:0.7;  }  #social img {  -moz-transition: all 0.8s ease-in-out;  -webkit-transition: all 0.8s ease-in-out;  -o-transition: all 0.8s ease-in-out;  -ms-transition: all 0.8s ease-in-out;  transition: all 0.8s ease-in-out;  }  #social img:hover {  } </style>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<center> <div id="social"> <a href="http://google-sayfaniz/" target="_blank" title="Google+ "><img alt="Icon" border="0" src="http://i.imgur.com/pqDG06D.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://facebook-adresiniz/" rel="nofollow" target="_blank" title="Facebook"><img alt="Icon" border="0" src="http://i.imgur.com/q55SRE1.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://twitter-sayfaniz/" rel="nofollow" target="_blank" title="Twitter"><img alt="Icon" border="0" src="http://i.imgur.com/VzM1vJh.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://instagram-sayfaniz/" rel="nofollow" target="_blank" title="Instagram"><img alt="Icon" border="0" src="http://i.imgur.com/AZ0pmgC.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://bloglovin-adresiniz/" rel="nofollow" target="_blank" title="Bloglovin"><img src="http://i.imgur.com/rpe6YfG.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://pinterest-sayfaniz/" rel="nofollow" target="_blank" title="Pinterest"><img alt="Icon" border="0" src="http://i.imgur.com/Ksy091x.png" height="60px" style="margin-right: 1px;" width="60px" /></a>   <a href="http://youtube-sayfaniz/" rel="nofollow" target="_blank" title="Youtube"><img alt="Icon" border="0" src="http://i.imgur.com/7kbKsDi.png" height="60px" style="margin-right: 1px;" width="60px" /></a>   <a href="http://iletisim-sayfaniz/" rel="nofollow" target="_blank" title="İletişim/Mail"><img alt="Icon" border="0" src="http://i.imgur.com/jgzAOTT.png" height="60px" style="margin-right: 1px;" width="60px" /></a>  </div></center><br /><br /><br /><style> #social a:hover {  background-color: transparent;  opacity:0.7;  }  #social img {  -moz-transition: all 0.8s ease-in-out;  -webkit-transition: all 0.8s ease-in-out;  -o-transition: all 0.8s ease-in-out;  -ms-transition: all 0.8s ease-in-out;  transition: all 0.8s ease-in-out;  }  #social img:hover {  } </style>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<center> <div id="social"> <a href="http://google-sayfaniz/" target="_blank" title="Google+ "><img alt="Icon" border="0" src="http://i.imgur.com/t3DKuP5.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://facebook-adresiniz/" rel="nofollow" target="_blank" title="Facebook"><img alt="Icon" border="0" src="http://i.imgur.com/uGDvXxc.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://twitter-sayfaniz/" rel="nofollow" target="_blank" title="Twitter"><img alt="Icon" border="0" src="http://i.imgur.com/effdqdd.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://instagram-sayfaniz/" rel="nofollow" target="_blank" title="Instagram"><img alt="Icon" border="0" src="http://i.imgur.com/6TEKArj.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://pinterest-sayfaniz/" rel="nofollow" target="_blank" title="Pinterest"><img alt="Icon" border="0" src="http://i.imgur.com/WJvOYKN.png" height="60px" style="margin-right: 1px;" width="60px" /></a>   <a href="http://youtube-sayfaniz/" rel="nofollow" target="_blank" title="Youtube"><img alt="Icon" border="0" src="http://i.imgur.com/0rKSU6C.png" height="60px" style="margin-right: 1px;" width="60px" /></a>  </div></center><br /><br /><br /><style> #social a:hover {  background-color: transparent;  opacity:0.7;  }  #social img {  -moz-transition: all 0.8s ease-in-out;  -webkit-transition: all 0.8s ease-in-out;  -o-transition: all 0.8s ease-in-out;  -ms-transition: all 0.8s ease-in-out;  transition: all 0.8s ease-in-out;  }  #social img:hover {  } </style>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<center> <div id="social"> <a href="http://facebook-adresiniz/" rel="nofollow" target="_blank" title="Facebook"><img alt="Icon" border="0" src="http://i.imgur.com/s0J0qKC.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://twitter-sayfaniz/" rel="nofollow" target="_blank" title="Twitter"><img alt="Icon" border="0" src="http://i.imgur.com/cyL6Cmk.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://instagram-sayfaniz/" rel="nofollow" target="_blank" title="Instagram"><img alt="Icon" border="0" src="http://i.imgur.com/H5YLHcg.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://pinterest-sayfaniz/" rel="nofollow" target="_blank" title="Pinterest"><img alt="Icon" border="0" src="http://i.imgur.com/R8gvxun.png" height="60px" style="margin-right: 1px;" width="60px" /></a>   <a href="http://rss-sayfaniz/" rel="nofollow" target="_blank" title="RSS"><img alt="Icon" border="0" src="http://i.imgur.com/6FEEmLN.png" height="60px" style="margin-right: 1px;" width="60px" /></a>   <a href="http://iletisim-sayfaniz/" rel="nofollow" target="_blank" title="Mail"><img alt="Icon" border="0" src="http://i.imgur.com/nMyxTWS.png" height="60px" style="margin-right: 1px;" width="60px" /></a>  </div></center><br /><br /><br /><style> #social a:hover {  background-color: transparent;  opacity:0.7;  }  #social img {  -moz-transition: all 0.8s ease-in-out;  -webkit-transition: all 0.8s ease-in-out;  -o-transition: all 0.8s ease-in-out;  -ms-transition: all 0.8s ease-in-out;  transition: all 0.8s ease-in-out;  }  #social img:hover {  } </style>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<center> <div id="social"> <a href="http://google-sayfaniz/" target="_blank" title="Google+ "><img alt="Icon" border="0" src="http://i.imgur.com/PdkrrLi.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://facebook-adresiniz/" rel="nofollow" target="_blank" title="Facebook"><img alt="Icon" border="0" src="http://i.imgur.com/Sg1aujR.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://twitter-sayfaniz/" rel="nofollow" target="_blank" title="Twitter"><img alt="Icon" border="0" src="http://i.imgur.com/McIbExL.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://instagram-sayfaniz/" rel="nofollow" target="_blank" title="Instagram"><img alt="Icon" border="0" src="http://i.imgur.com/KNA6iyT.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://pinterest-sayfaniz/" rel="nofollow" target="_blank" title="Pinterest"><img alt="Icon" border="0" src="http://i.imgur.com/26HLuud.png" height="60px" style="margin-right: 1px;" width="60px" /></a>   <a href="http://rss-sayfaniz/" rel="nofollow" target="_blank" title="RSS"><img alt="Icon" border="0" src="http://i.imgur.com/Et7VpPs.png" height="60px" style="margin-right: 1px;" width="60px" /></a>  </div></center><br /><br /><br /><style> #social a:hover {  background-color: transparent;  opacity:0.7;  }  #social img {  -moz-transition: all 0.8s ease-in-out;  -webkit-transition: all 0.8s ease-in-out;  -o-transition: all 0.8s ease-in-out;  -ms-transition: all 0.8s ease-in-out;  transition: all 0.8s ease-in-out;  }  #social img:hover {  } </style>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<center> <div id="social"> <a href="http://google-sayfaniz/" target="_blank" title="Google+ "><img alt="Icon" border="0" src="http://i.imgur.com/T92vZQl.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://facebook-adresiniz/" rel="nofollow" target="_blank" title="Facebook"><img alt="Icon" border="0" src="http://i.imgur.com/o4hh0EY.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://twitter-sayfaniz/" rel="nofollow" target="_blank" title="Twitter"><img alt="Icon" border="0" src="http://i.imgur.com/HdpbPK1.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://instagram-sayfaniz/" rel="nofollow" target="_blank" title="Instagram"><img alt="Icon" border="0" src="http://i.imgur.com/cdq2l84.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://bloglovin-adresiniz/" rel="nofollow" target="_blank" title="Bloglovin"><img src="http://i.imgur.com/U2JMjQJ.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://pinterest-sayfaniz/" rel="nofollow" target="_blank" title="Pinterest"><img alt="Icon" border="0" src="http://i.imgur.com/wBJEsJH.png" height="60px" style="margin-right: 1px;" width="60px" /></a>   <a href="http://youtube-sayfaniz/" rel="nofollow" target="_blank" title="Youtube"><img alt="Icon" border="0" src="http://i.imgur.com/CFIxtn8.png" height="60px" style="margin-right: 1px;" width="60px" /></a>   <a href="http://iletisim-sayfaniz/" rel="nofollow" target="_blank" title="İletişim/Mail"><img alt="Icon" border="0" src="http://i.imgur.com/u1ExQqR.png" height="60px" style="margin-right: 1px;" width="60px" /></a>  </div></center><br /><br /><br /><style> #social a:hover {  background-color: transparent;  opacity:0.7;  }  #social img {  -moz-transition: all 0.8s ease-in-out;  -webkit-transition: all 0.8s ease-in-out;  -o-transition: all 0.8s ease-in-out;  -ms-transition: all 0.8s ease-in-out;  transition: all 0.8s ease-in-out;  }  #social img:hover {  } </style>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<center> <div id="social"> <a href="http://google-sayfaniz/" target="_blank" title="Google+ "><img alt="Icon" border="0" src="http://i.imgur.com/RxGehKn.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://facebook-adresiniz/" rel="nofollow" target="_blank" title="Facebook"><img alt="Icon" border="0" src="http://i.imgur.com/t8gxWy4.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://twitter-sayfaniz/" rel="nofollow" target="_blank" title="Twitter"><img alt="Icon" border="0" src="http://i.imgur.com/IBmNqPl.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://instagram-sayfaniz/" rel="nofollow" target="_blank" title="Instagram"><img alt="Icon" border="0" src="http://i.imgur.com/fmiFuY9.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://bloglovin-adresiniz/" rel="nofollow" target="_blank" title="Bloglovin"><img src="http://i.imgur.com/23ITcfe.png" height="60px" style="margin-right: 1px;" width="60px" /></a>     <a href="http://pinterest-sayfaniz/" rel="nofollow" target="_blank" title="Pinterest"><img alt="Icon" border="0" src="http://i.imgur.com/49QCV1L.png" height="60px" style="margin-right: 1px;" width="60px" /></a>   <a href="http://youtube-sayfaniz/" rel="nofollow" target="_blank" title="Youtube"><img alt="Icon" border="0" src="http://i.imgur.com/9dqW3b0.png" height="60px" style="margin-right: 1px;" width="60px" /></a>   <a href="http://iletisim-sayfaniz/" rel="nofollow" target="_blank" title="İletişim/Mail"><img alt="Icon" border="0" src="http://i.imgur.com/p1SK9pj.png" height="60px" style="margin-right: 1px;" width="60px" /></a>  </div></center><br /><br /><br /><style> #social a:hover {  background-color: transparent;  opacity:0.7;  }  #social img {  -moz-transition: all 0.8s ease-in-out;  -webkit-transition: all 0.8s ease-in-out;  -o-transition: all 0.8s ease-in-out;  -ms-transition: all 0.8s ease-in-out;  transition: all 0.8s ease-in-out;  }  #social img:hover {  } </style>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<center> <div id="social"> <a href="http://google-sayfaniz/" target="_blank" title="Google+ "><img alt="Icon" border="0" src="http://i.imgur.com/DWAzm30.png" height="60px" style="margin-right: 1px;" width="50px" /></a>     <a href="http://facebook-adresiniz/" rel="nofollow" target="_blank" title="Facebook"><img alt="Icon" border="0" src="http://i.imgur.com/4XqdKll.png" height="60px" style="margin-right: 1px;" width="50px" /></a>     <a href="http://twitter-sayfaniz/" rel="nofollow" target="_blank" title="Twitter"><img alt="Icon" border="0" src="http://i.imgur.com/iLJrcO5.png" height="60px" style="margin-right: 1px;" width="50px" /></a>     <a href="http://instagram-sayfaniz/" rel="nofollow" target="_blank" title="Instagram"><img alt="Icon" border="0" src="http://i.imgur.com/e1tGukq.png" height="60px" style="margin-right: 1px;" width="50px" /></a>     <a href="http://bloglovin-adresiniz/" rel="nofollow" target="_blank" title="Bloglovin"><img src="http://i.imgur.com/uRL8MTI.png" height="60px" style="margin-right: 1px;" width="50px" /></a>     <a href="http://pinterest-sayfaniz/" rel="nofollow" target="_blank" title="Pinterest"><img alt="Icon" border="0" src="http://i.imgur.com/DRRFkAJ.png" height="60px" style="margin-right: 1px;" width="50px" /></a>   <a href="http://iletisim-sayfaniz/" rel="nofollow" target="_blank" title="İletişim/Mail"><img alt="Icon" border="0" src="http://i.imgur.com/T9CLyos.png" height="60px" style="margin-right: 1px;" width="50px" /></a>  </div></center><br /><br /><br /><style> #social a:hover {  background-color: transparent;  opacity:0.7;  }  #social img {  -moz-transition: all 0.8s ease-in-out;  -webkit-transition: all 0.8s ease-in-out;  -o-transition: all 0.8s ease-in-out;  -ms-transition: all 0.8s ease-in-out;  transition: all 0.8s ease-in-out;  }  #social img:hover {  } </style>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<center> <div id="social"> <a href="http://google-sayfaniz/" target="_blank" title="Google+ "><img alt="Icon" border="0" src="http://i.imgur.com/jwNCcwc.png" height="60px" style="margin-right: 1px;" width="50px" /></a>     <a href="http://facebook-adresiniz/" rel="nofollow" target="_blank" title="Facebook"><img alt="Icon" border="0" src="http://i.imgur.com/EW7l9yA.png" height="60px" style="margin-right: 1px;" width="50px" /></a>     <a href="http://twitter-sayfaniz/" rel="nofollow" target="_blank" title="Twitter"><img alt="Icon" border="0" src="http://i.imgur.com/NUH9Okx.png" height="60px" style="margin-right: 1px;" width="50px" /></a>     <a href="http://instagram-sayfaniz/" rel="nofollow" target="_blank" title="Instagram"><img alt="Icon" border="0" src="http://i.imgur.com/vHhMhVG.png" height="60px" style="margin-right: 1px;" width="50px" /></a>     <a href="http://bloglovin-adresiniz/" rel="nofollow" target="_blank" title="Bloglovin"><img src="http://i.imgur.com/ZHJuo90.png" height="60px" style="margin-right: 1px;" width="50px" /></a>     <a href="http://pinterest-sayfaniz/" rel="nofollow" target="_blank" title="Pinterest"><img alt="Icon" border="0" src="http://i.imgur.com/lnPaft7.png" height="60px" style="margin-right: 1px;" width="50px" /></a>   <a href="http://iletisim-sayfaniz/" rel="nofollow" target="_blank" title="İletişim/Mail"><img alt="Icon" border="0" src="http://i.imgur.com/rm6IM8J.png" height="60px" style="margin-right: 1px;" width="50px" /></a>  </div></center><br /><br /><br /><style> #social a:hover {  background-color: transparent;  opacity:0.7;  }  #social img:hover {  } </style>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<center> <div id="social"> <a href="http://rss-sayfaniz/" target="_blank" title="RSS "><img 195px="" alt="Icon" border="0" src="http://i.imgur.com/D30Q7ex.png" height="29px" /></a>   <br /> <a href="http://pinterest-adresiniz/" rel="nofollow" target="_blank" title="Pinterest"><img 195px="" alt="Icon" border="0" src="http://i.imgur.com/uqLI5eD.png" height="29px" /></a>   <br /> <a href="http://twitter-sayfaniz/" rel="nofollow" target="_blank" title="Twitter"><img 195px="" alt="Icon" border="0" src="http://i.imgur.com/kwul1T0.png" height="29px" /></a> <br /> <a href="http://facebook-sayfaniz/" rel="nofollow" target="_blank" title="Facebook"><img 195px="" alt="Icon" border="0" src="http://i.imgur.com/1lYn1kN.png" height="29px" /></a> <br /> <a href="http://iletisim-sayfaniz/" rel="nofollow" target="_blank" title="Mail"><img 195px="" src="http://i.imgur.com/2NkwAd1.png" height="29px" /></a>    </div></center><br /><br /><br /><style> #social a:hover {  background-color: transparent;  opacity:0.7;  }  #social img:hover {  } </style>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<center> <div id="social"> <a href="http://rss-sayfaniz/" target="_blank" title="RSS "><img 195px="" alt="Icon" border="0" src="http://i.imgur.com/rqDz8dj.png" height="29px" /></a>   <br /> <a href="http://pinterest-adresiniz/" rel="nofollow" target="_blank" title="Pinterest"><img 195px="" alt="Icon" border="0" src="http://i.imgur.com/DN4a1cN.png" height="29px" /></a>   <br /> <a href="http://twitter-sayfaniz/" rel="nofollow" target="_blank" title="Twitter"><img 195px="" alt="Icon" border="0" src="http://i.imgur.com/C7NpgTB.png" height="29px" /></a> <br /> <a href="http://facebook-sayfaniz/" rel="nofollow" target="_blank" title="Facebook"><img 195px="" alt="Icon" border="0" src="http://i.imgur.com/N6X7Q7J.png" height="29px" /></a> <br /> <a href="http://iletisim-sayfaniz/" rel="nofollow" target="_blank" title="Mail"><img 195px="" src="http://i.imgur.com/aCOflcN.png" height="29px" /></a>    </div></center><br /><br /><br /><style> #social a:hover {  background-color: transparent;  opacity:0.7;  }  #social img:hover {  } </style>

Hangisi zevkinize ve blogunuzun genel tasarımına uyuyorsa onu kullanabilirsiniz. Aynı zamanda, internette gördüğünüz ve beğendiğiniz her sosyal medya ikonunu sizlere verdiğim bu kod içerisine uyarlayarak yine rahat bir şekilde blog sayfanıza ekleyebilirsiniz. Bu kodların en sevdiğim yanı, şablona direkt olarak girmeden kolay eklenebilir olması. Umarım işinize yarar.

Makyaj Blogu Yazmanın İpuçları yazı dizimde bir önceki konu Blogda Benzer Yazılar Eklentisi idi. Bloga hem görsel zenginlik hem de okuyucuya kolaylık tanıyan bu eklentiyi kolay şekilde eklemek için o konuma da göz atabilirsiniz.