Cách chèn nút mạng xã hội vào blogspot cực kỳ đơn giản
Thêm nút mạng xã hội vào Blog có nhiều lợi ích: chia sẻ bài viết nhanh, thuận lợi cho SEO, thu hút lưu lượng truy cập, nhiều người biết đến Blog..
Hiện nay mạng xã hội là một phương tiện truyền thông có tầm quan trọng rất lớn trong việc quảng bá, giới thiệu sản phẩm dịch vụ, thúc đẩy lưu lượng truy cập Web hoặc Blog. Có rất nhiều mạng xã hội, tuy nhiên mức độ phổ biến và thông dụng phải kể đến Facebook, Youtube, Twitter, LinkedIn.. Mạng xã hội cho phép người dùng dễ dàng chia sẻ những thông tin hay cho bạn bè, đối tác, người thân nhằm giúp truyền bá thông tin và tiếp nhận phản hồi một cách rộng rãi. Mạng xã hội với tính năng lan truyền vừa giúp đưa thông tin về sản phẩm lan nhanh trong cộng đồng vừa có thể “lắng nghe” tiếng nói của khách hàng để có sự điều chỉnh kịp thời cho phù hợp với nhu cầu của họ.
Thêm nút chia sẻ lên mạng xã hội vào các bài viết luôn rất quan trọng đối với trang web hay Blog nào. Điều này giúp thu hút người biết đến website của bạn, những nút chia sẻ mạng xã hội này sẽ là công cụ giúp người xem có thể chia sẻ những bài viết của bạn lên mạng xã hội một cách nhanh chóng.
Nếu người xem thấy những nút chia sẻ mạng xã hội này, và chỉ một vài người trong số họ chia sẻ bài viết lên đó thì sẽ tạo ra những điều thuận lợi cho bạn trong SEO, đồng thời tăng lượt truy cập vào website của bạn.
Cách thêm nút mạng xã hội cho blogspot được thực hiện như sau:
Trước tiên, bạn cần sao chép đoạn mã sau đây. Lưu ý: Bạn cần thay những đường link màu xanh thành địa chỉ các trang mạng xã hội của bạn nhé.
Code mẫu dạng 1:
<center><style type='text/css'>
.wg-roseicwidget { width: 300px; margin: -10px; text-decoration: none; }
.wg-roseicwidget ul { margin: 0; padding: 0; text-decoration: none;}
.wg-roseicwidget ul li { list-style:none; padding: 0; text-transform: none; text-decoration: none;}
.wg-roseicwidget ul li a { color: #fff; display:block; text-decoration: none;}
.wg-roseicwidget ul li a:hover { color: #c9c9c9; background-color: #333; text-decoration: none; }
.wg-roseicwidget ul li .rss { background: url("https://i.imgur.com/7qjOp5W.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.wg-roseicwidget ul li .twitter { background: url("https://i.imgur.com/SNHzVPB.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.wg-roseicwidget ul li .facebook { background: url("https://i.imgur.com/7C1YloR.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.wg-roseicwidget ul li .youtube { background: url("https://i.imgur.com/6BToj89.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.wg-roseicwidget ul li .linkedin { background: url("https://i.imgur.com/Xo5BhAh.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
</style>
< div class="wg-roseicwidget">
< ul >
<li> < a class="facebook" href=" https://www.facebook.com/profile.php?id=100075290743999"> Follow me on Facebook< /a> < /li >
<li> < a class="rss" href="http://feeds.feedburner.com/Vugiang7919"> Subscribe to the RSS Feed < /a> < /li >
<li> < a class="twitter" href="https://twitter.com/VuHongGiang3"> Follow me on Twitter < /a> < /li >
<li> < a class="youtube" href=" https://www.youtube.com/channel/UCTswjHwsgJqrRI0badf9blw"> Subscribe to my YouTube Channel < /a> < /li >
<li> < a class="linkedin" href="Vugiang7919VIP"> Connect With Us on LinkedIn < /a> < /li >
</ ul >
</div>
</center>
Code mẫu dạng 2:
<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(https://i.imgur.com/wVYXUxV.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://i.imgur.com/wVYXUxV.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://i.imgur.com/OyxLC15.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://i.imgur.com/OyxLC15.png) no-repeat 0 0}
.abt-social-slide li a.youtube-p{background:url(https://i.imgur.com/a7hRwdF.png) no-repeat 0 -88px}
.abt-social-slide li a.youtube-p:hover{background:url(https://i.imgur.com/a7hRwdF.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://i.imgur.com/P82zwLw.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://i.imgur.com/P82zwLw.png) no-repeat 0 0}
</style>
< div class="abt-social-slide">
< ul >
<li> < a class="facebook" href=" https://www.facebook.com/profile.php?id=100075290743999"> Facebook < /a> < /li >
<li> < a class="twitter" href="https://twitter.com/VuHongGiang3"> Twitter < /a> < /li >
<li> < a class="youtube" href=" https://www.youtube.com/channel/UCTswjHwsgJqrRI0badf9blw"> YouTube < /a> < /li >
<li> < a class="rss" href="http://feeds.feedburner.com/Vugiang7919"> RSS < /a> < /li >
</ ul >
</div>
Sau đó, bạn vào Blog < Chọn Bố cục < Chọn Thêm tiện ích < Chọn HTML/JavaScript
Tiếp theo, bạn dán đoạn mã code vừa sao chép vào phần nội dung, ghi tiêu đề và Nhấn nút Lưu.
Kết quả:
Code mẫu dạng 1:
Code mẫu dạng 2:
Kết luận:
Trên đây, mình đã giới thiệu xong cho các bạn cách chèn nút trên trang mạng xã hội thông dụng vào blogspot của bạn một cách dễ dàng và đơn giản nhất. Hy vọng bài viết hữu ích cho bạn và rất mong bạn hãy chia sẻ bài viết lên các trang mạng xã hội của bạn như: Facebook, Youtube, Instagram, Twitter, Pinterest..
Cảm ơn các bạn đã theo dõi bài viết và chúc các bạn thành công./.