Wednesday, August 10, 2011

Cara Memperganteng Blog Pager/Navigasi Halaman Blogspot

blog pager navigasi blogspot halaman

Untuk menciptakan navigasi halaman blog dengan tampilan yang luar biasa ganteng seperti ini, pertama-tama masuklah ke tab Rancangan kemudian pilih Edit HTML.

Cari kode yang tampak seperti ini:

]]></b:skin>

atau seperti ini:

</style>

Salin kode di bawah ini, kemudian letakkan tepat di atasnya:

#blog-pager {line-height:40px !important}

#blog-pager-older-link a,
#blog-pager-newer-link a,
#blog-pager a.home-link {
  padding:5px 10px;
  margin:2px 7px;
  text-align:center;
  background:#278100 url('http://4.bp.blogspot.com/-445SkQ6EG9g/TkIRpduys0I/AAAAAAAAAqI/1uUZnx_-3FY/s1600/rumput.png') repeat-x 0 -1px;
  border:2px solid white;
  text-decoration:none;
  font:normal bold 13px Arial,Sans-Serif;
  color:white;
  text-shadow:1px 1px 1px #278100,0 0 5px #278100;
  -webkit-box-shadow:0 1px 3px #aaa;
  -moz-box-shadow:0 1px 2px #aaa;
  box-shadow:0 1px 2px #aaa;
  -webkit-border-radius:.5em;
  -moz-border-radius:.5em;
  border-radius:.5em;
} 

#blog-pager-older-link a:hover,
#blog-pager-newer-link a:hover,
#blog-pager a.home-link:hover {
  position:relative;
  top:-1px;
  color:black;
  background-position:0 0;
} 

#blog-pager-older-link a:active,
#blog-pager-newer-link a:active,
a.home-link:active {
  position:relative;
  top:1px;
  background-position:0 -2px;
}

Klik Simpan Template.

Warna dominan yang disarankan untuk mengimbangi tampilannya adalah: #f5f8d8

Hasil tampilan akhirnya kira-kira akan tampak seperti ini:

Labels: , ,

18 Comments:

At Friday, August 12, 2011 at 1:06:00 PM GMT+7, Blogger Unknown said...

ane mmintany dari tombol k text =="

 
At Friday, August 12, 2011 at 1:09:00 PM GMT+7, Blogger Unknown said...

mminta tombol k text ini mah text k tombol haha =="

 
At Friday, August 12, 2011 at 3:06:00 PM GMT+7, Blogger Unknown said...

bingung mas ==" mengembalikan logika gmna sy gk ahli dalam css

 
At Saturday, August 13, 2011 at 12:36:00 AM GMT+7, Blogger Admin 3 said...

Wah mas ini ada2 aja kreasinya, krenzz banget nih mas, rumpur aja bisa jd backgroundnya, hehe..!!

 
At Tuesday, September 20, 2011 at 12:55:00 PM GMT+7, Blogger Bayu said...

mas kalo tulisan posting lama di ganti gambar sajo gimana caranya?

 
At Wednesday, September 21, 2011 at 10:17:00 AM GMT+7, Blogger Taufik Nurrohman said...

@Bayu Aldi Yansyah: Pelajari dulu artikel ini » Klik!

Lalu ganti kata berikutnya/sebelumnya menjadi <img src='URL Gambar' />

 
At Wednesday, October 12, 2011 at 3:48:00 AM GMT+7, Blogger Nik Salsabiila said...

siapa yang mau bantu masangin huaaaaaaaaaaaa :'( #nangis darah

 
At Saturday, February 4, 2012 at 7:48:00 PM GMT+7, Anonymous Anonymous said...

hmmm sering liat ahh -_-

 
At Monday, February 13, 2012 at 11:39:00 PM GMT+7, Anonymous Anonymous said...

Boleh juga tuh, tinggal ganti gambar atau background yang kita suka.

 
At Sunday, February 19, 2012 at 11:43:00 PM GMT+7, Blogger Rohis Facebook said...

aq pake ya sob..., thx ilmux gan :)

 
At Thursday, June 7, 2012 at 2:19:00 PM GMT+7, Blogger Farid Wajdi Kardbri said...

mas, saya mau bertanya...
cara ngilangin "Widget by Abu Farhan" di widget paginator 3000 nya itu gimana yah? Bantuannya yah :)

 
At Thursday, June 7, 2012 at 3:29:00 PM GMT+7, Blogger Taufik Nurrohman said...

@Farid Wajdi Kardbri Kurang tahu. Mungkin pake line-height:

#blog-pager {
line-height:30px;
overflow:hidden;
}

 
At Saturday, June 9, 2012 at 6:41:00 AM GMT+7, Blogger Farid Wajdi Kardbri said...

udah ketemu mas, cuma nambahin kode :
a[href="http://www.abu-farhan.com"]{display:none !important;}
}
di atas ]]>

 
At Wednesday, February 20, 2013 at 1:33:00 PM GMT+7, Blogger Venny Unida said...

wah,,kalau ane backgroundnya ane kasih dengan warna gradasi,,soalnya kalau pakai gambar loadingnya lama B)

 
At Tuesday, November 4, 2014 at 1:19:00 PM GMT+7, Blogger Unknown said...

SITUS TERBAIK MENURUT SAYA MENGENAI TUTORIAL,SEMUANYA WORK TUTORIALNYA PAKE HATI :-bd SALUT BANG. Jangan Lupa Jalan Kesini http://bram-movie.blogspot.com/ semuanya Tutor dari Situs ini 0:)

 
At Monday, July 20, 2015 at 4:28:00 AM GMT+7, Blogger Irfan Muhammad Ghani said...

gan kalau pengen mindahin pager nya di bawah postingan gmn ? makasih ^_^

 
At Friday, July 24, 2015 at 1:28:00 PM GMT+7, Blogger Taufik Nurrohman said...

Tambahkan kode ini di atas <div class="comments" id="comments">

<b:include name='mobile-nextprev'/>

 
At Friday, July 24, 2015 at 4:02:00 PM GMT+7, Blogger Irfan Muhammad Ghani said...

oke gan makasih nanti saya coba :-bd

 

Post a Comment

<< Home