
Чтобы изменить вид стандартных кнопок "поделится" в блоге на платформе Blogger, достаточно лишь добавить желаемые CSS-свойства к правильно указанным идентификаторам. По желанию, можно самостоятельно дополнить набор кнопок установленных по умолчанию, HTML-кодом своих кнопок с ссылками нужных социальных сетей, например ВКонтакте или Одноклассники. Если имеющийся вариант не устраивает совсем, по ряду объективных причин, то можно заменить весь блок используя JS-плагин от стороннего разработчика или свой собственный.
Как изменить оформление стандартных кнопок для публикации Blogger
Многие, предпочитают вовсе заменить в своем блоге стандартный виджет кнопок поделиться, одной из причин такого желания, по крайней мере у меня, был не совсем современный дизайн самих кнопок. Решить проблему с оформлением блока поможет CSS-код представленный ниже:
.post-share-buttons.goog-inline-block {
display: block;
}
.goog-inline-block {
margin: 3px 3px 3px 0;
}
.share-button {
width: 40px;
height: 20px;
background-image: none !important; /*для некоторых свойств значение !important обязательно*/
background-color: #000 !important;
border-radius: 3px;
overflow: hidden;
color: #FFF !important;
position: relative;
text-align: center;
}
.share-button:hover {
opacity: .7;
}
.share-button:before {
display: inline-block;
font-family: FontAwesome; /*для иконок подключаем иконочный шрифт*/
margin-top: 2px;
}
.sb-email {
background-color: #989898 !important;
}
.sb-blog {
background-color: #FD9020 !important;
}
.sb-facebook {
background-color: #3859B7 !important;
}
.sb-pinterest {
background-color: #EC1717 !important;
}
.sb-twitter {
background-color: #5DC5EC !important;
}
a.share-button[href*="blog"]:before {content:"\f040"}
a.share-button[href*="facebook"]:before {content:"\f09a"}
a.share-button[href*="twitter"]:before {content:"\f099"}
a.share-button[href*="pinterest"]:before {content:"\f231"}
a.share-button[href*="email"]:before {content:"\f0e0"}
Результат будет примерно таким:display: block;
}
.goog-inline-block {
margin: 3px 3px 3px 0;
}
.share-button {
width: 40px;
height: 20px;
background-image: none !important; /*для некоторых свойств значение !important обязательно*/
background-color: #000 !important;
border-radius: 3px;
overflow: hidden;
color: #FFF !important;
position: relative;
text-align: center;
}
.share-button:hover {
opacity: .7;
}
.share-button:before {
display: inline-block;
font-family: FontAwesome; /*для иконок подключаем иконочный шрифт*/
margin-top: 2px;
}
.sb-email {
background-color: #989898 !important;
}
.sb-blog {
background-color: #FD9020 !important;
}
.sb-facebook {
background-color: #3859B7 !important;
}
.sb-pinterest {
background-color: #EC1717 !important;
}
.sb-twitter {
background-color: #5DC5EC !important;
}
a.share-button[href*="blog"]:before {content:"\f040"}
a.share-button[href*="facebook"]:before {content:"\f09a"}
a.share-button[href*="twitter"]:before {content:"\f099"}
a.share-button[href*="pinterest"]:before {content:"\f231"}
a.share-button[href*="email"]:before {content:"\f0e0"}
Как добавить кнопки других социальных сетей к стандартным кнопкам Blogger
Чтобы получить возможность делиться своим контентом в отечественных социальных сетях достаточно добавить в код стандартного блока share-кнопок от Blogger HTML-код нужной кнопки. После строки:
<b:includable id='shareButtons' var='post'>
- и желательно до начала кода кнопки G+: <b:if cond='data:top.showPlusOne'><...
Например для кнопки ВКонтакте код будет таким:
<a class='goog-inline-block share-button sb-vk' expr:href='"http://vk.com/share.php?url=" +data:blog.canonicalUrl+ "&title=" +data:blog.pageName+ "&description=" +data:blog.metaDescription+ "&image=" +data:blog.postImageUrl+ "&noparse="+true' target='_blank' rel='nofollow'/>
Параметры заполнения:
- ссылка на целевую страницу: data:blog.canonicalUrl
- имя страницы: data:blog.pageName
- краткое описание страницы: data:blog.metaDescription
- изображение на странице: data:blog.postImageUrl
- ссылка на целевую страницу: data:blog.canonicalUrl
- имя страницы: data:blog.pageName
- краткое описание страницы: data:blog.metaDescription
- изображение на странице: data:blog.postImageUrl
Ссылки для кнопок "Поделиться" в сети Одноклассники и Mail.Ru выглядят так:
http://connect.mail.ru/share?url=[data:blog.canonicalUrl]&title=[data:blog.pageName]&description=[data:blog.metaDescription]&imageurl=[data:blog.postImageUrl]
http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=[data:blog.canonicalUrl]&st.comments=[data:blog.pageName]
Оформляются по аналогии с примером выше.http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=[data:blog.canonicalUrl]&st.comments=[data:blog.pageName]
©http://magentawave.com
SPASIBO
ОтветитьУдалитьА почему кнопка вк выглядит как отправить по эл.почте?
ОтветитьУдалить