Dipostingan kali ini kita akan membahas seputar Post Pager yang ada di bawah postingan blog sebagai menu navigasi perhiasan di Blog, menyerupai yang kita ketahui menu navigasi pada blog sangat disarankan oleh Google untuk mempermudah pengunjung mengetahui lebih banyak isi dari blog yang kita tampilkan.
Pada postingan sebelumnya kita pernah membahas hal serupa yakni Cara Merubah Next Previous Navigasi Halaman Dengan Judul Postingan namun kali ini agak sedikit berbeda dan modif, dipostingan ini kita akan menambahkan Post Title dan Thumbnail baik pada tombol Next maupun Previous pada Post Pager blog yang sudah support HTTPS.
Dengan adanya kreasi modifikasi ini pastinya membuat tampilan Blog menjadi lebih keren. Nah bagi teman yang mau mencobanya silahkan ikuti langkahnya berikut ini Cara Membuat Post Pager With Post Title And Thumbnail dan sebelum memulainya pastikan sudah memasang Font Awesome dan Jquery Library.
Dengan adanya kreasi modifikasi ini pastinya membuat tampilan Blog menjadi lebih keren. Nah bagi teman yang mau mencobanya silahkan ikuti langkahnya berikut ini Cara Membuat Post Pager With Post Title And Thumbnail dan sebelum memulainya pastikan sudah memasang Font Awesome dan Jquery Library.
Langkah Pertama
Silahkan teman salin isyarat CSS di bawah ini lalu letakkan di atas isyarat </head>.
Langkah Ke Dua
Silahkan teman cari isyarat HTML dibawah ini.
Setelah ketemu silahkan teman ganti semuanya menggunakan isyarat HTML dibawah ini.
Langkah Ke Tiga
Langkah selanjutnya, silahkan teman salin isyarat HTML ini lalu letakkan sempurna dibawah postingan.
Yang nantinya penampakkan akan menyerupai dibawah ini.
Langkah Ke Empat
Silahkan teman salin isyarat Javascript dibawah ini lalu letakkan sempurna diatas isyarat </body>.
Perhatikan penerapan isyarat pada setiap langkahnya, jikalau sudah simpulan silahkan SAVE, selamat mencoba biar bermanfaat.
<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> /*<![CDATA[*/ .halaman-kanan,.halaman-kiri{transition:all .3s ease-in-out} .halaman{margin:0;padding:0;min-height:170px;height:auto} .halaman-kanan,.halaman-kiri{color:#666;position:relative;background:#000;background:rgba(0,0,0,.6);width:50%;min-height:170px;-moz-box-sizing:border-box;margin:0} .halaman-kiri{height:auto;float:left;padding:20px 10px 20px 40px;text-align:left;box-sizing:border-box} .halaman-kanan,.halaman-kiri{-webkit-box-sizing:border-box} .halaman-kanan{height:auto;float:right;padding:20px 40px 20px 10px;text-align:right;box-sizing:border-box} .current-pageleft,.current-pageright,.halaman-kanan a,.halaman-kiri a{font-size:16px;font-weight:bold;background:0 0;text-decoration:none;line-height:1.1} .halaman-kanan a,.halaman-kiri a,.current-pageleft,.current-pageright{color:#fff;} #blog-pager,.isihalaman-kanan,.isihalaman-kiri{margin:0!important} .panahkanan,.panahkiri,.halaman-kiri a div:before,.halaman-kanan a div:before{position:absolute;top:50%;margin-top:-8px;font-size:18px!important;} .panahkiri,.halaman-kiri a div:before{left:10px} .panahkanan,.halaman-kanan a div:before{right:10px} .halaman-kanan a:hover,.halaman-kiri a:hover{text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);} .isihalaman-kanan img,.isihalaman-kiri img{position:absolute;top:0;width:100%;height:100%;z-index:1} .isihalaman-kanan img{right:0} .isihalaman-kiri img{left:0} .halaman-kiri a div, .halaman-kanan a div,.current-pageleft,.current-pageright {position: absolute;bottom: 10px;z-index: 3;width: 100%;padding:0 10px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;} .halaman-kiri a div,.current-pageleft{left:0;padding-left:40px;} .halaman-kiri a div:before{content:'\f053';font-family: FontAwesome;} .halaman-kanan a div,.current-pageright {right:0;padding-right:40px} .halaman-kanan a div:before{content:'\f054';font-family: FontAwesome;} .halaman-kiri a div h6,.halaman-kanan a div h6,.pager-title-left{font-weight:light} .blog-pager-newer-link:after,.blog-pager-older-link:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background:-moz-linear-gradient(top,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);background:-webkit-linear-gradient(top,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);background:linear-gradient(to bottom,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#003f474e', endColorstr='#a63f474e', GradientType=0 );transition:all .4s ease-in-out} .halaman-kanan a:hover:after,.halaman-kiri a:hover:after{opacity:0} @media screen and (max-width:414px){.halaman-kiri,.halaman-kanan{width:100%;} } /*]]>*/ </style> </b:if>Langkah Ke Dua
Silahkan teman cari isyarat HTML dibawah ini.
<b:includable id='nextprev'> .......... .......... .......... </b:includable>Setelah ketemu silahkan teman ganti semuanya menggunakan isyarat HTML dibawah ini.
<b:includable id='nav-post'> <b:if cond='data:blog.pageType == "item"'> <div class='halaman'> <div class='blog-pager' id='blog-pager'> <div class='halaman-kiri'> <div class='isihalaman-kiri'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>« Next Post</a> </span> <b:else/> <span class='current-pageleft'><i class='fa fa-chevron-left panahkiri'/><span class='pager-title-left'>Next</span><br/>This Is The Current Newest Page</span> </b:if> <div class='clear'/> </div> </div> <div class='halaman-kanan'> <div class='isihalaman-kanan'> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Previous Post »</a> </span> <b:else/> <span class='current-pageright'><i class='fa fa-chevron-right panahkanan'/><span class='pager-title-left'>Previous</span><br/>This Is The Oldest Page</span> </b:if> <div class='clear'/> </div> </div> </div> <div class='clear'/> </div> </b:if> </b:includable> <b:includable id='nextprev'> <b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if> <div class='mobile-link-button' id='blog-pager-home-link'> <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> </div> <div class='mobile-desktop-link'> <a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><data:desktopLinkMsg/></a> </div> </div> </b:if> <div class='clear'/> </b:includable>Langkah Ke Tiga
Langkah selanjutnya, silahkan teman salin isyarat HTML ini lalu letakkan sempurna dibawah postingan.
<b:if cond='data:blog.pageType == "item"'> <b:include name='nav-post'/> </b:if>Yang nantinya penampakkan akan menyerupai dibawah ini.
<b:includable id='post' var='post'> <article class='post hentry'............. .......... .......... .......... </article> <b:if cond='data:blog.pageType == "item"'> <b:include name='nav-post'/> </b:if> </b:includable>Langkah Ke Empat
Silahkan teman salin isyarat Javascript dibawah ini lalu letakkan sempurna diatas isyarat </body>.
<script type='text/javascript'> //<![CDATA[ (function ($) { var newerLink = $('a.blog-pager-newer-link'); var olderLink = $('a.blog-pager-older-link'); $.get(newerLink.attr('href'), function (data) { var thumb = $(data) .find('.post-body') .length == 1 ? "<img alt='" + $(data) .find('.post-title') .text() + "' src='" + $(data) .find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );}) .attr('src') + "' class='pager-thumb' width='386' height='170'/>" : ""; newerLink.html(thumb + '<div><h6>Next</h6><h5>' + $(data) .find('.post-title') .text() + '</h5></div>') }, "html"); $.get(olderLink.attr('href'), function (data2) { var thumb2 = $(data2) .find('.post-body') .length == 1 ? "<img alt='" + $(data2) .find('.post-title') .text() + "' src='" + $(data2) .find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );}) .attr('src') + "' class='pager-thumb' width='386' height='170'/>" : ""; olderLink.html(thumb2 + '<div><h6>Previous</h6><h5>' + $(data2) .find('.post-title') .text() + '</h5></div>') }, "html") })(jQuery); //]]> </script>Perhatikan penerapan isyarat pada setiap langkahnya, jikalau sudah simpulan silahkan SAVE, selamat mencoba biar bermanfaat.
Comments