Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogger

Cara Menciptakan Tombol Load More Keren Dan Responsive Di Blogger



Cara Membuat Tombol Load More Keren dan Responsive di Blogger


Halo sobat blogger,sebelumnya kita pernah membahas Cara Membuat Tombol Load More Post Pengganti Page Navigation Blogger ,namun mungkin anda semua masih kurang puas pada kesannya alasannya yaitu desain/tampilannnya yang terlalu biasa,hanya goresan pena tanpa ada border atau apapun yang membuatnya terlihat menyerupai sebuah tombol.

Oleh alasannya yaitu itu disini aku akan membahas tutorial bagaimana cara menciptakan tombol load more post di blogger biar tampilannya keren dan responsive. Berikut ini tutorialnya :

Cara Membuat Tomboal Load More Post Keren di Blogger


Berikut ini tutorialnya,pastikan anda mengikuti langkahnya dengan benar dan sesuai urutan yang benar biar tidak terjadi kesalahan dalam penerapannya.

Baca Juga : 6 Penyebab dan Cara Mengatasi Submit Sitemap Error di Google Webmaster atau Search Console

1. Memasang Script Tombol Load More


Bila anda belum pernah memasang tombol load more maka anda harus mengikuti langkah berikut ini untuk memasangnya,namun jika anda sudah pernah memasangnya maka lanjut saja ke tutorial selanjutnya untuk mengatur CSSnya biar Tombol Load More yang anda pasang pribadi berubah desainnya.


  • Buka Blogger.com
  • Sign In dengan Akun anda
  • Buka Dashboard Blogger
  • Masuk ke menu Tema
  • Klik Edit HTML
  • Cari arahan berikut


</body>

Setelah itu pasang arahan berikut sempurna di atasnya

<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script>//<![CDATA[
!function(t,e){t.InfiniteScroll=function(n){function r(t,n){return n=n||e,n.querySelectorAll(t)}function o(t){return void 0!==t}function a(t){return"function"==typeof t}function i(t,e){t=t||{};for(var n in e)t[n]="object"==typeof e[n]?i(t[n],e[n]):e[n];return t}function s(t,e,n){return o(t)?o(e)?void(o(n)?g[t][n]=e:g[t].push(e)):g[t]:g}function d(t,e){o(e)?delete g[t][e]:g[t]=[]}function l(t,e){if(o(g[t]))for(var n in g[t])g[t][n](e)}function c(){return L.innerHTML=p.text.loading,v=!0,M?(y.classList.add(p.state.loading),l("loading",[p]),void u(M,function(t,n){y.className=x+" "+p.state.load,h=e.createElement("div"),h.innerHTML=t;var o=r("title",h),a=r(p.target.post,h),i=r(p.target.anchors+" "+p.target.anchor,h),s=r(p.target.post,H);if(o=o&&o[0]?o[0].innerHTML:"",a.length&&s.length){var d=s[s.length-1];e.title=o,d.insertAdjacentHTML("afterend",'<span class="fi" id="#fi:'+q+'"></span>'),h=e.createElement("div");for(var c=0,u=a.length;u>c;++c)h.appendChild(a[c]);d.insertAdjacentHTML("afterend",h.innerHTML),f(),M=i.length?i[0].href:!1,v=!1,q++,l("load",[p,t,n])}},function(t,e){y.classList.add(p.state.error),v=!1,f(1),l("error",[p,t,e])})):(y.classList.add(p.state.loaded),L.innerHTML=p.text.loaded,l("loaded",[p]))}function f(t){if(L.innerHTML="",T){h.innerHTML=p.text[t?"error":"load"];var e=h.firstChild;e.onclick=function(){return 2===p.type&&(T=!1),c(),!1},L.appendChild(e)}}var u="infinite-scroll-state-",p={target:{posts:".posts",post:".post",anchors:".anchors",anchor:".anchor"},text:{load:"%s",loading:"%s",loaded:"%s",error:"%s"},state:{load:u+"load",loading:u+"loading",loaded:u+"loaded",error:u+"error"}},g={load:[],loading:[],loaded:[],error:[]};p=i(p,n||{}),p.on=s,p.off=d;var h=null,u=function(e,n,r){if(t.XMLHttpRequest){var o=new XMLHttpRequest;o.onreadystatechange=function(){if(4===o.readyState){if(200!==o.status)return void(r&&a(r)&&r(o.responseText,o));n&&a(n)&&n(o.responseText,o)}},o.open("GET",e),o.send()}},T=1!==p.type,v=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],M=r(p.target.anchor,L),m=e.body,y=e.documentElement,x=y.className||"",E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=0,b=null,q=1;if(M.length){M=M[0].href,H.insertAdjacentHTML("afterbegin",'<span class="fi" id="#fi:0"></span>'),h=e.createElement("div"),f();var w=function(){E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=m.scrollTop||y.scrollTop,v||E>A+j||c()};w(),0!==p.type&&t.addEventListener("scroll",function(){T||(b&&t.clearTimeout(b),b=t.setTimeout(w,200))},!1)}return p}}(window,document);var infinite_scroll = new InfiniteScroll({ type: 0,
target: {
posts: '.blog-posts',
post: '.post-outer',
anchors: '.blog-pager',
anchor: '.blog-pager-older-link'
},
text: {
load: '<a class="js-load" href="javascript:;">Liat Artikel Lainnya</a>',
loading: '<a class="js-load">Sabar gan...</a>',
loaded: '<span class="js-load">Dah ah, capek!</span>',
error: '<a class="js-load">Hadeh error!</a>'
}
});
//]]></script>
<style> .js-load{display:block;width:100%;text-align:center;font-size:20px;margin:20px}</style>
</b:if></b:if>


  • Sesuaikan kata-kata yang aku warnai kuning dan ganti dengan kata-kata yang anda inginkan
  • Bila sudah klik Simpan Tema


