Follo Molo (Become My Stalker And Ask Me To Stalk Back....I prefer a Yandere...)

Bored?You can play around with these line of colours for a while.....it is 100times better than PS4...because I dont have one....

01 Oktober 2015

Next/Previous Navigation Yang Cool Untuk Blog



Untuk lihat Demo di blog ini,sila mouse hover ke line bar statik di kiri dan kanan


Langkah 1
Pastekan kod ni di atas/sebelum post-footer-line-3

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<nav class='nav-reveal'><b:if cond='data:olderPageUrl'><a class='prev' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><span class='icon-wrap'><svg class='icon' height='32' viewBox='0 0 64 64' width='32'><use xlink:href='#arrow-left-3'/></svg></span><div><h3 class='older-link' expr:href='data:olderPageUrl'/></div></a></b:if><b:if cond='data:newerPageUrl'><a class='next' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'><span class='icon-wrap'><svg class='icon' height='32' viewBox='0 0 64 64' width='32'><use xlink:href='#arrow-right-3'/></svg></span><div><h3 class='newer-link' expr:href='data:newerPageUrl'/></div></a></b:if></nav><div class='svg-wrap'><svg height='64' viewBox='0 0 64 64' width='64'><path d='M44.797 17.28l0.003 29.44-25.6-14.72z' id='arrow-left-3'/></svg><svg height='64' viewBox='0 0 64 64' width='64'><path d='M19.203 17.28l-0.003 29.44 25.6-14.72z' id='arrow-right-3'/></svg></div>
<script type='text/javascript'>//<![CDATA[
(function(a){var c=a("h3.newer-link"),d=a("h3.older-link");a.get(c.attr("href"),function(b){c.html("<span>Next Stories</span>"+a(b).find(".post h2.post-title").text())},"html");a.get(d.attr("href"),function(b){d.html("<span>Previous Stories</span>"+a(b).find(".post h2.post-title").text())},"html")})(jQuery);
//]]></script>
</b:if>

Langkah 2
Pastekan kod ni di atas/sebelum ]]></b:skin>

