Add a 3D Professional Numbered Page Navigation Widget

Numbered Page Navigation Widget is slowly slowly entering in the blogger world even it automatically entered in the blogging world and their respond also a very awesome thing be'coz this widget gives a professional look to every blog and that seems looks like a professional blog, and when widget is made in the HD form and 3D form it's look and feel always looks like awesome. This widget is simply made by CSS no javascript and no other jQuery or something in it. So, it will work very smooth and cool.

For add one of the given Numbered Widget, first you have to follow previous post Numbered Page Navigation Widget

Read Also- More Numbered Page Navigation Widget

1. Colorful Blogger Numbered Page Navigation Widget Generator 

2. Add a Numbered Page Navigation Widget

3. Top 3 Numbered Page Navigation Widget 

4. Add a 3D Professional Numbered Page Navigation Widget

Add Numbered Page Navigation Widget

•  Follow previous post Numbered Page Navigation Widget
• Paste below code before ]]></b:skin>

.pagenavi{ position: relative; display: block; width: 400px; height: 40px; overflow: visible; margin: 50px auto; border: 10px solid rgba(255,255,255,0.5); /*border-radius*/ -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; /*box-shadow*/ -webkit-box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff; -moz-box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff; box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff; } .pagenavi span,.pagenavi a{ font: bold 20px/30px Tahoma, Arial; cursor: pointer; text-decoration: none; color: #464646; display: block; float: left; margin-left: 2px; /*box-shadow*/ -webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0; -moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0; box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0; padding: 2px 10px; min-width: 10px; text-align: center; position: relative; text-shadow: #fff 0 1px 0; background: #cdcdcd; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.8)), to(rgba(200,200,200,0.9))); /*linear-gradient*/ background: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.8)),to(rgba(200,200,200,0.9))); background: -webkit-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9)); background: -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9)); background: -o-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9)); background: linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9)); } .pagenavi a:after { content: ''; position: absolute; bottom: -3px; height: 100%; display: block; width: 100%; left: 0; /*box-shadow*/ -webkit-box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0; box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0; } .pagenavi a:first-child::after { /*border-radius*/ -webkit-border-radius: 500px 0 0 500px; -moz-border-radius: 500px 0 0 500px; border-radius: 500px 0 0 500px; } .pagenavi a:last-child::after { /*border-radius*/ -webkit-border-radius: 0 50px 50px 0; -moz-border-radius: 0 50px 50px 0; border-radius: 0 50px 50px 0; } .pagenavi a.current:after { height: 1px; bottom: -1px; } .pagenavi a:before { content: ''; position: absolute; top: 1px; height: 100%; /*box-shadow*/ -webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0; -moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0; box-shadow: rgba(0,0,0,0.4) 0 3px 0; width: 1px; display: block; background: rgba(0,0,0,0.4); right: -1px; } .pagenavi a:last-child::before { display: none !important } .pagenavi a:first-child { /*border-radius*/ -webkit-border-radius: 50px 0 0 50px; -moz-border-radius: 50px 0 0 50px; border-radius: 50px 0 0 50px; font-family: 'WebSymbolsRegular'; } .pagenavi a:last-child { /*border-radius*/ -webkit-border-radius: 0 50px 50px 0; -moz-border-radius: 0 50px 50px 0; border-radius: 0 50px 50px 0; font-family: 'WebSymbolsRegular'; } .pagenavi a:hover { /*box-shadow*/ -webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0; -moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0; box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0; } .pagenavi a:active { /*box-shadow*/ -webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0; -moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0; box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0; top: 1px; text-shadow: #fff 0 0 15px; } .pagenavi a:active:after { bottom: -2px } .pagenavi a:active:before { /*box-shadow*/ -webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0; -moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0; box-shadow: rgba(0,0,0,0.4) 0 3px 0; top: 0px; } .pagenavi a.current { /*box-shadow*/ -webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0; -moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0; box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0; top: 2px; text-shadow: #fff 0 0 15px; } .pagenavi a.current:before { /*box-shadow*/ -webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0; -moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0; box-shadow: rgba(0,0,0,0.4) 0 3px 0; top: -1px; } .pagenavi a.current:active:after { bottom: -1px }

• After adding the CSS part, follow above link's post. and then 
• Save your template.

If Any Problem Comes, Ask in Comments