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/AVvXsEgPICstBtiNOgbB4-oO7y5OPI29LX9cFxufc1nsQ8WQwz_7WdVqftyIJoEeGJLzCiaMUELmQXFuLR_nTXSv4aA0ztbNjHXzXCiQZer_5lQX77urK-DSA1lLRbD3BQaqilKJNBNQKGwX__M/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">
</scripTrong đó:
- 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
- Template Blogspot Responsive cực đỉnh cho blog hình ảnh, sản phẩm
- Một số vấn đề thường gặp khi sử dụng blogspot
- Xóa chữ "đọc thêm..." mặc định ngoài trang chủ và trang Label blogspot
- Cách cài đặt Domain (tên miền) cho blogspot không bị chặn
- Xóa dòng chữ "hiển thị tất cả bài đăng có nhãn..." trong blogspot
- Template tin tức giải trí tuổi trẻ [tiin] cho blogspot
- Rss Feed Subscription đẹp - Nhận tin theo dõi Blogspot
- Thêm tác giả, quyền Admin cho blogspot
- Thêm Slide bài viết mới chạy ngang cho Blogspot
- Thủ thuật Facebook chèn link web vào stt FB hiện chung với like cmt và share
- Hiển thị nhãn (label) phong cách màu tím cực nổi cho blogspot [V3]
- Biểu tượng trái tim tình yêu đẹp trên Facebook (FB)
Comments[ 0 ]
Đăng nhận xét