Cara Mengganti Text Dan Tombol Navigasi Blogspot

By Unknown

Wednesday, October 10, 2012

Mempercantik navigasi Next Post (blog-pager-newer-link), Previous Post (blog-pager-older-link) dan Home (home-link) dapat dilakukan dengan merubah teks Navigasi Older Post, Newer Post dan Home atau bisa juga dengan Memberi tombol navigasi older, new post dan home page.

Untuk merubah Navigasi Blogger dengan Text maupun Tombol agar menjadi lebih indah dan menarik, dapat dilakukan dengan menerapkan langkah-langkah berikut ini:

Temukan dengan Ctrl+F

<b:includable id='nextprev'>

Ganti navigasi default blogspot yang ada dibawahnya dengan:

<div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='nav-item nav-prev' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
        <span class='text'>Next</span></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='nav-item nav-next' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
      <span class='text'>Prev</span></a>
      </span>
    </b:if>
    
    <span id='home-link'>
    <a expr:href='data:blog.homepageUrl'><span class='text'>Home</span></a>
    </span>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>

Beri penggaya dengan CSS, letakkan diatas ]]></b:skin>

#blog-pager #home-link,#blog-pager-newer-link,#blog-pager-older-link{opacity:.3;-moz-transition-property:opacity;-moz-transition-duration:1.5s;-moz-transition-delay:.75s;-webkit-transition-property:opacity;-webkit-transition-duration:1.5s;-webkit-transition-delay:.75s;-o-transition-property:opacity;-o-transition-duration:1.5s;-o-transition-delay:.75s;transition-property:opacity;transition-duration:1.5s;transition-delay:.75s;}#blog-pager #home-link:hover,#blog-pager-newer-link:hover,#blog-pager-older-link:hover{opacity:1;}#blog-pager #home-link,#blog-pager-newer-link,#blog-pager-older-link{width:100px;height:100px;border-bottom:2px solid #eee;background-image:-webkit-linear-gradient(top, #999, #d0d0d0 80%);background-image:-moz-linear-gradient(top, #999, #d0d0d0 80%);background-image:-ms-linear-gradient(top, #999, #d0d0d0 80%);background-image:-o-linear-gradient(top, #999, #d0d0d0 80%);background-image:linear-gradient(top, #999, #d0d0d0 80%);-moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;box-shadow:inset rgba(0,0,0,.2) 0 5px 6px;}.text{position:absolute;width:80px;height:52px;left:10px;top:10px;cursor:pointer;font-family:"Lucida Sans";font-weight:bold;font-size:23px;color:#888;text-shadow:0 1px 0 #fff;text-align:center;padding-top:28px;-moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;background-image:-webkit-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100%);background-image:-moz-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100%);background-image:-ms-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100%);background-image:-o-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100%);background-image:linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100%);background-position:0 6px;background-color:#eee;background-repeat:no-repeat;-webkit-box-shadow:rgba(0,0,0,.4) 0 3px 6px;-moz-box-shadow:rgba(0,0,0,.4) 0 3px 6px;box-shadow:rgba(0,0,0,.4) 0 3px 6px;-webkit-transition:all .1s ease-in;-moz-transition:all .1s ease-in;-ms-transition:all .1s ease-in;-o-transition:all .1s ease-in;transition:all .1s ease-in;opacity:1;}.text:hover{background-position:0 0;-webkit-box-shadow:rgba(0,0,0,.4) 0 3px 8px;-moz-box-shadow:rgba(0,0,0,.4) 0 3px 8px;box-shadow:rgba(0,0,0,.4) 0 3px 8px;}.text:active{width:76px;height:48px;margin:2px 0 0 2px;border-bottom:1px solid #fff;font-size:21px;color:#777;-webkit-box-shadow:inset rgba(0,0,0,.5) 0px 5px 10px;-moz-box-shadow:inset rgba(0,0,0,.5) 0px 5px 10px;box-shadow:inset rgba(0,0,0,.5) 0px 5px 10px;}

Atur posisinya berdasarkan jenis halaman, letakkan kode berikut diatas </head>

<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
.nav{z-index:9999;position:fixed;top:35%;}#blog-pager #home-link{position:fixed;left:25px;z-index:99999;bottom:55%;}#blog-pager-newer-link{position:fixed;left:25px;z-index:99999;bottom:35%;}#blog-pager-older-link{position:fixed;left:25px;z-index:99999;bottom:15%;}
</b:if>
</style>
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
.nav{z-index:9999;position:fixed;top:35%;}#blog-pager #home-link{position:fixed;left:50%;margin-left:-50px;bottom:0;z-index:99999;}#blog-pager-newer-link{position:fixed;left:25px;z-index:99999;bottom:35%;}#blog-pager-older-link{position:fixed;right:25px;z-index:99999;bottom:35%;}#blog-pager #home-link{opacity:.2;}
</b:if>
</style>

SAVE & FINISH

Share :

Facebook Twitter Google+