0

Как да премахнем знака плюс от блока за социално споделяне

 анимирани бутони
Здравейте скъпи приятели, читатели и посетители на блога. Тази публикация е за тези от вас, които имат в блога си притурка - блок за социално споделяне, завършващ със знака плюс. Дразни ли ви знакът плюс в края на блока за социално споделяне? Ако някой от вас иска да го премахне, аз ще ви упътя как да го направите. Всички имаме различни вкусове, но винаги съм си мислила, че оранжевият плюс в края на някои блокове със бутони за споделяне в социалните мрежи не се вписва добре в дизайна на блога. Поне при мен е така. Въпреки, че той разширява възможността за избор от социални мрежи, съществуването му тук не ми радва очите.
Аз се отървах от него по напълно лесен и достъпен начин. Споделям това с тези от вас, които са на същото мнение. Направете го и вие, ако искате, лесно е.
Копирайте това малко редче.



.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 код в коментара си, моля използвайте един от инструментите в основното меню - Конвертор на HTML кодове.


Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | All Rights Reserved