Home

Bantuan dan Pemecah Masalah Median UI

Admin
Admin 1 komentar November 14, 2020
Median UI - Pusat bantuan dan pemecahan masalah

Agar tidak banyak yang bertanya pertanyaan yang sama maka kami merangkum semua dalam postingan ini, segala informasi tentang perbaikan bug atau masalah lainnya akan ditambahkan disini dengan harapan tidak ada lagi pertanyaan yang sama yang diajukan

Daftar isi

Apakah bisa mengganti infinite scroll (load more) dengan numeric pagination?

Pada awal rilis kami menggunakan numeric pagination, seiring beberapa pembaharuan template ini kami memutuskan untuk menggunakan infinite scroll karena lebih praktis dan tidak membuat user menunggu lebih lama.

salah satu kelebihan dari infinite scroll adalah tidak perlu memuat ulang keseluruhan halaman untuk menampilkan artikel lainnya tapi bukan berarti tidak bisa diubah kembali ke numeric pagination, hanya saja Anda harus mengeditnya secara manual pada menu Edit HTML. Silahkan ikuti cara dibawah ini untuk menggubah infinite scroll ke numeric pagination

Pertama tambahkan CSS dibawah ini pada template Anda


/* Blog Navigation Numeric */
.blog-pager{justify-content:center;flex-wrap:wrap}
.blog-pager .showpageOf, .blog-pager .pagecurrent{display:flex;align-items:center;padding:9px 20px;background-color:#ebeced;border-radius:6px;color:$(alt.text.colors);cursor:default}
.blog-pager span{margin:5px}


Kedua cari kode javascript seperti dibawah ini, letak nya ada di bagian bawah template tepatnya sebelum kode </body>


<b:if cond='data:view.isMultipleItems'>
  <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",' '),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",' '),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: '.hentry', anchors: '.blog-pager', anchor: '.blog-pager-older-link'}, text: {load: '<a class="js-load load-more" href="javascript:void(0)">Load more</a>', loading: '<a class="js-load wait"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 50 50" xml:space="preserve"><path d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"/></path></svg><span>Please wait...</span></a>', loaded: '<span class="js-load nolink">No more post</span>', error: '<a class="js-load error" href="javascript:void(0)">Sorry error!</a>'} }); /*]]>*/</script>
</b:if>


Ubah kode diatas dengan kode dibawah ini


<b:if cond='data:view.isMultipleItems'>
  <script>/*<![CDATA[*/ 
var perPage=3; // jumlah postingan dalam satu page
var numPages=3; // jumlah total nomor page
var firstText ='First'; // teks untuk link laman pertama
var lastText ='Last'; // teks untuk link laman terakhir
var prevText ='Previous'; // teks untuk laman sebelumnya
var nextText ='Next'; // teks untuk laman selanjutnya
var urlactivepage=location.href;
var home_page="/";

if (typeof firstText == "undefined") firstText = "First";
if (typeof lastText == "undefined") lastText = "Last";
var noPage;
var currentPage;
var currentPageNo;
var postLabel;
pagecurrentg();

