Khung đăng ký nhận tin (Subscribe by email) được sử dụng hầu hết trong các blogger/website để giúp cho độc giả yêu thích có thể đăng ký nhận tin từ blog của bạn. Trong bài viết này namkna giới thiệu cho các bạn thủ thuật được viết bời mybloggertricks giúp bạn tích hợp các tính năng popup và đăng ký của FeedBurner để cài đặt nó trên blog của bạn.
Lợi ích từ thủ thuật này?
Lý do chính tại sao để sử dụng là bởi vì nó sẽ không chỉ làm cho Blog của bạn trông chuyên nghiệp mà còn làm tăng lượng đăng ký email cho Blog của bạn. Phiên bản gốc của hộp subscribe được tạo ra bởifranklin.Phiên bản sửa đổi này được namkna việt hóa lại cho cácblogger việt.
Ảnh minh họa:
Tiến hành thủ thuật.
Bạn có thể cài đặt Widget này một cách dễ dàng trong Blog của bạn bằng cách làm theo các bước đơn giản ....
☼ Cách tiến hành:1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML)
/* ColorBox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block;} .cboxIframe{width:100%; height:100%; display:block; border:0;} /* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:#000;opacity:0.5 !important;} #colorbox{ box-shadow:0 0 15px rgba(0,0,0,0.4); -moz-box-shadow:0 0 15px rgba(0,0,0,0.4); -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4); } #cboxTopLeft{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-AV57zpMzzB8/ULYblJsOOzI/AAAAAAAAAXc/l6KAxKkYUg8/s1600/controls-namkna-blogspot-com.png) no-repeat 0 0;} #cboxTopCenter{height:14px; background:url(http://2.bp.blogspot.com/-ysVTS24wKjs/ULYcwTuLDkI/AAAAAAAAAXk/xA-nyRZbpNs/s1600/border-namkna-blogspot-com.png) repeat-x top left;} #cboxTopRight{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-AV57zpMzzB8/ULYblJsOOzI/AAAAAAAAAXc/l6KAxKkYUg8/s1600/controls-namkna-blogspot-com.png) no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-AV57zpMzzB8/ULYblJsOOzI/AAAAAAAAAXc/l6KAxKkYUg8/s1600/controls-namkna-blogspot-com.png) no-repeat 0 -32px;} #cboxBottomCenter{height:43px; background:url(http://2.bp.blogspot.com/-ysVTS24wKjs/ULYcwTuLDkI/AAAAAAAAAXk/xA-nyRZbpNs/s1600/border-namkna-blogspot-com.png) repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-AV57zpMzzB8/ULYblJsOOzI/AAAAAAAAAXc/l6KAxKkYUg8/s1600/controls-namkna-blogspot-com.png) no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url(http://4.bp.blogspot.com/-AV57zpMzzB8/ULYblJsOOzI/AAAAAAAAAXc/l6KAxKkYUg8/s1600/controls-namkna-blogspot-com.png) repeat-y -175px 0;} #cboxMiddleRight{width:14px; background:url(http://4.bp.blogspot.com/-AV57zpMzzB8/ULYblJsOOzI/AAAAAAAAAXc/l6KAxKkYUg8/s1600/controls-namkna-blogspot-com.png) repeat-y -211px 0;} #cboxContent{background:#fff; overflow:visible;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url(http://1.bp.blogspot.com/-bW0dTnGlAKE/ULYdKc1F0II/AAAAAAAAAXs/lnUgAIq6x0E/s1600/loadingbackground-namkna-blogspot-com.png) no-repeat center center;} #cboxLoadingGraphic{http://1.bp.blogspot.com/-mfZMsMzXOnc/ULYdYbb1cDI/AAAAAAAAAX0/f20pI_ghniY/s1600/loading-namkna-blogspot-com.png) no-repeat center center;} #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;} #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://4.bp.blogspot.com/-AV57zpMzzB8/ULYblJsOOzI/AAAAAAAAAXc/l6KAxKkYUg8/s1600/controls-namkna-blogspot-com.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;} #cboxPrevious{left:0px; background-position: -51px -25px;} #cboxPrevious.hover{background-position:-51px 0px;} #cboxNext{left:27px; background-position:-75px -25px;} #cboxNext.hover{background-position:-75px 0px;} #cboxClose{right:0; background-position:-100px -25px;} #cboxClose.hover{background-position:-100px 0px;} .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;} .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;} /*-----------------------------------------------------------------------------------*/ /* box popup /*-----------------------------------------------------------------------------------*/ #subscribe { font: 12px/1.2 Arial,Helvetica,san-serif; } #subscribe a, #subscribe a:hover, #subscribe a:visited { text-decoration:none; } .box-title { color: #2C2D31; font-size: 20px; font-weight: bold; margin: 10px 0; text-align: center; } .box-tagline { color: #999; font-size: 14px; margin: 0; text-align: center; } #subs-container { padding: 35px 0 30px 0; position: relative; } .box-side { width: 170px; text-align: center; } .box-side.left { padding: 0 30px 0 15px; border-right: 1px solid #ecedf3; } .box-side.right { float: right; margin-top: -223px; margin-right: 10px; } .box-icon { width: 72px; height: 54px; padding: 6px 0 0 0; margin: 0 auto; } .box-icon a.rss{ display: block; width: 70px; height: 56px; margin: 0 auto; } .box-icon a{ display: block; width: 72px; height: 54px; } .box-icon a.email img, .box-icon a.rss img { margin: -5px 0 0; border: 0 none; } .box-side h4, .box-side h4 a { font-size: 14px; line-height: 14px; color: #f26535; font-weight: bold; } .box-side h4 { margin: 20px 0 10px 0; } .box-side h5 { font-size: 11px; color: #5e6066; line-height: 18px; margin: 0 0 20px 0; } a.sub { background: url("http://imgboot.com/images/cybersidh/subscribebutton.png") no-repeat scroll 0 0 transparent; color: #996633; display: block; height: 44px; line-height: 29px; margin: 0 auto; text-indent: -999em; width: 130px; } .box-side h4 a:hover { color: #f26535; } #box-or { background: #fff; font-size: 12px; font-weight: bold; height: 25px; line-height: 25px; margin: -115px 0 0 208px; position: absolute; width: 20px; } a:link, a:visited { border:none; } .demo { display:none; }
- Bây giờ hãy bấm nút xem trước nếu mọi thứ trên blog hoạt động tốt thì bấm Lưu mẫu lại.
5- Bây giờ bạn thêm 1 widget mới bằng các vào Bố cục (Layout) => Thêm tiện ích (Add Widget) =>HTML/Javarscipt và dán đoạn code bên dưới vào:
Đăng ký để nhận tin mới nhất
Tin nhắn sẽ được gửi dến hộp thư của bạn
', 'popupwindow', 'scrollbars=no,width=560,height=540');return true">Điền địa chỉ Email của bạn:
--namkna--" name="uri"/>Đăng ký" />Delivered by FeedBurner | Powered By blogspot
.com/">Namkna
Hãy theo dõi ngay hôm nay để nhận được các bài viết chất lượng và miễn phí.
- Hãy xóa bỏ phần màu xanh nếu blog của bạn có file Jquery.Thay --namkna--thành Id feebbune của bạn.
No comments:
Write comments