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

16.01.2014

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

By andrey января 16, 2014 CSS и JQUERY Виджеты 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj68UwTZ8wHvp4AGdOz11wABOe1-faSubEwYvR_aO4ha2hEdzx7a-ncDRBvLQ9MRVFMJRl_2eFoFv5Wdl3RDoUHaY1PM0rdQ0d4qOrQez5kzTugaR_G85MlAUNyPaOjmZyjKu2DMVCqthI/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi40KtF4N13pLDeKX46Yik7tjHvh4BX7D0uKveetb2PHxtk7KJxlEv-wq8nFD_u34O8KL6KG7wzZ8OUgq7xnGEJtC0HlLfoWybtye_zlfkEUmJVdegWmTrKPrHaIxsc4dyLoT-npEbW0pw/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhERRrO08wRNofZ7X5sak2zn7EjrFAJt_B6a-WgGVDVfMDtK1HudLTwFBYqEKIx1gQVL3tU2IH8NtocEj1x9-6JmAKfI7B6qv-lFJ6-ZpTEBOaVEkJcOuQkAQYbw7cOGdbG5wpAsIEyUcU/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgabsn1lnAr6n_lzKIU1L4NU_kUXrpmxw2IBa9FGQjCfZqEsCTAKnJzR0sKWsbKL-n_YeNN-F8ANpuqTWVEHDjk7nvmx6Dq_mBYqPpTSCzNz0cIIySzKwxzgVOgK-PO4n-_5L_wPiYmOsY/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEunNw_ZO6tBPXGrX72Ajg5YnGjlaTwJbVKTPvNWtG6jm07OJpIxNGxEO_RdkHiqAT24mgxQezJn3XIQ5PJ-qSbkw1KwrhCEAcaB05BU5IAn_VIPPa3j2w7MPK1dC8LSUkzDQk16f1wPw/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjykJkJ2DImkUZoO2oDclqgFOA2E7TivF-Rq0BrAD7T499ejfcWrwqsNpkt2DA2wSe-nzeye6aurxcsW8BfspXIhHY5xbfHaGrAlSe5UfIVvDILi0aX31-WaX7Rtfq_mYZdnbucu5CBp2c/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7jjZwq5TqyTLsGLbsVUaPc-tVD3rl2Tr5KtTJXW47JcfJFMc96A917T2k9ZZ2Q6EGZKtd4X2qKIOdgbWWnzRQY55oDxW5ti4xJv59VzKd0Ti1wh3DwhQvnrFv8YzDxdlBK6KGSfZbnwE/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS_6RnmXbgCOL3DJd5pCgnAQu2CiUApDSFfGDaHNSI7Pw4qMmvF_kGPMH0x8URwOdTfUPJXFJ7rNRyO7w6TSCC30uKRZyX525RIhjq2suuwrXLh1FTdeH5pM87OLEnzpAkTEpFWhDHsBM/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