Greetings, friends. In this lesson, I will show you how to add social networking buttons to your sites and blogs (no matter which platform they are on Blogger or WordPress). And it will be not a plugin, but a widget, which is actually much better, because some plugins can negatively affect the speed of loading pages on your site. I plan to implement two types of widgets, one "Follow us in networks" and the second "Share in social networks". I will start with the first type.
Setting up HTML buttons Follow us in social network
Installing a widget We are in social networks for Blogger, WordPress, Joomla, etc. This includes a large number of media networks, but the widget itself at the start will display six resources: Facebook, Twitter, Linkedin, Pinterest, Youtube, and Instagram. Demo. The installation process is very simple and will take no more than 5 minutes. To install this widget, download file with HTML codes and follow the instructions in the video:
Installing a widget to share on social media
Installing a widget Share in social networks only for Blogger.
Well, let's get on with it, friends. This time the widget can only be used on Blogger. In this tool, I have added the most important media networks: Facebook, Twitter, Linkedin, Pinterest, Reddit, and Whatsup. To install, use the code below and watch the video instruction:
1.CSS
2. HTML, add it after
That's all if you have some question's use comment form.
1.CSS
<style>
ul.share-links.social.social-color {padding: 0px;}
.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:'FontAwesome';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:"\f0e1"} .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:"\f0e1"} .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, add it after
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='linkedin'><a class='' data-height='650' data-width='1000' expr:href='"https://www.linkedin.com/shareArticle?url=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=950, height=650, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'/> </li>
<li class='whatsapp whatsapp-desktop'><a class='' data-height='650' data-width='650' expr:href='"https://web.whatsapp.com/send?text=" + data:post.title + " | " + data:post.url' onclick='window.open(this.href, 'windowName', 'width=900, height=550, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'/></li>
<li class='whatsapp whatsapp-mobile'><a class='whatsapp' expr:href='"https://api.whatsapp.com/send?text=" + data:post.title + " | " + data:post.url' rel='nofollow' target='_blank'/></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>Connect Font Awesome icons:
<link crossorigin='anonymous' href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>That's all if you have some question's use comment form.
.png "Top 16 Blogger Widgets. Free HTML Blogspot Gadgets")