.svg-wrap{position:absolute;width:0;height:0;overflow:hidden;overflow-x:hidden;overflow-y:hidden}.nav-reveal a{position:fixed;top:50%;display:block;outline:0;text-align:left;z-index:1000;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.nav-reveal a.prev{left:0}.nav-reveal a.next{right:0}.nav-reveal a svg{display:block;margin:0 auto;padding:0}.nav-reveal a{overflow:hidden;width:40px;height:120px;background-color:rgba(207,207,207,.6);-webkit-transition:width .4s,background-color .4s;transition:width .4s,background-color .4s;-webkit-transition-timing-function:cubic-bezier(0.7,0,.3,1);transition-timing-function:cubic-bezier(0.7,0,.3,1)}.nav-reveal .icon-wrap{position:absolute;z-index:100;padding:44px 4px;width:40px}.nav-reveal a.prev .icon-wrap{left:0}.nav-reveal a.next .icon-wrap{right:0}.nav-reveal svg.icon{fill:#383838}.nav-reveal div{position:absolute;top:0;padding:0 50px;width:400px;height:100%}.nav-reveal a.prev div{left:0;padding-right:130px;text-align:right}.nav-reveal a.next div{right:0;padding-left:130px}.nav-reveal h3{position:relative;margin:0;padding:20px 0;color:#fff;font-weight:300;font-size:1.22em;line-height:1.2}.nav-reveal div h3 span{display: block;padding-bottom:6px;color: #fff;text-transform: uppercase;letter-spacing: 1px;font-weight: 700;font-size: 50%;border-bottom: 1px solid #fff;margin-bottom: 6px;}.nav-reveal a:hover{width:500px;background-color:#C05555}.nav-reveal svg.icon:hover{fill:#fff}@media screen and (max-width:520px){.nav-reveal a.prev{-webkit-transform-origin:0 50%;transform-origin:0 50%}.nav-reveal a.next{-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.nav-reveal a{-webkit-transform:scale(0.6);transform:scale(0.6)}}

Save Template.

Anda Juga Boleh Pilih Gaya yang lain

Pilihan 2:



Pastekan kod ni di atas/sebelum post-footer-line-3

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<nav class="nav-growpop"><b:if cond='data:olderPageUrl'><a class='prev' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><span class="icon-wrap"><svg class="icon" width="24" height="24" viewBox="0 0 64 64"><use xlink:href="#arrow-left-2"/></svg></span><div><h3 class='older-link' expr:href='data:olderPageUrl'/></div></a></b:if><b:if cond='data:newerPageUrl'><a class='next' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'><span class="icon-wrap"><svg class="icon" width="24" height="24" viewBox="0 0 64 64"><use xlink:href="#arrow-right-2"/></svg></span><div><h3 class='newer-link' expr:href='data:newerPageUrl'/></div></a></b:if></nav><div class='svg-wrap'><svg height='64' viewBox='0 0 64 64' width='64'><path d='M26.667 10.667q1.104 0 1.885 0.781t0.781 1.885q0 1.125-0.792 1.896l-14.104 14.104h41.563q1.104 0 1.885 0.781t0.781 1.885-0.781 1.885-1.885 0.781h-41.563l14.104 14.104q0.792 0.771 0.792 1.896 0 1.104-0.781 1.885t-1.885 0.781q-1.125 0-1.896-0.771l-18.667-18.667q-0.771-0.813-0.771-1.896t0.771-1.896l18.667-18.667q0.792-0.771 1.896-0.771z' id='arrow-left-2'/></svg><svg height='64' viewBox='0 0 64 64' width='64'><path d='M37.333 10.667q1.125 0 1.896 0.771l18.667 18.667q0.771 0.771 0.771 1.896t-0.771 1.896l-18.667 18.667q-0.771 0.771-1.896 0.771-1.146 0-1.906-0.76t-0.76-1.906q0-1.125 0.771-1.896l14.125-14.104h-41.563q-1.104 0-1.885-0.781t-0.781-1.885 0.781-1.885 1.885-0.781h41.563l-14.125-14.104q-0.771-0.771-0.771-1.896 0-1.146 0.76-1.906t1.906-0.76z' id='arrow-right-2'/></svg></div>
<script type='text/javascript'>//<![CDATA[
(function(a){var c=a("h3.newer-link"),d=a("h3.older-link");a.get(c.attr("href"),function(b){c.html("<span>Next Stories</span><h3>"+a(b).find(".post h2.post-title").text()+"</h3>")},"html");a.get(d.attr("href"),function(b){d.html("<span>Previous Stories</span><h3>"+a(b).find(".post h2.post-title").text()+"</h3>")},"html")})(jQuery);
//]]></script>
</b:if>

Pastekan kod ni di atas/sebelum ]]></b:skin>

