DTE :]

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: , ,

14 Comments:

Post a Comment



<< Home