Ngày nay, những tiện ích theo dõi qua mạng xã hội (Widget Social Subscription) đang phổ biến trên tất cả mọi website. Lý do đơn giản là vì nếu bạn nắm trong nay một lượng người theo dõi càng lớn, thì đồng nghĩa với việc lưu lượng truy cập bạn sẽ càng cao. Qua việc đó thì chắc bạn cũng thấy được tiện ích này quan trọng đến mức nào. Như vậy điều quan trong bây giờ là cần phải thêm vào một tiện ích thật đẹp để bắt được cái nhìn của người dùng. Tại bài viết này mình xin chia sẻ widget theo dõi mình khá đẹp mà mình đã sử dụng.
Hướng dẫn cài đặt và sử dụng tiện ích theo dõi qua mạng xã hội
Bước 1: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML. Tìm đến thẻ ]]></b:skin> và thêm đoạn CSS phía sau lên trên.
/* Social Subscription----------------------------------------------- */
.Twittco {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCMZIMHJGslanpS2bwZqGIgCiJ_M4iyvcbm66hOlASnr0-6E1d4WdgFcJl1xxr5SLg934SBdZPzSx-PR4Ov8HK1WN7DsqKIj29L6Yn7wQMUU7NuJYnVHKiKH2feU5mDVqaowmhhyG0Fn0/s1600/twitter_bird.png) 0 0 no-repeat;
padding: 0 15px 0 20px;
margin-left: 0;
height: 45px;
}
.Twitterocfollow {
background-color: #fff;
width: 294px;
height: 70px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
}
.iframeoftwi {
margin-left: 55px;
margin-top: -31px;
}
.Socialiconsoc {
background-color: #fff;
width: 294px;
height: 70px;
background-repeat: no-repeat;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
}
.Facebookox {
background-color: #fff;
width: 294px;
height: 40px;
margin-top: -6px;
background-repeat: no-repeat;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}
.Feedburneroc {
background-color: #fff;
background-repeat: no-repeat;
margin-top: -19px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
width: 294px;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
}
#subboxs {
border: 1px solid #d2d2d2;
padding: 5px 26px 5px 10px;
color: #838383;
font-size: 18px;
height: 28px;
font-family: "Rancho", cursive;
outline: none;
width: 146px;
margin: 0 5px 0 0;
}
#subbuttons {
background-color: #3C3939;
border: 3px solid #272727;
cursor: pointer;
color: white;
width: 90px;
height: 38px;
margin: 0;
font-size: 22px;
font-family: "Rancho", cursive;
margin-right: 4px;
float: right;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#subbutton:hover {
background-color: #292929;
border: 3px solid #292929;
}
Bước 2: Chọn Lưu mẫu và tiếp tục chuyển đến phần Bố cục trong Blogger.
Bước 3: Tại Bố cục bạn chọn vào Thêm Tiện ích tại vị trí mà bạn muốn đặt, tìm đến và chọn HTML/Javascript.
Bước 4: Tại hộp thoại của HTML/Javascript bạn chèn đoạn code phía dưới vào Nội dung.
<style> @import url(http://fonts.googleapis.com/css?family=Rancho); </style> <div class="Socialiconsoc"> <table border="0" margin="0px" rules="none" cellspacing="0px" cellpadding="0px"> <tbody><tr valign="top"> <td style="padding-top: 12px; padding-left: 12px" width="60px"> <a href="http://feeds.feedburner.com/your-feedburner-id?ref=sb" target="_blank" title="Subscribe via RSS"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/rss.png" alt="RSS" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td> <td style="padding-top: 12px" width="60px"> <a href="http://twitter.com/intent/user?screen_name=your-twitter-id&ref=sb" target="_blank" title="Follow on Twitter"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/twitter.png" alt="Twitter" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td> <td style="padding-top: 12px" width="60x"> <a href="http://www.facebook.com/your-facebook-ID?ref=sb" target="_blank" title="Follow on Facebook"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/facebook.png" alt="Facebook" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td> <td style="padding-top: 12px" width="60x"> <a href="http://pinterest.com/Your-pinterest-ID?ref=sb" target="_blank" title="Follow on Pinterest"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/pinterest.png" alt="Pinterest" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td> <td style="padding-top: 12px" width="60px"> <a href="http://www.youtube.com/Your-Youtube-ID?ref=sb" target="_blank" title="Subscribe on YouTube"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/youtube.png" alt="YouTube" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a> </td></tr></tbody></table> </div> <div class="google+ss"> <div class="g-page" data-width="296" data-href="//plus.google.com/Your-Google-ID" data-layout="landscape" data-rel="publisher"></div> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> <div align="left" class="Facebookox"> <div style="padding:8px 0px 5px 10px"> <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FYour-Facebook-ID&width=284&height=35&colorscheme=light&layout=standard&action=like&show_faces=false&send=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:284px; height:35px;" allowtransparency="true"></iframe> </div> </div> <div class="Twitterocfollow"> <div class="Twittco"></div> <div class="iframeoftwi"> <a href="https://twitter.com/Your-twitter-id" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @Twiiter-Page-Name</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div></div> <div class="Feedburneroc"> <div style="padding:14px 0 11px 7px"> <form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=Your-feed-burner-id', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input id="subboxs" name="email" onblur="if ( this.value == '' ) { this.value = 'Enter your email address...'; }" onfocus="if ( this.value == 'Enter your email address...') { this.value = ''; }" type="text" value="Enter your email address..." /> <input name="uri" type="hidden" value="Your-feed-burner-id" /> <input name="loc" type="hidden" value="en_US" /> <input id="subbuttons" type="submit" value="Subscribe!" /> </form></div></div>
Bước 5: Thay đổi toàn bộ những phần đánh dấu thành của bạn và lưu lại.
Sau khi làm xong 5 bước trên các bạn đã có được tiện ích theo dõi khá hữu ích và đẹp cho blog của bạn. Chúc các bạn sau khi sử dụng widget này có một blog ngày càng nhiều khách truy cập!
"nguồn bài viết từ KslZone.NET".
0 nhận xét:
Đăng nhận xét