blog pager modify
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 Photobucket

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(http://4.bp.blogspot.com/_WoCJXgXotb8/Su8w6l_MxGI/AAAAAAAABkE/p0cBfkFy_RY/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(http://3.bp.blogspot.com/_WoCJXgXotb8/Su8w6w7id0I/AAAAAAAABkM/xNNOe5lnA9E/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)


CSS Section

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

kode yang terletak diantara  <b:skin><![CDATA[  dan ]]></b:skin>


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
Author Rating
4/ 5 Suara Dari 1001 Ulasan

Dapatkan artikel menarik lainnya : Klik disini
5 komentar sudah masuk. Silahkan menambahkan tanggapan lain...
Komentari


August 30, 2011 at 1:52 PM  
Like

wuih, jadi makin keren yah, ehehee
blog pagernya jadi makin menarik, makasih triknya :2thumbup



August 30, 2011 at 7:04 PM  
Like

@Ladida: sama2... :)



September 8, 2011 at 2:59 PM  
Like

ijin tuker link
http://blognoler.blogspot.com



September 11, 2011 at 11:21 AM  
Like

@sakura florist: silahkan menuju ruang tukar link pak, atau langsung cantumkan di blog anda. lalu konfirm ke saya. makasih



November 29, 2011 at 10:10 AM  
Like

blognya mantep ni,.. maksi banyak atas tips'a,.!!!

Tuliskan komentar pada form ini :

Adsense Indonesia
Template design by Armin | Cara Online
Powered by Blogger