Chào các bạn tiếp chủ đề thủ thuật blogspot, hôm nay mình sẽ code cho các bạn tham khảo Đăng ký mail theo dõi có tích hợp Facebook và Twiter, chủ đề này cũng có khá nhiều bạn tìm kiếm vậy chúng ta cũng nhau tìm hiểu nhé
Trước khi vào vấn để chính chúng ta cần biết tại sao lại phải tích hợp mạng xã hội vào hộp Đăng kỹ email theo dõi.
Thứ nhất: Tăng lượng Follow trên trang web của cả các bạn
Thứ hai: Tăng lương Follow cũng như sự tương tác của người dùng đối với các Fanpage của mình
Từ đó chúng ta sẽ có lợi về 2 mặt:
Traffic về website
Lượng theo dõi trên các trang trên mạng xã hội của bạn
Lợi nhuận trong kinh doanh
Cách làm hộp đăng ký Email có tích hợp mạng xã hội
Đầu tiên Đăng nhập vào Bloger→ Chủ để → Chỉnh sửa HTML. Nhấn Ctrl. + F và tìm mã <data: post.body /> trong mẫu của bạn và dán mã dưới đây ngay dưới <data: post.body />.
<section class="newsletter"><h2>Tại sao bạn nên đăng ký theo dõi ?</h2><div id="form-newsletter"><div class="social facebook"><a href="https://www.facebook.com/thetvplus" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKNtL4oBuYcehGpj_e0desrxw_SVS6KarEswrgMQNuPidTHl93rQ72vPTmrD7i-VluQ4MNr92rpBw3jG_CIn6obUc66qupYh4F2eiwzCAKBlZdvFNYndiwSwjO1s0jiCUuCE_9xv0DVdTR/s1600/nl-facebook@2x.png" /> </a> <iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2thetvplus/&width=90&height=21&colorscheme=light&layout=button_count&action=like&show_faces=false&send=false&appId=519648428126767&locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;"> </iframe> </div><div class="social twitter"><a href="https://twitter.com/thinhtk41" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3YIKmiFGoUVCxZHTOTdePpL-dQJJKL5-ByOQjEkbdyDIKjkGKNLAp90wQaUyCOriq3TGwoJwQ2ZuMH6FdjcBHoBWbCjR0APwSNUXYLoJeGsLbSZNyyMlionOXYjbRWoYOHNniR9LhHm70/s1600/nl-twitter@2x.png" /> </a> <iframe allowtransparency="true" class="social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&id=twitter-widget-0&lang=en&screen_name=thinhtk41&show_count=false&show_screen_name=false&size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button"> </iframe> <script> !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https'; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); </script> </div><div class="newsletter-form"><fieldset><h2> Đăng ký mail để nhận tất cả bài viết hay. </h2><div class="fields"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=DemoByCandythinh', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Nhập email của bạn vào đây.." /> <input name="uri" type="hidden" value="DemoByCandythinh" /> <input name="loc" type="hidden" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Đăng ký" /> </form></div></fieldset></div></div></section><style>.newsletter{text-align:center;margin:20px 0;}.newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}.newsletter .social{padding-top:20%;width:20%;float:left;position:relative}.newsletter #form-newsletter{display:block;width:90%;max-width:500px;min-width:400px;margin:0 auto}.newsletter:before,.newsletter:after{content:" ";display:table}.newsletter:after{clear:both}.newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}.newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}.newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}.newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}.newsletter .social a:hover img{transform:scale(1.1)}.newsletter .social .social-box{bottom:20px;left:50%;position:absolute}.newsletter .social .social-box.fb-like{margin-left:-45px}.newsletter .social .social-box.twitter-follow-button{margin-left:-30px}.newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}.newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}.newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}.newsletter .newsletter-form fieldset .fields{position:relative}.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:10.5px;transition:all ease 0.6s;}.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}</style><script type="text/JavaScript">fontsize = function () { var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width $(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);};$(window).resize(fontsize);$(document).ready(fontsize);</script>
CHÚ Ý: Trong
theme có thể có nhiều hơn một (thường là 2-4) <data: post.body /> vì vậy
hãy chắc chắn rằng bạn đã chọn đúng. Nếu tiện ích không xuất hiện, hãy thử thay
đổi vị trí nhé
Bạn thay đổi
những chữ màu đỏ bằng Feedburner, Facebook, Twiter của bạn
Ngoài ra bạn
có thể css hộp đăng ký mail theo ý mình
nhé, chúc các bạn thành công
Điểm 4.6/5 dựa vào 87 đánh giá