Tutorial Membuat Float Button Newer-Older Post

Screenshot Float Button Newer-Older Post
Tutorial:
PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html

1. Login ke akaun blogger anda.
2. Klik pada Template

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari kod dibawah:
 ]]></b:skin> 

6. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod  ]]></b:skin>
/* ---  Float Button Newer-Older Post --- */
#blog-pager-newer-link {
padding-left : 805px;
border : none;
float : left;
text-transform: uppercase;
}
#blog-pager-older-link {
float : right;
padding-right : 645px;
text-transform: uppercase;
border : none;
}
.ftprevlink{ margin-left:-100px; position:fixed;top:45%;display:block;font-weight:bold;font-family:arial; font-size:16px;color:#333;text-decoration:none;width:54px;height:65px;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}
.ftprevlink:hover,.ftprevlink.showFull{background:rgba(231,231,231,0.6);opacity:1}.ftprevlink:hover .detail,.ftprevlink.showFull .detail{width:220px}.ftprevlink .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}.ftprevlink .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}.ftprevlink .detail span{padding:20px;display:block;height:100px;overflow:hidden;width:180px}.ftprevlink .detail span:hover{color:#fff}.ftprevlink .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)}
.ftprevlink{opacity:1;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihZDb3nvI1IcoAXBIPdM9z_Vh-XgjujOOrbBiTy_2HGgU7Y77sxBA1tV2PpH28fqUIX4TXunuRgoj89DseqQ_LmBQ3ECbACNQ0Yyw_M6W8BY57W0-c_111BcHPy0KqPXBg6aksRPduETk/s1600/buttons.png) repeat-x scroll 0 0;color:#cc3435;  }
.ftprevlink:hover,.ftprevlink:active,.ftprevlink:focus{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihZDb3nvI1IcoAXBIPdM9z_Vh-XgjujOOrbBiTy_2HGgU7Y77sxBA1tV2PpH28fqUIX4TXunuRgoj89DseqQ_LmBQ3ECbACNQ0Yyw_M6W8BY57W0-c_111BcHPy0KqPXBg6aksRPduETk/s1600/buttons.png) repeat-x scroll 0 0}.ftprevlink .label{opacity:1 !important}.ftprevlink .arrow{display:none !important}#nextLink{right:10px !important}#prevLink{left:10px !important}
.ftnextlink{ margin-left:-100px; position:fixed;top:45%;display:block;font-weight:bold;font-family:arial; font-size:16px;color:#333;text-decoration:none;width:55px;height:65px;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}
.ftnextlink:hover,.ftnextlink.showFull{background:rgba(231,231,231,0.6);opacity:1}.ftnextlink:hover .detail,.ftnextlink.showFull .detail{width:220px}.ftnextlink .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}.ftnextlink .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}.ftnextlink .detail span{padding:20px;display:block;height:100px;overflow:hidden;width:180px}.ftnextlink .detail span:hover{color:#fff}.ftnextlink .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)}
.ftnextlink{opacity:1;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5E2mkXByWu7_AUyVmYHszTj722SW6EgcTK0eRLjNCgGvLE3RKBvO_fnSu8iS-ZKz2s_k4LUZq9gIMD5O50s9KtWGPhzkUk_2W6R7wav3rW6TK1bnj_eAWs4GjDh5Drm9qCkqMKi9KQs/s1600/prevaa.png) repeat-x scroll 0 0;color:#cc3435;  }
.ftnextlink:hover,.ftnextlink:active,.ftnextlink:focus{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5E2mkXByWu7_AUyVmYHszTj722SW6EgcTK0eRLjNCgGvLE3RKBvO_fnSu8iS-ZKz2s_k4LUZq9gIMD5O50s9KtWGPhzkUk_2W6R7wav3rW6TK1bnj_eAWs4GjDh5Drm9qCkqMKi9KQs/s1600/prevaa.png) repeat-x scroll 0 0}.ftnextlink .label{opacity:1 !important}.ftnextlink .arrow{display:none !important}#nextLink{right:10px !important}#prevLink{left:10px !important}
/* ---  Float Button Newer-Older Post --- */
Keterangan: 
- padding-left : 805px; - Gantikan nilai 805 untuk adjust posisi ke kanan atau ke kiri bagi Newer button.
- padding-right : 645px; - Gantikan nilai 645 untuk adjust posisi  ke kanan atau ke kiri bagi Older button.
- position:fixed;top:45%; - Gantikan nilai 45 untuk adjust posisi ke atas atau kebawah bagi Newer button. (Gantikan dengan nilai diantara 0% - 100%)
- position:fixed;top:45%; - Gantikan nilai 45 untuk adjust posisi ke atas atau kebawah bagi Older button.  (Gantikan dengan nilai diantara 0% - 100%


7. Seterusnya, cari kod dibawah:
<b:includable id='nextprev'>
8. Cari dan Highlight kod dibawah:
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
9. Padam kod di atas dan gantikan dengan kod dibawah :
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
         <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
    <!-- ft the newer post -->
   <a class='ftnextlink' 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'/>
  </div></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
     <!-- ft the older post -->
   <a class='ftprevlink' 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'/><br/>
  </div></a>
      </span>
    </b:if>
10. Klik Save Template


#Selesai :)

pada

2 suara diterima...

avatar
Reply
Unknown delete 24 October 2014 at 14:22

faiz mcm mana nak adjust kalo floating icon tu terlebih atas? terkeluar dari post...hampir dekat dengan header..

avatar
Reply
Faizal Ahmad delete 24 October 2014 at 21:45

sy dah update kat keterangan .. thanks sudi kunjung ke blog ini ... :>)

JIKA ADA SEBARANG MASALAH ATAU PERMINTAAN TUTORIAL SILA TINGGALKAN KOMEN K.. TERIMA KASIH ATAS KUNJUNGAN ANDA..