Blogger Siyah Zoom Efektli Sosyal Butonlar Eklentisi


Blogger blogunuz için siyah renkli google+ , facebook , twitter , digg ve rss butonları istermisiniz ? 

Yukarıda görmüş olduğunuz Blogger Siyah Zoom Efektli Sosyal Butonlar Eklentisi sayesinde sosyal sayfalarınızı blogger blogunuzda ziyaretçilerinize gösterebilirsiniz.Bu eklentinin bir diğer özelliği ise fareyi butonların üzerine sürüklediğinizde zoom özelliği olmasıdır.


Öncelikle blogunuzun yenilenen blogger html editörünü açın.

HTML kodları arasından aşağıdaki kodu bulun.

]]></b:skin>



Bulduğunuz bu kodun hemen üst satırına aşağıdaki kodları ekleyin. 


/* Siyah Zoom Efektli Sosyal Butonlar Eklentisi baslangici garipblogcu.blogspot.com */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}




Yukarıdaki işlemleri tamaladıktan sonra şablonumuzu kaydediyoruz ve Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile aşağıdaki kodları ekliyoruz.Aşağıdaki kodlar arasında kırmızı ile belirginleştirdiğim yerleri kendinize göre düzenlemeniz gerekiyor hepsi bu kadar.Eklentinizi güle güle kullanın :)
  

<ul class="bubblewrap">

<li><a href="http://www.plus.google.com/xxxxx"><img src="http://1.bp.blogspot.com/-nShwpxKs2QA/UM3BUKd-jQI/AAAAAAAAF8w/T8BjuWllJVU/s1600/bloggertrix-google-icon.png" title="Add to Google+" /></a></li>

<li><a href="http://www.facebook.com/xxxxx"><img src="http://3.bp.blogspot.com/-DdXKgR250PU/UM3BS3Gtb2I/AAAAAAAAF8o/-n7bz_hTfmY/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.digg.com/xxxxx"><img src="http://2.bp.blogspot.com/-_LSlpWoIO58/UM3BRsSj0vI/AAAAAAAAF8g/oOWj0xC9aF4/s1600/bloggertrix-digg-icon.png" title="Add to Digg" /></a></li>

<li><a href="http://www.twitter/xxxxx"><img src="http://1.bp.blogspot.com/-hKDGv3m-OVQ/UM3BX36PaqI/AAAAAAAAF9E/lXpT5Mdvx1I/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/xxxxx"><img src="http://1.bp.blogspot.com/-WXrH-N_sH4s/UM3BW3OE2eI/AAAAAAAAF9A/mVaMVGHmpXk/s1600/bloggertrix-rss-icon.png" title="Add RSS Feed" /></a></li>
</ul>

Yorumlar