Home » Thủ thuật blog
Thêm nút theo dõi (Follow) cho blogspot
Chủ Nhật, 12 tháng 5, 2013
Làm thế nào để thêm nút theo dõi cho blogspot?
Trong đó:
- Giá trị: được thay thế bằng giá trị feedburner google của blogspot bạn.
- Ví dụ của mình là: http://feeds.feedburner.com/itviet360
Tags:
Thu thuat, Thu thuat blogspot, Thủ thuật blog
Mặc định Blogger đã có nút theo dõi (Follow) cho mình nhưng để làm gọn và có hiệu ứng tùy chỉnh thì chúng ta cần thêm những thủ thuật nhỏ.
- Bài viết này mình chia sẻ cách thêm thủ thuật với cách thêm nút Follow cho phép người đọc Blog của bạn có thể nhận vài viết mới cập nhật qua Email hoàn toàn miễn phí.
Xem Demo: http://demo-itviet360.blogspot.com/ (góc phải màn hình - hiệu ứng nhấp chuôt sẽ hiển thị lên)
- Hướng dẫn cách làm thủ thật:
1. Vào bảng điều khiển blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget)
2. Dán code dưới đây vào tiện ích vừa thêm:
<style type="text/css">
/*<![CDATA[*/
#esgfollowSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
.followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
.esgfollowButton {background: #464646;color: #CCC !important;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
.esgfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnXbeKP16qKl-iQsQh-f0To4JbPjEbQIiAROsPx66B1Ax6wZNSUg4aNAKSorSP4ewOS0PFLmdSafSY5DarBsc71fF5jMmQ_xY5MS5t9CGopzt-Quebf7yERaqPXg8QwrKslY_wEUyI7Fc/s1600/follow-bloggertrix.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
.esgfollowButton:hover,.followActive {color: #fff !important;}
.esgfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
.followactive {background-color: #333;}
.esgfollowForm {padding: 15px;}
.esgfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
.esgfollowForm p {margin: 0 0 10px;}
.esgfollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
.esgfollowForm form {text-align: center;}
.esgfollowForm .emailInput:focus {color: #000;border-color: #000;}
.esgfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
.emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
.emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
.esgFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
.esgFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
.esgFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(esg){esg(document).ready(function(){esg.extend(esg.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=esg("#esgfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);esg(".esgfollowButton").click(function(e){if(followBox.hasClass("followOpened")){esg(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{esg(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
<div id="esgfollowSubscribe" style="bottom: -971px;">
<div class="esgfollowForm">
<a class="esgfollowButton" href="#" title="Follow"><b>+ Follow</b></a>
<center>
<h3>Follow itviet360</h3>
Nhận email miễn phí thông tin cập nhật đến hộp thư của bạn
</center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=e-itviet360', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="emailInput" name="email" placeholder="Enter Your Email..." type="text" />
<input name="uri" value="itviet360" type="hidden" />
<input name="loc" value="en_US" type="hidden" />
<input class="emailSubmit" value="Subscribe" type="submit" />
</form>
<div class="esgFollowFooter">
<a href="http://feedburner.google.com/itviet360" target="_blank">Delivered by FeedBurner</a><a href="http://itviet360.com" target="_blank">Thủ thuật blogspot</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</scrip
t>Trong đó:
- Giá trị: được thay thế bằng giá trị feedburner google của blogspot bạn.
- Ví dụ của mình là: http://feeds.feedburner.com/itviet360

- Lưu trữ blogger theo dạng lịch với nhiều mẫu đẹp
- Cách làm blogspot hiệu quả - Hướng dẫn blogspot toàn tập
- Share 3 template bloger đẹp cho anh em
- 12 cách giảm thời gian load trang cho bloger
- Hướng dẫn cách chat nhóm trên Facebook (FB)
- Hướng dẫn cách chụp ảnh màn hình trên Windows 8
- Cách cài đặt Password cho Windows 8 - mật khẩu User Admin
- Xem Blogspot với nhiều giao diện khác nhau
- Ký tự đặc biệt đẹp chèn vào trong Yahoo, Facebook...
- Page number Navigation - Code phân trang đẹp cho blogspot
- Sửa lỗi bàn phím PC, Laptop bị khóa trên win 7, XP, 8
- Khung chia sẻ bài viết blogspot hiển thị chi tiết tác giả bài viết
Comments[ 0 ]
Đăng nhận xét