.svg-wrap{position:absolute;width:0;height:0;overflow:hidden;overflow-x:hidden;overflow-y:hidden}.nav-growpop a{position:fixed;top:50%;display:block;outline:0;text-align:left;z-index:1000;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.nav-growpop a.prev{left:0}.nav-growpop a.next{right:0}.nav-growpop a svg{display:block;margin:0 auto;padding:0}.nav-growpop .icon-wrap{position:relative;z-index:100;display:block;padding:13px 5px;border:0 solid rgb(240, 113, 113);background:rgb(240, 113, 113);-webkit-transition:border-width .3s .15s;transition:border-width .3s .15s}.nav-growpop svg.icon{fill:#fff}.nav-growpop div{position:absolute;top:50%;padding:20px;width:440px;height:144px;background:#f8f8f8;opacity:0;-webkit-transition:-webkit-transform .3s,opacity .3s;transition:transform .3s,opacity .3s}.nav-growpop a.prev div{left:0;padding:20px 25px 0px 45px;-webkit-transform:translateY(-50%) translateX(-100%) scale(0.75);transform:translateY(-50%) translateX(-100%) scale(0.75)}.nav-growpop a.next div{right:0;padding:20px 45px 0px 25px;-webkit-transform:translateY(-50%) translateX(100%) scale(0.75);transform:translateY(-50%) translateX(100%) scale(0.75)}.nav-growpop span{display:block;padding-bottom:5px;border-bottom:1px solid #ddd;color:rgb(240, 113, 113);text-transform:uppercase;letter-spacing:1px;font-weight:400;font-size:.7em;line-height:1.2}.nav-growpop>h3{margin:0;padding:8px 0 10px;color:#4d4d4d;font-weight:300;font-size:1.14em;line-height:1.2;font-style: italic;}.nav-growpop a:hover .icon-wrap{border-top-width:40px;border-bottom-width:40px;-webkit-transition-delay:0s;transition-delay:0s}.nav-growpop a:hover div{opacity:1;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transform:translateY(-50%) translateX(0) scale(1);transform:translateY(-50%) translateX(0) scale(1)}@media screen and (max-width:520px){.nav-growpop a.prev{-webkit-transform-origin:0 50%;transform-origin:0 50%}.nav-growpop a.next{-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.nav-growpop a{-webkit-transform:translateY(-50%) scale(0.6);transform:translateY(-50%) scale(0.6)}}

Save Template

Pilihan 3



Pastekan kod ni di atas/sebelum post-footer-line-3

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<nav class="nav-fillslide"><b:if cond='data:olderPageUrl'><a class='prev' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><span class="icon-wrap"><svg class="icon" width="24" height="24" viewBox="0 0 64 64"><use xlink:href="#arrow-left-4"/></svg></span><div><h3 class='older-link' expr:href='data:olderPageUrl'/></div></a></b:if><b:if cond='data:newerPageUrl'><a class='next' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'><span class="icon-wrap"><svg class="icon" width="24" height="24" viewBox="0 0 64 64"><use xlink:href="#arrow-right-4"/></svg></span><div><h3 class='newer-link' expr:href='data:newerPageUrl'/></div></a></b:if></nav><div class='svg-wrap'><svg height='64' viewBox='0 0 64 64' width='64'><path d='M15.946 48l0.003-10.33 47.411 0.003v-11.37h-47.414l0.003-10.304-15.309 16z' id='arrow-left-4'/></svg><svg height='64' viewBox='0 0 64 64' width='64'><path d='M48.058 48l-0.003-10.33-47.414 0.003v-11.37h47.418l-0.003-10.304 15.306 16z' id='arrow-right-4'/></svg></div>
<script type='text/javascript'>//<![CDATA[
(function(a){var c=a("h3.newer-link"),d=a("h3.older-link");a.get(c.attr("href"),function(b){c.html("<h3>"+a(b).find(".post h2.post-title").text()+"</h3><span>Next Stories</span>")},"html");a.get(d.attr("href"),function(b){d.html("<h3>"+a(b).find(".post h2.post-title").text()+"</h3><span>Previous Stories</span>")},"html")})(jQuery);
//]]></script>
</b:if>

Pastekan kod ni di atas/sebelum ]]></b:skin>

