Home » » Membuat tombol newerpost dgn olderpost slide

Membuat tombol newerpost dgn olderpost slide

Sudah 2 hari saya tidak update blog saya ini karena ada masalah domain + harus belajar,, mumpung ndak ada orang tua saya sempatkan deh waktu saya untuk nulis artikel Cara Buat Tombol Slide Artikel Lama/Baru ini hehe :D :D :D.. sebelumnya Tips dan Trik ini adalah request-an tapi saya lupa namanya :D :D :D, untuk melihat demonya silahkan lihat tombol yang di sebelah kiri atau kanan itu.. Bagaimana kalau bagus kita coba, kalau gak bagus gak usah dicoba :D :D.. nah bagi yang mau ikut ke tahap selanjutnya cekidot..

1. Yang pasti hal yang sobat blogger lakukan pertama harus login keblogger dulu
2. Langkah yang kedua sobat blogger pilih "Rancangan" atau dalam bahasa inggris disebut juga "Design", setelah itu klik "Edit HTML", setelah mengklik "Edit HTML" jangan lupa di centang "Expand Widget Template"
3. Kemudian carilah kode ]]></b:skin> untuk memudahkan klik CTRL+Fkemudian di bidang kosong tersebut masukan kode ]]></b:skin>
4. Setelah ketemu kode ]]></b:skin> masukan kode dibawah ini diatas kode ]]></b:skin>

.dodelama 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;}
.dodelama a:hover {color: #ffffff;right:-1px;background: #fff;}
.dodebaru 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;}
.dodebaru a:hover {color: #ffffff;left:-1px ; background: #fff;}
5. Setelah itu carilah kode <b:if cond='data:olderPageUrl'> kemudian dibawah kode <b:if cond='data:olderPageUrl'> berilah kode dibawah ini
<div class='dodelama'>  
dan jangan lupa diakhiri dengan </div> letakan kode </div> ini diatas kode </b:if> 


Eitsss.... Jangan disimpan dulu


6. Setelah itu carilah kode <b:if cond='data:newerPageUrl'> kemudian dibawah kode <b:if cond='data:newerPageUrl'> berilah kode dibawah ini
<div class='dodebaru'>  
dan jangan lupa diakhiri dengan </div> letakan kode </div> ini diatas kode </b:if> 

7. Kemudian klik SIMPAN TEMPLATE 

Jadi deh :)

Semoga Bermanfaat ^^..
 

2 comments:

  1. Waduh...sayang Sob..saat gue cari tombol kiri atau kanan untuk liat demonya kok gak ada ya..Bagus juga untuk dipraktekkin biar personalisasi tampilan blo jadi lebih sipp....nice post and happy blogging!

    ReplyDelete
  2. Hmm . .
    terimakasih kang sudah berkunjung . .
    Happy blogging :D

    ReplyDelete

 
Support : Your Link | Your Link | Your Link
Copyright © 2013. Portal Editing - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger