Google+ Followers

Будь в курсе событий!

19.01.2014

Социальные,стильные кнопки с эффектом увеличения для блогспот,блоггер

Leave a Comment


Привет всем, этот урок будет посвящен очередным социальным кнопкам блогспот, блоггер мли проще говоря кнопкам обмена. Рассказывать про них особо нечего, так как вы уважаемые читатели все можете видеть на скриншоте.Но стоит учесть что кнопки имеют свой неповторимый стиль, а помимо того у них есть эффект увеличения при наведении. А теперь давайте я вам расскажу как установить к себе на блог это маленькое чудо. Поехали Blogger Панель  ввода далее Шаблон,выберите Изменить HTML >> затем зажимаем Ctrl + F с помощью и ищем тег   </b:skin> и чуть выше нашего тега вставляем этот скрипт.
 /* zarnakoom.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); }







Далее же идем в раздел Дизайн, добавить гаджет ищем HTML / JavaScript вставляем туда наш скрипт.
<ul class="bubblewrap">

<li><a href="http://www.plus.google.com/zarnakoom/"><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/zarnakoom"><img src="http://3.bp.blogspot.com/-DdXKgR250PU/UM3BS3Gtb2I/AAAAAAAAF8o/-n7bz_hTfmY/s1600/bloggertrix-facebook-icon.png" title="Facebook Sayfası" /></a></li>

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

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

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

0 коммент. :

© 2012-2017 Cash's from program