
Всички имаме различни вкусове, но винаги съм си мислила, че оранжевият плюс в края на някои блокове със бутони за споделяне в социалните мрежи не се вписва добре в дизайна на блога. Поне при мен е така. Въпреки, че той разширява възможността за избор от социални мрежи, съществуването му тук не ми радва очите.
Аз се отървах от него по напълно лесен и достъпен начин. Споделям това с тези от вас, които са на същото мнение. Направете го и вие, ако искате, лесно е.
Копирайте това малко редче.
.pluso-more{display:none!important;}
Влезте в админ панела ➔ шаблон ➔ редактиране на HTML кода и пред ]]></b:skin> го впишете. След това запаметявате промяната в шаблона и готово. Плюсът вече го няма. Има и друг вариант. Чрез добавянето на този код в CSS стиловете. Но някои казват, че при тях тази функция не работи. И все пак, проверете, ако не искате да променяте кода на шаблона си. Единственото изискване тук е шаблона ви да е от предложените ни стандартни шаблони от Blogger. Идете в админ панела ➔ шаблон ➔ персонализиране ➔ разширени ➔ добавяне на CSS код, вписвате вече познатото редче и кликате върху бутона "прилагане в блога". И този код автоматично ще се появи на мястото си в шаблона.
Така, с помощта на малък код ние вече нямаме знак плюс в края на блока за споделяне в социалните мрежи. Надявам се, че разработчиците няма да ни се разсърдят.
Продължавам с колекцията от анимирани бутони за споделяне.
Напомням, че всички предложения в тази малка колекция, с малки изключения, се инсталират като притурки от вида HTML /JavaScript. Можете да ги сложите и в края на всяка публикация. Изключенията са малко на брой и се състоят в добавяне на CSS код в тялото на шаблона, освен HTML кода. При всичките видове социални бутони е необходимо на мястото на „######“ в HTML кода да впишете данните за личните профили в съответната социална мрежа.
Социални икони - анимирани стикери
HTML Код
<style>
p#socialicons img { -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
p#socialicons img:hover { -moz-transform: rotate(70deg); -webkit-transform: rotate(70deg); -o-transform: rotate(70deg); -ms-transform: rotate(70deg); transform: rotate(70deg);}
p#socialicons1 img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out;}
p#socialicons1 img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}
p#socialicons2 img { -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
p#socialicons2 img:hover { -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg);}</style>
<center><p id="socialicons">
<a href="http://www.facebook.com/######" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-_M_lp0j01CQ/UO_5dnRZTcI/AAAAAAAAAUs/c9Lrb2CuYm8/s1600/bloggertrix-facebook.png" /></a>
<a href="http://www.twitter.com/######" target="_blank"><img border="0" src="http://2.bp.blogspot.com/-UzH2vuiqgyo/UO_5e-yvJFI/AAAAAAAAAU8/Awu1UTmLBEs/s1600/bloggertrix-twitter.png" /></a>
<a href="https://www.stumbleupon.com/######" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-eb7uVLm6raA/UO_5dxMeyNI/AAAAAAAAAUw/xM18Th5dnJs/s1600/bloggertrix-stumbleupon.png" /></a>
<a href="http://feeds.feedburner.com/######/" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-2AeesYSvx1k/UO_5d_3Sl7I/AAAAAAAAAU0/PVwCH3Ihxdo/s1600/bloggertrix-rss.png" /></a></p></center>
Анимирани социални икони – звезди
HTML Код
<center>
<ul class="bubblewrap">
<li><a href="http://www.plus.google.com/######"><img src="http://3.bp.blogspot.com/-SKQ1igs2LNU/UOhE6HiT1rI/AAAAAAAAGPY/ePZqZ_lQ5lc/s1600/bloggertrix_google.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/######"><img src="http://1.bp.blogspot.com/-r0H2-cmL5dg/UOhE5_nSIQI/AAAAAAAAGPU/VHIaXRyd_XY/s1600/bloggertrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.stumbleupon.com/######"><img src="http://1.bp.blogspot.com/-pam6BN03QbY/UOhE7L4ISnI/AAAAAAAAGPk/UEVxDhh8wfM/s1600/bloggertrix_stumbleupon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/######"><img src="http://4.bp.blogspot.com/-_Ph0s8LMOPA/UOhE7pj8mmI/AAAAAAAAGPw/xraxPNw2ERY/s1600/bloggertrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/######"><img src="http://3.bp.blogspot.com/-Su8IoWDfS1o/UOhE6YvgxnI/AAAAAAAAGPc/2eiJmeVQ8eY/s1600/bloggertrix_rss.png" title="Add RSS Feed" /></a></li>
</ul></center>
Анимирани социални икони с форма на сърца
CSS код пред ]]></b:skin>
/* Bloggertrix */
.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 Код
<ul class="bubblewrap">
<li><a href="http://www.plus.google.com/######"><img src="http://1.bp.blogspot.com/-Cm1SCRfCP5Y/UOBbe23Gg5I/AAAAAAAAGHw/JvNHudR2BdY/s1600/bloggertrix-google.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/######"><img src="http://1.bp.blogspot.com/-asy5h6XZSrs/UOBbdo39hbI/AAAAAAAAGHo/N--Q6RfzDKQ/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.Stumbleupon.com/######"><img src="http://1.bp.blogspot.com/-VhSP-qIlv-A/UOBbhd_rv4I/AAAAAAAAGIA/3xZ6fJzM8TE/s1600/bloggertrix-stumble.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/######"><img src="http://1.bp.blogspot.com/-p-oHMGv9ho0/UOBbigs-PTI/AAAAAAAAGII/fgHGfbpfC1A/s1600/bloggertrix-twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/######"><img src="http://4.bp.blogspot.com/-CQ81aoxn92g/UOBbgK8L3zI/AAAAAAAAGH4/dmW8VBAIYlw/s1600/bloggertrix-rss.png" title="Add RSS Feed" /></a></li>
</ul>
Анимирани социални икони - ядосани пилета
CSS код пред ]]></b:skin>
/* Bloggertrix */
.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 Код
<center><ul class="bubblewrap">
<li><a href="http://www.plus.google.com/######"><img src="http://3.bp.blogspot.com/-b3-ImgxoXZE/ULTdqlQ4TYI/AAAAAAAAF2g/pBhTwnttAKY/s1600/bloggertrix-googleplus.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/######"><img src="http://4.bp.blogspot.com/-PL55Jd1MIgw/ULTdpgxpthI/AAAAAAAAF2Y/zqic5hvj2BU/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.youtube.com/######"><img src="http://4.bp.blogspot.com/-RlxdrBe4ecs/ULTduDJX5gI/AAAAAAAAF24/Pc03FWKq8js/s1600/bloggertrix-youtube.png" title="Add to Youtube" /></a></li>
<li><a href="http://www.twitter/######"><img src="http://3.bp.blogspot.com/-NjAWTWrlX5E/ULTdtCeqFeI/AAAAAAAAF2w/sLBX0ttP1rE/s1600/bloggertrix-twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/######"><img src="http://1.bp.blogspot.com/-Cy7I8qvNDg0/ULTdoi-T18I/AAAAAAAAF2Q/qPyAZfmRqU8/s1600/bloggertrix-Rss.png" title="Add RSS Feed" /></a></li>
</ul></center>
Анимирани социални икони - облачета
CSS код пред ]]></b:skin>
/* Bloggertrix */
.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 Код
<ul class="bubblewrap">
<li><a href="http://www.plus.google.com/######"><img src="http://4.bp.blogspot.com/-6bSpz7O2wNo/UIwJ2BIt19I/AAAAAAAAFe0/1yGqb95-txE/s1600/bloggertrix.com-google-plus.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/######"><img src="http://2.bp.blogspot.com/-AvobUUaVmtw/UIwJ0_VFqRI/AAAAAAAAFes/7006YZuHjuM/s1600/bloggertrix.com-facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.digg.com/######"><img src="http://1.bp.blogspot.com/-exROKBHdGpg/UIwJzwlIMMI/AAAAAAAAFek/0iwcDJat2l4/s1600/bloggertrix.com-digg.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/######"><img src="http://4.bp.blogspot.com/-1yKLFUor6js/UIwJ4ueMH0I/AAAAAAAAFfE/J_MFgDtPwFc/s1600/bloggertrix.com-twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/######"><img src="http://2.bp.blogspot.com/-n7WtdKue65w/UIwJ3akwfPI/AAAAAAAAFe8/_68hjH4iKsQ/s1600/bloggertrix.com-rss.png" title="Add RSS Feed" /></a></li>
</ul>
Напомням ви, скъпи приятели, че в HTML кодовете участъците, отбелязани в червено, трябва да замените с данните на личните си профили в съответната социална мрежа. И тези социални бутони можете да видите как изглеждат с помощта на HTML редактор от главното меню. Сложете HTML кодовете им и натиснете бутона, който е отдолу.
Успех на всички!
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

Няма коментари:
Публикуване на коментар