Tiện ích theo dõi qua email cho Blogger với follow.it - NTLRUBY -->
Tiện ích theo dõi qua email cho Blogger với follow.it Tiện ích theo dõi qua email cho Blogger với follow.it
  • Tiện ích theo dõi qua email cho Blogger với follow.it

     Theo thông báo của Google thì Blogger đã ngưng cung cấp tiện ích theo dõi qua email và bên thứ 3 FeedBurner cũng ngừng cung cấp tính năng đăng ký nhận thông tin qua email cũng như ngừng gửi email đến người đăng ký.

    Việc thêm tiện ích theo dõi qua email cũng là cách thu hút độc giả, những người thường xuyên ghé thăm đọc bài viết trên blog. Hơn nữa nếu blog có nhiều người đăng ký nhận bài mới qua email cũng làm cho lượng truy cập blog ổn định và thường xuyên.

    Vậy các bạn đã có bên thứ 3 (nhà cung cấp) nào để thay thế chưa?

    Đăng ký nhận tin qua email

    Bài này mình giới thiệu với các bạn 1 nhà cung cấp mới đó là follow.it, và tiện thể chia sẽ thêm cho các bạn một Widget đẹp cho tiện ích theo dõi qua email kết hợp mạng xã hội cho blogspot.

       1 - Sử dụng follow.it

    Bước 1:

    Để sử dụng nhà cung cấp này cũng khá đơn giản, các bạn chỉ việc truy cập vào follow.it.

    Sau đó kéo nhẹ xuống và nhập tên miền blog của mình vào rồi bấm Next.

    Đăng ký nhận tin bài viết mới qua email


    Bước 2:

    Tại đây có 2 trường hợp để các bạn lựa chon:
         -Trường hợp 1: Chọn form cho sẵn, các bạn có thể chỉnh sửa màu sắc, font chữ, cỡ chữ ...cho form sau đó bấm Continue.
    Đăng ký nhận thông báo qua email
    Copy code mà follow.it cung cấp
    Bây giờ các bạn trở về trang quản tri Blogger của mình vào phần Bố cục->thêm tiện ích HTML/javascript và dán đoạn code vừa copy ở trên vào rồi lưu lại là xong.

         -Trường hợp 2: Nếu các bạn đã có form sẵn trước đó trên blog của mình thì các bạn kéo thêm xuống và copy đoạn code phía dưới.
    Sau đó thay nó vào form có sẵn của mình như 2 hình dưới đây.
    -Code form trước khi thay
    thông báo nhận tin qua email
    -Code form khi đã thay
    Nhận thông báo qua email


       2 - Widget đẹp cho tiện ích theo dõi qua email kết hợp mạng xã hội cho blogspot.

    Tiện ích theo dõi qua email cho Blogger

    Bước 1:

    Các bạn vào trang quản trị Blogger -> chỉnh sửa HTML và tìm đến thẻ đóng </head> rồi dán đoạn code sau vào trước nó, sau đó lưu lại.

    <style>

    :root {--color-main: #008c5f; --color-hover: #1d2129; } #NTLRUBYSubscribe {width:100%; height:auto; background:#fff; border-radius:7.5px; box-shadow:0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); display: block; margin:auto; line-height:40px; padding:0px} #NTLRUBYSubscribe .email__ {padding:15px 15px 5px;} #NTLRUBYSubscribe .email {margin:auto; color:#777;} #NTLRUBYSubscribe .email:before {content:&#39;&#39;; width:50px; height:50px; display:block; text-align:center; margin:auto; border-radius:100px; transition:all .3s ease; -webkit-animation:NTLRUBYRing 5s 0s ease-in-out infinite; -webkit-transform-origin:50% 4px; -moz-animation:NTLRUBYRing 5s 0s ease-in-out infinite; -moz-transform-origin:50% 4px; animation:NTLRUBYRing 5s 0s ease-in-out infinite; transform-origin:50% 4px; background:url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z&#39; fill=&#39;%23008c5f&#39;/%3E%3C/svg%3E&quot;) center center / 50px no-repeat;} #NTLRUBYSubscribe .medsos__ {padding:15px 0px; line-height:0px; border-top:1px solid #cccfe2;} #NTLRUBYSubscribe form {display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; align-items:center; margin:0px 0px 15px; padding:0px} #NTLRUBYSubscribe form:before {left:30px; position:absolute; display:block; width:20px; height:20px; background:url(&quot;data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23717171'/></svg>&quot;) no-repeat; content:&#39;&#39;;} #NTLRUBYSubscribe input {width: calc(100% - 35px); height:35px; border:1px solid #cccfe2; border-right:0px; padding:8px 10px 8px 40px; font-size:12px; border-radius:50px 0px 0px 50px;} #NTLRUBYSubscribe button {width:35px; height:35px; margin:0px; padding:0px; background-color:var(--color-main); border:0px; box-shadow:none; vertical-align:top; cursor:pointer; transition:all .3s ease; background-image:unset; border-radius:0px 50px 50px 0px;} #NTLRUBYSubscribe button:hover, #NTLRUBYSubscribe button:focus {background-color:var(--color-hover);} #NTLRUBYSubscribe button:before {display:inline-block; width:20px; height:20px; margin:0px; background:url(&quot;data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='%23fff'/></svg>&quot;) no-repeat; content:&#39;&#39;; vertical-align:-3px;} #NTLRUBYSubscribe .medsos {width:100%; text-align:center;} #NTLRUBYSubscribe .medsos svg {width:20px;height:20px;margin-top:7px} #NTLRUBYSubscribe .medsos svg path {fill:#fff} #NTLRUBYSubscribe .medsos a {display:inline-block; margin-right:7px; width:35px; height:35px; box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.4); transition: all ease-in-out 300ms; border-radius:100px;} #NTLRUBYSubscribe .medsos a:last-child {margin-right:0px;} #NTLRUBYSubscribe .medsos a:hover {box-shadow: 0px 23px 15px -3px rgba(0,0,0,0.25); transform: translate(0px, -10px) scale(1.05);} #NTLRUBYSubscribe .medsos .facebook{background:#3a579a} #NTLRUBYSubscribe .medsos .twitter {background:#00abf0} #NTLRUBYSubscribe .medsos .googleplus {background:#df4a32} #NTLRUBYSubscribe .medsos .youtube {background:#cc181e} #NTLRUBYSubscribe .medsos .instagram {background:#992ebc} #NTLRUBYSubscribe .medsos .codepen {background:#292E34}

     @keyframes NTLRUBYRing{0% { transform: rotate(0); } 1% { transform: rotate(30deg); } 3% { transform: rotate(-28deg); } 5% { transform: rotate(34deg); } 7% { transform: rotate(-32deg); } 9% { transform: rotate(30deg); } 11% { transform: rotate(-28deg); } 13% { transform: rotate(26deg); } 15% { transform: rotate(-24deg); } 17% { transform: rotate(22deg); } 19% { transform: rotate(-20deg); } 21% { transform: rotate(18deg); } 23% { transform: rotate(-16deg); } 25% { transform: rotate(14deg); } 27% { transform: rotate(-12deg); } 29% { transform: rotate(10deg); } 31% { transform: rotate(-8deg); } 33% { transform: rotate(6deg); } 35% { transform: rotate(-4deg); } 37% { transform: rotate(2deg); } 39% { transform: rotate(-1deg); } 41% { transform: rotate(1deg); } 43% { transform: rotate(0); } 100% { transform: rotate(0); } }

    </style>

    Bước 2:

    Tiếp theo các bạn vào phần Bố cục -> thêm tiện ích HTML/javascript và dán đoạn code sau vào và lưu lại.

    <div id="NTLRUBYSubscribe">

    <div class="email__">

    <div class="email">Đăng ký nhận tin:

    <form action='https://api.follow.it/subscription-form/MUI2a1lpOXUzcXcwa0tGWnluV3NvTFdibTNYa1FpVW8wb0VzRWdZQ3hNcUkvV1ZnZVpLaktuQnZwUmlvZGowRnpNYUdIazU0Z2E2dWFlQUVKTXVUOXlZSWt5R0YxcnBTSEhnN1NpREt1ME1XMXB3T1pSVEVWWjR0MmNaR1dpMlR8S0wzbFVIR05rSXhVL0xNV2liRlVMQWZROWNrL0RnT0xaWnZ3VUhUWTE3MD0=/8' method='post'>

    <input name="email" class="email" onblur="if (this.value==&quot;&quot;){this.value=&quot;Nhập Email của bạn&quot;;}" onfocus="if (this.value==&quot;Nhập Email của bạn&quot;){this.value=&quot;&quot;;}" type="text" value="Nhập Email của bạn" />

    <input name="uri" type="hidden" value="Đăng ký" /> <input name="loc" type="hidden" value="en_US" />

    <button type="submit"></button>

    </form>

    </div>

    </div>

    <div class="medsos__">

    <div class="medsos">

    <a class="facebook" title="Facebook" href="https://www.facebook.com" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"> <path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path></svg></a>

     <a class="twitter" title="Twitter" href="https://twitter.com/" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"></path></svg></a>

     <a class="youtube" title="Youtube" href="https://www.youtube.com/" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z"> </path></svg></a>

     <a class="instagram" title="Instagram" href="https://www.instagram.com/" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path></svg></a>

     <a class="codepen" title="Codepen" href="https://codepen.io/" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M15.09,12L12,14.08V14.09L8.91,12L12,9.92V9.92L15.09,12M12,2C11.84,2 11.68,2.06 11.53,2.15L2.5,8.11C2.27,8.22 2.09,8.43 2,8.67V14.92C2,15.33 2,15.33 2.15,15.53L11.53,21.86C11.67,21.96 11.84,22 12,22C12.16,22 12.33,21.95 12.47,21.85L21.85,15.5C22,15.33 22,15.33 22,14.92V8.67C21.91,8.42 21.73,8.22 21.5,8.1L12.47,2.15C12.32,2.05 12.16,2 12,2M16.58,13L19.59,15.04L12.83,19.6V15.53L16.58,13M19.69,8.9L16.58,11L12.83,8.47V4.38L19.69,8.9M20.33,10.47V13.53L18.07,12L20.33,10.47M7.42,13L11.17,15.54V19.6L4.41,15.04L7.42,13M4.31,8.9L11.17,4.39V8.5L7.42,11L4.31,8.9M3.67,10.5L5.93,12L3.67,13.54V10.5Z"></path></svg></a>

    </div>

    </div>

    </div>

    ***Lưu Ý: Trong code ở bước 2 các bạn nhớ:
              + Thay phần mình tô vàng thành code form của các bạn (tương tự trường hợp 2 ở trên).
              + Thay phần mình tô đỏ thành link mạng xã hội của các bạn nhé!

    Chúc các bạn thành công!
    Xem thêm tất cả về  >>> Chủ đề Blogger

  • Bài Viết Liên Quan

    Vui lòng đăng nhập tài khoản tương ứng trên trình duyệt của bạn trước khi bình luận!

    Google

    Zalo

    Không có nhận xét nào :

    Đăng nhận xét

    Hãy đánh dấu vào "Thông báo cho tôi" trước khi gửi bình luận để nhận được thông báo khi Admin trả lời!

NTLRUBY

Đăng ký kênh để ủng hộ NTLRUBY và xem những video thị phạm code nhé!