Blogger Metro Sosyal Ag Eklentisi

Bir internet sitesinin hem güncel kalması açısından , hem de seo açısından sosyal ağları aktif olarak kullanması çok önemlidir ve neticesinde sosyal ağlarda fazla takipçisinin olması da çok önemlidir. Sosyal ağlarda daha fazla takipçi kazanmak için sosyal ağ sayfalarınızı sitenizde paylaşabilirsiniz veya sitenizin görünen bir kısmına sosyal ağların bulunduğu bir kısım ekleyebilirsiniz.Bizde bugün sizlere Blogger altyapılı siteleriniz için metro tarzı bir sosyal ağ eklentisi paylaşmaya karar verdik.Hem görünüş açısından , hem de işlevsellik açısından çok hoş bir eklenti olduğunu söyleyebiliriz.

 Eklenti adından da anlaşılacağı üzere metro tarzı . Aşağıda resmini görebilirsiniz.Hiçbirinin üstüne gelinmediğinde hepsi mavi olarak gözüküyor ancak örneğin Twitter'ın üstüne geldiğinizde Twitter iconun arkaplan rengi Twitter mavisi oluyor.Yani hangi sosyal ağın üstüne gelirseniz icon arkaplanı onun rengine bürünüyor.

 Yukarıda bunun bir örneğini görebilirsiniz. Eklentide hover özelliği olması sitenize görsellik açısından da katkı sağlayacaktır.Bu nedenle kullanılması gereken eklentiler arasında.Şimdi gelelim eklentiyi nasıl blogumuza kuracağımıza.

Eklenti Kurulum Aşamaları

İlk olarak Blogger yönetim panelinize girip Şablon>Html'yi düzenle butonuna tıklayın.Daha sonra oradan aşağıdaki kodu bulun . [CTRL+F yaparak bulabilirsiniz.)

</b:skin> Kodu bulduktan sonra hemen üstüne aşağıdaki kodu ekleyin.
#jocial{width: 305px; float: left;margin-top: 10px;} #jocial li{position:relative; cursor:pointer; padding: 0 !important;} #jocial .facebook, .googleplus, .rss, .twitter{ position: relative; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; z-index: 5; display: block; float: left; margin: 1px;} #jocial .icon{overflow:hidden;} #jocial .facebook{width: 150px; height: 150px; background: rgba(59,89,152,1) url("http://1.bp.blogspot.com/-UKryCh_9ofg/UTZhTsKo1JI/AAAAAAAABB8/nZELvc-I_mU/s000/facebook.png") no-repeat center center;} #jocial .twitter{width: 150px; height: 74px; background: rgba(59,89,152,1) url("http://3.bp.blogspot.com/-l7ZToPjmMuU/UTZhUBsetSI/AAAAAAAABCE/7mAmFM2I3Vg/s000/twitter.png") no-repeat center center;} #jocial .googleplus{width: 150px; height: 74px; background: rgba(59,89,152,1) url("http://2.bp.blogspot.com/-BlNwAezZeJE/UTZhUQqnRiI/AAAAAAAABCM/R_lwCLevtBQ/s000/google%25252Bplus.png") no-repeat center center;} #jocial .rss{ width: 302px; height: 74px; background: rgba(59,89,152,1) url("http://4.bp.blogspot.com/-rAtL540hTiU/UTZhUjdTDrI/AAAAAAAABCU/6msqfzMDbG8/s000/rss.png") no-repeat center center;} #jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} #jocial li:hover .twitter{background:rgba(64,153,255,1) url("http://3.bp.blogspot.com/-l7ZToPjmMuU/UTZhUBsetSI/AAAAAAAABCE/7mAmFM2I3Vg/s000/twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} #jocial li:hover .googleplus{background:rgba(228,69,36,1) url("http://2.bp.blogspot.com/-BlNwAezZeJE/UTZhUQqnRiI/AAAAAAAABCM/R_lwCLevtBQ/s000/google%25252Bplus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} #jocial li:hover .rss{background:rgba(255,102,0,1) url("http://4.bp.blogspot.com/-rAtL540hTiU/UTZhUjdTDrI/AAAAAAAABCU/6msqfzMDbG8/s000/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} Bu kodu da bulduktan sonra Yerleşim>Gadget Ekle > Html/Javascript ekle bölümünden aşağıdaki kodu ekleyip kaydet diyoruz.
<ul id='jocial'> <li><a class='icon facebook' href='FACEBOOK PROFİL LİNKİNİZ'></a></li> <li><a class='icon twitter' href='TWİTTER PROFİL LİNKİNİZ'></a></li> <li><a class='icon googleplus' href='GOOGLE+ PROFİL LİNKİNİZ '></a></li> <li><a class='icon rss' href='FEED BURNER PROFİL LİNKİNİZ'></a></li> </ul>
Son verdiğimiz koddaki profil linkiniz yazan bölümlere ilgili sosyal ağlardaki profil linkinizi yapıştırınız. Eklentiyi kullanmanızı yukarıda da belirttiğimiz gibi tavsiye ederiz.Sitenizin görünümüne de güzellik katacaktır.Bir sonraki eklenti paylaşımımızda görüşmek üzere kendinize iyi bakın ve hoşçakalın.Bizi takip etmeye devam edin.