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

07.04.2013

Плавающие социальные иконки для Blogger

Leave a Comment
                                      Social Media Icons to Blogger                                                                                                                                                        
Всем привет устанавливал себе  инонки на блог( Facebook, Twitter, RSS ) решил поделится способом установки с вамиля чего они нужны, нужны они для того что бы ваши посетители смогли рекомендовать ваш веб ресурс. Своим друзьям в социальных сетях,к тому же они не простые они плавающие. Если иконки кому нибудь приглянулись  то для того что бы их установить делаем следующее:                                                         В блоггер заходим на вкладку шаблон нажимаем изменить ((( html ))) далее зажимаем клавиши Ctrl+f нам открыввается поиск в него вводим  </body> и перед этим тегом вставляем код.
     <!-- SimpleBloggerTutorials.com -->
<div class="flt-wdt">
 <!-- Facebook -->
 <a href="http://www.facebook.com/
USERNAME" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://lh3.googleusercontent.com/-QaLRred01jw/ToE0l2ruGBI/AAAAAAAACvc/ydfvF-xOi_4/s800/Facebook_creatures.png" /></a>
 <!-- Twitter -->
 <a href="http://twitter.com/USERNAME" title="Follow me on Twitter" target="_blank"><img alt="Follow me on Twitter" src="https://lh3.googleusercontent.com/-HiZe1pm_Rok/ToE0l_3Wl4I/AAAAAAAACvY/ztE85o-w3Lg/s800/Fa_Twitter_creatures.png" /></a>
 <!-- RSS -->
 <a href="http://feeds.feedburner.com/
USERNAME" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://lh5.googleusercontent.com/-16rpSgs_Rdk/ToE0l6-gnjI/AAAAAAAACvg/pbKahocVGVg/s800/Feed_creatures.png" /></a>
</div>
<!-- End -->

В этом коде вам нужно не забыть вставить вместо USERNAME , ( Facebook, Twitter, RSS ) написать свои имена,помимо этого если вам не понравились сами иконки то, вы их можете изменить после тега (((  src=" ))) без скобок.

Далее находим через поиск   ]]></b:skin> и перед ним вставляем такой код:

.flt-wdt{
 position: fixed;
 right: 10px;
 top: 43%;
}
.flt-wdt img{
 float: right;
 clear: right;
 margin: 5px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}
.flt-wdt img:hover{
 -moz-transform: scale(1.2) rotate(6deg);
 -webkit-transform: scale(1.2) rotate(6deg);
 -o-transform: scale(1.2) rotate(6deg);
 -ms-transform: scale(1.2) rotate(6deg);
 transform: scale(1.2) rotate(6deg);
}
 
Нажимаем сохранить и наш виджет готов. 
             

0 коммент. :

© 2012-2017 Cash's from program