Mengulas Misteri dan Blogging

Membuat Tombol Next dan Previous di Bawah Postingan

Tombol Next dan Previous di Bawah Postingan

Membuat Tombol Next dan Previous di Bawah Postingan - Tombol ini terletak di bawah postingan. Berbeda dengan tombol blog pager bawaan blogger yang biasanya diletakkan di bawah sendiri setelah komentar. Untuk demonya, silahkan klik link Demo di bawah. Tombol ini cukup sederhana sebetulnya, tidak ada yang istimewa. Tapi, agar lebih menarik, saya beri warna pada tombolnya. 


Baiklah, untuk memasangnya, simpan kode di bawah ini di atas ]]></b:skin> atau </style>

.pagebutton-nextprevious {margin-bottom: 10px;   overflow:hidden; padding:0;margin-right:5px;margin-left:5px;}
.pagebutton-nextprevious li.next { margin:0 -2px 0 0; float: left;  border-right:1px solid #ddd; padding:0; background:#5498c9;color:#ffffff;}
.pagebutton-nextprevious li.next a { padding-left: 15px;text-align:left;padding-bottom:20px}

.pagebutton-nextprevious li.previous {float: right; padding:0; background:#5498c9; margin:0;color:#ffffff}
.pagebutton-nextprevious li.previous a { padding-right:15px; text-align:right;padding-bottom:20px }

.pagebutton-nextprevious li.next:hover, .pagebutton-nextprevious li.previous:hover  {background:#5498c9;color:#ccc }

.pagebutton-nextprevious li { width: 50%; display: inline; float: left; text-align: center; }
.pagebutton-nextprevious li a { position: relative; min-height: 55px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}

.pagebutton-nextprevious li i { color: #ffffff; font-size: 18px; }

.pagebutton-nextprevious li a strong { display: block; font-size: 20px; color: #ffffff; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}

.pagebutton-nextprevious li a span { font-size: 15px; color: #ffffff;  font-family:oswald,Helvetica, arial; margin:0;}
.pagebutton-nextprevious li a:hover span,
.pagebutton-nextprevious li a:hover i { color: #ccc; }
.pagebutton-nextprevious li.previous i { float:left; margin-top:15%; margin-left:5%; }
.pagebutton-nextprevious li.next i { float: right;margin-top: 15%;margin-right: 5%; }

.pagebutton-nextprevious li.next i, .pagebutton-nextprevious li.previous i ,
.pagebutton-nextprevious li.next,  .pagebutton-nextprevious li.previous{transition-duration: 0.4s; transition-timing-function: ease-out; }

Kemudian, silahkan copy kode HTML dan Javascriptnya di daerah bawah postingan blog Anda.

Tag : Blogging
4 Komentar untuk "Membuat Tombol Next dan Previous di Bawah Postingan"

Keren artikel loe bang, thanks kunjungan balik ya mediainfowisata[dot]com

Thanks tutorialnya....
mudah diterapkan,,,
Berhasil..Berhasil...Berhasill.. |o|

Title post nya ga bisa muncul gan? gimana caranya?

thx gan akhirnya sy bisa.

kunjungan balik gan > aslam19.com

Silahkan berkomentar yang relevan. Jangan menyertakan link aktif di sini. Jika melanggar, komentar akan terhapus.

Emoticon : :) :( =( ^_^ :D =D |o| @@, ;) :-bd :-d :P :kak: