Cara membuat Slide navigasi Next Prev Posting di blog

Belajar SEO dan Blog Bagi pemula
Cara membuat Slide navigasi Next Prev Posting di blog

Masih di Variasi Blogger share Cara membuat Slide navigasi Next Prev Posting di blog cekidot

Silahkan sobat Copy Paste script di bawah ini di Edit HTML jangan lupa centang Expand Template Widget kemudian tekan Ctrl+f dan paste script ]]></b:skin> jika sudah ketemu silahkan copy paste script di bawah ini simpan sebelum script ]]></b:skin> di blog sobat

.lama a {    color: #000;
    position:fixed;
    top:50%;
    right:-50px;
    height: 23px; width: 100px;
    color: #fff; text-shadow: 1px 1px 0px #999;
    background: #aaa; background-color: rgba(116,116,116,0.36);
    -moz-border-radius-topleft:7px;
    -moz-border-radius-bottomleft:15px;
    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: #ffffff; /* background saat hover */
    right:-1px;
    background: #fff;
    }

.baru a {
    color: #000; position:fixed;
    top:50%;  left:-50px;
    height: 23px;  width: 100px;
    color: #fff; text-shadow: 1px 1px 0px #999;
    background: #aaa;
    background-color: rgba(116,116,116,0.36);
    -moz-border-radius-topright:7px;
    -moz-border-radius-bottomright:15px;
    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: #ffffff;
    left:-1px ; background: #fff; /* background saat hover */
    }

Update


.lama a {
color: #transparent;
position:fixed;
top:50%;
right:10px;
height: autopx; width: autopx;
color: #transparent; text-shadow: 1px 1px 0px #transparent;
background: #transparent; background-color: #transparent;opacity:0.5; filter:alpha(opacity=40); this.style.opacity=6; border-radius:8px;
}
.lama a:hover{opacity:100; filter:alpha(opacity=40); this.style.opacity=1;}
.baru a {
color: #transparent; position:fixed;
top:50%; left:10px;
height: autopx; width: autopx;
color: #transparent; text-shadow: 1px 1px 0px #transparent;
background: #transparent;
background-color: #transparent;background-color: #transparent;opacity:0.5; filter:alpha(opacity=40); this.style.opacity=6; border-radius:8px;
}
.baru a:hover{opacity:100; filter:alpha(opacity=40); this.style.opacity=1;}

Kemudian silahkan sobat cari kode di bawah ini

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

jika sudah ketemu silahkan sobat ganti dengan script di bawah 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>

Update

<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'><img src='http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/nextbutton.png'/></a>
</span>
</div>

satu langkah lagi sobat , silahkan cari kembali script di bawah ini

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

jika sudah ketemu silahkan ganti script di atas dengan script di bawah 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&gt;</a>
      </span>
      </div>

Update

<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'><img src='http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/backbutton.png'/></a>
</span>
</div>

Simpan dan lihat hasilnya semoga bermanfaat


Share to

2 Responses to "Cara membuat Slide navigasi Next Prev Posting di blog"

  1. Mantab tutorialnya sobat! Langsung saya coba nih.. THANKS :)

    BalasHapus
    Balasan
    1. yups , semoga bermanfaat sob :D

      Hapus

Jika ada Tutorial Info Blog Indonesia ini, yang kurang dimengerti silahkan luangkan saja waktu anda untuk berkomentar, karena pertanyaan anda sangat berharga untuk perkembangan dan kemajuan blogs ini.

Soalnya diblogs ini adalah wadah untuk belajar mengenal webs/blogs, disini kita sama - sama belajar, seandainya anda adalah seorang pakar blogger profesional atau pakar seo indonesia bimbinglah saya, untuk menulis artikel berkualitas.

Oia sebelum menyisipkan script silahkan gunakan tools konversi terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar.

Terimakasih.. salam kenal dan salam hangat untuk blogger indonesia, yang selalu setia di Info blog Indonesia variasi blogger.

¯\(◕ ‿◕)/¯



convert TOS

Panduan, Bimbingan Cara Belajar Blogs dan Seo