Google+ Followers

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

16.01.2014

Супер виджет ярлыков на CSS3 для блоггер, блогспот.

Leave a Comment






Вдогонку к предыдущим виджетам решил выложить еще одно интересное решение,)это CSS3 виджет ярлыков. Интересен он тем что при наведении указателя мыши, значки двигаются расположить его лучше всего в боковой панели вашего блога.Написан он на чистом CSS3 очень интересен и думаю многим придется по вкусу.
Установка
К Blogger >> Шаблон >> Изменить HTML  >>зажимаем CTRL+F ищем тег ]]></b:skin> а наш скрипт вставляем выше тега]]></b:skin> как найдем его. Или если не сработает так, то как обычно копируем наш скрипт с тегами  <styleкоторые я отмечу красным сверху и снизу скрипта и вставляем его перед тегом </body> что в самом низу нашего шаблона.

<style>
.bbreaders-list {
line-height: 18px;
text-align: left;
overflow: hidden;
_zoom: 1;
width: 310px;
margin: 20px auto;
}
.bbreaders-list li {
width: 140px;
float: left;
}
.bbreaders-list a, .readers-list a:hover strong {
background-color: #f2f2f2;
background-image: -webkit-linear-gradient(#f8f8f8, #f2f2f2);
background-image: -moz-linear-gradient(#f8f8f8, #f2f2f2);
background-image: -ms-linear-gradient(#f8f8f8, #f2f2f2);
background-image: -o-linear-gradient(#f8f8f8, #f2f2f2);
background-image: linear-gradient(#f8f8f8, #f2f2f2)
}
.bbreaders-list a {
font-size: 12px;
position: relative;
display: block;
height: 36px;
margin: 4px;
padding: 4px 4px 4px 44px;
color: #999;
overflow: hidden;
border: #ccc 1px solid;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: #eee 0 0 2px;
-moz-box-shadow: #eee 0 0 2px;
box-shadow: #eee 0 0 2px
}
.bbreaders-list img, .readers-list em, .readers-list strong {
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out
}
.bbreaders-list img {
width: 36px;
height: 36px;
float: left;
margin: 0 8px 0 -40px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px
}
.bbreaders-list em {
color: #666;
font-style: normal;
margin-right: 10px
}
.bbreaders-list strong {
color: #ddd;
width: 40px;
text-align: right;
position: absolute;
right: 6px;
top: 4px;
font-weight: bold;
font-size: 14px;
line-height: 16px
}
.bbreaders-list a:hover {
text-decoration: none;
border-color: #bbb;
-webkit-box-shadow: #ccc 0 0 2px;
-moz-box-shadow: #ccc 0 0 2px;
box-shadow: #ccc 0 0 2px;
background-color: #fff;
background-image: none
}
.bbreaders-list a:hover img {
opacity: .6;
margin-left: 0
}
.bbreaders-list a:hover em {
color: #EE8B17;
line-height: 36px;
font-weight: bold
}
.bbreaders-list a:hover strong {
color: #EE8B17;
right: 125px;
top: 0;
text-align: center;
border-right: #ccc 1px solid;
height: 44px;
line-height: 40px
</style>




Теперь далее:


   К Blogger >> Дизайн >> Добавить гаджет >> Выбрать HTML / JavaScript.
     И скопируйте приведенный ниже код и вставьте его в поле HTML / Javscript.

 <ul class="bbreaders-list">
<li><a href="Ваша ссылка урл Html5 " target="_blank"><img alt="Html5 Widgets" src="http://1.bp.blogspot.com/-jELTdih_wjk/UXi7NQreJcI/AAAAAAAAAWg/7IIFg1lPbhc/s1600/images.png" class="" height="36" width="36" /><em>Html5</em><strong>+2</strong></a></li>
<li><a href="
Ваша ссылка урл Wordpress " target="_blank"><img alt="Wordpress" src="http://2.bp.blogspot.com/-cTacpopEpQI/UXi5JWwZPRI/AAAAAAAAAWA/u0gjx18YHao/s1600/wp.png" class="avatar avatar-36 photo" height="36" width="36" /><em>Wordpress</em><strong>+0</strong></a></li>
<li><a href="
Ваша ссылка урл Css3 " target="_blank"><img alt="Css3" src="http://4.bp.blogspot.com/-Hn35QBiN4pk/UXi_Ohkq2dI/AAAAAAAAAXE/BTDPH2qu7I0/s1600/css3.gif" class="avatar avatar-36 photo" height="36" width="36" /><em>CSS3</em><strong>+0</strong></a></li>
<li><a href="
Ваша ссылка урл.blogspot" target="_blank"><img alt="Blogger" src="http://3.bp.blogspot.com/-O7_m-sFG9LU/UXi5FcWpBHI/AAAAAAAAAU0/a4qkONI1qKw/s1600/blogger.png" class="avatar avatar-36 photo" height="36" width="36" /><em>Blogger</em><strong>+3</strong></a></li>
<li><a href="
Ваша ссылка урл Google+ " target="_blank"><img alt="Google+" src="http://2.bp.blogspot.com/-o-LmoQj0LT8/UXi5HuLdUmI/AAAAAAAAAVg/w2yTYSwJKAc/s1600/google_plus.png" class="avatar avatar-36 photo" height="36" width="36" /><em>Google+</em><strong>+2</strong></a></li>
<li><a href="
Ваша ссылка урл Facebook " target="_blank"><img alt="Facebook" src="http://2.bp.blogspot.com/-4YT-8oik2bc/UXi5GZlEvMI/AAAAAAAAAVI/zNhvyO7YVA8/s1600/fb_1.png" class="avatar avatar-36 photo" height="36" width="36" /><em>Facebook</em><strong>+2</strong></a></li>
<li><a href="
Ваша ссылка урл Без названия " target="_blank"><img alt="Без названия" src="http://4.bp.blogspot.com/-HnkI3MX9gFM/UXi5FYRdqeI/AAAAAAAAAUw/X6GW4gU-9pA/s1600/Untitled-1.png" class="avatar avatar-36 photo" height="36" width="36" /><em>Untitled</em><strong>+0</strong></a></li>
<li><a href="
Ваша ссылка урл Twitter " target="_blank"><img alt="Twitter" src="http://1.bp.blogspot.com/-KNxqnEj7PzA/UXi5JHsMGdI/AAAAAAAAAV8/SI8DNG6XZhA/s1600/twitter_1.png" class="avatar avatar-36 photo" height="36" width="36" /><em>Twitter</em><strong>+0</strong></a></li>
</ul>




Расшифровка)

там где стоит  Ваша ссылка урл  везде пишеи ваши ссылки на Ярлыки, то есть например если кто не понял у вас в блоге несколько статей и все они идут  под одним ярлыком. Напрмер твиттер, у вас 5 статей о твиттере и все они под общим ярлыком который так и называется твиттер, вот нам и нужно найти узнать Урл этого ярлыка, и вписать в эту строчку где надо вписывать урл.
 

0 коммент. :

© 2012-2017 Cash's from program