post ok dech kita langsung ke TKP
1 seperti biasa ke tempat edit html
2 code css nya sperti biasa di masukan ke tempat sebelom tag skin
]]></b:skin>
nah ini CSS nya
.nav-item .icon,{dan code ini sesudah tag <head>
background-color:rgba(0, 0, 0, .2);
border: 1px solid rgba(255, 255, 255, 0.03);
border-top-color: rgba(255, 255, 255, 0.04);
border-bottom-color: rgba(255, 255, 255, 0.01);
box-shadow: 0 5px 12px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 5px 12px rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 5px 12px rgba(0, 0, 0, .7);
-webkit-transition: all .15s ease-in-out;
-webkit-transform-origin: 50% 1px;
}
<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
.nav-item {position: absolute;top: 0;width: 60px;text-decoration: none;}
.nav-prev {left: 0;padding-left: 70px; }
.nav-next {right: 0;padding-right: 70px;}
.nav-item .text {position: absolute;z-index: 1;font-size: 24px;font-weight: bold;line-height: 60px;color:TRANSPARENT;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.nav-item:hover .text,.nav-item:focus .text,.nav-item:active .text {color: #1680e8;-webkit-transition-delay: 0.2s;-moz-transition-delay: 0.2s;-o-transition-delay: 0.2s;transition-delay: 0.2s;
TEXT-shadow:0px 0px 10px rgba(0,198,255,0.7);
}
.nav-prev .text {left: 0;}.nav-prev:hover .text,.nav-prev:focus .text,.nav-prev:active .text {left: 70px;}.nav-next .text {right: 0;}.nav-next:hover .text,.nav-next:focus .text,.nav-next:active .text {right: 70px; }.nav-item .icon {position: absolute;z-index: 2;top: 0;display: block;overflow: hidden;text-indent: -999em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: 60px;height: 60px;border-radius: 9999px;opacity: 0.5;-webkit-transition-property: box-shadow, opacity;-webkit-transition-duration: 0.3s, 0s;-webkit-transition-timing-function: ease-in-out, linear;-webkit-transition-delay: 0.1s, 0.4s;-moz-transition-property: box-shadow, opacity;-moz-transition-duration: 0.3s, 0s;-moz-transition-timing-function: ease-in-out, linear;-moz-transition-delay: 0.1s, 0.4s;-o-transition-property: box-shadow, opacity;-o-transition-duration: 0.3s, 0s;-o-transition-timing-function: ease-in-out, linear;-o-transition-delay: 0.1s, 0.4s;transition-property: box-shadow, opacity;transition-duration: 0.3s, 0s;transition-timing-function: ease-in-out, linear; transition-delay: 0.1s, 0.4s;}
.nav-item:hover .icon,.nav-item:focus .icon,.nav-item:active .icon {opacity: 1;-webkit-transition-delay: 0.1s, 0s;-moz-transition-delay: 0.1s, 0s; -o-transition-delay: 0.1s, 0s;transition-delay: 0.1s, 0s;}.nav-item .icon:before,.nav-item .icon:after {content: "";position: absolute;top: 50%;left: 50%;width: 10px;height: 10px;margin: -7px 0 0 -9px;border-width: 0 4px 4px 0;border-style: solid;border-color: #1680e8;-webkit-transform: rotate(-45deg);-webkit-transition: all 0.3s linear;-webkit-transition-delay: 0.1s;-moz-transform: rotate(-45deg);-moz-transition: all 0.3s linear;-moz-transition-delay: 0.1s;-o-transform: rotate(-45deg);-o-transition: all 0.3s linear;-o-transition-delay: 0.1s;transform: rotate(-45deg);transition: all 0.3s linear;transition-delay: 0.1s;}.nav-item .icon:before {left: -25%;border-color: #1680e8;}.nav-item:hover .icon:before,.nav-item:focus .icon:before,.nav-item:active .icon:before {left: 50%;}.nav-item:hover .icon:after,.nav-item:focus .icon:after,.nav-item:active .icon:after {left: 125%;}.nav-prev .icon {left: 0;-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);}.nav-next .icon {right: 0;}#blog-pager-newer-link {position : fixed;left:25px;z-index : 99999;bottom :45%;}#blog-pager-older-link {position : fixed;right :25px;z-index : 99999;bottom :45%;}</b:if>
</style>
jika langkah 2 sudah skarang kita langsung ke terakhir
cari dengan ctrl + f
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
masukan tepat di bawah code di atas dengan code di bawah ini
<b:includable id='nextprev'>
<nav class='nav'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='nav-item nav-prev' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'> <span class='icon'><</span>
<span class='text'>Next</span></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='nav-item nav-next' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><span class='text'>Prev</span>
<span class='icon'>></span></a>
</span>
</b:if>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</nav>
</b:includable>
selesai dech ok good luck sobat 2 smoga berhasil good luck ......
Sumber : klik
EmoticonEmoticon