Social follow widget - Nút theo dõi mạng xã hội đẹp và đơn giản

Social follow widget - Nút theo dõi mạng xã hội đẹp và đơn giản

9/17/2015
Social follow widget
Như các bạn cũng biết là môi trường internet hiện nay chịu ảnh hưởng rất nhiều từ các mạng xã hội. Để blog phát triển được thì ngoài nội dung ra chúng ta cần đặc biệt chú ý đến việc quảng bá blog bằng các phương tiện của mạng xã hội. Hôm nay BDK sẽ giới thiệu đến các bạn một widget nhỏ đó là Social follow widget. Bạn có thể đặt link của 3 mạng xã hội phổ biến nhất là Facebook, Google+, Twitter ở đây để người đọc tiện theo dõi các trang mạng xã hội của bạn.

Cài đặt Social follow widget

Để cài đặt Widget này bạn vào Bố cục > Thêm tiện ích > HTML/Javascript dán đoạn code sau vào khung chứa code là được <style>
.icon {display: inline-block; vertical-align: top; overflow: hidden; margin: 4px; width: 92px; height: 96px; font-size: 0; text-indent: -9999px; background-color: #404040;}
.iconblogduykhanh-border { position: relative;}
.iconblogduykhanh-border::before, .iconblogduykhanh-border::after {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; }
.iconblogduykhanh-border::before { z-index: 1; -webkit-transition: box-shadow 0.3s; transition: box-shadow 0.3s; }
.iconblogduykhanh-border::after { z-index: 2; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-JN-lAGexOuB11Eq39aQAuMD_so45udVIOgs6bwve3frpd0DSe-FAWjr6e3joSu5GKlMqK6ieSc7AIbLpbVZXtGLeHs09pp-A0N8P7ibu5e6PBcbx0UY74NRalYQc8Uvms0VLsNi0wFQ/s1600/followsocial-blogduykhanh.png"); background-image: url("http://callmenick.com/_development/icons-css3-transitions/img/icons4.svg"), none; }
/* facebook */
.iconblogduykhanh-border.facebook::before { box-shadow: inset 0 0 0 48px #3b5998; }
.iconblogduykhanh-border.facebook:hover::before { box-shadow: inset 0 0 0 4px #3b5998; }
.iconblogduykhanh-border.facebook::after { background-position: 0 0; }
/* twitter */
.iconblogduykhanh-border.twitter::before { box-shadow: inset 0 0 0 48px #4099ff; }
.iconblogduykhanh-border.twitter:hover::before { box-shadow: inset 0 0 0 4px #4099ff; }
.iconblogduykhanh-border.twitter::after { background-position: -96px 0; }
/* google plus */
.iconblogduykhanh-border.googleplus::before { box-shadow: inset 0 0 0 48px #d34836; }
.iconblogduykhanh-border.googleplus:hover::before { box-shadow: inset 0 0 0 4px #d34836; }
.iconblogduykhanh-border.googleplus::after { background-position: -192px 0; }
/* github */
.iconblogduykhanh-border.github::before { box-shadow: inset 0 0 0 48px #333333;}
.iconblogduykhanh-border.github:hover::before { box-shadow: inset 0 0 0 4px #333333;}
.iconblogduykhanh-border.github::after { background-position: -288px 0;}
/* rss */
.iconblogduykhanh-border.rss::before { box-shadow: inset 0 0 0 48px #ee802f;}
.iconblogduykhanh-border.rss:hover::before { box-shadow: inset 0 0 0 4px #ee802f;}
.iconblogduykhanh-border.rss::after { background-position: -384px 0;}
</style>
<a class="icon iconblogduykhanh-border facebook" href="http://facebook.com/blogduykhanh">facebook</a>
<a class="icon iconblogduykhanh-border twitter" href="http://twitter.com/duykhanhtv">twitter</a>
<a class="icon iconblogduykhanh-border googleplus" href="http://plus.gooogle.com/+nguyenduykhanhtv">google+</a>
<a class="icon iconblogduykhanh-border rss" href="http://blogduykhanh.blogspot.com/">rss</a> Trong đoạn code trên bạn nên chú ý một số thứ:
  1. margin: 4px;  là khoảng cách giữa các icon, bạn có thể thay đổi để phù hợp với blog của mình.
  2. width: 92px;   height: 96px;  là chiều rộng và chiều dài của icon, khi thay đổi thông số này bạn phải thay đổi tọa độ của từng icon trong đoạn code màu xanh bên dưới để icon được cân xứng.
  3. Thay các liên kết được highlight thành địa chỉ facebook, twitter, google+, rss của bạn. 
Ngoài ra còn có 4 hiệu ứng khác để bạn lựa chọn

Mẫu 2

<style>
.icon {display: inline-block; vertical-align: top; overflow: hidden; margin: 4px; width: 92px; height: 96px; font-size: 0; text-indent: -9999px; background-color: #404040;}
.iconblogduykhanh-mono { position: relative;}
.iconblogduykhanh-mono::before, .iconblogduykhanh-mono::after {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; }
.iconblogduykhanh-mono::before { z-index: 1; -webkit-transition: box-shadow 0.3s; transition: box-shadow 0.3s; }
.iconblogduykhanh-mono::after { z-index: 2; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-JN-lAGexOuB11Eq39aQAuMD_so45udVIOgs6bwve3frpd0DSe-FAWjr6e3joSu5GKlMqK6ieSc7AIbLpbVZXtGLeHs09pp-A0N8P7ibu5e6PBcbx0UY74NRalYQc8Uvms0VLsNi0wFQ/s1600/followsocial-blogduykhanh.png"); background-image: url("http://callmenick.com/_development/icons-css3-transitions/img/icons4.svg"), none; }
/* facebook */
.iconblogduykhanh-mono.facebook::before { box-shadow: inset 0 0 0 48px #3b5998; }
.iconblogduykhanh-mono.facebook:hover::before { box-shadow: inset 0 0 0 4px #3b5998; }
.iconblogduykhanh-mono.facebook::after { background-position: 0 0; }
/* twitter */
.iconblogduykhanh-mono.twitter::before { box-shadow: inset 0 0 0 48px #4099ff; }
.iconblogduykhanh-mono.twitter:hover::before { box-shadow: inset 0 0 0 4px #4099ff; }
.iconblogduykhanh-mono.twitter::after { background-position: -96px 0; }
/* google plus */
.iconblogduykhanh-mono.googleplus::before { box-shadow: inset 0 0 0 48px #d34836; }
.iconblogduykhanh-mono.googleplus:hover::before { box-shadow: inset 0 0 0 4px #d34836; }
.iconblogduykhanh-mono.googleplus::after { background-position: -192px 0; }
/* github */
.iconblogduykhanh-mono.github::before { box-shadow: inset 0 0 0 48px #333333;}
.iconblogduykhanh-mono.github:hover::before { box-shadow: inset 0 0 0 4px #333333;}
.iconblogduykhanh-mono.github::after { background-position: -288px 0;}
/* rss */
.iconblogduykhanh-mono.rss::before { box-shadow: inset 0 0 0 48px #ee802f;}
.iconblogduykhanh-mono.rss:hover::before { box-shadow: inset 0 0 0 4px #ee802f;}
.iconblogduykhanh-mono.rss::after { background-position: -384px 0;}
</style>
<a class="icon iconblogduykhanh-mono facebook" href="http://facebook.com/blogduykhanh">facebook</a>
<a class="icon iconblogduykhanh-mono twitter" href="http://twitter.com/duykhanhtv">twitter</a>
<a class="icon iconblogduykhanh-mono googleplus" href="http://plus.gooogle.com/+nguyenduykhanhtv">google+</a>
<a class="icon iconblogduykhanh-mono rss" href="http://blogduykhanh.blogspot.com/">rss</a>

Mẫu 3

<style>
.icon {display: inline-block; vertical-align: top; overflow: hidden; margin: 4px; width: 92px; height: 96px; font-size: 0; text-indent: -9999px; background-color: #404040;}
.iconblogduykhanh-nudge { position: relative;}
.iconblogduykhanh-nudge::before, .iconblogduykhanh-nudge::after {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; }
.iconblogduykhanh-nudge::before { z-index: 1; -webkit-transition: box-shadow 0.3s; transition: box-shadow 0.3s; }
.iconblogduykhanh-nudge::after { z-index: 2; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-JN-lAGexOuB11Eq39aQAuMD_so45udVIOgs6bwve3frpd0DSe-FAWjr6e3joSu5GKlMqK6ieSc7AIbLpbVZXtGLeHs09pp-A0N8P7ibu5e6PBcbx0UY74NRalYQc8Uvms0VLsNi0wFQ/s1600/followsocial-blogduykhanh.png"); background-image: url("http://callmenick.com/_development/icons-css3-transitions/img/icons4.svg"), none; }
/* facebook */
.iconblogduykhanh-nudge.facebook::before { box-shadow: inset 0 0 0 48px #3b5998; }
.iconblogduykhanh-nudge.facebook:hover::before { box-shadow: inset 0 0 0 4px #3b5998; }
.iconblogduykhanh-nudge.facebook::after { background-position: 0 0; }
/* twitter */
.iconblogduykhanh-nudge.twitter::before { box-shadow: inset 0 0 0 48px #4099ff; }
.iconblogduykhanh-nudge.twitter:hover::before { box-shadow: inset 0 0 0 4px #4099ff; }
.iconblogduykhanh-nudge.twitter::after { background-position: -96px 0; }
/* google plus */
.iconblogduykhanh-nudge.googleplus::before { box-shadow: inset 0 0 0 48px #d34836; }
.iconblogduykhanh-nudge.googleplus:hover::before { box-shadow: inset 0 0 0 4px #d34836; }
.iconblogduykhanh-nudge.googleplus::after { background-position: -192px 0; }
/* github */
.iconblogduykhanh-nudge.github::before { box-shadow: inset 0 0 0 48px #333333;}
.iconblogduykhanh-nudge.github:hover::before { box-shadow: inset 0 0 0 4px #333333;}
.iconblogduykhanh-nudge.github::after { background-position: -288px 0;}
/* rss */
.iconblogduykhanh-nudge.rss::before { box-shadow: inset 0 0 0 48px #ee802f;}
.iconblogduykhanh-nudge.rss:hover::before { box-shadow: inset 0 0 0 4px #ee802f;}
.iconblogduykhanh-nudge.rss::after { background-position: -384px 0;}
</style>
<a class="icon iconblogduykhanh-nudge facebook" href="http://facebook.com/blogduykhanh">facebook</a>
<a class="icon iconblogduykhanh-nudge twitter" href="http://twitter.com/duykhanhtv">twitter</a>
<a class="icon iconblogduykhanh-nudge googleplus" href="http://plus.gooogle.com/+nguyenduykhanhtv">google+</a>
<a class="icon iconblogduykhanh-nudge rss" href="http://blogduykhanh.blogspot.com/">rss</a>

Mẫu 4

<style>
.icon {display: inline-block; vertical-align: top; overflow: hidden; margin: 4px; width: 92px; height: 96px; font-size: 0; text-indent: -9999px; background-color: #404040;}
.iconblogduykhanh-slide { position: relative;}
.iconblogduykhanh-slide::before, .iconblogduykhanh-slide::after {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; }
.iconblogduykhanh-slide::before { z-index: 1; -webkit-transition: box-shadow 0.3s; transition: box-shadow 0.3s; }
.iconblogduykhanh-slide::after { z-index: 2; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-JN-lAGexOuB11Eq39aQAuMD_so45udVIOgs6bwve3frpd0DSe-FAWjr6e3joSu5GKlMqK6ieSc7AIbLpbVZXtGLeHs09pp-A0N8P7ibu5e6PBcbx0UY74NRalYQc8Uvms0VLsNi0wFQ/s1600/followsocial-blogduykhanh.png"); background-image: url("http://callmenick.com/_development/icons-css3-transitions/img/icons4.svg"), none; }
/* facebook */
.iconblogduykhanh-slide.facebook::before { box-shadow: inset 0 0 0 48px #3b5998; }
.iconblogduykhanh-slide.facebook:hover::before { box-shadow: inset 0 0 0 4px #3b5998; }
.iconblogduykhanh-slide.facebook::after { background-position: 0 0; }
/* twitter */
.iconblogduykhanh-slide.twitter::before { box-shadow: inset 0 0 0 48px #4099ff; }
.iconblogduykhanh-slide.twitter:hover::before { box-shadow: inset 0 0 0 4px #4099ff; }
.iconblogduykhanh-slide.twitter::after { background-position: -96px 0; }
/* google plus */
.iconblogduykhanh-slide.googleplus::before { box-shadow: inset 0 0 0 48px #d34836; }
.iconblogduykhanh-slide.googleplus:hover::before { box-shadow: inset 0 0 0 4px #d34836; }
.iconblogduykhanh-slide.googleplus::after { background-position: -192px 0; }
/* github */
.iconblogduykhanh-slide.github::before { box-shadow: inset 0 0 0 48px #333333;}
.iconblogduykhanh-slide.github:hover::before { box-shadow: inset 0 0 0 4px #333333;}
.iconblogduykhanh-slide.github::after { background-position: -288px 0;}
/* rss */
.iconblogduykhanh-slide.rss::before { box-shadow: inset 0 0 0 48px #ee802f;}
.iconblogduykhanh-slide.rss:hover::before { box-shadow: inset 0 0 0 4px #ee802f;}
.iconblogduykhanh-slide.rss::after { background-position: -384px 0;}
</style>
<a class="icon iconblogduykhanh-slide facebook" href="http://facebook.com/blogduykhanh">facebook</a>
<a class="icon iconblogduykhanh-slide twitter" href="http://twitter.com/duykhanhtv">twitter</a>
<a class="icon iconblogduykhanh-slide googleplus" href="http://plus.gooogle.com/+nguyenduykhanhtv">google+</a>
<a class="icon iconblogduykhanh-slide rss" href="http://blogduykhanh.blogspot.com/">rss</a>

Mẫu 5

<style>
.icon {display: inline-block; vertical-align: top; overflow: hidden; margin: 4px; width: 92px; height: 96px; font-size: 0; text-indent: -9999px; background-color: #404040;}
.iconblogduykhanh-cube { position: relative;}
.iconblogduykhanh-cube::before, .iconblogduykhanh-cube::after {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; }
.iconblogduykhanh-cube::before { z-index: 1; -webkit-transition: box-shadow 0.3s; transition: box-shadow 0.3s; }
.iconblogduykhanh-cube::after { z-index: 2; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-JN-lAGexOuB11Eq39aQAuMD_so45udVIOgs6bwve3frpd0DSe-FAWjr6e3joSu5GKlMqK6ieSc7AIbLpbVZXtGLeHs09pp-A0N8P7ibu5e6PBcbx0UY74NRalYQc8Uvms0VLsNi0wFQ/s1600/followsocial-blogduykhanh.png"); background-image: url("http://callmenick.com/_development/icons-css3-transitions/img/icons4.svg"), none; }
/* facebook */
.iconblogduykhanh-cube.facebook::before { box-shadow: inset 0 0 0 48px #3b5998; }
.iconblogduykhanh-cube.facebook:hover::before { box-shadow: inset 0 0 0 4px #3b5998; }
.iconblogduykhanh-cube.facebook::after { background-position: 0 0; }
/* twitter */
.iconblogduykhanh-cube.twitter::before { box-shadow: inset 0 0 0 48px #4099ff; }
.iconblogduykhanh-cube.twitter:hover::before { box-shadow: inset 0 0 0 4px #4099ff; }
.iconblogduykhanh-cube.twitter::after { background-position: -96px 0; }
/* google plus */
.iconblogduykhanh-cube.googleplus::before { box-shadow: inset 0 0 0 48px #d34836; }
.iconblogduykhanh-cube.googleplus:hover::before { box-shadow: inset 0 0 0 4px #d34836; }
.iconblogduykhanh-cube.googleplus::after { background-position: -192px 0; }
/* github */
.iconblogduykhanh-cube.github::before { box-shadow: inset 0 0 0 48px #333333;}
.iconblogduykhanh-cube.github:hover::before { box-shadow: inset 0 0 0 4px #333333;}
.iconblogduykhanh-cube.github::after { background-position: -288px 0;}
/* rss */
.iconblogduykhanh-cube.rss::before { box-shadow: inset 0 0 0 48px #ee802f;}
.iconblogduykhanh-cube.rss:hover::before { box-shadow: inset 0 0 0 4px #ee802f;}
.iconblogduykhanh-cube.rss::after { background-position: -384px 0;}
</style>
<a class="icon iconblogduykhanh-cube facebook" href="http://facebook.com/blogduykhanh">facebook</a>
<a class="icon iconblogduykhanh-cube twitter" href="http://twitter.com/duykhanhtv">twitter</a>
<a class="icon iconblogduykhanh-cube googleplus" href="http://plus.gooogle.com/+nguyenduykhanhtv">google+</a>
<a class="icon iconblogduykhanh-cube rss" href="http://blogduykhanh.blogspot.com/">rss</a>
Khánh

Một Blogger nghiệp dư thích tìm hiểu về blogspot và các thủ thuật blog. Hy vọng từ cái nhìn của một người không chuyên có thể giúp bạn dễ dàng hơn trong con đường xây dựng Blog.

KHI TA CHIA SẺ - HẠNH PHÚC ĐƯỢC NHÂN LÊN

CÓ THỂ BẠN MUỐN XEM

Đăng ký: Đăng Nhận xét (Atom)