Now, for more variety of blog pagers modification, I will also share the way how to embed floating blog pagers.
Floating blog pagers are displayed by image, and their position are added on the right end and on the left end of the blog page.
Basically floating blog pagers replace the display of the default blog pager usually found / seen at the post footer area.
- Go to Template ----> click Edit HTML
- Using CTRL + F find </head> tag.
- Copy and paste the below codes before / above the </head>.
<style> #blog-pager a{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;height:75px;opacity:0.4;overflow:hidden;position:fixed;text-indent:-9999px;top:50%;width:75px;z-index:9;margin:0 0 0 5px} .blog-pager-older-link{background:url(http://4.bp.blogspot.com/-OqfA8438n_0/UhyM6Y4shSI/AAAAAAAAByw/gaQ6tV_rQU4/s1600/Prev%2BPost.png) no-repeat scroll 0 0 transparent;right:5px;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;transition:all 0.3s ease-in;}.blog-pager-newer-link{background:url(http://2.bp.blogspot.com/-7QlvmMP5H_M/UhyNC62wxLI/AAAAAAAABy8/VYh7sWWBWas/s1600/Next%2BPost.png) no-repeat scroll 0 0 transparent;left:0;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;transition:all 0.3s ease-in;}#blog-pager a:hover{opacity:1} </style>Customization: Check out the codes in blue.
- To change position of the pager image change the percentage number at this tag top:50%; become 60%, 70%, 80% or 90% or else. The number represents the distance from the top end of the blog. 60%, 70%, 80% or 90% from the top end of the blog page.
- If you want to change the image with your own, simply upload the image, get the image URL and replace it with yours.
0 komentar:
Posting Komentar