.svg-wrap{position:absolute;width:0;height:0;overflow:hidden;overflow-x:hidden;overflow-y:hidden}.nav-fillslide a{position:fixed;top:50%;display:block;outline:0;text-align:left;z-index:1000;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.nav-fillslide a.prev{left:0}.nav-fillslide a.next{right:0}.nav-fillslide a svg{display:block;margin:0 auto;padding:0}.nav-fillslide .icon-wrap{position:relative;z-index:100;display:block;padding:65px 10px;background:#efefef;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nav-fillslide .icon-wrap::before{content:'';position:absolute;width:100%;height:110%;background:#fff;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform .3s .3s;transition:transform .3s .3s}.nav-fillslide a.prev .icon-wrap::before{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.nav-fillslide a.next .icon-wrap::before{-webkit-transform:translateX(100%);transform:translateX(100%)}.nav-fillslide svg.icon{fill:#0f0f0f;position:relative;z-index:100}.nav-fillslide div{position:absolute;padding:20px;top:0;width:440px;height:154px;background:#fff;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.nav-fillslide a.prev div{left:0;padding:20px 21px 0 0;text-align:right;border-radius:0 6px 6px 0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.nav-fillslide a.next div{right:0;padding:20px 40px 0 21px;border-radius:6px 0 0 6px;-webkit-transform:translateX(100%);transform:translateX(100%)}.nav-fillslide div span{display:inline-block;color:#CD6060;text-transform:uppercase;letter-spacing:1px;font-weight:400;font-size:.7em;line-height:1.2;border-top: 1px solid #D8CFDA;width: 100%;padding-top: 10px;}.nav-fillslide h3{margin:0;padding:8px 0 10px;color:#131212;font-weight:400;font-size:1.1em;line-height:1.2;}.nav-fillslide a:hover .icon-wrap::before{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition-delay:0s;transition-delay:0s}.nav-fillslide a:hover div{-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transform:translateX(0);transform:translateX(0)}@media screen and (max-width: 520px) {.nav-fillslide a {-webkit-transform: scale(0.6);transform: scale(0.6);}}

Save Template

Pilihan 4


Pastekan kod ni di atas/sebelum post-footer-line-3

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<nav class="nav-circlepop"><b:if cond='data:olderPageUrl'><a class="prev" expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><span class="icon-wrap"></span></a></b:if><b:if cond='data:newerPageUrl'><a class="next" expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'><span class="icon-wrap"></span></a></b:if></nav></b:if>

Pastekan kod ni di atas/sebelum ]]></b:skin>

