.:: Blogging - Cara membuat navigasi Prev Next di Blog BLAZTERROR rwxr-xr-x 0 5:19 PM

Filename	.:: Blogging - Cara membuat navigasi Prev Next di Blog
Permission	rwxrw-r--
Author	BLAZTERROR
Date and Time	5:19 PM
Label
Action

Nah buat sobat blogger blazterzt yang mau.. blog nya ada Navigasi Next dan Prev di kanan kiri blog sobat .. silahkan coba trik blogger berikut ini.. ini adalah navigasi untuk mempercantik sekaligus mempermudah visitor untuk melihat posting selanjut nya dan posting sebelum nya...
untuk langkah pertama silahkan sobat blogger blazterzt login dulu ke blogger nya :

• Selanjutnya klik rancangan
• Edit HTML
• Back Up Themplates Sobat (untuk berjaga2)
• Klik Expand Template Widgets
• Kemudian Cari  ]]></b:skin> Copas kan script berikut :

/********************************
CSS Slide Out Posting lama/baru *
********************************/
.lama a {
    color: #181818;
    position:fixed;
    top:50%;
    right:-50px;
    height: 23px; width: 100px;
    color: #fff; text-shadow: 1px 1px 0px #999;
    background: #181818; background-color: rgba(116,116,116,0.36);
   border:1px solid #0000ff;
border-color:#4c83af;box-shadow:0 0 25px #4c83af;
    -moz-border-radius-topleft:7px;
    -moz-border-radius-bottomleft:7px;
    padding: 3px 3px;
    text-decoration: none;
    -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;
    }
.lama a:hover {
    color: #4c83af; border:1px solid #0000ff;box-shadow:0 0 25px #4c83af;
border-color:#4c83af;/* background saat hover */
    right:-1px;
    background: #fff;
    }

.baru a {
    color: #181818; position:fixed;
    top:50%;  left:-50px;
    height: 23px;  width: 100px;
    color: #fff; text-shadow: 1px 1px 0px #999;
    background: #181818;
    background-color: rgba(116,116,116,0.36);
   border:1px solid #0000ff;
border-color:#4c83af; box-shadow:0 0 25px #4c83af;
    -moz-border-radius-topright:7px;
    -moz-border-radius-bottomright:7px;
    padding: 3px 3px; text-decoration: none;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    }
.baru a:hover {
    color: #4c83af;border:1px solid #0000ff;
border-color:#4c83af;box-shadow:0 0 25px #4c83af;
    left:-1px ; background: #fff; /* background saat hover */
    }

• Jika sudah sekarang Cari kode seperti dibawah ini (Untuk Posting Lama) :

<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>

• Ganti dengan script ini :

<div class='lama'>
      <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'>Prev</a>
      </span>
      </div>

•  Jika sudah sekarang Cari kode seperti dibawah ini (Untuk Posting Baru) :

<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> 

• Ganti dengan script ini :

 <div class='baru'>
      <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'>Next</a>
      </span>
      </div>

Setelah Itu Save dan Lihat ... sekarang blog sobat blogger blazterzt sudah ada navigasi nya...

Catatan : Untuk merubah warna nya silahkan ubah beberapa code ini di kedua navigasi :

• background: #181818; = Untuk mengubah Background 
• border:1px solid #0000ff; = Untuk Mengubah warna Border
• box-shadow:0 0 25px #4c83af; = Untuk mengubah glow pada navigasi
• color: #4c83af; = Mengubah Text setelah navigasi terlintas Kursor

Nah.. Sobat Blogger sudah mengerti kan.. yok selanjut nya .. mari kita ke TKP..

Jangan lupa juga untuk mengLike Blog Ini Biar Semangat Untuk Update Update selanjutnya ... 

Author : BLAZTERROR
Posting : .:: Blogging - Cara membuat navigasi Prev Next di Blog
Time : 5:19 PM
Label :
Get The c0de and feel your soul ~ Indonesian c0ders

Baca Juga yang ini :