Solusi Membuat Recent Post by Label On Static Page Untuk Blog valid AMP HTML. Berawal ketika mencoba mengacak-acak template blog saya yang lain semoga dapat support AMP HTML sampe edit postingan satu persatu yang menciptakan puyeng isi kepala, dan merasa puas alasannya yakni ketika ini blog tersebut sudah valid AMP HTML mulai dari homepage postpage hingga staticpage. Saat saya menciptakan sitemap / daftar isi blog amp versi kompiajaib.com, saya mulai berpikir bagaimana cara menciptakan recent post by label yang biasa disimpan dihalaman static untuk blog valid amp?
Recent post by label yang dipasang dihalaman static ini sebagai pengganti url label yang biasanya ada di sajian blog. Untuk memasang eksklusif di blog amp tentu tidak dapat alasannya yakni hukum amp html dihentikan ada javascript kecuali javascript amp project, alasannya yakni itulah kita dapat mengakalinya memakai github semoga kondusif dari error amp html.
Tutorial ini merupakan adonan dari postingan mas adhy suryadi, yakni perihal cara menciptakan sitemap blog amp dan recent post by label dihalaman static. Jika anda tertarik, silahkan ikuti yang mau lewat ini:
Langkah pertama
Silahkan jalan masuk salah satu halaman static blog anda, kemudian page source / Ctrl+U kemudian copas semua kodenya di notepad.
Langkah kedua
Hapus semua isyarat yang bekerjasama dengan blogger, menyerupai isyarat meta verifikasi search engine dan isyarat Google Analytics blog dan lainnya.
Lalu edit isyarat ini dengan judul halaman / sitemap blog anda
<title>Judul Halaman</title>Rubah isyarat berikut:
<h2 class='post-title entry-title' itemprop='headline'> <a href='http://www.bloganda.com/p/blablabla.html' itemprop='url mainEntityOfPage' title='bla...bla...bla...'>bla...bla...bla...</a>
</h2>menjadi
<h2 class='post-title entry-title' itemprop='headline'> <a href='URL HOSTING DI GITHUB' itemprop='url mainEntityOfPage' title='Judul-Halaman'>Judul Halaman</a>
</h2>Untuk URL HOSTING DI GITHUB silahkan hapus hurus s pada URL cdn-nya menjadi HTTP menyerupai ini;
http://cdn.rawgit.com/username/repository/master/sitemap.html
username: nama akun github anda
repository: nama folder hosting
Langkah ketiga
Silahkan simpan CSS di bawah ini di atas isyarat
</style>#feed-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}
#feed-container li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}
#feed-container li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}
#feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:500}
#feed-container li a:hover{text-decoration:none;color:#E94141}
#feed-container li .news-text{margin-top:5px;line-height:1.3em!important}
#feed-container li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;}
#result-desc{margin:0;padding:0;}
#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}
#result-desc div{color:inherit}
#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}
#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}
#feed-nav a,#feed-nav span:hover{color:#1B1B1B}
#feed-nav a:active,#feed-nav a:hover{color:#555}
#feed-nav span{cursor:wait}
@media (max-width:600px){
#table-outer table{margin:0 auto;width:100%}
#feed-container,#table-outer{margin:0 auto}
#feed-container li .inner{margin:5px auto;height:auto}
#feedContainer li{float:none;display:block;width:auto;height:auto}
#feed-container li .news-text,#feedContainer:after,#feed-container li img{display:none!important}
}Langkah Keempat
Silahkan cari isyarat yang menyerupai mirip di bawah ini
<div class='post-body entry-content' id='post-body-xxxxx' itemprop='articleBody'>
...................................
...................................
...................................
<div class='clear'>
</div>Kemudian ganti titik-titik dengan isyarat berikut;
<header id="result-desc"></header>
<ul id="feed-container"></ul>
<div id="feed-nav"></div>
<script type="text/javaScript">
var label="LabelBlogAnda";
</script>
<script type='text/javascript'>
//<![CDATA[
document.write;var loadToc,loadCategories,_toc={init:function(){var e={homePage:"URL-BlogAnda",maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya ▼",resetToc:"Kembali ke Awal",noImage:"http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",loading:"<span>Memuat...</span>"},t=(window,document),n=function(e){return t.getElementById(e)},a={e:n("result-desc"),f:n("feed-container"),g:n("feed-nav"),h:t.getElementsByTagName("head")[0],i:0,j:null,k:"published",l:0,m:""},l={a:function(){old=n("temporer-script"),old.parentNode.removeChild(old)},b:function(e){var i=t.createElement("script");i.type="text/javascript",i.id="temporer-script",i.src=e,n("temporer-script")&&l.a(),a.h.appendChild(i)},c:function(t,n,i){a.i++,a.e.innerHTML=e.counting,a.g.innerHTML=e[1==t?"searching":"loading"],0===t?l.b(null!==n?e.homePage+"/feeds/posts/summary/-/"+n+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&orderby="+i+"&callback=loadToc":e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&orderby="+i+"&callback=loadToc"):1==t&&l.b(e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&q="+n+"&orderby="+i+"&callback=loadToc"),a.j=null!==n?n:null,a.l=t,a.a.disabled=!0,a.b.children[0].disabled=!0},d:function(n){var i;if(a.g.innerHTML="",a.e.innerHTML="<div>Total: "+n.feed.openSearch$totalResults.$t+" Posts</div>","entry"in n.feed){for(var r,s,o,d,c=n.feed.entry,u="0 Komentar",m=0;m<e.maxResults&&m!=c.length;m++){r=c[m].title.$t,o="summary"in c[m]?c[m].summary.$t.replace(/<br ?\/?>/gi," ").replace(/<(.*?)>/g,"").replace(/<iframe/gi,"").substring(0,e.numChars):"",d="media$thumbnail"in c[m]?c[m].media$thumbnail.url.replace(/\/s[0-9]+\-c/,"/s"+e.thumbWidth):e.noImage.replace(/\/s[0-9]+\-c/,"/s"+e.thumbWidth);for(var h=0,b=c[m].link.length;b>h;h++)s="alternate"==c[m].link[h].rel?c[m].link[h].href:"#";for(var p=0,g=c[m].link.length;g>p;p++)if("replies"==c[m].link[p].rel&&"text/html"==c[m].link[p].type){u=c[m].link[p].title;break}i=t.createElement("li"),i.innerHTML='<div class="inner"><img style="width:'+e.thumbWidth+"px;height:"+e.thumbHeight+'px;" src="'+d+'" alt="'+r+'"><a class="toc-title" href="'+s+'" target="_blank" title="'+r+'">'+r+'</a><div class="news-text">'+o+'…<br style="clear:both;"></div></div>',a.f.appendChild(i)}i=t.createElement("a"),i.href="#load-more",i.innerHTML=e.navText,i.onclick=function(){return l.c(a.l,a.j,a.k),!1}}else i=t.createElement("a"),i.href="#reset-content",i.innerHTML=e.resetToc,i.onclick=function(){return a.i=-1,a.e.innerHTML=e.counting,a.f.innerHTML="",l.c(0,null,"published"),a.a.innerHTML=a.a.innerHTML,a.b.children[0].innerHTML=a.b.children[0].innerHTML,!1};a.g.appendChild(i),a.a.disabled=!1,a.b.children[0].disabled=!1}};loadToc=l.d,loadCategories=l.e,l.b(e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&start-index="+(a.i+1)+"&max-results="+e.maxResults+"&orderby=published&callback=loadToc"),l.b(e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories"),a.a.onchange=function(){a.i=-1,a.f.innerHTML="",a.g.innerHTML=e.counting,a.b.children[0].innerHTML=a.b.children[0].innerHTML,l.c(0,null,this.value),a.k=this.value},a.c.onsubmit=function(){return a.i=-1,a.f.innerHTML="",a.m=a.d.value,l.c(1,a.d.value,a.k),!1}}};_toc.init();
//]]>
</script>Ganti yang ditandai sesuka hati
Langkah Kelima
Silahkan simpan file yang sudah dirubah tadi dengan extensi *.html menyerupai pola label.html kemudian silahkan hosting di Github kemudian copy URL Rawgit dan hapus hurup s dari HTTPS://cdn.rawgit.com/.... menjadi HTTP://cdn.rawgit.com/....
Selesai untuk menciptakan halaman recent post blog AMP untuk tampilan desktop.
Silahkan simpan URL menyerupai di atas pada sajian untuk tampilan desktop.
Nah tampilan blog anda tidak sama antara dektop dan mobile, maka harus menciptakan halaman untuk tampilan mobile juga dengan cara yang sama dengan langkah pertama diatas, yakni mengakses halaman static blog anda dengan menambahkan ?m=1 pada selesai URL nya, kemudian Ctrl+U / page scource. Dan untuk langkah selanjutnya sama dengan diatas. Lalu simpan URL nya pada sajian untuk tampilan mobile. Biasanya sajian untuk tampilan mobile akan ditampilkan dengan amp-sidebar.
Selesai semua untuk menciptakan recent post by label blog AMP untuk tampilan mobile dan dekstop, sebagai pola recent post untuk mobile dan dekstop menyerupai berikut;
Dekstop: http://cdn.rawgit.com/NomIfrod/html/master/labelanak.html
Mobile: http://cdn.rawgit.com/NomIfrod/html/master/labelanak-hp.html
Cukup gampang bukan? sekian dari saya perihal tips solusi menciptakan recent post by label untuk halaman static blo AMP HTML. Selamat mencoba...
/search?q=membuat-sitemap-blog-untuk-blogger-amp
/search?q=membuat-sitemap-blog-untuk-blogger-amp
/search?q=membuat-sitemap-blog-untuk-blogger-amp
No comments:
Post a Comment