.svg-wrap{position:absolute;width:0;height:0;overflow:hidden;overflow-x:hidden;overflow-y:hidden}.nav-circlepop a{position:fixed;top:50%;display:block;outline:0;text-align:left;z-index:1000;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.nav-circlepop a.prev{left:0}.nav-circlepop a.next{right:0}.nav-circlepop a svg{display:block;margin:0 auto;padding:0}.nav-circlepop a{margin:0 30px;width:50px;height:50px}.nav-circlepop a::before{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:gray;content:'';opacity:0;-webkit-transition:-webkit-transform .3s,opacity .3s;transition:transform .3s,opacity .3s;-webkit-transform:scale(0.9);transform:scale(0.9)}.nav-circlepop .icon-wrap{position:relative;display:block;margin:10% 0 0 10%;width:80%;height:80%}.nav-circlepop a.next .icon-wrap{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.nav-circlepop .icon-wrap::after,.nav-circlepop .icon-wrap::before{position:absolute;left:25%;width:3px;height:50%;background:red;content:'';-webkit-transition:-webkit-transform .3s,background-color .3s;transition:transform .3s,background-color .3s;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nav-circlepop .icon-wrap::before{-webkit-transform:translateX(-50%) rotate(30deg);transform:translateX(-50%) rotate(30deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}.nav-circlepop .icon-wrap::after{top:50%;-webkit-transform:translateX(-50%) rotate(-30deg);transform:translateX(-50%) rotate(-30deg);-webkit-transform-origin:0 0;transform-origin:0 0}.nav-circlepop a:hover::before{opacity:1;-webkit-transform:scale(1);transform:scale(1)}.nav-circlepop a:hover .icon-wrap::after,.nav-circlepop a:hover .icon-wrap::before{background:#fff}.nav-circlepop a:hover .icon-wrap::before{-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg)}.nav-circlepop a:hover .icon-wrap::after{-webkit-transform:translateX(-50%) rotate(-45deg);transform:translateX(-50%) rotate(-45deg)}

Save Template

Pilihan 5


Pastekan kod ni di atas/sebelum post-footer-line-3

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<nav class="nav-slide"><b:if cond='data:olderPageUrl'><a class="prev" expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-1"/></svg></span><div><h3 class='older-link' expr:href='data:olderPageUrl'/></div></a></b:if><b:if cond='data:newerPageUrl'><a class="next" expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'><span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-1"/></svg></span><div><h3 class='newer-link' expr:href='data:newerPageUrl'/></div></a></b:if></nav><div class="svg-wrap"><svg width="64" height="64" viewBox="0 0 64 64"><path id="arrow-left-1" d="M46.077 55.738c0.858 0.867 0.858 2.266 0 3.133s-2.243 0.867-3.101 0l-25.056-25.302c-0.858-0.867-0.858-2.269 0-3.133l25.056-25.306c0.858-0.867 2.243-0.867 3.101 0s0.858 2.266 0 3.133l-22.848 23.738 22.848 23.738z" /></svg><svg width="64" height="64" viewBox="0 0 64 64"><path id="arrow-right-1" d="M17.919 55.738c-0.858 0.867-0.858 2.266 0 3.133s2.243 0.867 3.101 0l25.056-25.302c0.858-0.867 0.858-2.269 0-3.133l-25.056-25.306c-0.858-0.867-2.243-0.867-3.101 0s-0.858 2.266 0 3.133l22.848 23.738-22.848 23.738z" /></svg></div>
<script type='text/javascript'>//<![CDATA[
(function(a){var c=a("h3.newer-link"),d=a("h3.older-link");a.get(c.attr("href"),function(b){c.html(a(b).find(".post h2.post-title").text()+"<span>Next Article</span>")},"html");a.get(d.attr("href"),function(b){d.html(a(b).find(".post h2.post-title").text()+"<span>Previous Article</span>")},"html")})(jQuery);
//]]></script>
</b:if>

Pastekan kod ni di atas/sebelum ]]></b:skin>

.svg-wrap{position:absolute;width:0;height:0;overflow:hidden;overflow-x:hidden;overflow-y:hidden}.nav-slide a{position:fixed;top:50%;display:block;outline:0;text-align:left;z-index:1000;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.nav-slide a.prev{left:0}.nav-slide a.next{right:0}.nav-slide a svg{display:block;margin:0 auto;padding:0}.nav-slide .icon-wrap{position:relative;z-index:100;display:block;padding:20px;background-color:#fff}.nav-slide svg.icon{fill:#34495e}.nav-slide div{position:absolute;top:50%;background-color:#34495e;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.nav-slide a.prev div{left:0;padding-left:86px;padding-right:10px;-webkit-transform:translateY(-50%) translateX(-100%);transform:translateY(-50%) translateX(-100%)}.nav-slide a.next div{right:0;padding-right:86px;padding-left:10px;text-align:right;-webkit-transform:translateY(-50%) translateX(100%);transform:translateY(-50%) translateX(100%)}.nav-slide h3{position:relative;margin:0;padding:20px 0;color:#fff;white-space:nowrap;font-weight:300;font-size:1.3em !important;line-height:1.5}.nav-slide div h3 span{display:block;color:#95a5a6;font-style:italic;font-size:65%;font-family:Baskerville,"Baskerville Old Face","Hoefler Text",Garamond,"Times New Roman",serif}.nav-slide a:hover div{-webkit-transform:translateY(-50%) translateX(0);transform:translateY(-50%) translateX(0)}@media screen and (max-width:520px){.nav-slide a.prev{-webkit-transform-origin:0 50%;transform-origin:0 50%}.nav-slide a.next{-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.nav-slide a{-webkit-transform:scale(0.6);transform:scale(0.6)}}

Save Template

Post a Comment:

Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.

At the post page,this banner can be spin around ;)