Nút mạng xã hội phong cách Metro cho Blogspot Blogger

Các nút theo dõi là nguồn chính để có được người theo dõi trên mạng xã hội. Vì blogger không cung cấp các nút theo dõi nên bạn phải thêm nó vào blog của mình từ các blog và trang web khác. Có nhiều trang web khuếch đại nội dung cung cấp các nút theo dõi và chia sẻ, nhưng các nút này không hợp thời trang và phản hồi và đôi khi chúng phản hồi (các nút addthis). Addthis cung cấp các nút theo dõi đáp ứng nhưng chúng có kích thước rất nhỏ và cũng mất thời gian để tải. Trước đây tôi đã tạo một số bài đăng trong đó tôi đã chia sẻ các nút theo dõi đáp ứng thời trang và các nút theo dõi cho tiêu đề và trong bài đăng này tôi sẽ chia sẻ một số loại tiện ích mới theo kiểu nút metro.
Các nút này là phong cách và đáp ứng, có thể bạn đã thấy các nút kiểu metro trong một số blog. Các nút này được thiết kế giống như windows 8, bạn có thể xem bên dưới:
Đây là tiện ích nút theo dõi kiểu metro thường được sử dụng, Trong phần này tôi sẽ chia sẻ các nút theo kiểu metro theo 3 kiểu khác nhau. Chọn một kiểu và làm theo các bước dưới đây để thêm kiểu đó vào blog của bạn:
Bước 1: Chuyển đến bảng điều khiển blogger.
Bước 2: Chọn bố cục trong menu ở bên trái.
Bước 3: Nhấp vào thêm một tiện ích và cuộn xuống Html / javascript.
Bước 4: Nhấp vào Html / javascript, sao chép mã của các nút theo dõi mong muốn từ bên dưới và dán nó vào cửa sổ Html / javascript:
Mẹo: Để sao chép mã trước tiên, hãy chọn mã bằng cách nhấp chuột trái và sau đó sử dụng Ctrl + C trên bàn phím để sao chép mã!
Kiểu 1

<div class='metro-style'>
<li><a class="facebook" href="https://www.facebook.com/101Helper" rel="nofollow" target="_blank"></a></span></li>
<li><a class="twitter" href="http://twitter.com/accountname" rel="nofollow" target="_blank"></a></li>
<li><a class="Googleplus" href="https://plus.google.com/googleplus" rel="nofollow" target="_blank"></a></li>
<li><a class="pinterest" href="http://pinterestnterest.com/yourID" rel="nofollow" target="_blank"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/yourID" rel="nofollow" target="_blank"></a></li>
<li><a class="yt" href="http://www.youtube.com/channel" rel="nofollow" target="_blank"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/101helper" rel="nofollow" target="_blank"></a></li>
</div>
<style>
.metro-style{width:285px}
.metro-style li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-style .facebook,.twitter,.Googleplus,.pinterest,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-style .facebook{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-style .twitter{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-style .Googleplus{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-style .pinterest{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-style .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-style .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-style .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-style li:hover .facebook{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-style li:hover .twitter{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-style li:hover .Googleplus{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-style li:hover .pinterest{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-style li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-style li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-style li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Kiểu 2

<div class="metro-social">
<br />
<br />
<li><a class="fb" href="https://www.facebook.com/101Helper" rel="nofollow" target="_blank"></a></span></li>
<li><a class="tw" href="https://twitter.com/101Helperblog" rel="nofollow" target="_blank"></a></span></li>
<li><a class="gp" href="https://plus.google.com/+101helperBlogspot" rel=" nofollow=" target="_blank"></a></span></li>
<li><a class="fd" href="http://feeds.feedburner.com/101Helper" rel="nofollow" target="_blank"></a></span></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:135px;height:141px; position: relative; top: -3px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:135px;height:141px;position: absolute;
left: 143px;top: -3px;}
.metro-social .gp{position:absolute;left:284px;top: -3px;width:135px;height:141px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:135px;height:141px;position: absolute;
left: 426px;top: -3px;}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Kiểu 3

<style type="text/css">
#metro-style{ width:500px;}
ul.metro-style{
margin:0;
padding:3px;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
position:absolute;
}
ul.metro-style li{
display: inline-block;
width: 55px;
height: 50px;
margin-right: 10px;
background: white;
font: bold 36px Arial;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.metro-style li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.metro-style li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px;
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.metro-style li a img{
border-width: 0;
}
ul.metro-style li:hover a{
  -webkit-transform:scale(1.10); /* Safari and Chrome */
    -moz-transform:scale(1.10); /* Firefox */
    -ms-transform:scale(1.10); /* IE 9 */
    -o-transform:scale(1.10); /* Opera */
     transform:scale(1.10);
}
ul.metro-style li:hover a span{
background-color:black;
-moz-transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
width:50px;
height:10px;
}
#title{
font-size:20px;
font-weight:bold;
font-family:Trebuchet ms;
color:#fff;
background-color:#444;
width:288px;
text-align:center;
}
</style>
<div id="title">Follow us on:<div>
<div id="metro-style">
<ul class="metro-style">
<li><a href="http://www.facebook.com/101helper"><img src="http://s2.postimg.org/c9z5wq7xh/image.png" title="" /></a></li>
<li><a href="https://plus.google.com/101helperblogspot"><img src="http://s27.postimg.org/lj8oy6wgv/image.png" title="" /></a></li>
<li><a href="http://www.twitter/101helperblog"><img src="http://s30.postimg.org/v33bx5ggd/image.png" title="" /></a></li>
<li><a href="http://feeds2.feedburner.com/101helper"><img src="http://s29.postimg.org/g1imfb8w3/rss.png" title="" /></a></li>
</ul>
</div>

Bước 5: Nhấp vào lưu và bạn đã hoàn tất!

Bạn có thích bài đăng này và tiện ích này đang hoạt động đúng trong blog của bạn? gửi cho tôi thông tin phản hồi của bạn trong ý kiến. Nếu bạn có bất kỳ vấn đề hãy hỏi tôi. Theo dõi và đăng ký để nhận các bản cập nhật mới nhất trong hộp thư đến của bạn. Chia sẻ bài đăng này với những người khác.

Thẻ tìm kiếm: 3 nút theo kiểu Metro cho blogger, blogger theo phong cách metro, theo dõi các biểu tượng cho blogger, Responsive follow icon cho blogger, blogger widget.