function looppagecurrentg(pageInfo) {
 var html = '';
 pageNumber = parseInt(numPages / 2);
 if (pageNumber == numPages - pageNumber) {
  numPages = pageNumber * 2 + 1
 }
 pageStart = currentPageNo - pageNumber;
 if (pageStart < 1) pageStart = 1;
 lastPageNo = parseInt(pageInfo / perPage) + 1;
 if (lastPageNo - 1 == pageInfo / perPage) lastPageNo = lastPageNo - 1;
 pageEnd = pageStart + numPages - 1;
 if (pageEnd > lastPageNo) pageEnd = lastPageNo;
 html += "<span class='showpageOf'>Page " + currentPageNo + ' of ' + lastPageNo + "</span>";
 var prevNumber = parseInt(currentPageNo) - 1;
 if (currentPageNo > 1) {
  if (currentPage == "page") {
   html += '<span class="showpage firstpage"><a href="' + home_page + '">' + firstText + '</a></span>'
  } else {
   html += '<span class="displaypageNum firstpage"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">' + firstText + '</a></span>'
  }
 }
 if (currentPageNo > 2) {
  if (currentPageNo == 3) {
   if (currentPage == "page") {
    html += '<span class="showpage"><a href="' + home_page + '">' + prevText + '</a></span>'
   } else {
    html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">' + prevText + '</a></span>'
   }
  } else {
   if (currentPage == "page") {
    html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + prevNumber + ');return false">' + prevText + '</a></span>'
   } else {
    html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + prevNumber + ');return false">' + prevText + '</a></span>'
   }
  }
 }
 if (pageStart > 1) {
  if (currentPage == "page") {
   html += '<span class="displaypageNum"><a href="' + home_page + '">1</a></span>'
  } else {
   html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">1</a></span>'
  }
 }
 if (pageStart > 2) {
  html += ' ... '
 }
 for (var jj = pageStart; jj <= pageEnd; jj++) {
  if (currentPageNo == jj) {
   html += '<span class="pagecurrent">' + jj + '</span>'
  } else if (jj == 1) {
   if (currentPage == "page") {
    html += '<span class="displaypageNum"><a href="' + home_page + '">1</a></span>'
   } else {
    html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">1</a></span>'
   }
  } else {
   if (currentPage == "page") {
    html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + jj + ');return false">' + jj + '</a></span>'
   } else {
    html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + jj + ');return false">' + jj + '</a></span>'
   }
  }
 }
 if (pageEnd < lastPageNo - 1) {
  html += '...'
 }
 if (pageEnd < lastPageNo) {
  if (currentPage == "page") {
   html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + lastPageNo + ');return false">' + lastPageNo + '</a></span>'
  } else {
   html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + lastPageNo + ');return false">' + lastPageNo + '</a></span>'
  }
 }
 var nextnumber = parseInt(currentPageNo) + 1;
 if (currentPageNo < (lastPageNo - 1)) {
  if (currentPage == "page") {
   html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + nextnumber + ');return false">' + nextText + '</a></span>'
  } else {
   html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + nextnumber + ');return false">' + nextText + '</a></span>'
  }
 }
 if (currentPageNo < lastPageNo) {
  if (currentPage == "page") {
   html += '<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage(' + lastPageNo + ');return false">' + lastText + '</a></span>'
  } else {
   html += '<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel(' + lastPageNo + ');return false">' + lastText + '</a></span>'
  }
 }
 var pageArea = document.getElementsByName("pageArea");
 var blogPager = document.getElementById("blog-pager");
 for (var p = 0; p < pageArea.length; p++) {
  pageArea[p].innerHTML = html
 }
 if (pageArea && pageArea.length > 0) {
  html = ''
 }
 if (blogPager) {
  blogPager.innerHTML = html
 }
}

function totalcountdata(root) {
 var feed = root.feed;
 var totaldata = parseInt(feed.openSearch$totalResults.$t, 10);
 looppagecurrentg(totaldata)
}

function pagecurrentg() {
 var thisUrl = urlactivepage;
 if (thisUrl.indexOf("/search/label/") != -1) {
  if (thisUrl.indexOf("?updated-max") != -1) {
   postLabel = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?updated-max"))
  } else {
   postLabel = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?&max"))
  }
 }
 if (thisUrl.indexOf("?q=") == -1 && thisUrl.indexOf(".html") == -1) {
  if (thisUrl.indexOf("/search/label/") == -1) {
   currentPage = "page";
   if (urlactivepage.indexOf("#PageNo=") != -1) {
    currentPageNo = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)
   } else {
    currentPageNo = 1
   }
   document.write("<script src=\"" + home_page + "feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")
  } else {
   currentPage = "label";
   if (thisUrl.indexOf("&max-results=") == -1) {
    perPage = 20
   }
   if (urlactivepage.indexOf("#PageNo=") != -1) {
    currentPageNo = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)
   } else {
    currentPageNo = 1
   }
   document.write('<script src="' + home_page + 'feeds/posts/summary/-/' + postLabel + '?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')
  }
 }
}

function redirectpage(numberpage) {
 jsonstart = (numberpage - 1) * perPage;
 noPage = numberpage;
 var nameBody = document.getElementsByTagName('head')[0];
 var newInclude = document.createElement('script');
 newInclude.type = 'text/javascript';
 newInclude.setAttribute("src", home_page + "feeds/posts/summary?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");
 nameBody.appendChild(newInclude)
}