Nah disini kita sudah berhasil memasang Tombol Load More Post nya,sekarang kita akan mengatur arahan CSSnya biar tampilan dari tombol load morenya lebih keren dan responsive.

2. Cara Mengatur Tampilan Tombol Load More dengan CSS


Bila anda sudah memasang script untuk mengatur tombol load more kini kita akan mengatur tampilannya tombol tersebut biar terlihat keren dan responsive.


  • Buka Blogger.com
  • Sign In dengan Akun anda
  • Buka Dashboard Blogger
  • Masuk ke menu Tema
  • Klik Edit HTML
  • Cari arahan CSS berikut ini ,atau sejenisnya yang diawal dengan " /* PAGE NAVIGATION */ " atau yang menyerupai mirip berikut :


/* PAGE NAVIGATION */
#blog-pager {
clear:both !important;
padding:2px 0;
text-align: center;
}
#blog-pager-newer-link a {
float:left;
display:block;
}
#blog-pager-older-link a {
float:right;
display:block;
}
.displaypageNum a,.showpage a,.pagecurrent, #blog-pager-newer-link a, #blog-pager-older-link a {
font-size: 14px;
padding: 8px 12px;
margin: 2px 3px 2px 0px;
display: inline-block;
color: $(body.link.color);
border: 1px solid $(body.link.color);
}
#blog-pager-older-link a:hover, #blog-pager-newer-link a:hover, a.home-link:hover, .displaypageNum a:hover,.showpage a:hover, .pagecurrent {
color: $(body.link.hover.color);
border: 1px solid $(body.link.hover.color);
}
.showpageOf {
display: none !important;
}
#blog-pager .pages {
border: none;
}


  • Lalu ganti dengan arahan berikut ini :


/* Load more */
#blog-pager,#blog-pager {display:block;text-align:center;margin:30px;padding:3px;width:100%;}
.blog-pager a.js-load{background:#fff;height:40px;width:100%;color:#0586f0!important;font-weight:700;border:1px solid #0586f0;border-radius:3px;margin:auto!important;text-align:center;padding:0!important;}
.blog-pager .js-loading{color:#777777;font-size:100%; text-transform: uppercase;}
.blog-pager .js-loaded{text-transform:uppercase;font-weight:300;color:#0586f0;;cursor:no-drop}
.blog-pager a.js-load:hover{color: #fff !important;background: #0586f0;}
/* Blog pager in post page */
.blog-pager{height:40px;line-height:40px;font-size:90%}
.blog-pager a.js-load {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
/* Nextprev css */
#blog-pager{text-align:center;padding:0;margin:20px auto;display:block;width:100%;overflow:visible;position:relative}
#blog-pager .home-link{display:none}
#blog-pager a{color:#414141;display:block;margin:0;padding:0;font-weight:bold;text-transform:uppercase;position:relative;}


  • Bila sudah silahkan klik Simpan Tema


Nah hingga disini anda sudah berhasil memuat tombol load more keren di blogger,coba nada buka homepage blog anda untuk mengetahui apakah sudah berhasil/benar cara memasangnya atau belum.

Baca Juga : Cara Membuat Tanda Centang/Ceklis (√) di Samping Judul Postingan Blog

Kelebihan Tombol Load More ala


Berikut ini beberapa kelebihan yang akan anda dapatkan jika anda memakai tombol load more ala di blog anda :


  • Tampilan Lebih Keren
  • Mengurangi Bounce Rate
  • Desain Elegan
  • Dan Tampilannya Responsive



Bagaimana? apakah anda sudah memasangnya?

Penutup


Itulah tutorial aku kali ini perihal Cara Membuat Tombol Load More Keren dan Responsive di Blogger,semoga dengan membaca tutorial ini anda sanggup merubah tampilan dari template anda biar lebih keren dan elegan.

Baca Juga : 5 Blogger Populer Menerima Guest Post dan Content Placement Terbaik

Selamat mencoba,dan pastikan bahwa dikala anda memasangnya mengikuti urutan yang benar biar tidak terjadi kesalahan atau error pada template blogger anda.
Sumber https://www.dirga.id/