Cách tạo ô chuyển trang nổi (floating button) trên Blogger

Thông thường, khi đang đọc một bài viết và người đọc muốn chuyến sang một bài viết khác (mới hoặc cũ), cần phải kéo đến đầu hoặc cuối trang mới có nút điều hướng làm việc đó. Ý tưởng tạo ô chuyển trang chính nhằm giải quyết vấn đề đó, và ô chuyển trang sẽ luôn được cuộn cùng bài viết, dù người đọc đang đọc ở vị trí nào.


 Bài viết này được thực hiện một cách ngắn gọn nhất có thể. Bạn sẽ chỉ mất khoảng 5 phút để thực hiện theo hướng dẫn sau.


  • Vào Blogger.com >> Template >>Backup the Template.

  • Chọn Select Edit HTML >> Proceed.

  • Trong ổ chỉnh sửa, search theo từ khóa ]]></b:skin> và chèn đoạn code dưới đây lên trên nó.




/* --- Floating Older & Newer Posts Buttons For Blogger --- */
#blog-pager-newer-link {
padding-left : 1030px;
border : none;
float : left;
text-transform: uppercase;
}

#blog-pager-older-link {
float : right;
padding-right : 585px;
text-transform: uppercase;
border : none;
}

.MBLprevlink{ margin-left:-100px; position:fixed;top:45%;display:block;font-weight:bold;font-family:arial; font-size:16px;color:#333;text-decoration:none;width:66px;height:140px;background:rgba(231,231,231,0.3);z-index:99;opacity:0.6;-webkit-transition-property:all;-moz-transition-property:all;-ms-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:1s;-moz-transition-duration:1s;-ms-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s}

.MBLprevlink:hover,.MBLprevlink.showFull{background:rgba(231,231,231,0.6);opacity:1}.MBLprevlink:hover .detail,.MBLprevlink.showFull .detail{width:220px}.MBLprevlink .label{display:block;position:absolute;top:60px;left:14px;-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg);opacity:0.5}.MBLprevlink .detail{width:0;line-height:1.6em;color:#77a6d2;background:rgba(31,31,31,0.7);font-family:&quot;Capriola&quot;,sans-serif;overflow:hidden;position:absolute;top:0;left:70px;-webkit-transition-property:all;-moz-transition-property:all;-ms-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:0.2s;-moz-transition-duration:0.2s;-ms-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-ms-transition-delay:0.5s;-o-transition-delay:0.5s;transition-delay:0.5s}.MBLprevlink .detail span{padding:20px;display:block;height:100px;overflow:hidden;width:180px}.MBLprevlink .detail span:hover{color:#fff}.MBLprevlink .arrow{width:0;height:0;font-size:0;height:0;position:absolute;top:49px}#prevLink{left:30px}#prevLink .arrow{border-right:20px solid rgba(231,231,231,0.3);border-bottom:20px solid transparent;border-top:20px solid transparent;left:-20px}#prevLink:hover .arrow,#prevLink.showFull .arrow{border-right-color:rgba(231,231,231,0.6)}#nextLink{right:30px}#nextLink .detail{right:70px !important;left:auto}#nextLink&gt;span{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}#nextLink .arrow{border-bottom:20px solid rgba(231,231,231,0.3);border-left:20px solid transparent;border-right:20px solid transparent;right:-30px}#nextLink:hover .arrow,#nextLink.showFull .arrow{border-bottom-color:rgba(231,231,231,0.6)}

.MBLprevlink{opacity:1;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqK0VpCGXpkFiaH_JCq_Sg8cBsus4y-ICtkvXHCKC0BS8ykfCEkEq17hm-GZ8BVs0RDSB8ZQ_KQwV7x2-KwV2xTcBLtpYEcmrxsL4Whdc_iXpz3gAsS0mp6I-Rftz0aUDTa8obL8bVDaI/s1600/HP-Laptop-Luster.png) repeat-x scroll 0 0;color:#cc3435}.MBLprevlink:hover,.MBLprevlink:active,.MBLprevlink:focus{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqK0VpCGXpkFiaH_JCq_Sg8cBsus4y-ICtkvXHCKC0BS8ykfCEkEq17hm-GZ8BVs0RDSB8ZQ_KQwV7x2-KwV2xTcBLtpYEcmrxsL4Whdc_iXpz3gAsS0mp6I-Rftz0aUDTa8obL8bVDaI/s1600/HP-Laptop-Luster.png) repeat-x scroll 0 0}.MBLprevlink .label{opacity:1 !important}.MBLprevlink .arrow{display:none !important}#nextLink{right:10px !important}#prevLink{left:10px !important}



  • Tiếp theo, bạn search đoạn code <b:includable id='nextprev'>  và đánh dấu đoạn code như hình dưới

  • Thay toàn bộ đoạn code trên bằng đoạn code dưới đây

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
         <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
    <!-- MBL the newer post -->
   <a class='MBLprevlink' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle' id='nextLink'><div class='relative'>
   <span class='arrow'/>
   <span class='label'>Newer</span>
  </div></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
     <!-- MBL the older post -->
   <a class='MBLprevlink' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle' id='prevLink'><div class='relative'>
   <span class='arrow'/>
   <span class='label'>Older</span><br/>
  </div></a>

      </span>
    </b:if>

·        Như vậy là bạn đã hoàn thành việc tạo một nút chuyển trang nổi rồi.

Một số câu hỏi thường gặp:
Câu hỏi 1: Nút hiện lên trên nội dung bài viết thay vì bên cạnh, hoặc không sát với nội dung bài viết? Giải quyết như thế nào đây?

Nguyên nhân có lẽ là do độ rộng của theme mà bạn đang dùng có sự khác biệt. Bạn chỉ cần chỉnh lại như sau:
  • Vào Blogger >> Template >> Edit HTML >> Proceed.
  • Với nút Older: tìm padding-right : 585px; chỉnh thông số 585px tăng hay giảm cho phù hợp với theme của bạn.
  • Với nút Newer: tìm padding-left : 1030px; chỉnh thông số 1030px cho phù hợp.
Nhớ chọn Save Template.

Câu hỏi 2: Cách thay đổi nền của nút?
Đơn giản là bạn làm như bước 1 ở trên, sau đó tìm và thay thế đoạn code sau bằng bức ảnh của bạn
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqK0VpCGXpkFiaH_JCq_Sg8cBsus4y-ICtkvXHCKC0BS8ykfCEkEq17hm-GZ8BVs0RDSB8ZQ_KQwV7x2-KwV2xTcBLtpYEcmrxsL4Whdc_iXpz3gAsS0mp6I-Rftz0aUDTa8obL8bVDaI/s1600/HP-Laptop-Luster.png

Mọi thông tin thuộc về Mr. Syed Faizan Ali and his Team, from www.mybloggerlab.com. All credits go to them. Thanks very much!


No comments:

Post a Comment