function redirectlabel(numberpage) {
 jsonstart = (numberpage - 1) * perPage;
 noPage = numberpage;
 var nameBody = document.getElementsByTagName('head')[0];
 var newInclude = document.createElement('script');
 newInclude.type = 'text/javascript';
 newInclude.setAttribute("src", home_page + "feeds/posts/summary/-/" + postLabel + "?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");
 nameBody.appendChild(newInclude)
}

function finddatepost(root) {
 post = root.feed.entry[0];
 var timestamp1 = post.published.$t.substring(0, 19) + post.published.$t.substring(23, 29);
 var timestamp = encodeURIComponent(timestamp1);
 if (currentPage == "page") {
  var pAddress = "/search?updated-max=" + timestamp + "&max-results=" + perPage + "#PageNo=" + noPage
 } else {
  var pAddress = "/search/label/" + postLabel + "?updated-max=" + timestamp + "&max-results=" + perPage + "#PageNo=" + noPage
 }
 location.href = pAddress
} /*]]>*/</script>
</b:if>


Masalah transisi pada tombol back di search box

Pada versi sebelumnya mungkin sebagain ada yang terganggu dengan tombol kembali di share box yang lambat menghilang, ketika Anda klik icon search maka pada bagian atas akan ada icon tombol kembali, ketika diklik searchbox akan menghilang dan tombol kembali akan berubah menjadi tombol navigasi.

Masalahnya muncul ketika tombol navigasi tsb diklik seharusnya akan memunculkan link navigasi tetapi yang muncul kembali adalah searchbox, kecuali ditunggu beberapa detik baru tombol kembali berfungsi normal. masalah ini terjadi karen penambahaan CSS transisi pada Searchbox dan hanya terjadi pada tampilan mobile.


#search-container{display:block;width:100%;height:100%;position:fixed;top:0;left:0;background-color:#f7f7fc;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style: none;opacity:0;visibility:hidden;z-index:10;-webkit-transition:all .3s ease-in-out;transition: all .3s ease-in-out;}
.header-nav label, .header-nav span{display:table-cell;vertical-align:middle;position:relative;width:22.5px;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;cursor:pointer}

Pada update terbaru masalah ini sudah diperbaiki dengan mengubah nilai transisi pada CSS searchbox

Masalah iklan tengah tidak tampil di beberapa artikel

Pada blog demo ini iklan tengah tampil dengan sempurna, tetap kami mendapatkan beberapa laporan yang mengatakan iklan tengah tidak muncul pada blog lain.

Di update terbaru v5.3 masalah ini sudah teratasi, bagi yang masih menggunakan versi lama disarankan untuk mengupgare nya ke versi terbaru

Saya ingin menghapus nama dan profil penulis di blog saya apakah bisa

Pada versi lama Anda harus melakukan ini secara manual, dan mohon maaf tidak ada lagi support untuk versi lama.

Sebagai gantinya di versi terbaru kami telah memindahkan semua pengaturannya ke menu tata letak blogger, Anda bisa menyembunyikan atau menampilkan nama dan profil penulis dengan cara edit widget postingan blogger.

Simak penjelasan lebih lengkap disini

Menu navigasi masih memakai link blog Anda, template cacat

Kami rasa sudah cukup jelas tutorial yang kami berikan di blog ini tentang cara mengubah link pada template ini.

Untuk memperjelas kembali, pada menu dibawah header itu menggunakan 2 widget yang bisa Anda ubah kapanpun dengan cara menyembunyikan salahsatu nya. Widget pertama menampilkan link menu secara otomatis berdasarkan label, widget kedua menampilkan link menu secara namuan yang artinya Anda harus mengubah nya satu-persatu pada Tata Letak Blogger.

Saya kesulitan menambahkan menu dropdown baru

Pada tampilan desktop mungkin tidak ada yang mendapatkan masalah dari masalah ini, kebanyakan bermasalah ketika dropdown di klik tapi tidak berfungsi pada tampilan mobile.

Masalah ini sering terjadi karena atribut ID pada bagian yang ditandai dibawah ini tidak diubah


<input class='drop-menu hidden' id='offdrop-menu1' name='dropdown-menu' type='checkbox'/>
<label class='table' for='offdrop-menu1'>


Bagaimana cara mengubah warna nightmode?

Jika Anda masih menggunakan versi lama, Anda harus mengeditnya secara manual dan minimal harus menguasai CSS.

