Saturday, May 13, 2017

Cách làm hộp đăng ký Email tích hợp mạng xã hội chi tiết

Từ khóa

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/&amp;width=90&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=519648428126767&amp;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&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=thinhtk41&amp;show_count=false&amp;show_screen_name=false&amp;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)?&#39;http&#39;:&#39;https&#39;;        if(!d.getElementById(id)){          js=d.createElement(s);          js.id=id;          js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);    </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:&quot; &quot;;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á
  • Lazada : Mở chương trình "giá khuynh đảo", giới hạn mỗi người mua tối đa 2 sản phẩm Click xem
  • Adayroi : iPhone 7 lần đầu về giá dưới 15 triệu đồng Click xem
  • Tiki : Giảm 10% cho thẻ tín dụng HSBC Click xem

Bài liên quan