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

Pepa Tabakova

сряда

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

.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>

Анимирани социални икони – звезди

HTML Код

</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>

Анимирани социални икони - ядосани пилета

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></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>

Напомням ви, скъпи приятели, че в HTML кодовете участъците, отбелязани в червено, трябва да замените с данните на личните си профили в съответната социална мрежа. И тези социални бутони можете да видите как изглеждат с помощта на HTML редактор от главното меню. Сложете HTML кодовете им и натиснете бутона, който е отдолу.

Успех на всички!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

Cancel

Социални икони - анимирани стикери

Анимирани социални икони – звезди

HTML Код

Анимирани социални икони с форма на сърца

CSS код пред ]]></b:skin>

HTML Код

Анимирани социални икони - ядосани пилета

CSS код пред ]]></b:skin>

HTML Код

Анимирани социални икони - облачета

CSS код пред ]]></b:skin>

HTML Код

PEPA TABAKOVA