Pada versi terbaru (v5.3) kode warna nightmode sudah dipindahkan ke Desainer Tema Blogger yang artinya Anda bisa mengubah warnanya secara leluasa sesuai keinginan

Bagaimana cara mengubah warna header

Sama halnya dengan warna nightmode, sekarang warna header juga bisa Anda ubah pada Desainer Tema Blogger

Apakah ada versi AMP untuk fletro 3 kolom

Kami berencana mengerjakannya hanya saat ini belum tersedia, pantau terus update selanjutnya.

Update:
Versi 3 kolom untuk AMP sekarang sudah tersedia, silahkan download di folder gdrive yang sudah dibagikan. Untuk demonya tidak tersedia

Masalah tag h1 pada header gambar

Ketika mengubah header menjadi gambar otomatis tag h1 nya akan di replace oleh gambar dan tidak akan terindex oleh google.

solusi ini sebenarnya sudah diberikan oleh blogger hanya saja kebanyakan orang kurang teliti dan terburu-buru, untuk memperbaikinya: Pada menu Tata Letak blogger silahkan edit widget header Anda dan ubah pengaturan penempatan gambar header menjadi
Selain judul dan keterangan

Semudah itu.

Pada template saya recent post tidak muncul seperti pada demo nya

Widgetnya sudah disetting sesuai arahan, url dan labelnya sudah diganti namun recent postnya masih tidak muncul.

Masalah ini bukan terletak pada widgetnya, tapi masalahnya ada pada pengaturan feed blog Anda. untuk mempebaikinya

  1. Klik Setelan
  2. Klik Lainnya
  3. Dibagian feed situs cara setelan Izinkan Feed Blog
  4. Ubah menjadi Penuh

Masalah mode grid, urutan pos kebawah bukan kesamping

Saat mengubah tampilan post ke mode grid Anda akan menemukan jika urutan post yang tampil adalah menurun kebawah bukan kesamping, hal ini disebabkan oleh kode css yang menggunakan column-cont, alasan kami memilih ini adalah agar postingan tetap tampil dinamis seperti pinterest.

Namun jika Anda merasa terganggu dengan ini, maka anda bisa mengubah tampilannya menjadi display:grid, hanya saja kekurangannya adalah tinggi postingan akan sama rata termasuk postingan yang tidak memiliki thumbnail.

Pertama silahkan cari kode CSS dibawah ini dan ubah sesuai arahan:


.grid-mode + .blog-posts{column-count:2;column-gap:20px;}

// ubah menjadi kode dibawah ini

.grid-mode + .blog-posts{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;}


Tergantung dari pilihan Anda apakah lebih suka tampilan grid bawaan dengan urutan menurun atau dimodifikasi agar urutannya menyamping, Silahkan ujicoba pada template Anda untuk melihat perubahannya

Di Google Pagespeed skor template Fletro menurun

Penyebab utamanya adalah Google Font, pada update terbaru ini kami menggunakan 3 font yaitu Roboto Reguler, Ubuntu Reguler dan Ubuntu Bold.

Jika Anda ingin nilai pagespeednya kembali silahkan hapus beberapa font nya saran kami silahkan hapus font Ubuntu Bold.

Tapi satu hal yang harus digaris bawahi, Pagespeed bukan acuan selama blog Anda tidak dimuat lebih dari 10 detik sudah cukup terlebih kecepatan internet visitor sekarang rata-rata 4G skor dibawah 90 tidak akan jadi masalah serius. Walaupun blog Anda punya skor 100 sempurna tapi ketika dimasukkan iklan Adsense pasti juga akan turun drastis nilai pagespeednya


Ajukan Pertanyaan atau laporkan bug

Silahkan ajukan pertanyaan seputar template ini di kolom komentar, secepatnya kami akan merespon dan memperbaiki masalahnya.

Baca juga

Komentar

  1. Liswrit
    Gan, kalau cara hapus iklan yang muncul di bagian feed gimana ya gan? Padahal aku gak taruh iklan di sana juga udah kumatiin iklan otomatis tapi masih muncul iklan di sana. Ganggu banget iklannya.
    Trả lời
M
Template Median UI Diskon 30% spesial Idul Adha
Silahkan chat dengan tim kami Admin akan membalas dalam beberapa menit
Halo, Ada yang bisa kami bantu?
Mulai chat...