Відео інструкція
Текстова інструкція
В даній публікації я підготував для вас два типи кнопок. Перший тип це "Ми в соц мережах", а другий тип, "Поділитися в соц мережах".
Встановлення на сайт HTML кнопок Ми в соц мережах
Даний віджет сумісний з усіма системами для створення сайтів, наприклад Blogger, WordPress, Joomla, Ucoz та інші.
Для встановлення віджету відкрийте файл з HTML кодами за посиланням - https://drive.google.com/file/d/1cr86tIA8qRHf0L47HPzisE5GNRyk1hj-/view
та слідуйте вказівкам у відео інструкції.
Встановлення кнопок Поділитися в соц мережах
На відміну від попереденього віджету даний варіант сумісний тільки із системою Blogger. Для WordPress, Joomla та інших платформ краще за все використовувати відповідні плагіни.
Щоб встановити даний віджет використовуйте відео інструкцію та надані HTML коди:
1.CSS
<style>
.social .telegram a:before {content: "\f3fe";font-family: 'Font Awesome 5 Brands';}
ul.share-links.social.social-color {padding: 0px;} li.telegram {background: #3ea9ff;}
.post-share{position:relative;overflow:hidden;line-height:0;margin:0 0 20px;margin-top:10px;} .share-links li{width:30px;float:left;box-sizing:border-box;margin:0 5px 0 0;list-style: none;} .share-links li a{float:left;display:inline-block;cursor:pointer;width:100%;height:28px;line-height:28px;color:#fff;font-weight:400;font-size:13px;text-align:center;box-sizing:border-box;opacity:1;margin:0;padding:0;transition:all .25s ease} .share-links li.whatsapp-mobile{display:none} .mobile-share li.whatsapp-desktop{display:none} .mobile-share li.whatsapp-mobile{display:inline-block} .share-links li a:before{float:left;display:block;width:30px;background-color:rgba(0,0,0,0.05);text-align:center;line-height:28px} .share-links li a:hover{opacity:.8} .social-color .odnoklassniki {background: #ffbc00;} .social-color .email a:before{content:"\f189"} .social a:before{display:inline-block;font-family:'Font Awesome 5 Brands';font-style:normal;font-weight:400} .social .blogger a:before{content:"\f37d"} .social .facebook a:before{content:"\f09a"} .social .twitter a:before{content:"\f099"} .social .telegram a:before{content:"\f3fe"} .social .odnoklassniki a:before{content:"\f263"} .social .gplus a:before{content:"\f0d5"} .social .rss a:before{content:"\f09e";font-family:'Font Awesome 5 Free';font-weight:900} .social .youtube a:before{content:"\f167"} .social .skype a:before{content:"\f17e"} .social .stumbleupon a:before{content:"\f1a4"} .social .tumblr a:before{content:"\f173"} .social .vk a:before{content:"\f189"} .social .stack-overflow a:before{content:"\f16c"} .social .github a:before{content:"\f09b"} .social .linkedin a:before{content:"\f3fe"} .social .dribbble a:before{content:"\f17d"} .social .soundcloud a:before{content:"\f1be"} .social .behance a:before{content:"\f1b4"} .social .digg a:before{content:"\f1a6"} .social .instagram a:before{content:"\f16d"} .social .pinterest a:before{content:"\f0d2"} .social .twitch a:before{content:"\f1e8"} .social .delicious a:before{content:"\f1a5"} .social .codepen a:before{content:"\f1cb"} .social .flipboard a:before{content:"\f44d"} .social .reddit a:before{content:"\f1a1"} .social .whatsapp a:before{content:"\f232"} .social .messenger a:before{content:"\f39f"} .social .snapchat a:before{content:"\f2ac"} .social .external-link a:before{content:"\f35d";font-family:'Font Awesome 5 Free';font-weight:900} .social-color .blogger a{background-color:#ff5722} .social-color .facebook a{background-color:#3b5999} .social-color .twitter a{background-color:#00acee} .social-color .gplus a{background-color:#db4a39} .social-color .youtube a{background-color:#db4a39} .social-color .instagram a{background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4)} .social-color .pinterest a{background-color:#ca2127} .social-color .dribbble a{background-color:#ea4c89} .social-color .linkedin a{background-color:#149fe7} .social-color .tumblr a{background-color:#365069} .social-color .twitch a{background-color:#6441a5} .social-color .rss a{background-color:#ffc200} .social-color .skype a{background-color:#00aff0} .social-color .stumbleupon a{background-color:#eb4823} .social-color .vk a{background-color:#4a76a8} .social-color .stack-overflow a{background-color:#f48024} .social-color .github a{background-color:#24292e} .social-color .soundcloud a{background:linear-gradient(#ff7400,#ff3400)} .social-color .behance a{background-color:#191919} .social-color .digg a{background-color:#1b1a19} .social-color .delicious a{background-color:#0076e8} .social-color .codepen a{background-color:#000} .social-color .flipboard a{background-color:#f52828} .social-color .reddit a{background-color:#ff4500} .social-color .whatsapp a{background-color:#3fbb50} .social-color .messenger a{background-color:#0084ff} .social-color .snapchat a{background-color:#ffe700} .social-color .email a{background-color:#63839f} .social-color .external-link a{background-color:$(main.dark.color)} .social-color-hover .blogger a:hover{background-color:#ff5722} .social-color-hover .facebook a:hover{background-color:#3b5999} .social-color-hover .twitter a:hover{background-color:#00acee} .social-color-hover .gplus a:hover{background-color:#db4a39} .social-color-hover .youtube a:hover{background-color:#db4a39} .social-color-hover .instagram a:hover{background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4)} .social-color-hover .pinterest a:hover{background-color:#ca2127} .social-color-hover .dribbble a:hover{background-color:#ea4c89} .social-color-hover .linkedin a:hover{background-color:#0077b5} .social-color-hover .tumblr a:hover{background-color:#365069} .social-color-hover .twitch a:hover{background-color:#6441a5} .social-color-hover .rss a:hover{background-color:#ffc200} .social-color-hover .skype a:hover{background-color:#00aff0} .social-color-hover .stumbleupon a:hover{background-color:#eb4823} .social-color-hover .vk a:hover{background-color:#4a76a8} .social-color-hover .stack-overflow a:hover{background-color:#f48024} .social-color-hover .github a:hover{background-color:#24292e} .social-color-hover .soundcloud a:hover{background:linear-gradient(#ff7400,#ff3400)} .social-color-hover .behance a{background-color:#191919} .social-color-hover .digg a:hover{background-color:#1b1a19} .social-color-hover .delicious a:hover{background-color:#0076e8} .social-color-hover .codepen a:hover{background-color:#000} .social-color-hover .flipboard a:hover{background-color:#f52828} .social-color-hover .reddit a:hover{background-color:#ff4500} .social-color-hover .whatsapp a:hover{background-color:#3fbb50} .social-color-hover .messenger a:hover{background-color:#0084ff} .social-color-hover .snapchat a:hover{background-color:#ffe700} .social-color-hover .email a:hover{background-color:#888} .social-color-hover .external-link a:hover{background-color:$(main.dark.color)}
</style>2. HTML встановлюєте після data:post.body
<b:if cond='data:blog.pageType != "index"'>
<div class='post-share'>
<ul class='share-links social social-color'>
<b:class cond='data:blog.isMobileRequest' name='mobile-share'/>
<li class='facebook'><a class='facebook' data-height='650' data-width='550' expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><span/></a></li>
<li class='twitter'><a class='twitter' data-height='460' data-width='550' expr:href='"https://twitter.com/share?url=" + data:post.url + "&text=" + data:post.title' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><span/></a></li>
<li class='pinterest'><a class='pinterest' data-height='750' data-width='735' expr:href='"https://www.pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.featuredImage + "&description=" + data:post.title' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'/></li>
<li class='odnoklassniki'><a class='' data-height='750' data-width='735' expr:href='"https://connect.ok.ru/offer?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title=''/></li>
<li class='telegram'><a class='' data-height='650' data-width='1000' expr:href='"https://telegram.me/share/url?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='telegram'/> </li>
<li class='vk'><a class='' data-height='650' data-width='650' expr:href='"https://vk.com/share.php?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank' title='Vkontakte'/></li>
<li class='reddit'><a class='twitter' data-height='460' data-width='550' expr:href='"https://www.reddit.com/submit?url=" + data:post.url + "&resubmit=true&title=" + data:post.title + ""' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><span/></a></li>
</ul>
</div>
</b:if>
Підключення іконок Font Awesome:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/><link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.8.2/css/all.css' integrity='sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay' rel='stylesheet'/>Наразі це все, якщо виникнуть питання пишіть в коментарях.