Ikon cantik pada older newer post

Ikon cantik pada older newer post. Anda tau older newer post ? coba anda scroll bagian paling bawah blog anda, di sana akan ada tulisan posting lebih baru dan posting lama. Nah itulah maksud saya dengan Older Newer Post.

Saya kurang tau nama aslinya apa, tapi rata-rata menyebutnya yaitu Blog Pager. Mungkin karena saya gak mau yang ribet-ribet, jadinya saya kasih nama itu deh :)

Blog pager dalam blogspot berfungsi sebagai navigasi untuk menelusuri posting baru dan lama. Default older newer post ini biasanya hanya berupa tulisan. Tapi alangkah baiknya jika kita sertakan gambar untuk menarik pengunjung supaya mereka memanfaatkan navigasi ini.

Disini saya juga tidak akan memberikan tutorial yang super ribet dan banyak skrip karena kebanyakan skrip pada template blogspot kita juga akan mengakibatkan berat pada blog (baca posting saya berjudul: Panduan untuk meringankan blog anda). Skrip pendek ini saya copas dari hasil nyomot template sebelah...gkgkgk... karena saya pikir tidak banyak dan mudah cara membuatnya, jadi saya harus sharingkan kepada anda :)

Cara memberi icon pada blog pager

1. Login blogspot => menuju Rancangan => Edit HTML => Centang Expand template widget

2. Copy kode di bawah ini:

/* ----- BLOG PAGER ----- by caraonline.blogspot.com */
#blog-pager-newer-link {
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeEJdtEPWEHHn1jgYZNzF7T6AUo5dnXB4b_zRBCuv38_3ge5xul55h93wkFK91faeULGsv0S1cBrul9cYNaKTwFPJx0hY_euDyKtytqyI-ZxafiDd86BuLg2jHikFD5wadl_y5ngcUv9o/s1600/newer-post.jpg) no-repeat;
padding: 12px 15px 10px 37px;
font-family: Arial;
font-size: 12px;
margin: 10px 0 0 2px;
display: block;
width: 93px;
height: 18px;
}

#blog-pager-newer-link a {color: #333333; text-decoration: none;}
#blog-pager-newer-link a:hover {text-decoration: underline;}

#blog-pager-older-link {
float: right;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1zlAVao0c2OZluafypckGm86bZQOZbg_3KCGc4o44xYGByYDEp24SjKog6XSy3-rNh9xBXLrPbWlL1jj_4fDRo-12XES5c8OVzhya8TK-BQWcmXlJDLUVlxzdIML-u-qy7uSOao8T890/s1600/older-post.jpg) no-repeat;
padding: 12px 40px 10px 17px;
font-family: Arial;
font-size: 12px;
margin: 10px 2px 0 0px;
display: block;
width: 88px;
height: 18px;
}

#blog-pager-older-link a {color: #333333; text-decoration: none;}
#blog-pager-older-link a:hover {text-decoration: underline;}

#blog-pager {
text-align: center;
text-decoration: none;
}

3. Lalu letakkan dibawah section CSS komentar

NB: Apakah anda tau section CSS komentar letaknya dimana ?

coba cari kode pembuka kira-kira seperti ini

/* ----- COMMENT ----- */

Biasanya pada section coding CSS akan selalu ditandai kalimat pembuka seperti diatas dan di akhiri dengan section baru, seperti di template blog ini section setelah komentar adalah lower section, kira-kira seperti ini penulisannya:

/* ----- LOWER SECTION ----- */

Masih belum ngerti juga ? ~~ya ampun~~
Kita tunjukkan dengan gambar (klik kanan open new tab untuk gambar lebih jelas)

Nah kode nomor 2 di atas, diletakkan setelah session komentar berakhir. jadi kita membuat sebuah section baru diatas LOWER SECTION.

Penjelasan lebih general lagi untuk CSS Section

4. Oke, simpan template dan lihat hasilnya.

Mohon maaf untuk penjelasan yang berbelit-belit, karena saya juga masih belajar. Tapi mudah-mudahan penjelasan tersebut bisa bermanfaat bagi yang baru ingin mengenal struktur template blogspot.

Jika kurang puas dengan ikon blog pager yang saya berikan, anda juga bisa copy dari buatan saya sendiri (ehmm), url nya seperti ini:

http://i745.photobucket.com/albums/xx96/martajasa/caraonline-newer-post.gif
http://i745.photobucket.com/albums/xx96/martajasa/older-post-caraonline.gif

Silahkan ganti berdasarkan warna hijau dan ungu yang sudah saya tandai pada kode diatas.

Semoga ikon blog pager anda berguna dalam meningkatkan page view :)

Review:

Judul	Ikon cantik pada older newer post
Deskripsi	Ikon cantik pada older newer post . Anda tau older newer post ? coba anda scroll bagian paling bawah blog anda, di sana akan ada tulisan po...
Author	Unknown
Author Rating	4/ 5 Suara Dari 1001 Ulasan